arrowsControl.js

  1. define(['utils', 'IControl', 'errors'], function(Utils, IControl, Errors) {
  2.     "use strict";
  4.     /**
  5.      * @class
  6.      * Класс управления панелью с помощью стрелок, отображаемых по сторонам панели.
  7.      * @param {JQuery} mainDiv - элемент, в котором располагается панель. Должен содержать класс rb-wrapper.
  8.      * @param {function} actionFn - функция, определяющая действие при переходе в одну из сторон (Moving.prototype._moveByActionValue)
  9.      * @param {Moving#afterRenderDispatcher} afterRender - Диспетчер, выполняющий зарегистрированные функции после рендеринга контента моделей на странице после перехода
  10.      * @constructor ArrowsControl
  11.      * @extends IControl
  12.      */
  13.     function ArrowsControl(mainDiv, actionFn, afterRender) {
  14.         if (!(mainDiv instanceof $)) {
  15.             throw new Errors.ArgumentError('mainDiv', mainDiv);
  16.         }
  18.         if (typeof actionFn !== 'function') {
  19.             throw new Errors.ArgumentError('actionFn', actionFn);
  20.         }
  21.         this._isEnable = false;
  22.         this._mainDiv = mainDiv.parent();
  23.         this._actionFn = actionFn;
  24.         this._afterRender = afterRender;
  25.     }
  26.     Utils.inherite(ArrowsControl, IControl);
  28.     /**
  29.      * Применить конфигурацию. Учитывает опции hideArrowsTime, showArrowsOutside, showArrowsOnHover, hideArrowsAfterTime.
  30.      * @param {Moving~config} config
  31.      * @memberOf ArrowsControl
  32.      */
  33.     ArrowsControl.prototype.configure = function(config) {
  34.         if (typeof config === 'object') {
  35.             if (config.hideArrowsTime !== undefined) {
  36.                 this._hideArrowsTime = config.hideArrowsTime;
  37.             }
  38.             if (config.showArrowsOutside !== undefined) {
  39.                 this._showArrowsOutside = config.showArrowsOutside;
  40.             }
  41.             if (config.showArrowsOnHover !== undefined) {
  42.                 this._showArrowsOnHover = config.showArrowsOnHover;
  43.             }
  44.             if (config.hideArrowsAfterTime !== undefined) {
  45.                 this._hideArrowsAfterTime = config.hideArrowsAfterTime;
  46.             }
  47.         }
  48.         this._containerClass = (this._showArrowsOnHover ? 'rb__arrow-container-hover' : 'rb__arrow-container');
  49.     };
  50.     /**
  51.      *
  52.      * @returns {boolean}
  53.      * @memberOf ArrowsControl
  54.      */
  55.     ArrowsControl.prototype.isEnable = function() {
  56.         return this._isEnable;
  57.     };
  58.     /**
  59.      *
  60.      * @memberOf ArrowsControl
  61.      */
  62.     ArrowsControl.prototype.enable = function() {
  63.         if (this._isEnable) return;
  65.         var self = this;
  66.         var mouseEnterHandler = function(e) {
  67.             if (!self._hideArrowsAfterTime) return;
  69.             var arrow = $(e.currentTarget),
  70.                 $body = $('body'),
  71.                 arrowOffset = arrow.offset(),
  72.                 arrowX = arrowOffset.left,
  73.                 arrowY = arrowOffset.top,
  74.                 arrowXX = arrowX + arrow.width(),
  75.                 arrowYY = arrowY + arrow.height();
  77.             //var timeoutId;
  78.             function mouseMoveHandler(e) {
  79.                 var x = e.clientX, y = e.clientY;
  81.                 if (!(arrowX < x && x < arrowXX && arrowY < y && y < arrowYY)) {
  82.                     arrow.toggleClass('rb__arrow-none', false);
  83.                     arrow.toggleClass('rb__arrow-cursor', true);
  84.                     $body.off('mousemove', mouseMoveHandler);
  85.                     //clearTimeout(timeoutId);
  86.                 }
  87.             }
  88.             function hideArrow() {
  89.                 arrow.toggleClass('rb__arrow-none', true);
  90.                 arrow.toggleClass('rb__arrow-cursor', false);
  92.                 $body.on('mousemove', mouseMoveHandler);
  93.                 //timeoutId = setTimeout(function() {
  94.                 //    arrow.toggleClass('rb__arrow-none', false);
  95.                 //    arrow.toggleClass('rb__arrow-cursor', true);
  96.                 //    $body.off('mousemove', mouseMoveHandler);
  97.                 //}, 10000);
  98.                 // todo если из iframe не всплывает mousemove с нормальными координатами, для iframe не будет работать
  99.             }
  101.             if (arrow.length) {
  102.                 arrow[0].hideArrowId = setTimeout(hideArrow, self._hideArrowsTime);
  103.             }
  104.         };
  105.         var mouseLeaveHandler = function(e) {
  106.             if (!self._hideArrowsAfterTime) return;
  108.             var arrow = $(e.currentTarget);
  109.             clearTimeout(arrow[0].hideArrowId);
  110.         };
  111.         var clickHandler = function(e) {
  112.             var arrow = $(e.currentTarget);
  114.             mouseLeaveHandler(e);
  115.             self._afterRender.add(mouseEnterHandler.bind(undefined, e), true);
  117.             self._actionFn(arrow, Utils.sides, function(container, defValue) {
  118.                 return container.is('.rb__arrow-container_' + defValue);
  119.             });
  120.         };
  122.         var markup = '';
  123.         Utils.sides.forEach(function(side) {
  124.             markup += '<div class="' +
  125.                 self._containerClass +
  126.                 ' rb__arrow-cursor rb__arrow-container_' + side + '' +
  127.                 (self._showArrowsOutside ? (' rb__arrow-outside_' + side) : '') +
  128.                 '">' +
  129.                 '<div class="rb__arrow rb__arrow_' + side + '"></div>' +
  130.                 '</div>';
  131.         });
  132.         this._mainDiv.append($(markup));
  134.         var $rbArrowContainer = this._mainDiv.find('>.' + this._containerClass);
  136.         $rbArrowContainer.on('click', clickHandler);
  137.         $rbArrowContainer.on('mouseenter', mouseEnterHandler);
  138.         $rbArrowContainer.on('mouseleave', mouseLeaveHandler);
  139.         this._clickHandler = clickHandler;
  140.         this._mouseEnterHandler = mouseEnterHandler;
  141.         this._mouseLeaveHandler = mouseLeaveHandler;
  143.         this._isEnable = true;
  144.     };
  145.     /**
  146.      *
  147.      * @memberOf ArrowsControl
  148.      */
  149.     ArrowsControl.prototype.disable = function() {
  150.         if (!this._isEnable) return;
  152.         var $rbArrowContainer = this._mainDiv.find('>.' + this._containerClass);
  153.         for (var i = 0; i < $rbArrowContainer.length; i++) {
  154.             clearTimeout($rbArrowContainer[i].hideArrowId);
  155.         }
  156.         $rbArrowContainer.off('click', this._clickHandler);
  157.         $rbArrowContainer.off('mouseenter', this._mouseEnterHandler);
  158.         $rbArrowContainer.off('mouseleave', this._mouseLeaveHandler);
  159.         this._clickHandler = null;
  160.         this._mouseEnterHandler = null;
  161.         this._mouseLeaveHandler = null;
  163.         this._mainDiv.find('>.' + this._containerClass).remove();
  165.         this._isEnable = false;
  166.     };
  167.     /**
  168.      *
  169.      * @memberOf ArrowsControl
  170.      */
  171.     ArrowsControl.prototype.destroy = function() {
  172.         this.disable();
  173.     };
  175.     return ArrowsControl;
  176. });