animation.js

  1. define(['utils', 'IPlugin', 'errors', 'jquery.easing'], function(Utils, IPlugin, Errors) {
  2.     "use strict";
  4.     /**
  5.      * @class
  6.      * Класс анимации переходов в панели
  7.      * @param {JQuery} mainDiv - элемент, в котором располагается панель. Должен содержать класс rb-wrapper.
  8.      * @param {ElementsPool} elementsPool - хранилище элементов ячеек панели
  9.      * @constructor Animation
  10.      * @extends IPlugin
  11.      */
  12.     function Animation(mainDiv, elementsPool) {
  13.         this._elementsPool = elementsPool;
  15.         if (mainDiv instanceof $) {
  16.             this._mainDiv = mainDiv;
  17.         } else {
  18.             throw new Errors.ArgumentError('mainDiv', mainDiv);
  19.         }
  20.     }
  21.     Utils.inherite(Animation, IPlugin);
  22.     /**
  23.      * Применить конфигурацию. Учитывает опции wrongTime1, wrongTime2, correctTime, wrongEasing1, wrongEasing2, correctEasing, showAdjacentScreens.
  24.      * @param {Moving~config} config - конфигурация
  25.      * @memberOf Animation
  26.      */
  27.     Animation.prototype.configure = function(config) {
  28.         function fixTime(argName, time) {
  29.             if (typeof time === 'number') {
  30.                 return time > 0 ? time : 1;
  31.             } else {
  32.                 if (time === undefined) {
  33.                     return 500;
  34.                 } else {
  35.                     throw new Errors.ArgumentError(argName, time);
  36.                 }
  37.             }
  38.         }
  40.         if (typeof config === 'object') {
  41.             if (config.wrongTime1 !== undefined) {
  42.                 this._wrongTime1 = fixTime('wrongTime1', config.wrongTime1);
  43.             }
  44.             if (config.wrongTime2 !== undefined) {
  45.                 this._wrongTime2 = fixTime('wrongTime2', config.wrongTime2);
  46.             }
  47.             if (config.correctTime !== undefined) {
  48.                 this._correctTime = fixTime('correctTime', config.correctTime);
  49.             }
  50.             if (config.wrongEasing1 !== undefined) {
  51.                 this._wrongEasing1 = config.wrongEasing1;
  52.             }
  53.             if (config.wrongEasing2 !== undefined) {
  54.                 this._wrongEasing2 = config.wrongEasing2;
  55.             }
  56.             if (config.correctEasing !== undefined) {
  57.                 this._correctEasing = config.correctEasing;
  58.             }
  59.             if (config.showAdjacentScreens !== undefined) {
  60.                 this._showAdjacentScreens = config.showAdjacentScreens;
  61.             }
  62.         }
  63.     };
  65.     Animation.prototype._animate = function(elem, side, value, easing, time, beforeFn, afterFn) {
  67.         beforeFn && beforeFn();
  69.         var css = {}, opts;
  70.         css[Utils.getStartSide(side)] = value + '%';
  71.         opts = {
  72.             duration: time,
  73.             easing: easing,
  74.             queue: false,
  75.             done: afterFn
  76.         };
  78.         elem.animate(css, opts);
  79.     };
  81.     Animation.prototype._updateState = function(res, elements) {
  82.         if (this._isAnimate) {
  83.             this._isAnimate = false;
  84.             this._new && this._new.stop();
  85.             this._old && this._old.stop(false, true);
  86.             this._cur && this._cur.stop();
  87.             this._prev && this._prev.stop(false, true);
  88.             this._next && this._next.stop(false, true);
  89.             this._res(false);
  90.         }
  91.         this._isAnimate = true;
  92.         this._old = elements.oldElem;
  93.         this._new = elements.newElem;
  94.         this._cur = elements.curElem;
  95.         this._prev = elements.prevElem;
  96.         this._next = elements.nextElem;
  97.         this._res = res;
  98.     };
  100.     /**
  101.      * Анимация неудачного перехода
  102.      * @param {string} side - сторона перехода
  103.      * @memberOf Animation
  104.      */
  105.     Animation.prototype.goToWrongSide = function(side) {
  106.         var self = this,
  107.             width = 100,
  108.             height = 100,
  109.             elem = this._elementsPool.getElementBySide('center'),
  110.             nextElem = this._elementsPool.getElementBySide(side),
  111.             prevElem = this._elementsPool.getElementBySide(Utils.oppositeSide(side));
  113.         return new Promise(function(res, rej) {
  114.             function wrongAnimate(elem, startLeft, startTop, beforeFn, afterFn) {
  115.                 self._animate(elem, side, '+=' + value, self._wrongEasing1, self._isAnimate ? self._wrongTime1 : 10, function() {
  116.                     startLeft -= 100;
  117.                     startTop -= 100;
  118.                     elem.css({'left': startLeft + '%', 'top': startTop + '%'});
  119.                     beforeFn && beforeFn();
  120.                 }, function() {
  121.                     self._animate(elem, side, '-=' + value, self._wrongEasing2, self._isAnimate ? self._wrongTime2 : 10, undefined, function() {
  122.                         afterFn && afterFn();
  123.                     });
  124.                 });
  125.             }
  127.             self._updateState(res, {
  128.                 curElem: elem,
  129.                 prevElem: prevElem,
  130.                 nextElem: nextElem
  131.             });
  133.             var dw = width/10, dh = height/10, value = 0, relValWidth = 0, relValHeight = 0;
  135.             if (side === 'left') {
  136.                 relValWidth = -width;
  137.                 value = - dw;
  138.             }
  139.             else if (side === 'right') {
  140.                 relValWidth = width;
  141.                 value = dw;
  142.             }
  143.             else if (side === 'top') {
  144.                 relValHeight = -height;
  145.                 value = - dh;
  146.             }
  147.             else if (side === 'bottom') {
  148.                 relValHeight = height;
  149.                 value = dh;
  150.             }
  152.             if (self._showAdjacentScreens) {
  153.                 wrongAnimate(nextElem, width + relValWidth, height + relValHeight, function() {
  154.                     nextElem.toggleClass('rb__hiding-screen', true);
  155.                 }, function() {
  156.                     nextElem.toggleClass('rb__hiding-screen', false);
  157.                 }, true);
  158.                 wrongAnimate(prevElem, width - relValWidth, height - relValHeight, function() {
  159.                     prevElem.toggleClass('rb__hiding-screen', true);
  160.                 }, function() {
  161.                     prevElem.toggleClass('rb__hiding-screen', false);
  162.                 }, true);
  163.             }
  164.             wrongAnimate(elem, width, height, undefined, function() {
  165.                 self._isAnimate = false;
  166.                 self._res(true);
  167.             });
  168.         });
  169.     };
  171.     /**
  172.      * Анимация удачного перехода
  173.      * @param {string} side - сторона перехода
  174.      * @memberOf Animation
  175.      */
  176.     Animation.prototype.goToCorrectSide = function(side) {
  177.         var self = this,
  178.             newElem = this._elementsPool.getElementBySide('center'),
  179.             oldElem = this._elementsPool.getElementBySide(Utils.oppositeSide(side)),
  180.             width = 100,
  181.             height = 100;
  183.         return new Promise(function(res, rej) {
  184.             function correctAnimate(elem, startLeft, startTop, beforeFn, afterFn) {
  185.                 self._animate(elem, side, '-=' + value, self._correctEasing, self._correctTime, function() {
  186.                     startLeft -= 100;
  187.                     startTop -= 100;
  188.                     elem.css({'left': startLeft + '%', 'top': startTop + '%'});
  189.                     beforeFn && beforeFn();
  190.                 }, function() {
  191.                     afterFn && afterFn();
  192.                 });
  193.             }
  195.             self._updateState(res, {
  196.                 oldElem: oldElem,
  197.                 newElem: newElem
  198.             });
  200.             var value = 0, relValWidth = 0, relValHeight = 0;
  202.             if (side === 'left') {
  203.                 relValWidth = -width;
  204.                 value = - width;
  205.             }
  206.             else if (side === 'right') {
  207.                 relValWidth = width;
  208.                 value = width;
  209.             }
  210.             else if (side === 'top') {
  211.                 relValHeight = -height;
  212.                 value = - height;
  213.             }
  214.             else if (side === 'bottom') {
  215.                 relValHeight = height;
  216.                 value = height;
  217.             }
  219.             if (self._showAdjacentScreens) {
  220.                 correctAnimate(oldElem, width, height, function () {
  221.                     oldElem.toggleClass('rb__hiding-screen', true);
  222.                 }, function () {
  223.                     oldElem.toggleClass('rb__hiding-screen', false);
  224.                 }, true);
  225.             }
  226.             correctAnimate(newElem, width + relValWidth, height + relValHeight, undefined, function() {
  227.                 self._isAnimate = false;
  228.                 self._res(true);
  229.             });
  230.         });
  231.     };
  233.     /**
  234.      * Переход в центральную ячейку
  235.      * @memberOf Animation
  236.      */
  237.     Animation.prototype.goToCenter = function() {
  238.         var elem = this._elementsPool.getElementBySide('center');
  239.         elem.css({'left': '0%', 'top': '0%'});
  240.     };
  242.     /**
  243.      * Уничтожить экземпляр класса анимации
  244.      * @memberOf Animation
  245.      */
  246.     Animation.prototype.destroy = function() {
  247.         this._new && this._new.stop();
  248.         this._old && this._old.stop();
  249.         this._cur && this._cur.stop();
  250.         this._prev && this._prev.stop();
  251.         this._next && this._next.stop();
  252.         this._res && this._res(false);
  253.     };
  255.     return Animation;
  256. });