routebar

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>animation.js - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Animation.html">Animation</a><ul class='methods'><li data-type='method'><a href="Animation.html#configure">configure</a></li><li data-type='method'><a href="Animation.html#destroy">destroy</a></li><li data-type='method'><a href="Animation.html#goToCenter">goToCenter</a></li><li data-type='method'><a href="Animation.html#goToCorrectSide">goToCorrectSide</a></li><li data-type='method'><a href="Animation.html#goToWrongSide">goToWrongSide</a></li></ul></li><li><a href="ArrowsControl.html">ArrowsControl</a><ul class='methods'><li data-type='method'><a href="ArrowsControl.html#configure">configure</a></li><li data-type='method'><a href="ArrowsControl.html#destroy">destroy</a></li><li data-type='method'><a href="ArrowsControl.html#disable">disable</a></li><li data-type='method'><a href="ArrowsControl.html#enable">enable</a></li><li data-type='method'><a href="ArrowsControl.html#isEnable">isEnable</a></li></ul></li><li><a href="BaseDispatcher.html">BaseDispatcher</a><ul class='methods'><li data-type='method'><a href="BaseDispatcher.html#add">add</a></li><li data-type='method'><a href="BaseDispatcher.html#configure">configure</a></li><li data-type='method'><a href="BaseDispatcher.html#destroy">destroy</a></li><li data-type='method'><a href="BaseDispatcher.html#remove">remove</a></li><li data-type='method'><a href="BaseDispatcher.html#runActions">runActions</a></li></ul></li><li><a href="ControlManager.html">ControlManager</a><ul class='methods'><li data-type='method'><a href="ControlManager.html#add">add</a></li><li data-type='method'><a href="ControlManager.html#configure">configure</a></li><li data-type='method'><a href="ControlManager.html#destroy">destroy</a></li><li data-type='method'><a href="ControlManager.html#disable">disable</a></li><li data-type='method'><a href="ControlManager.html#disableAll">disableAll</a></li><li data-type='method'><a href="ControlManager.html#enable">enable</a></li><li data-type='method'><a href="ControlManager.html#enableAll">enableAll</a></li><li data-type='method'><a href="ControlManager.html#enableByValues">enableByValues</a></li><li data-type='method'><a href="ControlManager.html#isEnable">isEnable</a></li><li data-type='method'><a href="ControlManager.html#remove">remove</a></li></ul></li><li><a href="KeydownControl.html">KeydownControl</a><ul class='methods'><li data-type='method'><a href="KeydownControl.html#configure">configure</a></li><li data-type='method'><a href="KeydownControl.html#destroy">destroy</a></li><li data-type='method'><a href="KeydownControl.html#disable">disable</a></li><li data-type='method'><a href="KeydownControl.html#enable">enable</a></li><li data-type='method'><a href="KeydownControl.html#isEnable">isEnable</a></li></ul></li><li><a href="module-Errors-ArgumentError.html">ArgumentError</a></li><li><a href="module-Errors-FatalError.html">FatalError</a></li><li><a href="module-Errors-NotRealizedError.html">NotRealizedError</a></li><li><a href="module-Errors-PathNotFoundError.html">PathNotFoundError</a></li><li><a href="Moving.html">Moving</a><ul class='methods'><li data-type='method'><a href="Moving.html#activate">activate</a></li><li data-type='method'><a href="Moving.html#addPlugin">addPlugin</a></li><li data-type='method'><a href="Moving.html#animateWrongSide">animateWrongSide</a></li><li data-type='method'><a href="Moving.html#configure">configure</a></li><li data-type='method'><a href="Moving.html#destroy">destroy</a></li><li data-type='method'><a href="Moving.html#getControlManager">getControlManager</a></li><li data-type='method'><a href="Moving.html#getScreenManager">getScreenManager</a></li><li data-type='method'><a href="Moving.html#goToScreen">goToScreen</a></li><li data-type='method'><a href="Moving.html#move">move</a></li><li data-type='method'><a href="Moving.html#moveBack">moveBack</a></li><li data-type='method'><a href="Moving.html#reload">reload</a></li><li data-type='method'><a href="Moving.html#removePlugin">removePlugin</a></li><li data-type='method'><a href="Moving.html#resetConfig">resetConfig</a></li><li data-type='method'><a href="Moving.html#setScreen">setScreen</a></li></ul></li><li><a href="ScreenManager.html">ScreenManager</a><ul class='methods'><li data-type='method'><a href="ScreenManager.html#clearHistory">clearHistory</a></li><li data-type='method'><a href="ScreenManager.html#configure">configure</a></li><li data-type='method'><a href="ScreenManager.html#destroy">destroy</a></li><li data-type='method'><a href="ScreenManager.html#findShortestPath">findShortestPath</a></li><li data-type='method'><a href="ScreenManager.html#getCurScreen">getCurScreen</a></li><li data-type='method'><a href="ScreenManager.html#getRelativeScreen">getRelativeScreen</a></li><li data-type='method'><a href="ScreenManager.html#popHistory">popHistory</a></li></ul></li><li><a href="ScreenModel.html">ScreenModel</a><ul class='methods'><li data-type='method'><a href="ScreenModel.html#.clearUpdateFn">clearUpdateFn</a></li><li data-type='method'><a href="ScreenModel.html#.configure">configure</a></li><li data-type='method'><a href="ScreenModel.html#.getMainScreen">getMainScreen</a></li><li data-type='method'><a href="ScreenModel.html#.registerUpdateFn">registerUpdateFn</a></li><li data-type='method'><a href="ScreenModel.html#.setMainScreen">setMainScreen</a></li><li data-type='method'><a href="ScreenModel.html#.unregisterUpdateFn">unregisterUpdateFn</a></li><li data-type='method'><a href="ScreenModel.html#childrenLength">childrenLength</a></li><li data-type='method'><a href="ScreenModel.html#defaultChildIndex">defaultChildIndex</a></li><li data-type='method'><a href="ScreenModel.html#defaultParentIndex">defaultParentIndex</a></li><li data-type='method'><a href="ScreenModel.html#getChild">getChild</a></li><li data-type='method'><a href="ScreenModel.html#getChildIndex">getChildIndex</a></li><li data-type='method'><a href="ScreenModel.html#getParent">getParent</a></li><li data-type='method'><a href="ScreenModel.html#getParentIndex">getParentIndex</a></li><li data-type='method'><a href="ScreenModel.html#html">html</a></li><li data-type='method'><a href="ScreenModel.html#isDirectedGraph">isDirectedGraph</a></li><li data-type='method'><a href="ScreenModel.html#isTemporary">isTemporary</a></li><li data-type='method'><a href="ScreenModel.html#parentsLength">parentsLength</a></li><li data-type='method'><a href="ScreenModel.html#pushChildren">pushChildren</a></li><li data-type='method'><a href="ScreenModel.html#pushParents">pushParents</a></li><li data-type='method'><a href="ScreenModel.html#removeChild">removeChild</a></li><li data-type='method'><a href="ScreenModel.html#removeParent">removeParent</a></li><li data-type='method'><a href="ScreenModel.html#resetChildren">resetChildren</a></li><li data-type='method'><a href="ScreenModel.html#resetParents">resetParents</a></li><li data-type='method'><a href="ScreenModel.html#sortChildren">sortChildren</a></li><li data-type='method'><a href="ScreenModel.html#sortParents">sortParents</a></li><li data-type='method'><a href="ScreenModel.html#toString">toString</a></li></ul></li><li><a href="SwipesControl.html">SwipesControl</a><ul class='methods'><li data-type='method'><a href="SwipesControl.html#configure">configure</a></li><li data-type='method'><a href="SwipesControl.html#destroy">destroy</a></li><li data-type='method'><a href="SwipesControl.html#disable">disable</a></li><li data-type='method'><a href="SwipesControl.html#enable">enable</a></li><li data-type='method'><a href="SwipesControl.html#isEnable">isEnable</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-Batch.html">Batch</a><ul class='methods'><li data-type='method'><a href="module-Batch.html#.animateWrongSide">animateWrongSide</a></li><li data-type='method'><a href="module-Batch.html#.configure">configure</a></li><li data-type='method'><a href="module-Batch.html#.move">move</a></li><li data-type='method'><a href="module-Batch.html#.moveBack">moveBack</a></li><li data-type='method'><a href="module-Batch.html#.reload">reload</a></li><li data-type='method'><a href="module-Batch.html#.removeAll">removeAll</a></li><li data-type='method'><a href="module-Batch.html#.setScreen">setScreen</a></li></ul></li><li><a href="module-Errors.html">Errors</a></li><li><a href="module-MainModule.html">MainModule</a></li><li><a href="module-RbManager.html">RbManager</a><ul class='methods'><li data-type='method'><a href="module-RbManager.html#.init">init</a></li><li data-type='method'><a href="module-RbManager.html#.remove">remove</a></li></ul></li><li><a href="module-Utils.html">Utils</a><ul class='methods'><li data-type='method'><a href="module-Utils.html#.capitalizeFirstLetter">capitalizeFirstLetter</a></li><li data-type='method'><a href="module-Utils.html#.cycledNumber">cycledNumber</a></li><li data-type='method'><a href="module-Utils.html#.getStartSide">getStartSide</a></li><li data-type='method'><a href="module-Utils.html#.inherite">inherite</a></li><li data-type='method'><a href="module-Utils.html#.mixin">mixin</a></li><li data-type='method'><a href="module-Utils.html#.mobileCheck">mobileCheck</a></li><li data-type='method'><a href="module-Utils.html#.nop">nop</a></li><li data-type='method'><a href="module-Utils.html#.oppositeSide">oppositeSide</a></li></ul></li></ul><h3>Interfaces</h3><ul><li><a href="IControl.html">IControl</a><ul class='methods'><li data-type='method'><a href="IControl.html#configure">configure</a></li><li data-type='method'><a href="IControl.html#destroy">destroy</a></li><li data-type='method'><a href="IControl.html#disable">disable</a></li><li data-type='method'><a href="IControl.html#enable">enable</a></li><li data-type='method'><a href="IControl.html#isEnable">isEnable</a></li></ul></li><li><a href="IPlugin.html">IPlugin</a><ul class='methods'><li data-type='method'><a href="IPlugin.html#configure">configure</a></li><li data-type='method'><a href="IPlugin.html#destroy">destroy</a></li></ul></li></ul> </nav> <div id="main"> <h1 class="page-title">animation.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>define(['utils', 'IPlugin', 'errors', 'jquery.easing'], function(Utils, IPlugin, Errors) { "use strict"; /** * @class * Класс анимации переходов в панели * @param {JQuery} mainDiv - элемент, в котором располагается панель. Должен содержать класс rb-wrapper. * @param {ElementsPool} elementsPool - хранилище элементов ячеек панели * @constructor Animation * @extends IPlugin */ function Animation(mainDiv, elementsPool) { this._elementsPool = elementsPool; if (mainDiv instanceof $) { this._mainDiv = mainDiv; } else { throw new Errors.ArgumentError('mainDiv', mainDiv); } } Utils.inherite(Animation, IPlugin); /** * Применить конфигурацию. Учитывает опции wrongTime1, wrongTime2, correctTime, wrongEasing1, wrongEasing2, correctEasing, showAdjacentScreens. * @param {Moving~config} config - конфигурация * @memberOf Animation */ Animation.prototype.configure = function(config) { function fixTime(argName, time) { if (typeof time === 'number') { return time > 0 ? time : 1; } else { if (time === undefined) { return 500; } else { throw new Errors.ArgumentError(argName, time); } } } if (typeof config === 'object') { if (config.wrongTime1 !== undefined) { this._wrongTime1 = fixTime('wrongTime1', config.wrongTime1); } if (config.wrongTime2 !== undefined) { this._wrongTime2 = fixTime('wrongTime2', config.wrongTime2); } if (config.correctTime !== undefined) { this._correctTime = fixTime('correctTime', config.correctTime); } if (config.wrongEasing1 !== undefined) { this._wrongEasing1 = config.wrongEasing1; } if (config.wrongEasing2 !== undefined) { this._wrongEasing2 = config.wrongEasing2; } if (config.correctEasing !== undefined) { this._correctEasing = config.correctEasing; } if (config.showAdjacentScreens !== undefined) { this._showAdjacentScreens = config.showAdjacentScreens; } } }; Animation.prototype._animate = function(elem, side, value, easing, time, beforeFn, afterFn) { beforeFn && beforeFn(); var css = {}, opts; css[Utils.getStartSide(side)] = value + '%'; opts = { duration: time, easing: easing, queue: false, done: afterFn }; elem.animate(css, opts); }; Animation.prototype._updateState = function(res, elements) { if (this._isAnimate) { this._isAnimate = false; this._new && this._new.stop(); this._old && this._old.stop(false, true); this._cur && this._cur.stop(); this._prev && this._prev.stop(false, true); this._next && this._next.stop(false, true); this._res(false); } this._isAnimate = true; this._old = elements.oldElem; this._new = elements.newElem; this._cur = elements.curElem; this._prev = elements.prevElem; this._next = elements.nextElem; this._res = res; }; /** * Анимация неудачного перехода * @param {string} side - сторона перехода * @memberOf Animation */ Animation.prototype.goToWrongSide = function(side) { var self = this, width = 100, height = 100, elem = this._elementsPool.getElementBySide('center'), nextElem = this._elementsPool.getElementBySide(side), prevElem = this._elementsPool.getElementBySide(Utils.oppositeSide(side)); return new Promise(function(res, rej) { function wrongAnimate(elem, startLeft, startTop, beforeFn, afterFn) { self._animate(elem, side, '+=' + value, self._wrongEasing1, self._isAnimate ? self._wrongTime1 : 10, function() { startLeft -= 100; startTop -= 100; elem.css({'left': startLeft + '%', 'top': startTop + '%'}); beforeFn && beforeFn(); }, function() { self._animate(elem, side, '-=' + value, self._wrongEasing2, self._isAnimate ? self._wrongTime2 : 10, undefined, function() { afterFn && afterFn(); }); }); } self._updateState(res, { curElem: elem, prevElem: prevElem, nextElem: nextElem }); var dw = width/10, dh = height/10, value = 0, relValWidth = 0, relValHeight = 0; if (side === 'left') { relValWidth = -width; value = - dw; } else if (side === 'right') { relValWidth = width; value = dw; } else if (side === 'top') { relValHeight = -height; value = - dh; } else if (side === 'bottom') { relValHeight = height; value = dh; } if (self._showAdjacentScreens) { wrongAnimate(nextElem, width + relValWidth, height + relValHeight, function() { nextElem.toggleClass('rb__hiding-screen', true); }, function() { nextElem.toggleClass('rb__hiding-screen', false); }, true); wrongAnimate(prevElem, width - relValWidth, height - relValHeight, function() { prevElem.toggleClass('rb__hiding-screen', true); }, function() { prevElem.toggleClass('rb__hiding-screen', false); }, true); } wrongAnimate(elem, width, height, undefined, function() { self._isAnimate = false; self._res(true); }); }); }; /** * Анимация удачного перехода * @param {string} side - сторона перехода * @memberOf Animation */ Animation.prototype.goToCorrectSide = function(side) { var self = this, newElem = this._elementsPool.getElementBySide('center'), oldElem = this._elementsPool.getElementBySide(Utils.oppositeSide(side)), width = 100, height = 100; return new Promise(function(res, rej) { function correctAnimate(elem, startLeft, startTop, beforeFn, afterFn) { self._animate(elem, side, '-=' + value, self._correctEasing, self._correctTime, function() { startLeft -= 100; startTop -= 100; elem.css({'left': startLeft + '%', 'top': startTop + '%'}); beforeFn && beforeFn(); }, function() { afterFn && afterFn(); }); } self._updateState(res, { oldElem: oldElem, newElem: newElem }); var value = 0, relValWidth = 0, relValHeight = 0; if (side === 'left') { relValWidth = -width; value = - width; } else if (side === 'right') { relValWidth = width; value = width; } else if (side === 'top') { relValHeight = -height; value = - height; } else if (side === 'bottom') { relValHeight = height; value = height; } if (self._showAdjacentScreens) { correctAnimate(oldElem, width, height, function () { oldElem.toggleClass('rb__hiding-screen', true); }, function () { oldElem.toggleClass('rb__hiding-screen', false); }, true); } correctAnimate(newElem, width + relValWidth, height + relValHeight, undefined, function() { self._isAnimate = false; self._res(true); }); }); }; /** * Переход в центральную ячейку * @memberOf Animation */ Animation.prototype.goToCenter = function() { var elem = this._elementsPool.getElementBySide('center'); elem.css({'left': '0%', 'top': '0%'}); }; /** * Уничтожить экземпляр класса анимации * @memberOf Animation */ Animation.prototype.destroy = function() { this._new && this._new.stop(); this._old && this._old.stop(); this._cur && this._cur.stop(); this._prev && this._prev.stop(); this._next && this._next.stop(); this._res && this._res(false); }; return Animation; });</code></pre> </article> </section> </div> <br class="clear"> <footer> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.3</a> using the Minami theme. </footer> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>