From 574a066170f5fc291951c8ae7d7e8160612e6c37 Mon Sep 17 00:00:00 2001 From: Jer Date: Sat, 15 Jul 2017 13:34:45 -0500 Subject: [PATCH] remove compiled files --- DropModal.js | 142 --------------------------- FadeModal.js | 110 --------------------- FlyModal.js | 125 ------------------------ OutlineModal.js | 161 ------------------------------ ScaleModal.js | 113 --------------------- WaveModal.js | 255 ------------------------------------------------ modalFactory.js | 238 -------------------------------------------- package.json | 2 +- 8 files changed, 1 insertion(+), 1145 deletions(-) delete mode 100644 DropModal.js delete mode 100644 FadeModal.js delete mode 100644 FlyModal.js delete mode 100644 OutlineModal.js delete mode 100644 ScaleModal.js delete mode 100644 WaveModal.js delete mode 100644 modalFactory.js diff --git a/DropModal.js b/DropModal.js deleted file mode 100644 index c46f43e..0000000 --- a/DropModal.js +++ /dev/null @@ -1,142 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _modalFactory = require('./modalFactory'); - -var _modalFactory2 = _interopRequireDefault(_modalFactory); - -var _insertKeyframesRule = require('domkit/insertKeyframesRule'); - -var _insertKeyframesRule2 = _interopRequireDefault(_insertKeyframesRule); - -var _appendVendorPrefix = require('domkit/appendVendorPrefix'); - -var _appendVendorPrefix2 = _interopRequireDefault(_appendVendorPrefix); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var animation = { - show: { - animationDuration: '0.4s', - animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)' - }, - hide: { - animationDuration: '0.4s', - animationTimingFunction: 'cubic-bezier(0.7,0,0.3,1)' - }, - showModalAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0, - transform: 'translate(-50%, -300px)' - }, - '100%': { - opacity: 1, - transform: 'translate(-50%, -50%)' - } - }), - hideModalAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 1, - transform: 'translate(-50%, -50%)' - }, - '100%': { - opacity: 0, - transform: 'translate(-50%, 100px)' - } - }), - showBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0 - }, - '100%': { - opacity: 0.9 - } - }), - hideBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0.9 - }, - '100%': { - opacity: 0 - } - }), - showContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0, - transform: 'translate(0, -20px)' - }, - '100%': { - opacity: 1, - transform: 'translate(0, 0)' - } - }), - hideContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 1, - transform: 'translate(0, 0)' - }, - '100%': { - opacity: 0, - transform: 'translate(0, 50px)' - } - }) -}; - -var showAnimation = animation.show; -var hideAnimation = animation.hide; -var showModalAnimation = animation.showModalAnimation; -var hideModalAnimation = animation.hideModalAnimation; -var showBackdropAnimation = animation.showBackdropAnimation; -var hideBackdropAnimation = animation.hideBackdropAnimation; -var showContentAnimation = animation.showContentAnimation; -var hideContentAnimation = animation.hideContentAnimation; - -exports.default = (0, _modalFactory2.default)({ - getRef: function getRef(willHidden) { - return 'modal'; - }, - getModalStyle: function getModalStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - position: 'fixed', - width: '500px', - transform: 'translate(-50%, -50%)', - top: '50%', - left: '50%', - backgroundColor: 'white', - zIndex: 1050, - animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration, - animationFillMode: 'forwards', - animationName: willHidden ? hideModalAnimation : showModalAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - }, - getBackdropStyle: function getBackdropStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - zIndex: 1040, - backgroundColor: '#373A47', - animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration, - animationFillMode: 'forwards', - animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - }, - getContentStyle: function getContentStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - margin: 0, - opacity: 0, - animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration, - animationFillMode: 'forwards', - animationDelay: '0.25s', - animationName: showContentAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - } -}); diff --git a/FadeModal.js b/FadeModal.js deleted file mode 100644 index 694d6e5..0000000 --- a/FadeModal.js +++ /dev/null @@ -1,110 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _modalFactory = require('./modalFactory'); - -var _modalFactory2 = _interopRequireDefault(_modalFactory); - -var _insertKeyframesRule = require('domkit/insertKeyframesRule'); - -var _insertKeyframesRule2 = _interopRequireDefault(_insertKeyframesRule); - -var _appendVendorPrefix = require('domkit/appendVendorPrefix'); - -var _appendVendorPrefix2 = _interopRequireDefault(_appendVendorPrefix); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var animation = { - show: { - animationDuration: '0.3s', - animationTimingFunction: 'ease-out' - }, - hide: { - animationDuration: '0.3s', - animationTimingFunction: 'ease-out' - }, - showContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0 - }, - '100%': { - opacity: 1 - } - }), - hideContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 1 - }, - '100%': { - opacity: 0 - } - }), - showBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0 - }, - '100%': { - opacity: 0.9 - } - }), - hideBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0.9 - }, - '100%': { - opacity: 0 - } - }) -}; - -var showAnimation = animation.show; -var hideAnimation = animation.hide; -var showContentAnimation = animation.showContentAnimation; -var hideContentAnimation = animation.hideContentAnimation; -var showBackdropAnimation = animation.showBackdropAnimation; -var hideBackdropAnimation = animation.hideBackdropAnimation; - -exports.default = (0, _modalFactory2.default)({ - getRef: function getRef(willHidden) { - return 'content'; - }, - getModalStyle: function getModalStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - zIndex: 1050, - position: 'fixed', - width: '500px', - transform: 'translate3d(-50%, -50%, 0)', - top: '50%', - left: '50%' - }); - }, - getBackdropStyle: function getBackdropStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - zIndex: 1040, - backgroundColor: '#373A47', - animationFillMode: 'forwards', - animationDuration: '0.3s', - animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - }, - getContentStyle: function getContentStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - margin: 0, - backgroundColor: 'white', - animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration, - animationFillMode: 'forwards', - animationName: willHidden ? hideContentAnimation : showContentAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - } -}); diff --git a/FlyModal.js b/FlyModal.js deleted file mode 100644 index 3b68226..0000000 --- a/FlyModal.js +++ /dev/null @@ -1,125 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _modalFactory = require('./modalFactory'); - -var _modalFactory2 = _interopRequireDefault(_modalFactory); - -var _insertKeyframesRule = require('domkit/insertKeyframesRule'); - -var _insertKeyframesRule2 = _interopRequireDefault(_insertKeyframesRule); - -var _appendVendorPrefix = require('domkit/appendVendorPrefix'); - -var _appendVendorPrefix2 = _interopRequireDefault(_appendVendorPrefix); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var animation = { - show: { - animationDuration: '0.5s', - animationTimingFunction: 'ease-out' - }, - hide: { - animationDuration: '0.5s', - animationTimingFunction: 'ease-out' - }, - showContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0, - transform: 'translate3d(calc(-100vw - 50%), 0, 0)' - }, - '50%': { - opacity: 1, - transform: 'translate3d(100px, 0, 0)' - }, - '100%': { - opacity: 1, - transform: 'translate3d(0, 0, 0)' - } - }), - hideContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 1, - transform: 'translate3d(0, 0, 0)' - }, - '50%': { - opacity: 1, - transform: 'translate3d(-100px, 0, 0) scale3d(1.1, 1.1, 1)' - }, - '100%': { - opacity: 0, - transform: 'translate3d(calc(100vw + 50%), 0, 0)' - } - }), - showBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0 - }, - '100%': { - opacity: 0.9 - } - }), - hideBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0.9 - }, - '90%': { - opactiy: 0.9 - }, - '100%': { - opacity: 0 - } - }) -}; - -var showAnimation = animation.show; -var hideAnimation = animation.hide; -var showContentAnimation = animation.showContentAnimation; -var hideContentAnimation = animation.hideContentAnimation; -var showBackdropAnimation = animation.showBackdropAnimation; -var hideBackdropAnimation = animation.hideBackdropAnimation; - -exports.default = (0, _modalFactory2.default)({ - getRef: function getRef(willHidden) { - return 'content'; - }, - getModalStyle: function getModalStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - zIndex: 1050, - position: 'fixed', - width: '500px', - transform: 'translate3d(-50%, -50%, 0)', - top: '50%', - left: '50%' - }); - }, - getBackdropStyle: function getBackdropStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - zIndex: 1040, - backgroundColor: '#373A47', - animationFillMode: 'forwards', - animationDuration: '0.3s', - animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - }, - getContentStyle: function getContentStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - margin: 0, - backgroundColor: 'white', - animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration, - animationFillMode: 'forwards', - animationName: willHidden ? hideContentAnimation : showContentAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - } -}); diff --git a/OutlineModal.js b/OutlineModal.js deleted file mode 100644 index dceed3f..0000000 --- a/OutlineModal.js +++ /dev/null @@ -1,161 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _modalFactory = require('./modalFactory'); - -var _modalFactory2 = _interopRequireDefault(_modalFactory); - -var _insertKeyframesRule = require('domkit/insertKeyframesRule'); - -var _insertKeyframesRule2 = _interopRequireDefault(_insertKeyframesRule); - -var _appendVendorPrefix = require('domkit/appendVendorPrefix'); - -var _appendVendorPrefix2 = _interopRequireDefault(_appendVendorPrefix); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var animation = { - show: { - animationDuration: '0.8s', - animationTimingFunction: 'cubic-bezier(0.6,0,0.4,1)' - }, - hide: { - animationDuration: '0.4s', - animationTimingFunction: 'ease-out' - }, - showContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0 - }, - '40%': { - opacity: 0 - }, - '100%': { - opacity: 1 - } - }), - hideContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 1 - }, - '100%': { - opacity: 0 - } - }), - showBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0 - }, - '100%': { - opacity: 0.9 - } - }), - hideBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0.9 - }, - '100%': { - opacity: 0 - } - }) -}; - -var showAnimation = animation.show; -var hideAnimation = animation.hide; -var showContentAnimation = animation.showContentAnimation; -var hideContentAnimation = animation.hideContentAnimation; -var showBackdropAnimation = animation.showBackdropAnimation; -var hideBackdropAnimation = animation.hideBackdropAnimation; - -exports.default = (0, _modalFactory2.default)({ - getRef: function getRef(willHidden) { - return 'content'; - }, - getSharp: function getSharp(willHidden) { - var strokeDashLength = 1680; - var showSharpAnimation = (0, _insertKeyframesRule2.default)({ - '0%': { - 'stroke-dashoffset': strokeDashLength - }, - '100%': { - 'stroke-dashoffset': 0 - } - }); - var sharpStyle = { - position: 'absolute', - width: 'calc(100%)', - height: 'calc(100%)', - zIndex: '-1' - }; - var rectStyle = (0, _appendVendorPrefix2.default)({ - animationDuration: willHidden ? '0.4s' : '0.8s', - animationFillMode: 'forwards', - animationName: willHidden ? hideContentAnimation : showSharpAnimation, - stroke: '#ffffff', - strokeWidth: '2px', - strokeDasharray: strokeDashLength - }); - - return _react2.default.createElement( - 'div', - { style: sharpStyle }, - _react2.default.createElement( - 'svg', - { xmlns: 'http://www.w3.org/2000/svg', - width: '100%', - height: '100%', - viewBox: '0 0 496 136', - preserveAspectRatio: 'none' }, - _react2.default.createElement('rect', { style: rectStyle, - x: '2', - y: '2', - fill: 'none', - width: '492', - height: '132' }) - ) - ); - }, - getModalStyle: function getModalStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - zIndex: 1050, - position: 'fixed', - width: '500px', - transform: 'translate3d(-50%, -50%, 0)', - top: '50%', - left: '50%' - }); - }, - getBackdropStyle: function getBackdropStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - zIndex: 1040, - backgroundColor: '#373A47', - animationFillMode: 'forwards', - animationDuration: '0.4s', - animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - }, - getContentStyle: function getContentStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - margin: 0, - backgroundColor: 'white', - animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration, - animationFillMode: 'forwards', - animationName: willHidden ? hideContentAnimation : showContentAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - } -}); diff --git a/ScaleModal.js b/ScaleModal.js deleted file mode 100644 index 37f17ab..0000000 --- a/ScaleModal.js +++ /dev/null @@ -1,113 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _modalFactory = require('./modalFactory'); - -var _modalFactory2 = _interopRequireDefault(_modalFactory); - -var _insertKeyframesRule = require('domkit/insertKeyframesRule'); - -var _insertKeyframesRule2 = _interopRequireDefault(_insertKeyframesRule); - -var _appendVendorPrefix = require('domkit/appendVendorPrefix'); - -var _appendVendorPrefix2 = _interopRequireDefault(_appendVendorPrefix); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var animation = { - show: { - animationDuration: '0.4s', - animationTimingFunction: 'cubic-bezier(0.6,0,0.4,1)' - }, - hide: { - animationDuration: '0.4s', - animationTimingFunction: 'ease-out' - }, - showContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0, - transform: 'scale3d(0, 0, 1)' - }, - '100%': { - opacity: 1, - transform: 'scale3d(1, 1, 1)' - } - }), - hideContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 1 - }, - '100%': { - opacity: 0, - transform: 'scale3d(0.5, 0.5, 1)' - } - }), - showBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0 - }, - '100%': { - opacity: 0.9 - } - }), - hideBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0.9 - }, - '100%': { - opacity: 0 - } - }) -}; - -var showAnimation = animation.show; -var hideAnimation = animation.hide; -var showContentAnimation = animation.showContentAnimation; -var hideContentAnimation = animation.hideContentAnimation; -var showBackdropAnimation = animation.showBackdropAnimation; -var hideBackdropAnimation = animation.hideBackdropAnimation; - -exports.default = (0, _modalFactory2.default)({ - getRef: function getRef(willHidden) { - return 'content'; - }, - getModalStyle: function getModalStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - zIndex: 1050, - position: 'fixed', - width: '500px', - transform: 'translate3d(-50%, -50%, 0)', - top: '50%', - left: '50%' - }); - }, - getBackdropStyle: function getBackdropStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - zIndex: 1040, - backgroundColor: '#373A47', - animationFillMode: 'forwards', - animationDuration: '0.4s', - animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - }, - getContentStyle: function getContentStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - margin: 0, - backgroundColor: 'white', - animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration, - animationFillMode: 'forwards', - animationName: willHidden ? hideContentAnimation : showContentAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - } -}); diff --git a/WaveModal.js b/WaveModal.js deleted file mode 100644 index efc1190..0000000 --- a/WaveModal.js +++ /dev/null @@ -1,255 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _modalFactory = require('./modalFactory'); - -var _modalFactory2 = _interopRequireDefault(_modalFactory); - -var _insertKeyframesRule = require('domkit/insertKeyframesRule'); - -var _insertKeyframesRule2 = _interopRequireDefault(_insertKeyframesRule); - -var _appendVendorPrefix = require('domkit/appendVendorPrefix'); - -var _appendVendorPrefix2 = _interopRequireDefault(_appendVendorPrefix); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var animation = { - show: { - animationDuration: '1s', - animationTimingFunction: 'linear' - }, - hide: { - animationDuration: '0.3s', - animationTimingFunction: 'ease-out' - }, - showContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0, - transform: 'matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '2.083333%': { - transform: 'matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '4.166667%': { - transform: 'matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '6.25%': { - transform: 'matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '8.333333%': { - transform: 'matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '10.416667%': { - transform: 'matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '12.5%': { - transform: 'matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '14.583333%': { - transform: 'matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '16.666667%': { - transform: 'matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '18.75%': { - transform: 'matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '20.833333%': { - transform: 'matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '22.916667%': { - transform: 'matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '25%': { - transform: 'matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '27.083333%': { - transform: 'matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '29.166667%': { - transform: 'matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '31.25%': { - transform: 'matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '33.333333%': { - transform: 'matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '35.416667%': { - transform: 'matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '37.5%': { - transform: 'matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '39.583333%': { - transform: 'matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '41.666667%': { - transform: 'matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '43.75%': { - transform: 'matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '45.833333%': { - transform: 'matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '47.916667%': { - transform: 'matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '50%': { - opacity: 1, - transform: 'matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '52.083333%': { - transform: 'matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '54.166667%': { - transform: 'matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '56.25%': { - transform: 'matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '58.333333%': { - transform: 'matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '60.416667%': { - transform: 'matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '62.5%': { - transform: 'matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '64.583333%': { - transform: 'matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '66.666667%': { - transform: 'matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '68.75%': { - transform: 'matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '70.833333%': { - transform: 'matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '72.916667%': { - transform: 'matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '75%': { - transform: 'matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '77.083333%': { - transform: 'matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '79.166667%': { - transform: 'matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '81.25%': { - transform: 'matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '83.333333%': { - transform: 'matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '85.416667%': { - transform: 'matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '87.5%': { - transform: 'matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '89.583333%': { - transform: 'matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '91.666667%': { - transform: 'matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '93.75%': { - transform: 'matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '95.833333%': { - transform: 'matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '97.916667%': { - transform: 'matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - }, - '100%': { - opacity: 1, - transform: 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' - } - }), - hideContentAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 1 - }, - '100%': { - opacity: 0, - transform: 'scale3d(0.8, 0.8, 1)' - } - }), - showBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0 - }, - '100%': { - opacity: 0.9 - } - }), - hideBackdropAnimation: (0, _insertKeyframesRule2.default)({ - '0%': { - opacity: 0.9 - }, - '100%': { - opacity: 0 - } - }) -}; - -var showAnimation = animation.show; -var hideAnimation = animation.hide; -var showContentAnimation = animation.showContentAnimation; -var hideContentAnimation = animation.hideContentAnimation; -var showBackdropAnimation = animation.showBackdropAnimation; -var hideBackdropAnimation = animation.hideBackdropAnimation; - -exports.default = (0, _modalFactory2.default)({ - getRef: function getRef(willHidden) { - return 'content'; - }, - getModalStyle: function getModalStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - zIndex: 1050, - position: 'fixed', - width: '500px', - transform: 'translate3d(-50%, -50%, 0)', - top: '50%', - left: '50%' - }); - }, - getBackdropStyle: function getBackdropStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - position: 'fixed', - top: 0, - right: 0, - bottom: 0, - left: 0, - zIndex: 1040, - backgroundColor: '#373A47', - animationFillMode: 'forwards', - animationDuration: '0.3s', - animationName: willHidden ? hideBackdropAnimation : showBackdropAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - }, - getContentStyle: function getContentStyle(willHidden) { - return (0, _appendVendorPrefix2.default)({ - margin: 0, - backgroundColor: 'white', - animationDuration: (willHidden ? hideAnimation : showAnimation).animationDuration, - animationFillMode: 'forwards', - animationName: willHidden ? hideContentAnimation : showContentAnimation, - animationTimingFunction: (willHidden ? hideAnimation : showAnimation).animationTimingFunction - }); - } -}); diff --git a/modalFactory.js b/modalFactory.js deleted file mode 100644 index 68289c4..0000000 --- a/modalFactory.js +++ /dev/null @@ -1,238 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); - -var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); - -var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); - -var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); - -var _createClass2 = require('babel-runtime/helpers/createClass'); - -var _createClass3 = _interopRequireDefault(_createClass2); - -var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); - -var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); - -var _inherits2 = require('babel-runtime/helpers/inherits'); - -var _inherits3 = _interopRequireDefault(_inherits2); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _transitionEvents = require('domkit/transitionEvents'); - -var _transitionEvents2 = _interopRequireDefault(_transitionEvents); - -var _appendVendorPrefix = require('domkit/appendVendorPrefix'); - -var _appendVendorPrefix2 = _interopRequireDefault(_appendVendorPrefix); - -var _propTypes = require('prop-types'); - -var _propTypes2 = _interopRequireDefault(_propTypes); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -exports.default = function (animation) { - var Factory = function (_Component) { - (0, _inherits3.default)(Factory, _Component); - - function Factory(props) { - (0, _classCallCheck3.default)(this, Factory); - - var _this = (0, _possibleConstructorReturn3.default)(this, (Factory.__proto__ || (0, _getPrototypeOf2.default)(Factory)).call(this, props)); - - _this.state = { - willHidden: false, - hidden: true - }; - - _this.hasHidden = _this.hasHidden.bind(_this); - _this.handleBackdropClick = _this.handleBackdropClick.bind(_this); - _this.leave = _this.leave.bind(_this); - _this.enter = _this.enter.bind(_this); - _this.show = _this.show.bind(_this); - _this.hide = _this.hide.bind(_this); - _this.toggle = _this.toggle.bind(_this); - _this.listenKeyboard = _this.listenKeyboard.bind(_this); - return _this; - } - - (0, _createClass3.default)(Factory, [{ - key: 'hasHidden', - value: function hasHidden() { - return this.state.hidden; - } - }, { - key: 'addTransitionListener', - value: function addTransitionListener(node, handle) { - if (node) { - var endListener = function endListener(e) { - if (e && e.target !== node) { - return; - } - _transitionEvents2.default.removeEndEventListener(node, endListener); - handle(); - }; - _transitionEvents2.default.addEndEventListener(node, endListener); - } - } - }, { - key: 'handleBackdropClick', - value: function handleBackdropClick() { - if (this.props.closeOnClick) { - this.hide(); - } - } - }, { - key: 'render', - value: function render() { - var hidden = this.hasHidden(); - if (hidden) return null; - - var willHidden = this.state.willHidden; - var animation = this.props.animation; - var modalStyle = animation.getModalStyle(willHidden); - var backdropStyle = animation.getBackdropStyle(willHidden); - var contentStyle = animation.getContentStyle(willHidden); - var ref = animation.getRef(willHidden); - var sharp = animation.getSharp && animation.getSharp(willHidden); - - // Apply custom style properties - if (this.props.modalStyle) { - var prefixedModalStyle = (0, _appendVendorPrefix2.default)(this.props.modalStyle); - for (var style in prefixedModalStyle) { - modalStyle[style] = prefixedModalStyle[style]; - } - } - - if (this.props.backdropStyle) { - var prefixedBackdropStyle = (0, _appendVendorPrefix2.default)(this.props.backdropStyle); - for (var _style in prefixedBackdropStyle) { - backdropStyle[_style] = prefixedBackdropStyle[_style]; - } - } - - if (this.props.contentStyle) { - var prefixedContentStyle = (0, _appendVendorPrefix2.default)(this.props.contentStyle); - for (var _style2 in prefixedContentStyle) { - contentStyle[_style2] = prefixedContentStyle[_style2]; - } - } - - var backdrop = this.props.backdrop ? _react2.default.createElement('div', { style: backdropStyle, onClick: this.props.closeOnClick ? this.handleBackdropClick : null }) : undefined; - - if (willHidden) { - var node = this.refs[ref]; - this.addTransitionListener(node, this.leave); - } - - return _react2.default.createElement('span', null, _react2.default.createElement('div', { ref: 'modal', style: modalStyle, className: this.props.className }, sharp, _react2.default.createElement('div', { ref: 'content', tabIndex: '-1', style: contentStyle }, this.props.children)), backdrop); - } - }, { - key: 'leave', - value: function leave() { - this.setState({ - hidden: true - }); - this.props.onHide(); - } - }, { - key: 'enter', - value: function enter() { - this.props.onShow(); - } - }, { - key: 'show', - value: function show() { - if (!this.hasHidden()) return; - - this.setState({ - willHidden: false, - hidden: false - }); - - setTimeout(function () { - var ref = this.props.animation.getRef(); - var node = this.refs[ref]; - this.addTransitionListener(node, this.enter); - }.bind(this), 0); - } - }, { - key: 'hide', - value: function hide() { - if (this.hasHidden()) return; - - this.setState({ - willHidden: true - }); - } - }, { - key: 'toggle', - value: function toggle() { - if (this.hasHidden()) { - this.show(); - } else { - this.hide(); - } - } - }, { - key: 'listenKeyboard', - value: function listenKeyboard(event) { - if (this.props.keyboard && (event.key === 'Escape' || event.keyCode === 27)) { - this.hide(); - } - } - }, { - key: 'componentDidMount', - value: function componentDidMount() { - window.addEventListener('keydown', this.listenKeyboard, true); - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - window.removeEventListener('keydown', this.listenKeyboard, true); - } - }]); - return Factory; - }(_react.Component); - - ; - - Factory.propTypes = { - className: _propTypes2.default.string, - keyboard: _propTypes2.default.bool, - onShow: _propTypes2.default.func, - onHide: _propTypes2.default.func, - animation: _propTypes2.default.object, - backdrop: _propTypes2.default.bool, - closeOnClick: _propTypes2.default.bool, - modalStyle: _propTypes2.default.object, - backdropStyle: _propTypes2.default.object, - contentStyle: _propTypes2.default.object - }; - - Factory.defaultProps = { - className: '', - onShow: function onShow() {}, - onHide: function onHide() {}, - animation: animation, - keyboard: true, - backdrop: true, - closeOnClick: true, - modalStyle: {}, - backdropStyle: {}, - contentStyle: {} - }; - - return Factory; -}; diff --git a/package.json b/package.json index 075c344..270b637 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reboron", - "version": "0.3.2", + "version": "0.4.0", "description": "A collection of dialog animations with React.js", "main": "Boron.js", "author": "Jeremy Ayerst",