diff --git a/dist/react-flipcard.js b/dist/react-flipcard.js index 2b71362..fac0029 100644 --- a/dist/react-flipcard.js +++ b/dist/react-flipcard.js @@ -100,6 +100,7 @@ return /******/ (function(modules) { // webpackBootstrap disabled: _react.PropTypes.bool, onFlip: _react.PropTypes.func, onKeyDown: _react.PropTypes.func, + containerStyle: _react.PropTypes.object, children: function children(props, propName, componentName) { var prop = props[propName]; @@ -214,6 +215,7 @@ return /******/ (function(modules) { // webpackBootstrap 'ReactFlipCard--flipped': this.state.isFlipped, 'ReactFlipCard--enabled': !this.props.disabled }), + style: this.props.containerStyle, tabIndex: 0, onFocus: this.handleFocus, onBlur: this.handleBlur, @@ -255,7 +257,7 @@ return /******/ (function(modules) { // webpackBootstrap _hideFlippedSide: function _hideFlippedSide() { // This prevents the flipped side from being tabbable - if (this.props.disabled) { + if (this.props.disabled && this.refs.front && this.refs.back) { if (this.state.isFlipped) { this.refs.front.style.display = 'none'; } else { @@ -282,8 +284,8 @@ return /******/ (function(modules) { // webpackBootstrap /* 4 */ /***/ function(module, exports, __webpack_require__) { - var __WEBPACK_AMD_DEFINE_RESULT__;/*! - Copyright (c) 2015 Jed Watson. + var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! + Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ @@ -295,7 +297,7 @@ return /******/ (function(modules) { // webpackBootstrap var hasOwn = {}.hasOwnProperty; function classNames () { - var classes = ''; + var classes = []; for (var i = 0; i < arguments.length; i++) { var arg = arguments[i]; @@ -304,28 +306,28 @@ return /******/ (function(modules) { // webpackBootstrap var argType = typeof arg; if (argType === 'string' || argType === 'number') { - classes += ' ' + arg; + classes.push(arg); } else if (Array.isArray(arg)) { - classes += ' ' + classNames.apply(null, arg); + classes.push(classNames.apply(null, arg)); } else if (argType === 'object') { for (var key in arg) { if (hasOwn.call(arg, key) && arg[key]) { - classes += ' ' + key; + classes.push(key); } } } } - return classes.substr(1); + return classes.join(' '); } if (typeof module !== 'undefined' && module.exports) { module.exports = classNames; } else if (true) { // register as 'classnames', consistent with npm package name - !(__WEBPACK_AMD_DEFINE_RESULT__ = function () { + !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () { return classNames; - }.call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); } else { window.classNames = classNames; } diff --git a/dist/react-flipcard.js.map b/dist/react-flipcard.js.map index 90544da..9878f46 100644 --- a/dist/react-flipcard.js.map +++ b/dist/react-flipcard.js.map @@ -1 +1 @@ -{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 5a8c802d808ccdd645be","webpack:///./lib/main.js","webpack:///./lib/components/FlipCard.js","webpack:///external \"React\"","webpack:///external \"ReactDOM\"","webpack:///./~/classnames/index.js","webpack:///./lib/helpers/contains.js","webpack:///./lib/helpers/injectStyle.js"],"names":[],"mappings":"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","file":"/Users/mzabriskie/dev/gh/react-flipcard/dist/react-flipcard.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"React\", \"ReactDOM\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactFlipcard\"] = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse\n\t\troot[\"ReactFlipcard\"] = factory(root[\"React\"], root[\"ReactDOM\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 5a8c802d808ccdd645be\n **/","module.exports = require('./components/FlipCard');\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/main.js\n **/","import React, { PropTypes } from 'react';\nimport { findDOMNode } from 'react-dom';\nimport cx from 'classnames';\nimport contains from '../helpers/contains';\nimport injectStyle from '../helpers/injectStyle';\n\n// Auto inject the styles (will only be done once)\ninjectStyle();\n\nexport default React.createClass({\n displayName: 'ReactFlipCard',\n\n propTypes: {\n type: PropTypes.string,\n flipped: PropTypes.bool,\n disabled: PropTypes.bool,\n onFlip: PropTypes.func,\n onKeyDown: PropTypes.func,\n children(props, propName, componentName) {\n const prop = props[propName];\n\n if (React.Children.count(prop) !== 2) {\n return new Error(\n '`' + componentName + '` ' +\n 'should contain exactly two children. ' +\n 'The first child represents the front of the card. ' +\n 'The second child represents the back of the card.'\n );\n }\n }\n },\n\n getDefaultProps() {\n return {\n type: 'horizontal',\n flipped: false,\n disabled: false\n };\n },\n\n getInitialState() {\n return {\n hasFocus: false,\n isFlipped: this.props.flipped\n };\n },\n\n componentDidMount() {\n this._hideFlippedSide();\n },\n\n componentWillReceiveProps(newProps) {\n // Make sure both sides are displayed for animation\n this._showBothSides();\n\n // Wait for display above to take effect\n setTimeout(() => {\n this.setState({\n isFlipped: newProps.flipped\n });\n }, 0);\n },\n\n componentWillUpdate(nextProps, nextState) {\n // If card is flipping to back via props, track element for focus\n if (!this.props.flipped && nextProps.flipped) {\n // The element that focus will return to when flipped back to front\n this.focusElement = document.activeElement;\n // Indicates that the back of card needs focus\n this.focusBack = true;\n }\n\n // If isFlipped has changed need to notify\n if (this.state.isFlipped !== nextState.isFlipped) {\n this.notifyFlip = true;\n }\n },\n\n componentDidUpdate() {\n // If card has flipped to front, and focus is still within the card\n // return focus to the element that triggered flipping to the back.\n if (!this.props.flipped &&\n this.focusElement &&\n contains(findDOMNode(this), document.activeElement)\n ) {\n this.focusElement.focus();\n this.focusElement = null;\n }\n // Direct focus to the back if needed\n /* eslint brace-style:0 */\n else if (this.focusBack) {\n this.refs.back.focus();\n this.focusBack = false;\n }\n\n // Notify card being flipped\n if (this.notifyFlip && typeof this.props.onFlip === 'function') {\n this.props.onFlip(this.state.isFlipped);\n this.notifyFlip = false;\n }\n\n // Hide whichever side of the card is down\n setTimeout(this._hideFlippedSide, 600);\n },\n\n handleFocus() {\n if (this.props.disabled) return;\n\n this.setState({\n isFlipped: true\n });\n },\n\n handleBlur() {\n if (this.props.disabled) return;\n\n this.setState({\n isFlipped: false\n });\n },\n\n handleKeyDown(e) {\n if (typeof this.props.onKeyDown === 'function') {\n this.props.onKeyDown(e);\n }\n },\n\n render() {\n return (\n \n \n \n {this.props.children[0]}\n \n \n {this.props.children[1]}\n \n \n \n );\n },\n\n _showBothSides() {\n this.refs.front.style.display = '';\n this.refs.back.style.display = '';\n },\n\n _hideFlippedSide() {\n // This prevents the flipped side from being tabbable\n if (this.props.disabled) {\n if (this.state.isFlipped) {\n this.refs.front.style.display = 'none';\n } else {\n this.refs.back.style.display = 'none';\n }\n }\n }\n});\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/components/FlipCard.js\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"React\"\n ** module id = 2\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_3__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"ReactDOM\"\n ** module id = 3\n ** module chunks = 0\n **/","/*!\n Copyright (c) 2015 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses += ' ' + arg;\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tclasses += ' ' + classNames.apply(null, arg);\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses += ' ' + key;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.substr(1);\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/classnames/index.js\n ** module id = 4\n ** module chunks = 0\n **/","// Checks to see if a parent element contains a child element\n/* eslint no-param-reassign:0, no-cond-assign:0 */\nmodule.exports = function contains(parent, child) {\n do {\n if (parent === child) {\n return true;\n }\n } while (child && (child = child.parentNode));\n return false;\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/helpers/contains.js\n **/","const CSS = `\n.ReactFlipCard {\n -webkit-perspective: 1000;\n -moz-perspective: 1000;\n -ms-perspective: 1000;\n perspective: 1000;\n\n -ms-transform: perspective(1000px);\n -moz-transform: perspective(1000px);\n -moz-transform-style: preserve-3d;\n -ms-transform-style: preserve-3d;\n\n display: inline-block;\n}\n\n/* START: Accommodating for IE */\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Back,\n.ReactFlipCard--flipped .ReactFlipCard__Back {\n -webkit-transform: rotateY(0deg);\n -moz-transform: rotateY(0deg);\n -ms-transform: rotateY(0deg);\n -o-transform: rotateY(0deg);\n transform: rotateY(0deg);\n}\n\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Front,\n.ReactFlipCard--flipped .ReactFlipCard__Front {\n -webkit-transform: rotateY(180deg);\n -moz-transform: rotateY(180deg);\n -ms-transform: rotateY(180deg);\n -o-transform: rotateY(180deg);\n transform: rotateY(180deg);\n}\n/* END: Accommodating for IE */\n\n.ReactFlipCard__Flipper {\n -webkit-transition: 0.6s;\n -webkit-transform-style: preserve-3d;\n -ms-transition: 0.6s;\n\n -moz-transition: 0.6s;\n -moz-transform: perspective(1000px);\n -moz-transform-style: preserve-3d;\n -ms-transform-style: preserve-3d;\n\n transition: 0.6s;\n transform-style: preserve-3d;\n\n position: relative;\n}\n\n.ReactFlipCard__Front, .ReactFlipCard__Back {\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -ms-backface-visibility: hidden;\n backface-visibility: hidden;\n\n -webkit-transition: 0.6s;\n -webkit-transform-style: preserve-3d;\n -webkit-transform: rotateY(0deg);\n\n -moz-transition: 0.6s;\n -moz-transform-style: preserve-3d;\n -moz-transform: rotateY(0deg);\n\n -o-transition: 0.6s;\n -o-transform-style: preserve-3d;\n -o-transform: rotateY(0deg);\n\n -ms-transition: 0.6s;\n -ms-transform-style: preserve-3d;\n -ms-transform: rotateY(0deg);\n\n transition: 0.6s;\n transform-style: preserve-3d;\n transform: rotateY(0deg);\n\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.ReactFlipCard__Front {\n -webkit-transform: rotateY(0deg);\n -moz-transform: rotateY(0deg);\n -ms-transform: rotateY(0deg);\n -o-transform: rotateY(0deg);\n z-index: 2;\n}\n\n.ReactFlipCard__Back {\n -webkit-transform: rotateY(-180deg);\n -moz-transform: rotateY(-180deg);\n -ms-transform: rotateY(-180deg);\n -o-transform: rotateY(-180deg);\n transform: rotateY(-180deg);\n}\n\n/* vertical */\n.ReactFlipCard--vertical {\n position: relative;\n}\n\n.ReactFlipCard--vertical .ReactFlipCard__Back {\n -webkit-transform: rotateX(180deg);\n -moz-transform: rotateX(180deg);\n -ms-transform: rotateX(180deg);\n -o-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n\n.ReactFlipCard--vertical .ReactFlipCard__Flipper {\n -webkit-transform-origin: 100% 150px;\n -moz-transform-origin: 100% 150px;\n -ms-transform-origin: 100% 150px;\n -o-transform-origin: 100% 150px;\n transform-origin: 100% 150px;\n}\n\n/* START: Accommodating for IE */\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Back,\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Back {\n -webkit-transform: rotateX(0deg);\n -moz-transform: rotateX(0deg);\n -ms-transform: rotateX(0deg);\n -o-transform: rotateX(0deg);\n transform: rotateX(0deg);\n}\n\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Front,\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Front {\n -webkit-transform: rotateX(180deg);\n -moz-transform: rotateX(180deg);\n -ms-transform: rotateX(180deg);\n -o-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n/* END: Accommodating for IE */\n`;\n\nexport default function() {\n let style = document.getElementById('react-flipcard-style');\n if (!style) {\n style = document.createElement('style');\n style.setAttribute('id', 'react-flipcard-style');\n const head = document.querySelector('head');\n head.insertBefore(style, head.firstChild);\n }\n style.innerHTML = CSS;\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/helpers/injectStyle.js\n **/"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap 47fd03bd29c1fd8f9dbc","webpack:///./lib/main.js","webpack:///./lib/components/FlipCard.js","webpack:///external \"React\"","webpack:///external \"ReactDOM\"","webpack:///./~/classnames/index.js","webpack:///./lib/helpers/contains.js","webpack:///./lib/helpers/injectStyle.js"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;ACVA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,uBAAe;AACf;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;;;AAGA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;;;;;;;;ACtCA,OAAM,CAAC,OAAO,GAAG,mBAAO,CAAC,CAAuB,CAAC,C;;;;;;;;;;;;;;kCCAhB,CAAO;;;;qCACZ,CAAW;;uCACxB,CAAY;;;;4CACN,CAAqB;;;;+CAClB,CAAwB;;;;;AAGhD,uCAAa,CAAC;;sBAEC,mBAAM,WAAW,CAAC;AAC/B,cAAW,EAAE,eAAe;;AAE5B,YAAS,EAAE;AACT,SAAI,EAAE,iBAAU,MAAM;AACtB,YAAO,EAAE,iBAAU,IAAI;AACvB,aAAQ,EAAE,iBAAU,IAAI;AACxB,WAAM,EAAE,iBAAU,IAAI;AACtB,cAAS,EAAE,iBAAU,IAAI;AACzB,mBAAc,EAAE,iBAAU,MAAM;AAChC,aAAQ,oBAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE;AACvC,WAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;;AAE7B,WAAI,mBAAM,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;AACpC,gBAAO,IAAI,KAAK,CACd,GAAG,GAAG,aAAa,GAAG,IAAI,GAC1B,uCAAuC,GACvC,oDAAoD,GACpD,mDAAmD,CACpD,CAAC;QACH;MACF;IACF;;AAED,kBAAe,6BAAG;AAChB,YAAO;AACL,WAAI,EAAE,YAAY;AAClB,cAAO,EAAE,KAAK;AACd,eAAQ,EAAE,KAAK;MAChB,CAAC;IACH;;AAED,kBAAe,6BAAG;AAChB,YAAO;AACL,eAAQ,EAAE,KAAK;AACf,gBAAS,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO;MAC9B,CAAC;IACH;;AAED,oBAAiB,+BAAG;AAClB,SAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB;;AAED,4BAAyB,qCAAC,QAAQ,EAAE;;;;AAElC,SAAI,CAAC,cAAc,EAAE,CAAC;;;AAGtB,eAAU,CAAC,YAAM;AACf,aAAK,QAAQ,CAAC;AACZ,kBAAS,EAAE,QAAQ,CAAC,OAAO;QAC5B,CAAC,CAAC;MACJ,EAAE,CAAC,CAAC,CAAC;IACP;;AAED,sBAAmB,+BAAC,SAAS,EAAE,SAAS,EAAE;;AAExC,SAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;;AAE5C,WAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC;;AAE3C,WAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACvB;;;AAGD,SAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,EAAE;AAChD,WAAI,CAAC,UAAU,GAAG,IAAI,CAAC;MACxB;IACF;;AAED,qBAAkB,gCAAG;;;AAGnB,SAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAClB,IAAI,CAAC,YAAY,IACjB,kCAAS,2BAAY,IAAI,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,EACnD;AACH,WAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;AAC1B,WAAI,CAAC,YAAY,GAAG,IAAI,CAAC;MAC1B;;;UAGI,IAAI,IAAI,CAAC,SAAS,EAAE;AACvB,aAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;AACvB,aAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACxB;;;AAGD,SAAI,IAAI,CAAC,UAAU,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,UAAU,EAAE;AAC9D,WAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;AACxC,WAAI,CAAC,UAAU,GAAG,KAAK,CAAC;MACzB;;;AAGD,eAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC;IACxC;;AAED,cAAW,yBAAG;AACZ,SAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO;;AAEhC,SAAI,CAAC,QAAQ,CAAC;AACZ,gBAAS,EAAE,IAAI;MAChB,CAAC,CAAC;IACJ;;AAED,aAAU,wBAAG;AACX,SAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO;;AAEhC,SAAI,CAAC,QAAQ,CAAC;AACZ,gBAAS,EAAE,KAAK;MACjB,CAAC,CAAC;IACJ;;AAED,gBAAa,yBAAC,CAAC,EAAE;AACf,SAAI,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,UAAU,EAAE;AAC9C,WAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;MACzB;IACF;;AAED,SAAM,oBAAG;AACP,YACE;;;AACE,kBAAS,EAAE,6BAAG;AACZ,0BAAe,EAAE,IAAI;AACrB,oCAAyB,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU;AACzD,sCAA2B,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,UAAU;AAC3D,mCAAwB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;AAC9C,mCAAwB,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;UAC/C,CAAE;AACH,cAAK,EAAE,IAAI,CAAC,KAAK,CAAC,cAAe;AACjC,iBAAQ,EAAE,CAAE;AACZ,gBAAO,EAAE,IAAI,CAAC,WAAY;AAC1B,eAAM,EAAE,IAAI,CAAC,UAAW;AACxB,kBAAS,EAAE,IAAI,CAAC,aAAc;;OAE9B;;;AACE,oBAAS,EAAC,wBAAwB;;SAElC;;;AACE,sBAAS,EAAC,sBAAsB;AAChC,gBAAG,EAAC,OAAO;AACX,qBAAQ,EAAE,CAAC,CAAE;AACb,4BAAa,IAAI,CAAC,KAAK,CAAC,SAAU;;WAEjC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;UACnB;SACN;;;AACE,sBAAS,EAAC,qBAAqB;AAC/B,gBAAG,EAAC,MAAM;AACV,qBAAQ,EAAE,CAAC,CAAE;AACb,4BAAa,CAAC,IAAI,CAAC,KAAK,CAAC,SAAU;;WAElC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;UACnB;QACF;MACF,CACN;IACH;;AAED,iBAAc,4BAAG;AACf,SAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;AACnC,SAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;IACnC;;AAED,mBAAgB,8BAAG;;AAEjB,SAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;AAC5D,WAAI,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;AACxB,aAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACxC,MAAM;AACL,aAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACvC;MACF;IACF;EACF,CAAC;;;;;;;ACvLF,gD;;;;;;ACAA,gD;;;;;;ACAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,iBAAgB;;AAEhB;AACA;;AAEA,kBAAiB,sBAAsB;AACvC;AACA;;AAEA;;AAEA;AACA;AACA,KAAI;AACJ;AACA,KAAI;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA,IAAG;AACH,GAAE;AACF;AACA;AACA,EAAC;;;;;;;;;;;AC7CD,OAAM,CAAC,OAAO,GAAG,SAAS,QAAQ,CAAC,MAAM,EAAE,KAAK,EAAE;AAChD,MAAG;AACD,SAAI,MAAM,KAAK,KAAK,EAAE;AACpB,cAAO,IAAI,CAAC;MACb;IACF,QAAQ,KAAK,KAAK,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE;AAC9C,UAAO,KAAK,CAAC;EACd,C;;;;;;;;;;;ACTD,KAAM,GAAG,qnHA0IR,CAAC;;sBAEa,YAAW;AACxB,OAAI,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,sBAAsB,CAAC,CAAC;AAC5D,OAAI,CAAC,KAAK,EAAE;AACV,UAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACxC,UAAK,CAAC,YAAY,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAC;AACjD,SAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;AAC5C,SAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;IAC3C;AACD,QAAK,CAAC,SAAS,GAAG,GAAG,CAAC;EACvB","file":"/Users/Alex/Documents/SoftwareDevelopment/projects/myagi/react-flipcard/dist/react-flipcard.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"React\", \"ReactDOM\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactFlipcard\"] = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse\n\t\troot[\"ReactFlipcard\"] = factory(root[\"React\"], root[\"ReactDOM\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 47fd03bd29c1fd8f9dbc\n **/","module.exports = require('./components/FlipCard');\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/main.js\n **/","import React, { PropTypes } from 'react';\nimport { findDOMNode } from 'react-dom';\nimport cx from 'classnames';\nimport contains from '../helpers/contains';\nimport injectStyle from '../helpers/injectStyle';\n\n// Auto inject the styles (will only be done once)\ninjectStyle();\n\nexport default React.createClass({\n displayName: 'ReactFlipCard',\n\n propTypes: {\n type: PropTypes.string,\n flipped: PropTypes.bool,\n disabled: PropTypes.bool,\n onFlip: PropTypes.func,\n onKeyDown: PropTypes.func,\n containerStyle: PropTypes.object,\n children(props, propName, componentName) {\n const prop = props[propName];\n\n if (React.Children.count(prop) !== 2) {\n return new Error(\n '`' + componentName + '` ' +\n 'should contain exactly two children. ' +\n 'The first child represents the front of the card. ' +\n 'The second child represents the back of the card.'\n );\n }\n }\n },\n\n getDefaultProps() {\n return {\n type: 'horizontal',\n flipped: false,\n disabled: false\n };\n },\n\n getInitialState() {\n return {\n hasFocus: false,\n isFlipped: this.props.flipped\n };\n },\n\n componentDidMount() {\n this._hideFlippedSide();\n },\n\n componentWillReceiveProps(newProps) {\n // Make sure both sides are displayed for animation\n this._showBothSides();\n\n // Wait for display above to take effect\n setTimeout(() => {\n this.setState({\n isFlipped: newProps.flipped\n });\n }, 0);\n },\n\n componentWillUpdate(nextProps, nextState) {\n // If card is flipping to back via props, track element for focus\n if (!this.props.flipped && nextProps.flipped) {\n // The element that focus will return to when flipped back to front\n this.focusElement = document.activeElement;\n // Indicates that the back of card needs focus\n this.focusBack = true;\n }\n\n // If isFlipped has changed need to notify\n if (this.state.isFlipped !== nextState.isFlipped) {\n this.notifyFlip = true;\n }\n },\n\n componentDidUpdate() {\n // If card has flipped to front, and focus is still within the card\n // return focus to the element that triggered flipping to the back.\n if (!this.props.flipped &&\n this.focusElement &&\n contains(findDOMNode(this), document.activeElement)\n ) {\n this.focusElement.focus();\n this.focusElement = null;\n }\n // Direct focus to the back if needed\n /* eslint brace-style:0 */\n else if (this.focusBack) {\n this.refs.back.focus();\n this.focusBack = false;\n }\n\n // Notify card being flipped\n if (this.notifyFlip && typeof this.props.onFlip === 'function') {\n this.props.onFlip(this.state.isFlipped);\n this.notifyFlip = false;\n }\n\n // Hide whichever side of the card is down\n setTimeout(this._hideFlippedSide, 600);\n },\n\n handleFocus() {\n if (this.props.disabled) return;\n\n this.setState({\n isFlipped: true\n });\n },\n\n handleBlur() {\n if (this.props.disabled) return;\n\n this.setState({\n isFlipped: false\n });\n },\n\n handleKeyDown(e) {\n if (typeof this.props.onKeyDown === 'function') {\n this.props.onKeyDown(e);\n }\n },\n\n render() {\n return (\n \n \n \n {this.props.children[0]}\n \n \n {this.props.children[1]}\n \n \n \n );\n },\n\n _showBothSides() {\n this.refs.front.style.display = '';\n this.refs.back.style.display = '';\n },\n\n _hideFlippedSide() {\n // This prevents the flipped side from being tabbable\n if (this.props.disabled && this.refs.front && this.refs.back) {\n if (this.state.isFlipped) {\n this.refs.front.style.display = 'none';\n } else {\n this.refs.back.style.display = 'none';\n }\n }\n }\n});\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/components/FlipCard.js\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"React\"\n ** module id = 2\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_3__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"ReactDOM\"\n ** module id = 3\n ** module chunks = 0\n **/","/*!\n Copyright (c) 2016 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tclasses.push(classNames.apply(null, arg));\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/classnames/index.js\n ** module id = 4\n ** module chunks = 0\n **/","// Checks to see if a parent element contains a child element\n/* eslint no-param-reassign:0, no-cond-assign:0 */\nmodule.exports = function contains(parent, child) {\n do {\n if (parent === child) {\n return true;\n }\n } while (child && (child = child.parentNode));\n return false;\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/helpers/contains.js\n **/","const CSS = `\n.ReactFlipCard {\n -webkit-perspective: 1000;\n -moz-perspective: 1000;\n -ms-perspective: 1000;\n perspective: 1000;\n\n -ms-transform: perspective(1000px);\n -moz-transform: perspective(1000px);\n -moz-transform-style: preserve-3d;\n -ms-transform-style: preserve-3d;\n\n display: inline-block;\n}\n\n/* START: Accommodating for IE */\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Back,\n.ReactFlipCard--flipped .ReactFlipCard__Back {\n -webkit-transform: rotateY(0deg);\n -moz-transform: rotateY(0deg);\n -ms-transform: rotateY(0deg);\n -o-transform: rotateY(0deg);\n transform: rotateY(0deg);\n}\n\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Front,\n.ReactFlipCard--flipped .ReactFlipCard__Front {\n -webkit-transform: rotateY(180deg);\n -moz-transform: rotateY(180deg);\n -ms-transform: rotateY(180deg);\n -o-transform: rotateY(180deg);\n transform: rotateY(180deg);\n}\n/* END: Accommodating for IE */\n\n.ReactFlipCard__Flipper {\n -webkit-transition: 0.6s;\n -webkit-transform-style: preserve-3d;\n -ms-transition: 0.6s;\n\n -moz-transition: 0.6s;\n -moz-transform: perspective(1000px);\n -moz-transform-style: preserve-3d;\n -ms-transform-style: preserve-3d;\n\n transition: 0.6s;\n transform-style: preserve-3d;\n\n position: relative;\n}\n\n.ReactFlipCard__Front, .ReactFlipCard__Back {\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -ms-backface-visibility: hidden;\n backface-visibility: hidden;\n\n -webkit-transition: 0.6s;\n -webkit-transform-style: preserve-3d;\n -webkit-transform: rotateY(0deg);\n\n -moz-transition: 0.6s;\n -moz-transform-style: preserve-3d;\n -moz-transform: rotateY(0deg);\n\n -o-transition: 0.6s;\n -o-transform-style: preserve-3d;\n -o-transform: rotateY(0deg);\n\n -ms-transition: 0.6s;\n -ms-transform-style: preserve-3d;\n -ms-transform: rotateY(0deg);\n\n transition: 0.6s;\n transform-style: preserve-3d;\n transform: rotateY(0deg);\n\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.ReactFlipCard__Front {\n -webkit-transform: rotateY(0deg);\n -moz-transform: rotateY(0deg);\n -ms-transform: rotateY(0deg);\n -o-transform: rotateY(0deg);\n z-index: 2;\n}\n\n.ReactFlipCard__Back {\n -webkit-transform: rotateY(-180deg);\n -moz-transform: rotateY(-180deg);\n -ms-transform: rotateY(-180deg);\n -o-transform: rotateY(-180deg);\n transform: rotateY(-180deg);\n}\n\n/* vertical */\n.ReactFlipCard--vertical {\n position: relative;\n}\n\n.ReactFlipCard--vertical .ReactFlipCard__Back {\n -webkit-transform: rotateX(180deg);\n -moz-transform: rotateX(180deg);\n -ms-transform: rotateX(180deg);\n -o-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n\n.ReactFlipCard--vertical .ReactFlipCard__Flipper {\n -webkit-transform-origin: 100% 150px;\n -moz-transform-origin: 100% 150px;\n -ms-transform-origin: 100% 150px;\n -o-transform-origin: 100% 150px;\n transform-origin: 100% 150px;\n}\n\n/* START: Accommodating for IE */\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Back,\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Back {\n -webkit-transform: rotateX(0deg);\n -moz-transform: rotateX(0deg);\n -ms-transform: rotateX(0deg);\n -o-transform: rotateX(0deg);\n transform: rotateX(0deg);\n}\n\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Front,\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Front {\n -webkit-transform: rotateX(180deg);\n -moz-transform: rotateX(180deg);\n -ms-transform: rotateX(180deg);\n -o-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n/* END: Accommodating for IE */\n`;\n\nexport default function() {\n let style = document.getElementById('react-flipcard-style');\n if (!style) {\n style = document.createElement('style');\n style.setAttribute('id', 'react-flipcard-style');\n const head = document.querySelector('head');\n head.insertBefore(style, head.firstChild);\n }\n style.innerHTML = CSS;\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/helpers/injectStyle.js\n **/"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/react-flipcard.min.js b/dist/react-flipcard.min.js index 5eaceca..bb2e018 100644 --- a/dist/react-flipcard.min.js +++ b/dist/react-flipcard.min.js @@ -1,7 +1,7 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactFlipcard=t(require("React"),require("ReactDOM")):e.ReactFlipcard=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";e.exports=r(1)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var a=r(2),i=n(a),o=r(3),s=r(4),d=n(s),p=r(5),l=n(p),c=r(6),f=n(c);f["default"](),t["default"]=i["default"].createClass({displayName:"ReactFlipCard",propTypes:{type:a.PropTypes.string,flipped:a.PropTypes.bool,disabled:a.PropTypes.bool,onFlip:a.PropTypes.func,onKeyDown:a.PropTypes.func,children:function(e,t,r){var n=e[t];return 2!==i["default"].Children.count(n)?new Error("`"+r+"` should contain exactly two children. The first child represents the front of the card. The second child represents the back of the card."):void 0}},getDefaultProps:function(){return{type:"horizontal",flipped:!1,disabled:!1}},getInitialState:function(){return{hasFocus:!1,isFlipped:this.props.flipped}},componentDidMount:function(){this._hideFlippedSide()},componentWillReceiveProps:function(e){var t=this;this._showBothSides(),setTimeout(function(){t.setState({isFlipped:e.flipped})},0)},componentWillUpdate:function(e,t){!this.props.flipped&&e.flipped&&(this.focusElement=document.activeElement,this.focusBack=!0),this.state.isFlipped!==t.isFlipped&&(this.notifyFlip=!0)},componentDidUpdate:function(){!this.props.flipped&&this.focusElement&&l["default"](o.findDOMNode(this),document.activeElement)?(this.focusElement.focus(),this.focusElement=null):this.focusBack&&(this.refs.back.focus(),this.focusBack=!1),this.notifyFlip&&"function"==typeof this.props.onFlip&&(this.props.onFlip(this.state.isFlipped),this.notifyFlip=!1),setTimeout(this._hideFlippedSide,600)},handleFocus:function(){this.props.disabled||this.setState({isFlipped:!0})},handleBlur:function(){this.props.disabled||this.setState({isFlipped:!1})},handleKeyDown:function(e){"function"==typeof this.props.onKeyDown&&this.props.onKeyDown(e)},render:function(){return i["default"].createElement("div",{className:d["default"]({ReactFlipCard:!0,"ReactFlipCard--vertical":"vertical"===this.props.type,"ReactFlipCard--horizontal":"vertical"!==this.props.type,"ReactFlipCard--flipped":this.state.isFlipped,"ReactFlipCard--enabled":!this.props.disabled}),tabIndex:0,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown},i["default"].createElement("div",{className:"ReactFlipCard__Flipper"},i["default"].createElement("div",{className:"ReactFlipCard__Front",ref:"front",tabIndex:-1,"aria-hidden":this.state.isFlipped},this.props.children[0]),i["default"].createElement("div",{className:"ReactFlipCard__Back",ref:"back",tabIndex:-1,"aria-hidden":!this.state.isFlipped},this.props.children[1])))},_showBothSides:function(){this.refs.front.style.display="",this.refs.back.style.display=""},_hideFlippedSide:function(){this.props.disabled&&(this.state.isFlipped?this.refs.front.style.display="none":this.refs.back.style.display="none")}}),e.exports=t["default"]},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){var n;/*! - Copyright (c) 2015 Jed Watson. +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactFlipcard=t(require("React"),require("ReactDOM")):e.ReactFlipcard=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){"use strict";e.exports=r(1)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(2),a=n(i),o=r(3),s=r(4),p=n(s),d=r(5),l=n(d),c=r(6),f=n(c);f["default"](),t["default"]=a["default"].createClass({displayName:"ReactFlipCard",propTypes:{type:i.PropTypes.string,flipped:i.PropTypes.bool,disabled:i.PropTypes.bool,onFlip:i.PropTypes.func,onKeyDown:i.PropTypes.func,containerStyle:i.PropTypes.object,children:function(e,t,r){var n=e[t];return 2!==a["default"].Children.count(n)?new Error("`"+r+"` should contain exactly two children. The first child represents the front of the card. The second child represents the back of the card."):void 0}},getDefaultProps:function(){return{type:"horizontal",flipped:!1,disabled:!1}},getInitialState:function(){return{hasFocus:!1,isFlipped:this.props.flipped}},componentDidMount:function(){this._hideFlippedSide()},componentWillReceiveProps:function(e){var t=this;this._showBothSides(),setTimeout(function(){t.setState({isFlipped:e.flipped})},0)},componentWillUpdate:function(e,t){!this.props.flipped&&e.flipped&&(this.focusElement=document.activeElement,this.focusBack=!0),this.state.isFlipped!==t.isFlipped&&(this.notifyFlip=!0)},componentDidUpdate:function(){!this.props.flipped&&this.focusElement&&l["default"](o.findDOMNode(this),document.activeElement)?(this.focusElement.focus(),this.focusElement=null):this.focusBack&&(this.refs.back.focus(),this.focusBack=!1),this.notifyFlip&&"function"==typeof this.props.onFlip&&(this.props.onFlip(this.state.isFlipped),this.notifyFlip=!1),setTimeout(this._hideFlippedSide,600)},handleFocus:function(){this.props.disabled||this.setState({isFlipped:!0})},handleBlur:function(){this.props.disabled||this.setState({isFlipped:!1})},handleKeyDown:function(e){"function"==typeof this.props.onKeyDown&&this.props.onKeyDown(e)},render:function(){return a["default"].createElement("div",{className:p["default"]({ReactFlipCard:!0,"ReactFlipCard--vertical":"vertical"===this.props.type,"ReactFlipCard--horizontal":"vertical"!==this.props.type,"ReactFlipCard--flipped":this.state.isFlipped,"ReactFlipCard--enabled":!this.props.disabled}),style:this.props.containerStyle,tabIndex:0,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown},a["default"].createElement("div",{className:"ReactFlipCard__Flipper"},a["default"].createElement("div",{className:"ReactFlipCard__Front",ref:"front",tabIndex:-1,"aria-hidden":this.state.isFlipped},this.props.children[0]),a["default"].createElement("div",{className:"ReactFlipCard__Back",ref:"back",tabIndex:-1,"aria-hidden":!this.state.isFlipped},this.props.children[1])))},_showBothSides:function(){this.refs.front.style.display="",this.refs.back.style.display=""},_hideFlippedSide:function(){this.props.disabled&&this.refs.front&&this.refs.back&&(this.state.isFlipped?this.refs.front.style.display="none":this.refs.back.style.display="none")}}),e.exports=t["default"]},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){var n,i;/*! + Copyright (c) 2016 Jed Watson. Licensed under the MIT License (MIT), see http://jedwatson.github.io/classnames */ -!function(){"use strict";function a(){for(var e="",t=0;t {\n this.setState({\n isFlipped: newProps.flipped\n });\n }, 0);\n },\n\n componentWillUpdate(nextProps, nextState) {\n // If card is flipping to back via props, track element for focus\n if (!this.props.flipped && nextProps.flipped) {\n // The element that focus will return to when flipped back to front\n this.focusElement = document.activeElement;\n // Indicates that the back of card needs focus\n this.focusBack = true;\n }\n\n // If isFlipped has changed need to notify\n if (this.state.isFlipped !== nextState.isFlipped) {\n this.notifyFlip = true;\n }\n },\n\n componentDidUpdate() {\n // If card has flipped to front, and focus is still within the card\n // return focus to the element that triggered flipping to the back.\n if (!this.props.flipped &&\n this.focusElement &&\n contains(findDOMNode(this), document.activeElement)\n ) {\n this.focusElement.focus();\n this.focusElement = null;\n }\n // Direct focus to the back if needed\n /* eslint brace-style:0 */\n else if (this.focusBack) {\n this.refs.back.focus();\n this.focusBack = false;\n }\n\n // Notify card being flipped\n if (this.notifyFlip && typeof this.props.onFlip === 'function') {\n this.props.onFlip(this.state.isFlipped);\n this.notifyFlip = false;\n }\n\n // Hide whichever side of the card is down\n setTimeout(this._hideFlippedSide, 600);\n },\n\n handleFocus() {\n if (this.props.disabled) return;\n\n this.setState({\n isFlipped: true\n });\n },\n\n handleBlur() {\n if (this.props.disabled) return;\n\n this.setState({\n isFlipped: false\n });\n },\n\n handleKeyDown(e) {\n if (typeof this.props.onKeyDown === 'function') {\n this.props.onKeyDown(e);\n }\n },\n\n render() {\n return (\n \n \n \n {this.props.children[0]}\n \n \n {this.props.children[1]}\n \n \n \n );\n },\n\n _showBothSides() {\n this.refs.front.style.display = '';\n this.refs.back.style.display = '';\n },\n\n _hideFlippedSide() {\n // This prevents the flipped side from being tabbable\n if (this.props.disabled) {\n if (this.state.isFlipped) {\n this.refs.front.style.display = 'none';\n } else {\n this.refs.back.style.display = 'none';\n }\n }\n }\n});\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/components/FlipCard.js\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"React\"\n ** module id = 2\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_3__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"ReactDOM\"\n ** module id = 3\n ** module chunks = 0\n **/","/*!\n Copyright (c) 2015 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses += ' ' + arg;\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tclasses += ' ' + classNames.apply(null, arg);\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses += ' ' + key;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.substr(1);\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/classnames/index.js\n ** module id = 4\n ** module chunks = 0\n **/","// Checks to see if a parent element contains a child element\n/* eslint no-param-reassign:0, no-cond-assign:0 */\nmodule.exports = function contains(parent, child) {\n do {\n if (parent === child) {\n return true;\n }\n } while (child && (child = child.parentNode));\n return false;\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/helpers/contains.js\n **/","const CSS = `\n.ReactFlipCard {\n -webkit-perspective: 1000;\n -moz-perspective: 1000;\n -ms-perspective: 1000;\n perspective: 1000;\n\n -ms-transform: perspective(1000px);\n -moz-transform: perspective(1000px);\n -moz-transform-style: preserve-3d;\n -ms-transform-style: preserve-3d;\n\n display: inline-block;\n}\n\n/* START: Accommodating for IE */\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Back,\n.ReactFlipCard--flipped .ReactFlipCard__Back {\n -webkit-transform: rotateY(0deg);\n -moz-transform: rotateY(0deg);\n -ms-transform: rotateY(0deg);\n -o-transform: rotateY(0deg);\n transform: rotateY(0deg);\n}\n\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Front,\n.ReactFlipCard--flipped .ReactFlipCard__Front {\n -webkit-transform: rotateY(180deg);\n -moz-transform: rotateY(180deg);\n -ms-transform: rotateY(180deg);\n -o-transform: rotateY(180deg);\n transform: rotateY(180deg);\n}\n/* END: Accommodating for IE */\n\n.ReactFlipCard__Flipper {\n -webkit-transition: 0.6s;\n -webkit-transform-style: preserve-3d;\n -ms-transition: 0.6s;\n\n -moz-transition: 0.6s;\n -moz-transform: perspective(1000px);\n -moz-transform-style: preserve-3d;\n -ms-transform-style: preserve-3d;\n\n transition: 0.6s;\n transform-style: preserve-3d;\n\n position: relative;\n}\n\n.ReactFlipCard__Front, .ReactFlipCard__Back {\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -ms-backface-visibility: hidden;\n backface-visibility: hidden;\n\n -webkit-transition: 0.6s;\n -webkit-transform-style: preserve-3d;\n -webkit-transform: rotateY(0deg);\n\n -moz-transition: 0.6s;\n -moz-transform-style: preserve-3d;\n -moz-transform: rotateY(0deg);\n\n -o-transition: 0.6s;\n -o-transform-style: preserve-3d;\n -o-transform: rotateY(0deg);\n\n -ms-transition: 0.6s;\n -ms-transform-style: preserve-3d;\n -ms-transform: rotateY(0deg);\n\n transition: 0.6s;\n transform-style: preserve-3d;\n transform: rotateY(0deg);\n\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.ReactFlipCard__Front {\n -webkit-transform: rotateY(0deg);\n -moz-transform: rotateY(0deg);\n -ms-transform: rotateY(0deg);\n -o-transform: rotateY(0deg);\n z-index: 2;\n}\n\n.ReactFlipCard__Back {\n -webkit-transform: rotateY(-180deg);\n -moz-transform: rotateY(-180deg);\n -ms-transform: rotateY(-180deg);\n -o-transform: rotateY(-180deg);\n transform: rotateY(-180deg);\n}\n\n/* vertical */\n.ReactFlipCard--vertical {\n position: relative;\n}\n\n.ReactFlipCard--vertical .ReactFlipCard__Back {\n -webkit-transform: rotateX(180deg);\n -moz-transform: rotateX(180deg);\n -ms-transform: rotateX(180deg);\n -o-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n\n.ReactFlipCard--vertical .ReactFlipCard__Flipper {\n -webkit-transform-origin: 100% 150px;\n -moz-transform-origin: 100% 150px;\n -ms-transform-origin: 100% 150px;\n -o-transform-origin: 100% 150px;\n transform-origin: 100% 150px;\n}\n\n/* START: Accommodating for IE */\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Back,\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Back {\n -webkit-transform: rotateX(0deg);\n -moz-transform: rotateX(0deg);\n -ms-transform: rotateX(0deg);\n -o-transform: rotateX(0deg);\n transform: rotateX(0deg);\n}\n\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Front,\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Front {\n -webkit-transform: rotateX(180deg);\n -moz-transform: rotateX(180deg);\n -ms-transform: rotateX(180deg);\n -o-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n/* END: Accommodating for IE */\n`;\n\nexport default function() {\n let style = document.getElementById('react-flipcard-style');\n if (!style) {\n style = document.createElement('style');\n style.setAttribute('id', 'react-flipcard-style');\n const head = document.querySelector('head');\n head.insertBefore(style, head.firstChild);\n }\n style.innerHTML = CSS;\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/helpers/injectStyle.js\n **/"],"sourceRoot":""} \ No newline at end of file +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///./dist/react-flipcard.min.js","webpack:///webpack/bootstrap 3d40a73e09345c156ac8","webpack:///./lib/main.js","webpack:///./lib/components/FlipCard.js","webpack:///external \"React\"","webpack:///external \"ReactDOM\"","webpack:///./~/classnames/index.js","webpack:///./lib/helpers/contains.js","webpack:///./lib/helpers/injectStyle.js"],"names":["root","factory","exports","module","require","define","amd","this","__WEBPACK_EXTERNAL_MODULE_2__","__WEBPACK_EXTERNAL_MODULE_3__","modules","__webpack_require__","moduleId","installedModules","id","loaded","call","m","c","p","_interopRequireDefault","obj","__esModule","default","Object","defineProperty","value","_react","_react2","_reactDom","_classnames","_classnames2","_helpersContains","_helpersContains2","_helpersInjectStyle","_helpersInjectStyle2","createClass","displayName","propTypes","type","PropTypes","string","flipped","bool","disabled","onFlip","func","onKeyDown","containerStyle","object","children","props","propName","componentName","prop","Children","count","Error","getDefaultProps","getInitialState","hasFocus","isFlipped","componentDidMount","_hideFlippedSide","componentWillReceiveProps","newProps","_this","_showBothSides","setTimeout","setState","componentWillUpdate","nextProps","nextState","focusElement","document","activeElement","focusBack","state","notifyFlip","componentDidUpdate","findDOMNode","focus","refs","back","handleFocus","handleBlur","handleKeyDown","e","render","createElement","className","ReactFlipCard","ReactFlipCard--vertical","ReactFlipCard--horizontal","ReactFlipCard--flipped","ReactFlipCard--enabled","style","tabIndex","onFocus","onBlur","ref","aria-hidden","front","display","__WEBPACK_AMD_DEFINE_ARRAY__","__WEBPACK_AMD_DEFINE_RESULT__","classNames","classes","i","arguments","length","arg","argType","push","Array","isArray","apply","key","hasOwn","join","hasOwnProperty","undefined","parent","child","parentNode","CSS","getElementById","setAttribute","head","querySelector","insertBefore","firstChild","innerHTML"],"mappings":"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","file":"/Users/Alex/Documents/SoftwareDevelopment/projects/myagi/react-flipcard/dist/react-flipcard.min.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"React\", \"ReactDOM\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactFlipcard\"] = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse\n\t\troot[\"ReactFlipcard\"] = factory(root[\"React\"], root[\"ReactDOM\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {\nreturn \n\n\n/** WEBPACK FOOTER **\n ** webpack/universalModuleDefinition\n **/","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"React\", \"ReactDOM\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ReactFlipcard\"] = factory(require(\"React\"), require(\"ReactDOM\"));\n\telse\n\t\troot[\"ReactFlipcard\"] = factory(root[\"React\"], root[\"ReactDOM\"]);\n})(this, function(__WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__) {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tmodule.exports = __webpack_require__(1);\n\n/***/ },\n/* 1 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, '__esModule', {\n\t value: true\n\t});\n\t\n\tfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }\n\t\n\tvar _react = __webpack_require__(2);\n\t\n\tvar _react2 = _interopRequireDefault(_react);\n\t\n\tvar _reactDom = __webpack_require__(3);\n\t\n\tvar _classnames = __webpack_require__(4);\n\t\n\tvar _classnames2 = _interopRequireDefault(_classnames);\n\t\n\tvar _helpersContains = __webpack_require__(5);\n\t\n\tvar _helpersContains2 = _interopRequireDefault(_helpersContains);\n\t\n\tvar _helpersInjectStyle = __webpack_require__(6);\n\t\n\tvar _helpersInjectStyle2 = _interopRequireDefault(_helpersInjectStyle);\n\t\n\t// Auto inject the styles (will only be done once)\n\t(0, _helpersInjectStyle2['default'])();\n\t\n\texports['default'] = _react2['default'].createClass({\n\t displayName: 'ReactFlipCard',\n\t\n\t propTypes: {\n\t type: _react.PropTypes.string,\n\t flipped: _react.PropTypes.bool,\n\t disabled: _react.PropTypes.bool,\n\t onFlip: _react.PropTypes.func,\n\t onKeyDown: _react.PropTypes.func,\n\t containerStyle: _react.PropTypes.object,\n\t children: function children(props, propName, componentName) {\n\t var prop = props[propName];\n\t\n\t if (_react2['default'].Children.count(prop) !== 2) {\n\t return new Error('`' + componentName + '` ' + 'should contain exactly two children. ' + 'The first child represents the front of the card. ' + 'The second child represents the back of the card.');\n\t }\n\t }\n\t },\n\t\n\t getDefaultProps: function getDefaultProps() {\n\t return {\n\t type: 'horizontal',\n\t flipped: false,\n\t disabled: false\n\t };\n\t },\n\t\n\t getInitialState: function getInitialState() {\n\t return {\n\t hasFocus: false,\n\t isFlipped: this.props.flipped\n\t };\n\t },\n\t\n\t componentDidMount: function componentDidMount() {\n\t this._hideFlippedSide();\n\t },\n\t\n\t componentWillReceiveProps: function componentWillReceiveProps(newProps) {\n\t var _this = this;\n\t\n\t // Make sure both sides are displayed for animation\n\t this._showBothSides();\n\t\n\t // Wait for display above to take effect\n\t setTimeout(function () {\n\t _this.setState({\n\t isFlipped: newProps.flipped\n\t });\n\t }, 0);\n\t },\n\t\n\t componentWillUpdate: function componentWillUpdate(nextProps, nextState) {\n\t // If card is flipping to back via props, track element for focus\n\t if (!this.props.flipped && nextProps.flipped) {\n\t // The element that focus will return to when flipped back to front\n\t this.focusElement = document.activeElement;\n\t // Indicates that the back of card needs focus\n\t this.focusBack = true;\n\t }\n\t\n\t // If isFlipped has changed need to notify\n\t if (this.state.isFlipped !== nextState.isFlipped) {\n\t this.notifyFlip = true;\n\t }\n\t },\n\t\n\t componentDidUpdate: function componentDidUpdate() {\n\t // If card has flipped to front, and focus is still within the card\n\t // return focus to the element that triggered flipping to the back.\n\t if (!this.props.flipped && this.focusElement && (0, _helpersContains2['default'])((0, _reactDom.findDOMNode)(this), document.activeElement)) {\n\t this.focusElement.focus();\n\t this.focusElement = null;\n\t }\n\t // Direct focus to the back if needed\n\t /* eslint brace-style:0 */\n\t else if (this.focusBack) {\n\t this.refs.back.focus();\n\t this.focusBack = false;\n\t }\n\t\n\t // Notify card being flipped\n\t if (this.notifyFlip && typeof this.props.onFlip === 'function') {\n\t this.props.onFlip(this.state.isFlipped);\n\t this.notifyFlip = false;\n\t }\n\t\n\t // Hide whichever side of the card is down\n\t setTimeout(this._hideFlippedSide, 600);\n\t },\n\t\n\t handleFocus: function handleFocus() {\n\t if (this.props.disabled) return;\n\t\n\t this.setState({\n\t isFlipped: true\n\t });\n\t },\n\t\n\t handleBlur: function handleBlur() {\n\t if (this.props.disabled) return;\n\t\n\t this.setState({\n\t isFlipped: false\n\t });\n\t },\n\t\n\t handleKeyDown: function handleKeyDown(e) {\n\t if (typeof this.props.onKeyDown === 'function') {\n\t this.props.onKeyDown(e);\n\t }\n\t },\n\t\n\t render: function render() {\n\t return _react2['default'].createElement(\n\t 'div',\n\t {\n\t className: (0, _classnames2['default'])({\n\t 'ReactFlipCard': true,\n\t 'ReactFlipCard--vertical': this.props.type === 'vertical',\n\t 'ReactFlipCard--horizontal': this.props.type !== 'vertical',\n\t 'ReactFlipCard--flipped': this.state.isFlipped,\n\t 'ReactFlipCard--enabled': !this.props.disabled\n\t }),\n\t style: this.props.containerStyle,\n\t tabIndex: 0,\n\t onFocus: this.handleFocus,\n\t onBlur: this.handleBlur,\n\t onKeyDown: this.handleKeyDown\n\t },\n\t _react2['default'].createElement(\n\t 'div',\n\t {\n\t className: 'ReactFlipCard__Flipper'\n\t },\n\t _react2['default'].createElement(\n\t 'div',\n\t {\n\t className: 'ReactFlipCard__Front',\n\t ref: 'front',\n\t tabIndex: -1,\n\t 'aria-hidden': this.state.isFlipped\n\t },\n\t this.props.children[0]\n\t ),\n\t _react2['default'].createElement(\n\t 'div',\n\t {\n\t className: 'ReactFlipCard__Back',\n\t ref: 'back',\n\t tabIndex: -1,\n\t 'aria-hidden': !this.state.isFlipped\n\t },\n\t this.props.children[1]\n\t )\n\t )\n\t );\n\t },\n\t\n\t _showBothSides: function _showBothSides() {\n\t this.refs.front.style.display = '';\n\t this.refs.back.style.display = '';\n\t },\n\t\n\t _hideFlippedSide: function _hideFlippedSide() {\n\t // This prevents the flipped side from being tabbable\n\t if (this.props.disabled && this.refs.front && this.refs.back) {\n\t if (this.state.isFlipped) {\n\t this.refs.front.style.display = 'none';\n\t } else {\n\t this.refs.back.style.display = 'none';\n\t }\n\t }\n\t }\n\t});\n\tmodule.exports = exports['default'];\n\n/***/ },\n/* 2 */\n/***/ function(module, exports) {\n\n\tmodule.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n/***/ },\n/* 3 */\n/***/ function(module, exports) {\n\n\tmodule.exports = __WEBPACK_EXTERNAL_MODULE_3__;\n\n/***/ },\n/* 4 */\n/***/ function(module, exports, __webpack_require__) {\n\n\tvar __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!\n\t Copyright (c) 2016 Jed Watson.\n\t Licensed under the MIT License (MIT), see\n\t http://jedwatson.github.io/classnames\n\t*/\n\t/* global define */\n\t\n\t(function () {\n\t\t'use strict';\n\t\n\t\tvar hasOwn = {}.hasOwnProperty;\n\t\n\t\tfunction classNames () {\n\t\t\tvar classes = [];\n\t\n\t\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\t\tvar arg = arguments[i];\n\t\t\t\tif (!arg) continue;\n\t\n\t\t\t\tvar argType = typeof arg;\n\t\n\t\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\t\tclasses.push(arg);\n\t\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\t\tclasses.push(classNames.apply(null, arg));\n\t\t\t\t} else if (argType === 'object') {\n\t\t\t\t\tfor (var key in arg) {\n\t\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\n\t\t\treturn classes.join(' ');\n\t\t}\n\t\n\t\tif (typeof module !== 'undefined' && module.exports) {\n\t\t\tmodule.exports = classNames;\n\t\t} else if (true) {\n\t\t\t// register as 'classnames', consistent with npm package name\n\t\t\t!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {\n\t\t\t\treturn classNames;\n\t\t\t}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\t\t} else {\n\t\t\twindow.classNames = classNames;\n\t\t}\n\t}());\n\n\n/***/ },\n/* 5 */\n/***/ function(module, exports) {\n\n\t// Checks to see if a parent element contains a child element\n\t/* eslint no-param-reassign:0, no-cond-assign:0 */\n\t\"use strict\";\n\t\n\tmodule.exports = function contains(parent, child) {\n\t do {\n\t if (parent === child) {\n\t return true;\n\t }\n\t } while (child && (child = child.parentNode));\n\t return false;\n\t};\n\n/***/ },\n/* 6 */\n/***/ function(module, exports) {\n\n\t'use strict';\n\t\n\tObject.defineProperty(exports, '__esModule', {\n\t value: true\n\t});\n\tvar CSS = '\\n.ReactFlipCard {\\n -webkit-perspective: 1000;\\n -moz-perspective: 1000;\\n -ms-perspective: 1000;\\n perspective: 1000;\\n\\n -ms-transform: perspective(1000px);\\n -moz-transform: perspective(1000px);\\n -moz-transform-style: preserve-3d;\\n -ms-transform-style: preserve-3d;\\n\\n display: inline-block;\\n}\\n\\n/* START: Accommodating for IE */\\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Back,\\n.ReactFlipCard--flipped .ReactFlipCard__Back {\\n -webkit-transform: rotateY(0deg);\\n -moz-transform: rotateY(0deg);\\n -ms-transform: rotateY(0deg);\\n -o-transform: rotateY(0deg);\\n transform: rotateY(0deg);\\n}\\n\\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Front,\\n.ReactFlipCard--flipped .ReactFlipCard__Front {\\n -webkit-transform: rotateY(180deg);\\n -moz-transform: rotateY(180deg);\\n -ms-transform: rotateY(180deg);\\n -o-transform: rotateY(180deg);\\n transform: rotateY(180deg);\\n}\\n/* END: Accommodating for IE */\\n\\n.ReactFlipCard__Flipper {\\n -webkit-transition: 0.6s;\\n -webkit-transform-style: preserve-3d;\\n -ms-transition: 0.6s;\\n\\n -moz-transition: 0.6s;\\n -moz-transform: perspective(1000px);\\n -moz-transform-style: preserve-3d;\\n -ms-transform-style: preserve-3d;\\n\\n transition: 0.6s;\\n transform-style: preserve-3d;\\n\\n position: relative;\\n}\\n\\n.ReactFlipCard__Front, .ReactFlipCard__Back {\\n -webkit-backface-visibility: hidden;\\n -moz-backface-visibility: hidden;\\n -ms-backface-visibility: hidden;\\n backface-visibility: hidden;\\n\\n -webkit-transition: 0.6s;\\n -webkit-transform-style: preserve-3d;\\n -webkit-transform: rotateY(0deg);\\n\\n -moz-transition: 0.6s;\\n -moz-transform-style: preserve-3d;\\n -moz-transform: rotateY(0deg);\\n\\n -o-transition: 0.6s;\\n -o-transform-style: preserve-3d;\\n -o-transform: rotateY(0deg);\\n\\n -ms-transition: 0.6s;\\n -ms-transform-style: preserve-3d;\\n -ms-transform: rotateY(0deg);\\n\\n transition: 0.6s;\\n transform-style: preserve-3d;\\n transform: rotateY(0deg);\\n\\n position: absolute;\\n top: 0;\\n left: 0;\\n}\\n\\n.ReactFlipCard__Front {\\n -webkit-transform: rotateY(0deg);\\n -moz-transform: rotateY(0deg);\\n -ms-transform: rotateY(0deg);\\n -o-transform: rotateY(0deg);\\n z-index: 2;\\n}\\n\\n.ReactFlipCard__Back {\\n -webkit-transform: rotateY(-180deg);\\n -moz-transform: rotateY(-180deg);\\n -ms-transform: rotateY(-180deg);\\n -o-transform: rotateY(-180deg);\\n transform: rotateY(-180deg);\\n}\\n\\n/* vertical */\\n.ReactFlipCard--vertical {\\n position: relative;\\n}\\n\\n.ReactFlipCard--vertical .ReactFlipCard__Back {\\n -webkit-transform: rotateX(180deg);\\n -moz-transform: rotateX(180deg);\\n -ms-transform: rotateX(180deg);\\n -o-transform: rotateX(180deg);\\n transform: rotateX(180deg);\\n}\\n\\n.ReactFlipCard--vertical .ReactFlipCard__Flipper {\\n -webkit-transform-origin: 100% 150px;\\n -moz-transform-origin: 100% 150px;\\n -ms-transform-origin: 100% 150px;\\n -o-transform-origin: 100% 150px;\\n transform-origin: 100% 150px;\\n}\\n\\n/* START: Accommodating for IE */\\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Back,\\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Back {\\n -webkit-transform: rotateX(0deg);\\n -moz-transform: rotateX(0deg);\\n -ms-transform: rotateX(0deg);\\n -o-transform: rotateX(0deg);\\n transform: rotateX(0deg);\\n}\\n\\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Front,\\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Front {\\n -webkit-transform: rotateX(180deg);\\n -moz-transform: rotateX(180deg);\\n -ms-transform: rotateX(180deg);\\n -o-transform: rotateX(180deg);\\n transform: rotateX(180deg);\\n}\\n/* END: Accommodating for IE */\\n';\n\t\n\texports['default'] = function () {\n\t var style = document.getElementById('react-flipcard-style');\n\t if (!style) {\n\t style = document.createElement('style');\n\t style.setAttribute('id', 'react-flipcard-style');\n\t var head = document.querySelector('head');\n\t head.insertBefore(style, head.firstChild);\n\t }\n\t style.innerHTML = CSS;\n\t};\n\t\n\tmodule.exports = exports['default'];\n\n/***/ }\n/******/ ])\n});\n;\n\n\n/** WEBPACK FOOTER **\n ** ./dist/react-flipcard.min.js\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 3d40a73e09345c156ac8\n **/","module.exports = require('./components/FlipCard');\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/main.js\n **/","import React, { PropTypes } from 'react';\nimport { findDOMNode } from 'react-dom';\nimport cx from 'classnames';\nimport contains from '../helpers/contains';\nimport injectStyle from '../helpers/injectStyle';\n\n// Auto inject the styles (will only be done once)\ninjectStyle();\n\nexport default React.createClass({\n displayName: 'ReactFlipCard',\n\n propTypes: {\n type: PropTypes.string,\n flipped: PropTypes.bool,\n disabled: PropTypes.bool,\n onFlip: PropTypes.func,\n onKeyDown: PropTypes.func,\n containerStyle: PropTypes.object,\n children(props, propName, componentName) {\n const prop = props[propName];\n\n if (React.Children.count(prop) !== 2) {\n return new Error(\n '`' + componentName + '` ' +\n 'should contain exactly two children. ' +\n 'The first child represents the front of the card. ' +\n 'The second child represents the back of the card.'\n );\n }\n }\n },\n\n getDefaultProps() {\n return {\n type: 'horizontal',\n flipped: false,\n disabled: false\n };\n },\n\n getInitialState() {\n return {\n hasFocus: false,\n isFlipped: this.props.flipped\n };\n },\n\n componentDidMount() {\n this._hideFlippedSide();\n },\n\n componentWillReceiveProps(newProps) {\n // Make sure both sides are displayed for animation\n this._showBothSides();\n\n // Wait for display above to take effect\n setTimeout(() => {\n this.setState({\n isFlipped: newProps.flipped\n });\n }, 0);\n },\n\n componentWillUpdate(nextProps, nextState) {\n // If card is flipping to back via props, track element for focus\n if (!this.props.flipped && nextProps.flipped) {\n // The element that focus will return to when flipped back to front\n this.focusElement = document.activeElement;\n // Indicates that the back of card needs focus\n this.focusBack = true;\n }\n\n // If isFlipped has changed need to notify\n if (this.state.isFlipped !== nextState.isFlipped) {\n this.notifyFlip = true;\n }\n },\n\n componentDidUpdate() {\n // If card has flipped to front, and focus is still within the card\n // return focus to the element that triggered flipping to the back.\n if (!this.props.flipped &&\n this.focusElement &&\n contains(findDOMNode(this), document.activeElement)\n ) {\n this.focusElement.focus();\n this.focusElement = null;\n }\n // Direct focus to the back if needed\n /* eslint brace-style:0 */\n else if (this.focusBack) {\n this.refs.back.focus();\n this.focusBack = false;\n }\n\n // Notify card being flipped\n if (this.notifyFlip && typeof this.props.onFlip === 'function') {\n this.props.onFlip(this.state.isFlipped);\n this.notifyFlip = false;\n }\n\n // Hide whichever side of the card is down\n setTimeout(this._hideFlippedSide, 600);\n },\n\n handleFocus() {\n if (this.props.disabled) return;\n\n this.setState({\n isFlipped: true\n });\n },\n\n handleBlur() {\n if (this.props.disabled) return;\n\n this.setState({\n isFlipped: false\n });\n },\n\n handleKeyDown(e) {\n if (typeof this.props.onKeyDown === 'function') {\n this.props.onKeyDown(e);\n }\n },\n\n render() {\n return (\n \n \n \n {this.props.children[0]}\n \n \n {this.props.children[1]}\n \n \n \n );\n },\n\n _showBothSides() {\n this.refs.front.style.display = '';\n this.refs.back.style.display = '';\n },\n\n _hideFlippedSide() {\n // This prevents the flipped side from being tabbable\n if (this.props.disabled && this.refs.front && this.refs.back) {\n if (this.state.isFlipped) {\n this.refs.front.style.display = 'none';\n } else {\n this.refs.back.style.display = 'none';\n }\n }\n }\n});\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/components/FlipCard.js\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_2__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"React\"\n ** module id = 2\n ** module chunks = 0\n **/","module.exports = __WEBPACK_EXTERNAL_MODULE_3__;\n\n\n/*****************\n ** WEBPACK FOOTER\n ** external \"ReactDOM\"\n ** module id = 3\n ** module chunks = 0\n **/","/*!\n Copyright (c) 2016 Jed Watson.\n Licensed under the MIT License (MIT), see\n http://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = [];\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (!arg) continue;\n\n\t\t\tvar argType = typeof arg;\n\n\t\t\tif (argType === 'string' || argType === 'number') {\n\t\t\t\tclasses.push(arg);\n\t\t\t} else if (Array.isArray(arg)) {\n\t\t\t\tclasses.push(classNames.apply(null, arg));\n\t\t\t} else if (argType === 'object') {\n\t\t\t\tfor (var key in arg) {\n\t\t\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\t\t\tclasses.push(key);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn classes.join(' ');\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/classnames/index.js\n ** module id = 4\n ** module chunks = 0\n **/","// Checks to see if a parent element contains a child element\n/* eslint no-param-reassign:0, no-cond-assign:0 */\nmodule.exports = function contains(parent, child) {\n do {\n if (parent === child) {\n return true;\n }\n } while (child && (child = child.parentNode));\n return false;\n};\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/helpers/contains.js\n **/","const CSS = `\n.ReactFlipCard {\n -webkit-perspective: 1000;\n -moz-perspective: 1000;\n -ms-perspective: 1000;\n perspective: 1000;\n\n -ms-transform: perspective(1000px);\n -moz-transform: perspective(1000px);\n -moz-transform-style: preserve-3d;\n -ms-transform-style: preserve-3d;\n\n display: inline-block;\n}\n\n/* START: Accommodating for IE */\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Back,\n.ReactFlipCard--flipped .ReactFlipCard__Back {\n -webkit-transform: rotateY(0deg);\n -moz-transform: rotateY(0deg);\n -ms-transform: rotateY(0deg);\n -o-transform: rotateY(0deg);\n transform: rotateY(0deg);\n}\n\n.ReactFlipCard--enabled.ReactFlipCard:hover .ReactFlipCard__Front,\n.ReactFlipCard--flipped .ReactFlipCard__Front {\n -webkit-transform: rotateY(180deg);\n -moz-transform: rotateY(180deg);\n -ms-transform: rotateY(180deg);\n -o-transform: rotateY(180deg);\n transform: rotateY(180deg);\n}\n/* END: Accommodating for IE */\n\n.ReactFlipCard__Flipper {\n -webkit-transition: 0.6s;\n -webkit-transform-style: preserve-3d;\n -ms-transition: 0.6s;\n\n -moz-transition: 0.6s;\n -moz-transform: perspective(1000px);\n -moz-transform-style: preserve-3d;\n -ms-transform-style: preserve-3d;\n\n transition: 0.6s;\n transform-style: preserve-3d;\n\n position: relative;\n}\n\n.ReactFlipCard__Front, .ReactFlipCard__Back {\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -ms-backface-visibility: hidden;\n backface-visibility: hidden;\n\n -webkit-transition: 0.6s;\n -webkit-transform-style: preserve-3d;\n -webkit-transform: rotateY(0deg);\n\n -moz-transition: 0.6s;\n -moz-transform-style: preserve-3d;\n -moz-transform: rotateY(0deg);\n\n -o-transition: 0.6s;\n -o-transform-style: preserve-3d;\n -o-transform: rotateY(0deg);\n\n -ms-transition: 0.6s;\n -ms-transform-style: preserve-3d;\n -ms-transform: rotateY(0deg);\n\n transition: 0.6s;\n transform-style: preserve-3d;\n transform: rotateY(0deg);\n\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.ReactFlipCard__Front {\n -webkit-transform: rotateY(0deg);\n -moz-transform: rotateY(0deg);\n -ms-transform: rotateY(0deg);\n -o-transform: rotateY(0deg);\n z-index: 2;\n}\n\n.ReactFlipCard__Back {\n -webkit-transform: rotateY(-180deg);\n -moz-transform: rotateY(-180deg);\n -ms-transform: rotateY(-180deg);\n -o-transform: rotateY(-180deg);\n transform: rotateY(-180deg);\n}\n\n/* vertical */\n.ReactFlipCard--vertical {\n position: relative;\n}\n\n.ReactFlipCard--vertical .ReactFlipCard__Back {\n -webkit-transform: rotateX(180deg);\n -moz-transform: rotateX(180deg);\n -ms-transform: rotateX(180deg);\n -o-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n\n.ReactFlipCard--vertical .ReactFlipCard__Flipper {\n -webkit-transform-origin: 100% 150px;\n -moz-transform-origin: 100% 150px;\n -ms-transform-origin: 100% 150px;\n -o-transform-origin: 100% 150px;\n transform-origin: 100% 150px;\n}\n\n/* START: Accommodating for IE */\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Back,\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Back {\n -webkit-transform: rotateX(0deg);\n -moz-transform: rotateX(0deg);\n -ms-transform: rotateX(0deg);\n -o-transform: rotateX(0deg);\n transform: rotateX(0deg);\n}\n\n.ReactFlipCard--enabled.ReactFlipCard--vertical:hover .ReactFlipCard__Front,\n.ReactFlipCard--vertical.ReactFlipCard--flipped .ReactFlipCard__Front {\n -webkit-transform: rotateX(180deg);\n -moz-transform: rotateX(180deg);\n -ms-transform: rotateX(180deg);\n -o-transform: rotateX(180deg);\n transform: rotateX(180deg);\n}\n/* END: Accommodating for IE */\n`;\n\nexport default function() {\n let style = document.getElementById('react-flipcard-style');\n if (!style) {\n style = document.createElement('style');\n style.setAttribute('id', 'react-flipcard-style');\n const head = document.querySelector('head');\n head.insertBefore(style, head.firstChild);\n }\n style.innerHTML = CSS;\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./lib/helpers/injectStyle.js\n **/"],"sourceRoot":""} \ No newline at end of file diff --git a/lib/components/FlipCard.js b/lib/components/FlipCard.js index f3979ee..91806c5 100644 --- a/lib/components/FlipCard.js +++ b/lib/components/FlipCard.js @@ -16,6 +16,7 @@ export default React.createClass({ disabled: PropTypes.bool, onFlip: PropTypes.func, onKeyDown: PropTypes.func, + containerStyle: PropTypes.object, children(props, propName, componentName) { const prop = props[propName]; @@ -135,6 +136,7 @@ export default React.createClass({ 'ReactFlipCard--flipped': this.state.isFlipped, 'ReactFlipCard--enabled': !this.props.disabled })} + style={this.props.containerStyle} tabIndex={0} onFocus={this.handleFocus} onBlur={this.handleBlur} @@ -171,7 +173,7 @@ export default React.createClass({ _hideFlippedSide() { // This prevents the flipped side from being tabbable - if (this.props.disabled) { + if (this.props.disabled && this.refs.front && this.refs.back) { if (this.state.isFlipped) { this.refs.front.style.display = 'none'; } else {