react-modal
Advanced tools
Comparing version 0.1.0 to 0.1.1
@@ -0,1 +1,7 @@ | ||
v0.1.1 - Tue, 31 Mar 2015 15:56:47 GMT | ||
-------------------------------------- | ||
- [f86de0a](../../commit/f86de0a) [fixed] shift+tab closes #23 | ||
v0.1.0 - Thu, 26 Feb 2015 17:14:27 GMT | ||
@@ -2,0 +8,0 @@ -------------------------------------- |
@@ -80,3 +80,3 @@ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactModal=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){ | ||
afterOpen: 'ReactModal__Overlay--after-open', | ||
beforeClose: 'ReactModal__Overlay--before-close', | ||
beforeClose: 'ReactModal__Overlay--before-close' | ||
}, | ||
@@ -86,6 +86,8 @@ content: { | ||
afterOpen: 'ReactModal__Content--after-open', | ||
beforeClose: 'ReactModal__Content--before-close', | ||
beforeClose: 'ReactModal__Content--before-close' | ||
} | ||
}; | ||
var OVERLAY_STYLES = { position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }; | ||
function stopPropagation(event) { | ||
@@ -175,3 +177,3 @@ event.stopPropagation(); | ||
handleKeyDown: function(event) { | ||
if (event.keyCode == 9 /*tab*/) scopeTab(this.getDOMNode(), event); | ||
if (event.keyCode == 9 /*tab*/) scopeTab(this.refs.content.getDOMNode(), event); | ||
if (event.keyCode == 27 /*esc*/) this.requestClose(); | ||
@@ -200,4 +202,2 @@ }, | ||
overlayStyles: { position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }, | ||
buildClassName: function(which) { | ||
@@ -217,3 +217,3 @@ var className = CLASS_NAMES[which].base; | ||
className: cx(this.buildClassName('overlay'), this.props.overlayClassName), | ||
style: this.overlayStyles, | ||
style: OVERLAY_STYLES, | ||
onClick: this.handleOverlayClick | ||
@@ -318,4 +318,10 @@ }, | ||
modalElement = element; | ||
window.addEventListener('blur', handleBlur, false); | ||
document.addEventListener('focus', handleFocus, true); | ||
if (window.addEventListener) { | ||
window.addEventListener('blur', handleBlur, false); | ||
document.addEventListener('focus', handleFocus, true); | ||
} else { | ||
window.attachEvent('onBlur', handleBlur); | ||
document.attachEvent('onFocus', handleFocus); | ||
} | ||
}; | ||
@@ -325,7 +331,14 @@ | ||
modalElement = null; | ||
window.removeEventListener('blur', handleBlur); | ||
document.removeEventListener('focus', handleFocus); | ||
if (window.addEventListener) { | ||
window.removeEventListener('blur', handleBlur); | ||
document.removeEventListener('focus', handleFocus); | ||
} else { | ||
window.detachEvent('onBlur', handleBlur); | ||
document.detachEvent('onFocus', handleFocus); | ||
} | ||
}; | ||
},{"../helpers/tabbable":7}],5:[function(_dereq_,module,exports){ | ||
@@ -450,3 +463,3 @@ module.exports = function() { | ||
/** | ||
* Copyright 2013-2014, Facebook, Inc. | ||
* Copyright 2013-2015, Facebook, Inc. | ||
* All rights reserved. | ||
@@ -476,3 +489,18 @@ * | ||
*/ | ||
'use strict'; | ||
var warning = _dereq_("./warning"); | ||
var warned = false; | ||
function cx(classNames) { | ||
if ("production" !== "production") { | ||
("production" !== "production" ? warning( | ||
warned, | ||
'React.addons.classSet will be deprecated in a future version. See ' + | ||
'http://fb.me/react-addons-classset' | ||
) : null); | ||
warned = true; | ||
} | ||
if (typeof classNames == 'object') { | ||
@@ -489,4 +517,99 @@ return Object.keys(classNames).filter(function(className) { | ||
},{}]},{},[8]) | ||
},{"./warning":11}],10:[function(_dereq_,module,exports){ | ||
/** | ||
* Copyright 2013-2015, Facebook, Inc. | ||
* All rights reserved. | ||
* | ||
* This source code is licensed under the BSD-style license found in the | ||
* LICENSE file in the root directory of this source tree. An additional grant | ||
* of patent rights can be found in the PATENTS file in the same directory. | ||
* | ||
* @providesModule emptyFunction | ||
*/ | ||
function makeEmptyFunction(arg) { | ||
return function() { | ||
return arg; | ||
}; | ||
} | ||
/** | ||
* This function accepts and discards inputs; it has no side effects. This is | ||
* primarily useful idiomatically for overridable function endpoints which | ||
* always need to be callable, since JS lacks a null-call idiom ala Cocoa. | ||
*/ | ||
function emptyFunction() {} | ||
emptyFunction.thatReturns = makeEmptyFunction; | ||
emptyFunction.thatReturnsFalse = makeEmptyFunction(false); | ||
emptyFunction.thatReturnsTrue = makeEmptyFunction(true); | ||
emptyFunction.thatReturnsNull = makeEmptyFunction(null); | ||
emptyFunction.thatReturnsThis = function() { return this; }; | ||
emptyFunction.thatReturnsArgument = function(arg) { return arg; }; | ||
module.exports = emptyFunction; | ||
},{}],11:[function(_dereq_,module,exports){ | ||
/** | ||
* Copyright 2014-2015, Facebook, Inc. | ||
* All rights reserved. | ||
* | ||
* This source code is licensed under the BSD-style license found in the | ||
* LICENSE file in the root directory of this source tree. An additional grant | ||
* of patent rights can be found in the PATENTS file in the same directory. | ||
* | ||
* @providesModule warning | ||
*/ | ||
"use strict"; | ||
var emptyFunction = _dereq_("./emptyFunction"); | ||
/** | ||
* Similar to invariant but only logs a warning if the condition is not met. | ||
* This can be used to log issues in development environments in critical | ||
* paths. Removing the logging code for production environments will keep the | ||
* same logic and follow the same code paths. | ||
*/ | ||
var warning = emptyFunction; | ||
if ("production" !== "production") { | ||
warning = function(condition, format ) {for (var args=[],$__0=2,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]); | ||
if (format === undefined) { | ||
throw new Error( | ||
'`warning(condition, format, ...args)` requires a warning ' + | ||
'message argument' | ||
); | ||
} | ||
if (format.length < 10 || /^[s\W]*$/.test(format)) { | ||
throw new Error( | ||
'The warning format should be able to uniquely identify this ' + | ||
'warning. Please, use a more descriptive format than: ' + format | ||
); | ||
} | ||
if (format.indexOf('Failed Composite propType: ') === 0) { | ||
return; // Ignore CompositeComponent proptype check. | ||
} | ||
if (!condition) { | ||
var argIndex = 0; | ||
var message = 'Warning: ' + format.replace(/%s/g, function() {return args[argIndex++];}); | ||
console.warn(message); | ||
try { | ||
// --- Welcome to debugging React --- | ||
// This error was thrown as a convenience so that you can use this stack | ||
// to find the callsite that caused this warning to fire. | ||
throw new Error(message); | ||
} catch(x) {} | ||
} | ||
}; | ||
} | ||
module.exports = warning; | ||
},{"./emptyFunction":10}]},{},[8]) | ||
(8) | ||
}); |
@@ -1,1 +0,1 @@ | ||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactModal=e()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module){function sanitizeProps(props){delete props.ref}{var React="undefined"!=typeof window?window.React:"undefined"!=typeof global?global.React:null,ModalPortal=React.createFactory(_dereq_("./ModalPortal")),ariaAppHider=_dereq_("../helpers/ariaAppHider"),injectCSS=_dereq_("../helpers/injectCSS");module.exports=React.createClass({displayName:"Modal",statics:{setAppElement:ariaAppHider.setElement,injectCSS:injectCSS},propTypes:{isOpen:React.PropTypes.bool.isRequired,onRequestClose:React.PropTypes.func,appElement:React.PropTypes.instanceOf(HTMLElement),closeTimeoutMS:React.PropTypes.number,ariaHideApp:React.PropTypes.bool},getDefaultProps:function(){return{isOpen:!1,ariaHideApp:!0,closeTimeoutMS:0}},componentDidMount:function(){this.node=document.createElement("div"),this.node.className="ReactModalPortal",document.body.appendChild(this.node),this.renderPortal(this.props)},componentWillReceiveProps:function(newProps){this.renderPortal(newProps)},componentWillUnmount:function(){React.unmountComponentAtNode(this.node),document.body.removeChild(this.node)},renderPortal:function(props){props.ariaHideApp&&ariaAppHider.toggle(props.isOpen,props.appElement),sanitizeProps(props),this.portal?this.portal.setProps(props):this.portal=React.render(ModalPortal(props),this.node)},render:function(){return null}})}},{"../helpers/ariaAppHider":3,"../helpers/injectCSS":5,"./ModalPortal":2}],2:[function(_dereq_,module){function stopPropagation(event){event.stopPropagation()}{var React="undefined"!=typeof window?window.React:"undefined"!=typeof global?global.React:null,div=React.DOM.div,focusManager=_dereq_("../helpers/focusManager"),scopeTab=_dereq_("../helpers/scopeTab"),cx=_dereq_("react/lib/cx"),CLASS_NAMES={overlay:{base:"ReactModal__Overlay",afterOpen:"ReactModal__Overlay--after-open",beforeClose:"ReactModal__Overlay--before-close"},content:{base:"ReactModal__Content",afterOpen:"ReactModal__Content--after-open",beforeClose:"ReactModal__Content--before-close"}};module.exports=React.createClass({displayName:"ModalPortal",getInitialState:function(){return{afterOpen:!1,beforeClose:!1}},componentDidMount:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())},componentWillReceiveProps:function(newProps){!this.props.isOpen&&newProps.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!newProps.isOpen&&this.close()},componentDidUpdate:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))},setFocusAfterRender:function(focus){this.focusAfterRender=focus},open:function(){focusManager.setupScopedFocus(this.getDOMNode()),focusManager.markForFocusLater(),this.setState({isOpen:!0},function(){this.setState({afterOpen:!0})}.bind(this))},close:function(){this.ownerHandlesClose()&&(this.props.closeTimeoutMS>0?this.closeWithTimeout():this.closeWithoutTimeout())},focusContent:function(){this.refs.content.getDOMNode().focus()},closeWithTimeout:function(){this.setState({beforeClose:!0},function(){setTimeout(this.closeWithoutTimeout,this.props.closeTimeoutMS)}.bind(this))},closeWithoutTimeout:function(){this.setState({afterOpen:!1,beforeClose:!1},this.afterClose)},afterClose:function(){focusManager.returnFocus(),focusManager.teardownScopedFocus()},handleKeyDown:function(event){9==event.keyCode&&scopeTab(this.getDOMNode(),event),27==event.keyCode&&this.requestClose()},handleOverlayClick:function(){this.ownerHandlesClose()?this.requestClose():this.focusContent()},requestClose:function(){this.ownerHandlesClose()&&this.props.onRequestClose()},ownerHandlesClose:function(){return this.props.onRequestClose},shouldBeClosed:function(){return!this.props.isOpen&&!this.state.beforeClose},overlayStyles:{position:"fixed",left:0,right:0,top:0,bottom:0},buildClassName:function(which){var className=CLASS_NAMES[which].base;return this.state.afterOpen&&(className+=" "+CLASS_NAMES[which].afterOpen),this.state.beforeClose&&(className+=" "+CLASS_NAMES[which].beforeClose),className},render:function(){return this.shouldBeClosed()?div():div({ref:"overlay",className:cx(this.buildClassName("overlay"),this.props.overlayClassName),style:this.overlayStyles,onClick:this.handleOverlayClick},div({ref:"content",className:cx(this.buildClassName("content"),this.props.className),tabIndex:"-1",onClick:stopPropagation,onKeyDown:this.handleKeyDown},this.props.children))}})}},{"../helpers/focusManager":4,"../helpers/scopeTab":6,"react/lib/cx":9}],3:[function(_dereq_,module,exports){function setElement(element){_element=element}function hide(appElement){validateElement(appElement),(appElement||_element).setAttribute("aria-hidden","true")}function show(appElement){validateElement(appElement),(appElement||_element).removeAttribute("aria-hidden")}function toggle(shouldHide,appElement){shouldHide?hide(appElement):show(appElement)}function validateElement(appElement){if(!appElement&&!_element)throw new Error("react-modal: You must set an element with `Modal.setAppElement(el)` to make this accessible")}function resetForTesting(){_element=null}var _element=null;exports.toggle=toggle,exports.setElement=setElement,exports.show=show,exports.hide=hide,exports.resetForTesting=resetForTesting},{}],4:[function(_dereq_,module,exports){function handleBlur(){needToFocus=!0}function handleFocus(){needToFocus&&(needToFocus=!1,setTimeout(function(){if(!modalElement.contains(document.activeElement)){var el=findTabbable(modalElement)[0]||modalElement;el.focus()}},0))}var findTabbable=_dereq_("../helpers/tabbable"),modalElement=null,focusLaterElement=null,needToFocus=!1;exports.markForFocusLater=function(){focusLaterElement=document.activeElement},exports.returnFocus=function(){try{focusLaterElement.focus()}catch(e){console.warn("You tried to return focus to "+focusLaterElement+" but it is not in the DOM anymore")}focusLaterElement=null},exports.setupScopedFocus=function(element){modalElement=element,window.addEventListener("blur",handleBlur,!1),document.addEventListener("focus",handleFocus,!0)},exports.teardownScopedFocus=function(){modalElement=null,window.removeEventListener("blur",handleBlur),document.removeEventListener("focus",handleFocus)}},{"../helpers/tabbable":7}],5:[function(_dereq_,module){function injectStyle(css){var style=document.getElementById("rackt-style");if(!style){style=document.createElement("style"),style.setAttribute("id","rackt-style");var head=document.getElementsByTagName("head")[0];head.insertBefore(style,head.firstChild)}style.innerHTML=style.innerHTML+"\n"+css}module.exports=function(){injectStyle([".ReactModal__Overlay {"," background-color: rgba(255, 255, 255, 0.75);","}",".ReactModal__Content {"," position: absolute;"," top: 40px;"," left: 40px;"," right: 40px;"," bottom: 40px;"," border: 1px solid #ccc;"," background: #fff;"," overflow: auto;"," -webkit-overflow-scrolling: touch;"," border-radius: 4px;"," outline: none;"," padding: 20px;","}","@media (max-width: 768px) {"," .ReactModal__Content {"," top: 10px;"," left: 10px;"," right: 10px;"," bottom: 10px;"," padding: 10px;"," }","}"].join("\n"))}},{}],6:[function(_dereq_,module){var findTabbable=_dereq_("../helpers/tabbable");module.exports=function(node,event){var tabbable=findTabbable(node),finalTabbable=tabbable[event.shiftKey?0:tabbable.length-1],leavingFinalTabbable=finalTabbable===document.activeElement||node===document.activeElement;if(leavingFinalTabbable){event.preventDefault();var target=tabbable[event.shiftKey?tabbable.length-1:0];target.focus()}}},{"../helpers/tabbable":7}],7:[function(_dereq_,module){function focusable(element,isTabIndexNotNaN){var nodeName=element.nodeName.toLowerCase();return(/input|select|textarea|button|object/.test(nodeName)?!element.disabled:"a"===nodeName?element.href||isTabIndexNotNaN:isTabIndexNotNaN)&&visible(element)}function hidden(el){return el.offsetWidth<=0&&el.offsetHeight<=0||"none"===el.style.display}function visible(element){for(;element&&element!==document.body;){if(hidden(element))return!1;element=element.parentNode}return!0}function tabbable(element){var tabIndex=element.getAttribute("tabindex");null===tabIndex&&(tabIndex=void 0);var isTabIndexNaN=isNaN(tabIndex);return(isTabIndexNaN||tabIndex>=0)&&focusable(element,!isTabIndexNaN)}function findTabbableDescendants(element){return[].slice.call(element.querySelectorAll("*"),0).filter(function(el){return tabbable(el)})}module.exports=findTabbableDescendants},{}],8:[function(_dereq_,module){module.exports=_dereq_("./components/Modal")},{"./components/Modal":1}],9:[function(_dereq_,module){function cx(classNames){return"object"==typeof classNames?Object.keys(classNames).filter(function(className){return classNames[className]}).join(" "):Array.prototype.join.call(arguments," ")}module.exports=cx},{}]},{},[8])(8)}); | ||
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactModal=e()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module){function sanitizeProps(props){delete props.ref}{var React="undefined"!=typeof window?window.React:"undefined"!=typeof global?global.React:null,ModalPortal=React.createFactory(_dereq_("./ModalPortal")),ariaAppHider=_dereq_("../helpers/ariaAppHider"),injectCSS=_dereq_("../helpers/injectCSS");module.exports=React.createClass({displayName:"Modal",statics:{setAppElement:ariaAppHider.setElement,injectCSS:injectCSS},propTypes:{isOpen:React.PropTypes.bool.isRequired,onRequestClose:React.PropTypes.func,appElement:React.PropTypes.instanceOf(HTMLElement),closeTimeoutMS:React.PropTypes.number,ariaHideApp:React.PropTypes.bool},getDefaultProps:function(){return{isOpen:!1,ariaHideApp:!0,closeTimeoutMS:0}},componentDidMount:function(){this.node=document.createElement("div"),this.node.className="ReactModalPortal",document.body.appendChild(this.node),this.renderPortal(this.props)},componentWillReceiveProps:function(newProps){this.renderPortal(newProps)},componentWillUnmount:function(){React.unmountComponentAtNode(this.node),document.body.removeChild(this.node)},renderPortal:function(props){props.ariaHideApp&&ariaAppHider.toggle(props.isOpen,props.appElement),sanitizeProps(props),this.portal?this.portal.setProps(props):this.portal=React.render(ModalPortal(props),this.node)},render:function(){return null}})}},{"../helpers/ariaAppHider":3,"../helpers/injectCSS":5,"./ModalPortal":2}],2:[function(_dereq_,module){function stopPropagation(event){event.stopPropagation()}{var React="undefined"!=typeof window?window.React:"undefined"!=typeof global?global.React:null,div=React.DOM.div,focusManager=_dereq_("../helpers/focusManager"),scopeTab=_dereq_("../helpers/scopeTab"),cx=_dereq_("react/lib/cx"),CLASS_NAMES={overlay:{base:"ReactModal__Overlay",afterOpen:"ReactModal__Overlay--after-open",beforeClose:"ReactModal__Overlay--before-close"},content:{base:"ReactModal__Content",afterOpen:"ReactModal__Content--after-open",beforeClose:"ReactModal__Content--before-close"}},OVERLAY_STYLES={position:"fixed",left:0,right:0,top:0,bottom:0};module.exports=React.createClass({displayName:"ModalPortal",getInitialState:function(){return{afterOpen:!1,beforeClose:!1}},componentDidMount:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())},componentWillReceiveProps:function(newProps){!this.props.isOpen&&newProps.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!newProps.isOpen&&this.close()},componentDidUpdate:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))},setFocusAfterRender:function(focus){this.focusAfterRender=focus},open:function(){focusManager.setupScopedFocus(this.getDOMNode()),focusManager.markForFocusLater(),this.setState({isOpen:!0},function(){this.setState({afterOpen:!0})}.bind(this))},close:function(){this.ownerHandlesClose()&&(this.props.closeTimeoutMS>0?this.closeWithTimeout():this.closeWithoutTimeout())},focusContent:function(){this.refs.content.getDOMNode().focus()},closeWithTimeout:function(){this.setState({beforeClose:!0},function(){setTimeout(this.closeWithoutTimeout,this.props.closeTimeoutMS)}.bind(this))},closeWithoutTimeout:function(){this.setState({afterOpen:!1,beforeClose:!1},this.afterClose)},afterClose:function(){focusManager.returnFocus(),focusManager.teardownScopedFocus()},handleKeyDown:function(event){9==event.keyCode&&scopeTab(this.refs.content.getDOMNode(),event),27==event.keyCode&&this.requestClose()},handleOverlayClick:function(){this.ownerHandlesClose()?this.requestClose():this.focusContent()},requestClose:function(){this.ownerHandlesClose()&&this.props.onRequestClose()},ownerHandlesClose:function(){return this.props.onRequestClose},shouldBeClosed:function(){return!this.props.isOpen&&!this.state.beforeClose},buildClassName:function(which){var className=CLASS_NAMES[which].base;return this.state.afterOpen&&(className+=" "+CLASS_NAMES[which].afterOpen),this.state.beforeClose&&(className+=" "+CLASS_NAMES[which].beforeClose),className},render:function(){return this.shouldBeClosed()?div():div({ref:"overlay",className:cx(this.buildClassName("overlay"),this.props.overlayClassName),style:OVERLAY_STYLES,onClick:this.handleOverlayClick},div({ref:"content",className:cx(this.buildClassName("content"),this.props.className),tabIndex:"-1",onClick:stopPropagation,onKeyDown:this.handleKeyDown},this.props.children))}})}},{"../helpers/focusManager":4,"../helpers/scopeTab":6,"react/lib/cx":9}],3:[function(_dereq_,module,exports){function setElement(element){_element=element}function hide(appElement){validateElement(appElement),(appElement||_element).setAttribute("aria-hidden","true")}function show(appElement){validateElement(appElement),(appElement||_element).removeAttribute("aria-hidden")}function toggle(shouldHide,appElement){shouldHide?hide(appElement):show(appElement)}function validateElement(appElement){if(!appElement&&!_element)throw new Error("react-modal: You must set an element with `Modal.setAppElement(el)` to make this accessible")}function resetForTesting(){_element=null}var _element=null;exports.toggle=toggle,exports.setElement=setElement,exports.show=show,exports.hide=hide,exports.resetForTesting=resetForTesting},{}],4:[function(_dereq_,module,exports){function handleBlur(){needToFocus=!0}function handleFocus(){needToFocus&&(needToFocus=!1,setTimeout(function(){if(!modalElement.contains(document.activeElement)){var el=findTabbable(modalElement)[0]||modalElement;el.focus()}},0))}var findTabbable=_dereq_("../helpers/tabbable"),modalElement=null,focusLaterElement=null,needToFocus=!1;exports.markForFocusLater=function(){focusLaterElement=document.activeElement},exports.returnFocus=function(){try{focusLaterElement.focus()}catch(e){console.warn("You tried to return focus to "+focusLaterElement+" but it is not in the DOM anymore")}focusLaterElement=null},exports.setupScopedFocus=function(element){modalElement=element,window.addEventListener?(window.addEventListener("blur",handleBlur,!1),document.addEventListener("focus",handleFocus,!0)):(window.attachEvent("onBlur",handleBlur),document.attachEvent("onFocus",handleFocus))},exports.teardownScopedFocus=function(){modalElement=null,window.addEventListener?(window.removeEventListener("blur",handleBlur),document.removeEventListener("focus",handleFocus)):(window.detachEvent("onBlur",handleBlur),document.detachEvent("onFocus",handleFocus))}},{"../helpers/tabbable":7}],5:[function(_dereq_,module){function injectStyle(css){var style=document.getElementById("rackt-style");if(!style){style=document.createElement("style"),style.setAttribute("id","rackt-style");var head=document.getElementsByTagName("head")[0];head.insertBefore(style,head.firstChild)}style.innerHTML=style.innerHTML+"\n"+css}module.exports=function(){injectStyle([".ReactModal__Overlay {"," background-color: rgba(255, 255, 255, 0.75);","}",".ReactModal__Content {"," position: absolute;"," top: 40px;"," left: 40px;"," right: 40px;"," bottom: 40px;"," border: 1px solid #ccc;"," background: #fff;"," overflow: auto;"," -webkit-overflow-scrolling: touch;"," border-radius: 4px;"," outline: none;"," padding: 20px;","}","@media (max-width: 768px) {"," .ReactModal__Content {"," top: 10px;"," left: 10px;"," right: 10px;"," bottom: 10px;"," padding: 10px;"," }","}"].join("\n"))}},{}],6:[function(_dereq_,module){var findTabbable=_dereq_("../helpers/tabbable");module.exports=function(node,event){var tabbable=findTabbable(node),finalTabbable=tabbable[event.shiftKey?0:tabbable.length-1],leavingFinalTabbable=finalTabbable===document.activeElement||node===document.activeElement;if(leavingFinalTabbable){event.preventDefault();var target=tabbable[event.shiftKey?tabbable.length-1:0];target.focus()}}},{"../helpers/tabbable":7}],7:[function(_dereq_,module){function focusable(element,isTabIndexNotNaN){var nodeName=element.nodeName.toLowerCase();return(/input|select|textarea|button|object/.test(nodeName)?!element.disabled:"a"===nodeName?element.href||isTabIndexNotNaN:isTabIndexNotNaN)&&visible(element)}function hidden(el){return el.offsetWidth<=0&&el.offsetHeight<=0||"none"===el.style.display}function visible(element){for(;element&&element!==document.body;){if(hidden(element))return!1;element=element.parentNode}return!0}function tabbable(element){var tabIndex=element.getAttribute("tabindex");null===tabIndex&&(tabIndex=void 0);var isTabIndexNaN=isNaN(tabIndex);return(isTabIndexNaN||tabIndex>=0)&&focusable(element,!isTabIndexNaN)}function findTabbableDescendants(element){return[].slice.call(element.querySelectorAll("*"),0).filter(function(el){return tabbable(el)})}module.exports=findTabbableDescendants},{}],8:[function(_dereq_,module){module.exports=_dereq_("./components/Modal")},{"./components/Modal":1}],9:[function(_dereq_,module){"use strict";function cx(classNames){return"object"==typeof classNames?Object.keys(classNames).filter(function(className){return classNames[className]}).join(" "):Array.prototype.join.call(arguments," ")}_dereq_("./warning");module.exports=cx},{"./warning":11}],10:[function(_dereq_,module){function makeEmptyFunction(arg){return function(){return arg}}function emptyFunction(){}emptyFunction.thatReturns=makeEmptyFunction,emptyFunction.thatReturnsFalse=makeEmptyFunction(!1),emptyFunction.thatReturnsTrue=makeEmptyFunction(!0),emptyFunction.thatReturnsNull=makeEmptyFunction(null),emptyFunction.thatReturnsThis=function(){return this},emptyFunction.thatReturnsArgument=function(arg){return arg},module.exports=emptyFunction},{}],11:[function(_dereq_,module){"use strict";var emptyFunction=_dereq_("./emptyFunction"),warning=emptyFunction;module.exports=warning},{"./emptyFunction":10}]},{},[8])(8)}); |
@@ -12,3 +12,3 @@ var React = require('react'); | ||
afterOpen: 'ReactModal__Overlay--after-open', | ||
beforeClose: 'ReactModal__Overlay--before-close', | ||
beforeClose: 'ReactModal__Overlay--before-close' | ||
}, | ||
@@ -18,6 +18,8 @@ content: { | ||
afterOpen: 'ReactModal__Content--after-open', | ||
beforeClose: 'ReactModal__Content--before-close', | ||
beforeClose: 'ReactModal__Content--before-close' | ||
} | ||
}; | ||
var OVERLAY_STYLES = { position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }; | ||
function stopPropagation(event) { | ||
@@ -107,3 +109,3 @@ event.stopPropagation(); | ||
handleKeyDown: function(event) { | ||
if (event.keyCode == 9 /*tab*/) scopeTab(this.getDOMNode(), event); | ||
if (event.keyCode == 9 /*tab*/) scopeTab(this.refs.content.getDOMNode(), event); | ||
if (event.keyCode == 27 /*esc*/) this.requestClose(); | ||
@@ -132,4 +134,2 @@ }, | ||
overlayStyles: { position: 'fixed', left: 0, right: 0, top: 0, bottom: 0 }, | ||
buildClassName: function(which) { | ||
@@ -149,3 +149,3 @@ var className = CLASS_NAMES[which].base; | ||
className: cx(this.buildClassName('overlay'), this.props.overlayClassName), | ||
style: this.overlayStyles, | ||
style: OVERLAY_STYLES, | ||
onClick: this.handleOverlayClick | ||
@@ -152,0 +152,0 @@ }, |
@@ -43,4 +43,10 @@ var findTabbable = require('../helpers/tabbable'); | ||
modalElement = element; | ||
window.addEventListener('blur', handleBlur, false); | ||
document.addEventListener('focus', handleFocus, true); | ||
if (window.addEventListener) { | ||
window.addEventListener('blur', handleBlur, false); | ||
document.addEventListener('focus', handleFocus, true); | ||
} else { | ||
window.attachEvent('onBlur', handleBlur); | ||
document.attachEvent('onFocus', handleFocus); | ||
} | ||
}; | ||
@@ -50,5 +56,12 @@ | ||
modalElement = null; | ||
window.removeEventListener('blur', handleBlur); | ||
document.removeEventListener('focus', handleFocus); | ||
if (window.addEventListener) { | ||
window.removeEventListener('blur', handleBlur); | ||
document.removeEventListener('focus', handleFocus); | ||
} else { | ||
window.detachEvent('onBlur', handleBlur); | ||
document.detachEvent('onFocus', handleFocus); | ||
} | ||
}; | ||
{ | ||
"name": "react-modal", | ||
"version": "0.1.0", | ||
"version": "0.1.1", | ||
"description": "Accessible modal dialog component for React.JS", | ||
@@ -5,0 +5,0 @@ "main": "./lib/index", |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
46538
939