1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
8 |
|
9 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
10 |
|
11 | var _extends2 = require('babel-runtime/helpers/extends');
|
12 |
|
13 | var _extends3 = _interopRequireDefault(_extends2);
|
14 |
|
15 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
16 |
|
17 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
18 |
|
19 | var _createClass2 = require('babel-runtime/helpers/createClass');
|
20 |
|
21 | var _createClass3 = _interopRequireDefault(_createClass2);
|
22 |
|
23 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
24 |
|
25 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
26 |
|
27 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
28 |
|
29 | var _inherits3 = _interopRequireDefault(_inherits2);
|
30 |
|
31 | var _react = require('react');
|
32 |
|
33 | var _react2 = _interopRequireDefault(_react);
|
34 |
|
35 | var _propTypes = require('prop-types');
|
36 |
|
37 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
38 |
|
39 | var _reactDom = require('react-dom');
|
40 |
|
41 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
42 |
|
43 | var _rcTweenOne = require('rc-tween-one');
|
44 |
|
45 | var _rcTweenOne2 = _interopRequireDefault(_rcTweenOne);
|
46 |
|
47 | var _ticker = require('rc-tween-one/lib/ticker');
|
48 |
|
49 | var _ticker2 = _interopRequireDefault(_ticker);
|
50 |
|
51 | var _tweenFunctions = require('tween-functions');
|
52 |
|
53 | var _tweenFunctions2 = _interopRequireDefault(_tweenFunctions);
|
54 |
|
55 | var _styleUtils = require('style-utils');
|
56 |
|
57 | var _BgElement = require('./BgElement');
|
58 |
|
59 | var _BgElement2 = _interopRequireDefault(_BgElement);
|
60 |
|
61 | var _utils = require('./utils');
|
62 |
|
63 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
64 |
|
65 | function noop() {}
|
66 |
|
67 | var Element = function (_Component) {
|
68 | (0, _inherits3['default'])(Element, _Component);
|
69 |
|
70 | function Element(props) {
|
71 | (0, _classCallCheck3['default'])(this, Element);
|
72 |
|
73 | var _this = (0, _possibleConstructorReturn3['default'])(this, (Element.__proto__ || Object.getPrototypeOf(Element)).call(this, props));
|
74 |
|
75 | _initialiseProps.call(_this);
|
76 |
|
77 | _this.state = {
|
78 | show: _this.props.show
|
79 | };
|
80 | _this.tickerId = -1;
|
81 | _this.enterMouse = null;
|
82 | _this.delayTimeout = null;
|
83 | _this.show = _this.state.show;
|
84 | _this.followParallax = _this.props.followParallax;
|
85 | _this.transform = (0, _styleUtils.checkStyleName)('transform');
|
86 | return _this;
|
87 | }
|
88 |
|
89 | (0, _createClass3['default'])(Element, [{
|
90 | key: 'componentDidMount',
|
91 | value: function componentDidMount() {
|
92 | this.dom = _reactDom2['default'].findDOMNode(this);
|
93 | }
|
94 | }, {
|
95 | key: 'componentWillReceiveProps',
|
96 | value: function componentWillReceiveProps(nextProps) {
|
97 | var show = nextProps.show;
|
98 | if (this.tickerId !== -1) {
|
99 | _ticker2['default'].clear(this.tickerId);
|
100 | this.tickerId = -1;
|
101 | }
|
102 | var followParallax = nextProps.followParallax;
|
103 | if (this.followParallax && !followParallax) {
|
104 | this.reFollowParallax();
|
105 | } else {
|
106 | this.followParallax = followParallax;
|
107 | }
|
108 | this.setState({ show: show, mouseMoveType: nextProps.mouseMoveType });
|
109 | }
|
110 | }, {
|
111 | key: 'componentDidUpdate',
|
112 | value: function componentDidUpdate() {
|
113 | if (this.followParallax) {
|
114 | this.doms = this.followParallax.data.map(function (item) {
|
115 | return document.getElementById(item.id);
|
116 | });
|
117 | }
|
118 | }
|
119 | }, {
|
120 | key: 'componentWillUnmount',
|
121 | value: function componentWillUnmount() {
|
122 | _ticker2['default'].clear(this.timeoutID);
|
123 | _ticker2['default'].clear(this.delayTimeout);
|
124 | this.delayTimeout = -1;
|
125 | this.timeoutID = -1;
|
126 | }
|
127 | }, {
|
128 | key: 'render',
|
129 | value: function render() {
|
130 | var _this2 = this;
|
131 |
|
132 | var props = (0, _extends3['default'])({}, this.props, this.props.componentProps);
|
133 | var style = (0, _extends3['default'])({}, props.style);
|
134 | style.display = props.show ? 'block' : 'none';
|
135 | style.position = 'absolute';
|
136 | style.width = '100%';
|
137 | if (this.props.mouseMoveType !== 'end') {
|
138 | style[this.transform] = '';
|
139 | }
|
140 | props.style = style;
|
141 | props.className = ('banner-anim-elem ' + (this.props.prefixCls || '')).trim();
|
142 | var bgElem = (0, _utils.toArrayChildren)(this.props.children).filter(function (item) {
|
143 | return item && item.type.isBannerAnimBgElement;
|
144 | }).map(function (item) {
|
145 | return _react2['default'].cloneElement(item, { show: _this2.state.show });
|
146 | });
|
147 | ['prefixCls', 'callBack', 'animType', 'duration', 'delay', 'ease', 'elemOffset', 'followParallax', 'show', 'type', 'direction', 'leaveChildHide', 'sync', 'ratio', 'mouseMoveType'].forEach(function (key) {
|
148 | return delete props[key];
|
149 | });
|
150 | if (this.show === this.state.show && !this.state.mouseMoveType || this.state.mouseMoveType === 'reChild') {
|
151 | if (!this.state.show) {
|
152 | this.enterMouse = null;
|
153 | return _react2['default'].createElement(_rcTweenOne2['default'], props, bgElem);
|
154 | }
|
155 | if (this.props.followParallax) {
|
156 | props.onMouseMove = this.getFollowMouseMove();
|
157 | }
|
158 | return _react2['default'].createElement(_rcTweenOne2['default'], props, this.props.mouseMoveType === 'update' ? bgElem : this.getChildren());
|
159 | }
|
160 | return this.animChildren(props, style, bgElem);
|
161 | }
|
162 | }]);
|
163 | return Element;
|
164 | }(_react.Component);
|
165 |
|
166 | var _initialiseProps = function _initialiseProps() {
|
167 | var _this3 = this;
|
168 |
|
169 | this.onMouseMove = function (e) {
|
170 | _this3.domRect = _this3.dom.getBoundingClientRect();
|
171 | _this3.enterMouse = _this3.enterMouse || { x: _this3.domRect.width / 2, y: _this3.domRect.height / 2 };
|
172 | _this3.domWH = {
|
173 | w: _this3.domRect.width,
|
174 | h: _this3.domRect.height
|
175 | };
|
176 | _this3.offsetTop = _this3.domRect.top + (0, _utils.currentScrollTop)();
|
177 | _this3.offsetLeft = _this3.domRect.left + (0, _utils.currentScrollLeft)();
|
178 | var mouseXY = {
|
179 | x: e.pageX - _this3.offsetLeft,
|
180 | y: e.pageY - _this3.offsetTop
|
181 | };
|
182 | _this3.setTicker(_this3.followParallax, mouseXY);
|
183 | };
|
184 |
|
185 | this.setTicker = function (followParallax, mouseXY) {
|
186 | var callback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : noop;
|
187 |
|
188 | _ticker2['default'].clear(_this3.tickerId);
|
189 | _this3.tickerId = 'bannerElementTicker' + (Date.now() + Math.random());
|
190 | var startFrame = _ticker2['default'].frame;
|
191 | var startX = _this3.enterMouse.x;
|
192 | var startY = _this3.enterMouse.y;
|
193 | var duration = followParallax.duration || 450;
|
194 | var easeFunc = _tweenFunctions2['default'][followParallax.ease || 'easeOutQuad'];
|
195 | var start = typeof followParallax.minMove === 'number' ? followParallax.minMove : 0.08;
|
196 | _ticker2['default'].wake(_this3.tickerId, function () {
|
197 | var moment = (_ticker2['default'].frame - startFrame) * _ticker2['default'].perFrame;
|
198 | var ratio = easeFunc(moment, start, 1, duration);
|
199 | _this3.enterMouse.x = startX + (mouseXY.x - startX) * ratio;
|
200 | _this3.enterMouse.y = startY + (mouseXY.y - startY) * ratio;
|
201 | _this3.setFollowStyle(_this3.domWH);
|
202 | if (moment >= duration) {
|
203 | _ticker2['default'].clear(_this3.tickerId);
|
204 | callback();
|
205 | }
|
206 | });
|
207 | };
|
208 |
|
209 | this.getFollowMouseMove = function () {
|
210 | var onMouseMove = void 0;
|
211 | if (_this3.followParallax) {
|
212 | if (_this3.followParallax.delay) {
|
213 | onMouseMove = !_this3.delayTimeout ? null : _this3.state.onMouseMove;
|
214 | _this3.delayTimeout = _this3.delayTimeout || _ticker2['default'].timeout(function () {
|
215 | _this3.setState({
|
216 | onMouseMove: _this3.onMouseMove
|
217 | });
|
218 | }, _this3.followParallax.delay);
|
219 | } else {
|
220 | onMouseMove = _this3.onMouseMove;
|
221 | }
|
222 | }
|
223 | return onMouseMove;
|
224 | };
|
225 |
|
226 | this.getFollowStyle = function (data, domWH) {
|
227 | var style = {};
|
228 | (0, _utils.dataToArray)(data.type).forEach(function (type) {
|
229 | var mouseData = _this3.enterMouse.x;
|
230 | var domData = domWH.w;
|
231 | var value = data.value;
|
232 | if ((type.indexOf('y') >= 0 || type.indexOf('Y') >= 0) && type !== 'opacity') {
|
233 | mouseData = _this3.enterMouse.y;
|
234 | domData = domWH.h;
|
235 | }
|
236 | var d = (mouseData - domData / 2) / (domData / 2) * value;
|
237 | var _type = (0, _styleUtils.getGsapType)(type);
|
238 | var cssName = (0, _styleUtils.isConvert)(_type);
|
239 | if (cssName === 'transform') {
|
240 | var transform = (0, _styleUtils.checkStyleName)('transform');
|
241 | style[transform] = style[transform] || {};
|
242 | style[transform][_type] = (0, _styleUtils.stylesToCss)(_type, d).trim();
|
243 | } else if (cssName === 'filter') {
|
244 | var filter = (0, _styleUtils.checkStyleName)('filter');
|
245 | style[filter] = style[filter] || {};
|
246 | style[filter][_type] = (0, _styleUtils.stylesToCss)(_type, d).trim();
|
247 | } else {
|
248 | style[cssName] = (0, _styleUtils.stylesToCss)(_type, d).trim();
|
249 | }
|
250 | });
|
251 | return style;
|
252 | };
|
253 |
|
254 | this.setFollowStyle = function (domWH) {
|
255 | _this3.doms.forEach(function (item, i) {
|
256 | if (!item) {
|
257 | return;
|
258 | }
|
259 | var data = _this3.followParallax.data[i];
|
260 | var style = _this3.getFollowStyle(data, domWH);
|
261 | Object.keys(style).forEach(function (key) {
|
262 | if (typeof style[key] === 'object') {
|
263 | var styleStr = '';
|
264 | Object.keys(style[key]).forEach(function (_key) {
|
265 | styleStr += (' ' + _key + '(' + style[key][_key] + ')').trim();
|
266 | });
|
267 | item.style[key] = styleStr;
|
268 | return;
|
269 | }
|
270 | item.style[key] = key.indexOf('backgroundPosition') >= 0 ? 'calc(' + (data.bgPosition || '0%') + ' + ' + style[key] + ' )' : style[key];
|
271 | });
|
272 | });
|
273 | };
|
274 |
|
275 | this.getChildren = function () {
|
276 | return (0, _utils.toArrayChildren)(_this3.props.children).map(function (item) {
|
277 | if (item && item.type === _BgElement2['default']) {
|
278 | return _react2['default'].cloneElement(item, { show: _this3.state.show });
|
279 | }
|
280 | return item;
|
281 | });
|
282 | };
|
283 |
|
284 | this.reFollowParallax = function () {
|
285 | _this3.setTicker(_this3.followParallax, {
|
286 | x: _this3.domRect.width / 2 - _this3.offsetLeft,
|
287 | y: _this3.domRect.height / 2 - _this3.offsetTop
|
288 | }, function () {
|
289 | _this3.followParallax = null;
|
290 | });
|
291 | };
|
292 |
|
293 | this.animEnd = function () {
|
294 | var type = _this3.state.show ? 'enter' : 'leave';
|
295 | _this3.props.callBack(type);
|
296 | _this3.setState(function (_, props) {
|
297 | return { show: props.show, mouseMoveType: null };
|
298 | });
|
299 | };
|
300 |
|
301 | this.animChildren = function (props, style, bgElem) {
|
302 | var _props = _this3.props,
|
303 | elemOffset = _props.elemOffset,
|
304 | leaveChildHide = _props.leaveChildHide,
|
305 | ratio = _props.ratio,
|
306 | animType = _props.animType,
|
307 | direction = _props.direction,
|
308 | mouseMoveType = _props.mouseMoveType,
|
309 | ease = _props.ease,
|
310 | duration = _props.duration,
|
311 | delay = _props.delay,
|
312 | show = _props.show,
|
313 | sync = _props.sync,
|
314 | component = _props.component;
|
315 |
|
316 | if (_this3.tickerId) {
|
317 | _ticker2['default'].clear(_this3.tickerId);
|
318 | }
|
319 | if (_this3.delayTimeout) {
|
320 | _ticker2['default'].clear(_this3.delayTimeout);
|
321 | _this3.delayTimeout = null;
|
322 | }
|
323 | style.display = 'block';
|
324 |
|
325 | props.component = component;
|
326 | _this3.show = _this3.state.show;
|
327 | style.zIndex = _this3.state.show ? 1 : 0;
|
328 | props.children = show && !sync ? bgElem : _this3.getChildren();
|
329 | var childrenToRender = _react2['default'].createElement(_rcTweenOne2['default'], props);
|
330 | var type = _this3.state.show ? 'enter' : 'leave';
|
331 | var $ratio = mouseMoveType === 'end' && ratio <= 0.3 ? 1 - ratio : ratio;
|
332 | var tag = animType(childrenToRender, type, direction, {
|
333 | ease: ease,
|
334 | duration: duration,
|
335 | delay: delay,
|
336 | onComplete: _this3.animEnd
|
337 | }, elemOffset, leaveChildHide, $ratio, _this3.state.mouseMoveType === 'update');
|
338 | var tagProps = (0, _objectWithoutProperties3['default'])(tag.props, []);
|
339 |
|
340 | if (tagProps.animation) {
|
341 | tagProps.moment = (tagProps.animation.duration + tagProps.animation.delay) * $ratio || 0;
|
342 | tagProps.paused = _this3.state.mouseMoveType === 'update' || $ratio === 1;
|
343 | }
|
344 | return _react2['default'].cloneElement(tag, tagProps);
|
345 | };
|
346 | };
|
347 |
|
348 | Element.propTypes = {
|
349 | children: _propTypes2['default'].any,
|
350 | style: _propTypes2['default'].object,
|
351 | prefixCls: _propTypes2['default'].string,
|
352 | component: _propTypes2['default'].any,
|
353 | elemOffset: _propTypes2['default'].object,
|
354 | type: _propTypes2['default'].string,
|
355 | animType: _propTypes2['default'].func,
|
356 | ease: _propTypes2['default'].string,
|
357 | duration: _propTypes2['default'].number,
|
358 | delay: _propTypes2['default'].number,
|
359 | direction: _propTypes2['default'].string,
|
360 | callBack: _propTypes2['default'].func,
|
361 | followParallax: _propTypes2['default'].any,
|
362 | show: _propTypes2['default'].bool,
|
363 | leaveChildHide: _propTypes2['default'].bool,
|
364 | sync: _propTypes2['default'].bool,
|
365 | ratio: _propTypes2['default'].number,
|
366 | mouseMoveType: _propTypes2['default'].string,
|
367 | componentProps: _propTypes2['default'].object
|
368 | };
|
369 | Element.defaultProps = {
|
370 | component: 'div',
|
371 | componentProps: {},
|
372 | callBack: noop,
|
373 | delay: 0
|
374 | };
|
375 |
|
376 | Element.BgElement = _BgElement2['default'];
|
377 | Element.isBannerAnimElement = true;
|
378 | exports['default'] = Element;
|
379 | module.exports = exports['default']; |
\ | No newline at end of file |