openproject/frontend/app/components/context-menus/has-dropdown-menu/has-dropdown-menu-directive.js

// -- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
// ++

function hasDropdownMenu($rootScope, $injector, $window, FocusHelper) {
  function getCssPositionProperties(dropdown, trigger) {
    var hOffset = 0,
      vOffset = 0;
    if (dropdown.hasClass('dropdown-anchor-top')) {
      vOffset = -dropdown.outerHeight() - trigger.outerHeight() + parseInt(trigger.css('margin-top'), 10);
    }

    // Styling logic taken from jQuery-dropdown plugin: https://github.com/plapier/jquery-dropdown
    // (dual MIT/GPL-Licensed)

    // Position the dropdown relative-to-parent or relative-to-document
    if (dropdown.hasClass('dropdown-relative')) {
      return {
        left: dropdown.hasClass('dropdown-anchor-right') ?
        trigger.position().left -
        (dropdown.outerWidth(true) - trigger.outerWidth(true)) -
        parseInt(trigger.css('margin-right'), 10) + hOffset :
        trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset,
        top: trigger.position().top +
        trigger.outerHeight(true) -
        parseInt(trigger.css('margin-top'), 10) + vOffset
      };
    }
    else {
      return {
        left: dropdown.hasClass('dropdown-anchor-right') ?
        trigger.offset().left - (dropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset,
        top: trigger.offset().top + trigger.outerHeight() + vOffset
      };
    }
  }

  function getPositionPropertiesOfEvent(event) {
    var position = {};

    if (event.pageX && event.pageY) {
      position.top = Math.max(event.pageY, 0);
      position.left = Math.max(event.pageX, 0);
    }
    else {
      var bounding = angular.element(event.target)[0].getBoundingClientRect();

      position.top = Math.max(bounding.bottom, 0);
      position.left = Math.max(bounding.left, 0);
    }

    return position;
  }

  function getCssPositionPropertiesOfEvent(event) {
    var position = getPositionPropertiesOfEvent(event);

    position.top += 'px';
    position.left += 'px';

    return position;
  }

  return {
    restrict: 'A',
    controller: [function () {
      var dropDownMenuOpened = false;

      this.open = function () {
        dropDownMenuOpened = true;
      };
      this.close = function () {
        dropDownMenuOpened = false;
      };
      this.opened = function () {
        return dropDownMenuOpened;
      };
    }],
    link: function (scope, element, attrs, ctrl) {
      var contextMenu = $injector.get(attrs.target),
        locals = {},
        pointerPosition,
        pointerCssPosition,
        win = angular.element($window),
        menuElement,
        afterFocusOn = attrs.afterFocusOn,
        positionRelativeTo = attrs.positionRelativeTo,
        triggerOnEvent = (attrs.triggerOnEvent || 'click') + '.dropdown.openproject';

      /* contextMenu      is a mandatory attribute and used to bind a specific context
       menu to the trigger event
       triggerOnEvent   allows for binding the event for opening the menu to "click" */


      function toggle(event) {
        if (active()) {
          close();
        } else {
          open(event);
        }
      }

      function active() {
        return contextMenu.active() && ctrl.opened();
      }

      function open(event) {
        var ignoreFocusOpener = true;
        pointerPosition = getPositionPropertiesOfEvent(event);
        pointerCssPosition = getCssPositionPropertiesOfEvent(event);
        $rootScope.$broadcast('openproject.dropdown.closeDropdowns', ignoreFocusOpener);
        // prepare locals, these define properties to be passed on to the context menu scope
        var localKeys = (attrs.locals || '').split(',').map(function (local) {
          return local.trim();
        });
        angular.forEach(localKeys, function (key) {
          locals[key] = scope[key];
        });

        ctrl.open();

        contextMenu.open(element, locals)
          .then(function (element) {
            menuElement = element;
            menuElement.trap();
            positionDropdown();
            menuElement.on('click', function (e) {
              // allow inputs to be clickable
              // without closing the dropdown
              if (angular.element(e.target).is(':input')) {
                e.stopPropagation();
              }
            });
          });
      }

      function close(ignoreFocusOpener) {
        ctrl.close();
        var disableFocus = ignoreFocusOpener;
        contextMenu.close(disableFocus).then(function () {
          if (!ignoreFocusOpener) {
            FocusHelper.focusElement(afterFocusOn ? element.find(afterFocusOn) : element);
          }
        });
      }

      function positionDropdown() {
        var positionRelativeToElement = positionRelativeTo ?
          element.find(positionRelativeTo) : element;
        if (attrs.triggerOnEvent === 'contextmenu') {
          menuElement.css(pointerCssPosition);
          adjustPosition(menuElement, pointerPosition);
        } else {
          menuElement.css(getCssPositionProperties(menuElement, positionRelativeToElement));
        }
      }

      function adjustPosition($element, pointerPosition) {
        var viewport = {
          top: win.scrollTop(),
          left: win.scrollLeft()
        };

        viewport.right = viewport.left + win.width();
        viewport.bottom = viewport.top + win.height();
        var bounds = $element.offset();
        bounds.right = bounds.left + $element.outerWidth();
        bounds.bottom = bounds.top + $element.outerHeight();
        if (viewport.right < bounds.right) {
          $element.css('left', pointerPosition.left - $element.outerWidth());
        }
        if (viewport.bottom < bounds.bottom) {
          $element.css('top', pointerPosition.top - $element.outerHeight());
        }
      }

      element.bind(triggerOnEvent, function (event) {
        event.preventDefault();
        event.stopPropagation();
        scope.$apply(function () {
          toggle(event);
        });

        menuElement.find('.menu-item').first().focus();

        // set css position parameters after the digest has been completed
        if (contextMenu.active()) positionDropdown();
      });

      scope.$on('openproject.dropdown.closeDropdowns', function (event, ignoreFocusOpener) {
        if (!ctrl.opened()) {
          return;
        }
        close(ignoreFocusOpener);
      });

      scope.$on('openproject.dropdown.reposition', function () {
        if (contextMenu.active() && menuElement && ctrl.opened()) {
          positionDropdown();
        }
      });

      var elementKeyUpString = 'keyup.contextmenu.dropdown.openproject';
      element
        .off(elementKeyUpString)
        .on(elementKeyUpString, function (event) {
          // Alt + Shift + F10
          if (event.keyCode === 121 && event.shiftKey && event.altKey && !contextMenu.active()) {
            open(event);
          }
        });


      // We need the off/on stuff in order to not have a new listener
      // for every linking. It's not only not efficient, if causes bugs
      // because of closures
      // we also add an event namespace to avoid off'ing unrelated listeners
      // We can leave it like this
      // or move to the compile function of the directive
      // or move to a service and make sure it's called only once

      var repositioningEventString = 'resize.dropdown.openproject, mousewheel.dropdown.openproject';
      win
        .off(repositioningEventString)
        .on(repositioningEventString, function () {
          $rootScope.$broadcast('openproject.dropdown.reposition');
        });

      var keyUpEventString = 'keyup.dropdown.openproject';
      win
        .off(keyUpEventString).on(keyUpEventString, function (event) {
        if (event.keyCode === 27) {
          $rootScope.$broadcast('openproject.dropdown.closeDropdowns');
        }
      });

      function handleWindowClickEvent() {
        $rootScope.$broadcast('openproject.dropdown.closeDropdowns');
      }

      // Firefox treats a right-click as a click and a contextmenu event while other browsers
      // just treat it as a contextmenu event
      var clickEventString = 'click.dropdown.openproject';
      win
        .off(clickEventString)
        .on(clickEventString, handleWindowClickEvent);
      win
        .off(triggerOnEvent)
        .on(triggerOnEvent, handleWindowClickEvent);
    }
  };
}

angular
  .module('openproject.uiComponents')
  .directive('hasDropdownMenu', hasDropdownMenu);