routebar
Version:
A visual component for navigating between panel cells containing user content.
236 lines (195 loc) • 18.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>arrowsControl.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">arrowsControl.js</h1>
<section>
<article>
<pre class="prettyprint source linenums"><code>define(['utils', 'IControl', 'errors'], function(Utils, IControl, Errors) {
"use strict";
/**
* @class
* Класс управления панелью с помощью стрелок, отображаемых по сторонам панели.
* @param {JQuery} mainDiv - элемент, в котором располагается панель. Должен содержать класс rb-wrapper.
* @param {function} actionFn - функция, определяющая действие при переходе в одну из сторон (Moving.prototype._moveByActionValue)
* @param {Moving#afterRenderDispatcher} afterRender - Диспетчер, выполняющий зарегистрированные функции после рендеринга контента моделей на странице после перехода
* @constructor ArrowsControl
* @extends IControl
*/
function ArrowsControl(mainDiv, actionFn, afterRender) {
if (!(mainDiv instanceof $)) {
throw new Errors.ArgumentError('mainDiv', mainDiv);
}
if (typeof actionFn !== 'function') {
throw new Errors.ArgumentError('actionFn', actionFn);
}
this._isEnable = false;
this._mainDiv = mainDiv.parent();
this._actionFn = actionFn;
this._afterRender = afterRender;
}
Utils.inherite(ArrowsControl, IControl);
/**
* Применить конфигурацию. Учитывает опции hideArrowsTime, showArrowsOutside, showArrowsOnHover, hideArrowsAfterTime.
* @param {Moving~config} config
* @memberOf ArrowsControl
*/
ArrowsControl.prototype.configure = function(config) {
if (typeof config === 'object') {
if (config.hideArrowsTime !== undefined) {
this._hideArrowsTime = config.hideArrowsTime;
}
if (config.showArrowsOutside !== undefined) {
this._showArrowsOutside = config.showArrowsOutside;
}
if (config.showArrowsOnHover !== undefined) {
this._showArrowsOnHover = config.showArrowsOnHover;
}
if (config.hideArrowsAfterTime !== undefined) {
this._hideArrowsAfterTime = config.hideArrowsAfterTime;
}
}
this._containerClass = (this._showArrowsOnHover ? 'rb__arrow-container-hover' : 'rb__arrow-container');
};
/**
*
* @returns {boolean}
* @memberOf ArrowsControl
*/
ArrowsControl.prototype.isEnable = function() {
return this._isEnable;
};
/**
*
* @memberOf ArrowsControl
*/
ArrowsControl.prototype.enable = function() {
if (this._isEnable) return;
var self = this;
var mouseEnterHandler = function(e) {
if (!self._hideArrowsAfterTime) return;
var arrow = $(e.currentTarget),
$body = $('body'),
arrowOffset = arrow.offset(),
arrowX = arrowOffset.left,
arrowY = arrowOffset.top,
arrowXX = arrowX + arrow.width(),
arrowYY = arrowY + arrow.height();
//var timeoutId;
function mouseMoveHandler(e) {
var x = e.clientX, y = e.clientY;
if (!(arrowX < x && x < arrowXX && arrowY < y && y < arrowYY)) {
arrow.toggleClass('rb__arrow-none', false);
arrow.toggleClass('rb__arrow-cursor', true);
$body.off('mousemove', mouseMoveHandler);
//clearTimeout(timeoutId);
}
}
function hideArrow() {
arrow.toggleClass('rb__arrow-none', true);
arrow.toggleClass('rb__arrow-cursor', false);
$body.on('mousemove', mouseMoveHandler);
//timeoutId = setTimeout(function() {
// arrow.toggleClass('rb__arrow-none', false);
// arrow.toggleClass('rb__arrow-cursor', true);
// $body.off('mousemove', mouseMoveHandler);
//}, 10000);
// todo если из iframe не всплывает mousemove с нормальными координатами, для iframe не будет работать
}
if (arrow.length) {
arrow[0].hideArrowId = setTimeout(hideArrow, self._hideArrowsTime);
}
};
var mouseLeaveHandler = function(e) {
if (!self._hideArrowsAfterTime) return;
var arrow = $(e.currentTarget);
clearTimeout(arrow[0].hideArrowId);
};
var clickHandler = function(e) {
var arrow = $(e.currentTarget);
mouseLeaveHandler(e);
self._afterRender.add(mouseEnterHandler.bind(undefined, e), true);
self._actionFn(arrow, Utils.sides, function(container, defValue) {
return container.is('.rb__arrow-container_' + defValue);
});
};
var markup = '';
Utils.sides.forEach(function(side) {
markup += '<div class="' +
self._containerClass +
' rb__arrow-cursor rb__arrow-container_' + side + '' +
(self._showArrowsOutside ? (' rb__arrow-outside_' + side) : '') +
'">' +
'<div class="rb__arrow rb__arrow_' + side + '"></div>' +
'</div>';
});
this._mainDiv.append($(markup));
var $rbArrowContainer = this._mainDiv.find('>.' + this._containerClass);
$rbArrowContainer.on('click', clickHandler);
$rbArrowContainer.on('mouseenter', mouseEnterHandler);
$rbArrowContainer.on('mouseleave', mouseLeaveHandler);
this._clickHandler = clickHandler;
this._mouseEnterHandler = mouseEnterHandler;
this._mouseLeaveHandler = mouseLeaveHandler;
this._isEnable = true;
};
/**
*
* @memberOf ArrowsControl
*/
ArrowsControl.prototype.disable = function() {
if (!this._isEnable) return;
var $rbArrowContainer = this._mainDiv.find('>.' + this._containerClass);
for (var i = 0; i < $rbArrowContainer.length; i++) {
clearTimeout($rbArrowContainer[i].hideArrowId);
}
$rbArrowContainer.off('click', this._clickHandler);
$rbArrowContainer.off('mouseenter', this._mouseEnterHandler);
$rbArrowContainer.off('mouseleave', this._mouseLeaveHandler);
this._clickHandler = null;
this._mouseEnterHandler = null;
this._mouseLeaveHandler = null;
this._mainDiv.find('>.' + this._containerClass).remove();
this._isEnable = false;
};
/**
*
* @memberOf ArrowsControl
*/
ArrowsControl.prototype.destroy = function() {
this.disable();
};
return ArrowsControl;
});
</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>