UNPKG

routebar

Version:

A visual component for navigating between panel cells containing user content.

252 lines (216 loc) 20.1 kB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>rbManager.js - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <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">rbManager.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>define(['moving'], function(Moving) { "use strict"; /** * callback-функция, которая будет выполнена после инициализации панелей * * @callback module:RbManager~initCallback * @param {Moving[]} Instances Набор панелей, действующих в данный момент на странице */ /** * Функция, инициализирующая расположенные в данный момент на странице панели. * Если startScreens не задан, первым аргументом может быть callback. * Оживляются элементы с классом rb-wrapper, находящиеся на странице, в качестве идентификатора берется значение * атрибута data-id или id, иначе идентификатор будет назначен самостоятельно. * Инициализация запускается асинхронно, сразу как только страница будет отрендерена. * @param {Object.&lt;string, ScreenModel>} [startScreens] набор моделей контента, которые будут для панелей моделями по умолчанию. * @param {module:RbManager~initCallback} [callback] функция, которая будет выполнена после инициализации панелей * @memberOf module:RbManager */ function init(startScreens, callback) { if (typeof startScreens === 'function') { callback = startScreens; startScreens = undefined; } function waitJQuery() { $(function() { var $rbWrapper = $('.rb-wrapper'); var loadingPromises = []; for (var i = 0; i &lt; $rbWrapper.length; i++) { var elemWrapper = $rbWrapper.eq(i), id = elemWrapper.data('id') || elemWrapper.attr('id') || 'instance_' + i; if (rb.Instances[id] === undefined) { elemWrapper.html('&lt;div class="rb">&lt;div tabindex="-1" class="rb__fake-element">&lt;/div>&lt;/div>'); var $rb = elemWrapper.find('>.rb'), inst = new Moving($rb, startScreens &amp;&amp; startScreens[id]); loadingPromises.push(inst._loadingPromise); Object.defineProperty(rb.Instances, id, { value: inst, configurable: true, enumerable: true }); } } Promise.all(loadingPromises).then(function() { callback &amp;&amp; callback(rb.Instances); }); }); } function timeoutFunc() { if (typeof jQuery === 'undefined') { setTimeout(timeoutFunc, 0); } else { waitJQuery(); } } timeoutFunc(); } /** * Функция, удаляющая панель со страницы * @param {string} id Идентификатор модели контента * @memberOf module:RbManager * @see {@link ScreenModel#toString} */ function remove(id) { if (rb.Instances.hasOwnProperty(id)) { rb.Instances[id].destroy(); delete rb.Instances[id]; } } function batchAction(action, args) { var res = []; for (var id in rb.Instances) { if (rb.Instances.hasOwnProperty(id)) { var inst = rb.Instances[id]; res.push(inst[action].apply(inst, args)); } } return res; } /** * Применить конфигурацию к панелям * @param {Moving~config} config - конфигурация * @memberOf module:Batch * @see {@link Moving#configure} */ function configure(config) { batchAction('configure', arguments); } /** * Осуществить переход для всех панелей в указанную сторону. * @param {string} side - сторона, в которую осуществляется переход * @param {Boolean} [isSaveHistory] - сохранять ли осуществляемый переход в историю переходов * @returns {Promise} promise о завершении действия во всех панелях * @memberOf module:Batch * @see {@link Moving#move} */ function move(side, isSaveHistory) { return Promise.all(batchAction('move', arguments)); } /** * Осуществить откат последнего удачного хода, воспользовавшись историей переходов. * @returns {Promise} promise о завершении действия во всех панелях * @memberOf module:Batch * @see {@link Moving#moveBack} */ function moveBack() { return batchAction('moveBack', arguments); } /** * Анимировать запрещенное перемещение в одну из сторон. В панели в эту сторону перемещение может быть запрещено, * но будет анимировано, будто запрещено. Это полезно, например, если необходимо, чтобы либо все панели были перемещены * в одну из сторон, либо все анимировали запрещенный переход. * @param {string} side - сторона, в которую осуществляется переход * @returns {Promise} promise о завершении действия во всех панелях * @memberOf module:Batch * @see {@link Moving#animateWrongSide} */ function animateWrongSide(side) { return Promise.all(batchAction('animateWrongSide', arguments)); } /** * Установить модель контента в текущую ячейку панелей. * @param {ScreenModel} screen - Устанавливаемая модель контента * @param {Boolean} [isSaveHistory] - Сохранять ли устанавливаемую модель в историю переходов * @returns {Promise} promise о завершении установки модели во все панели * @memberOf module:Batch * @see {@link Moving#setScreen} */ function setScreen(screen, isSaveHistory) { return Promise.all(batchAction('setScreen', arguments)); } /** * Перезагрузить все панели на странице. Перезагрузка предполагает обновление верстки ячейки панели, * сброс состояния в верстке. Если в элементах верстки есть подписки, необходимо позаботиться об отписке и * последующей подписке к новым элементам верстки. * @prop {string} side - сторона, с которой будет перезагружаться ячейка панели относительно текущей ячейки. * @memberOf module:Batch * @see {@link Moving#reload} */ function reload(side) { batchAction('reload', arguments); } /** * Удалить все панели со страницы. * @memberOf module:Batch * @see {@link module:RbManager.remove} */ function removeAll() { for (var id in rb.Instances) { remove(id); } } /** * Пакетированные действия на панелях, то есть выполняемые для всех панелей разом. * @typedef {Object} Batch * @module Batch */ var Batch = { configure: configure, move: move, moveBack: moveBack, animateWrongSide: animateWrongSide, setScreen: setScreen, reload: reload, removeAll: removeAll }; /** * Module rbManager. * @module RbManager */ return { init: init, remove: remove, /** * @type module:Batch */ Batch: Batch }; });</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>