mui/src/angular/dropdown.js at react-0.14.x · cssCheck/mui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
/**
 * MUI Angular Dropdown Component
 * @module angular/dropdown
 */

module.exports = angular.module('mui.dropdown', [])
  .directive('muiDropdown', ['$timeout', '$compile', function($timeout, $compile) {
    return {
      restrict: 'AE',
      transclude: true,
      replace : true,
      scope: {
        variant: '@',
        color: '@',
        size: '@',
        open: '=?',
        ngDisabled: '='
      },
      template: '<div class="mui-dropdown">' +
        '<mui-button ' +
        'variant="{{variant}}" ' +
        'color="{{color}}" ' +
        'size="{{size}}" ' +
        'ng-click="onClick($event);" ' +
        '></mui-button>' +
        '<ul class="mui-dropdown__menu" ng-transclude></ul>'+
        '</div>',
      link: function(scope, element, attrs) {
        var dropdownClass = 'mui-dropdown',
            menuClass = 'mui-dropdown__menu',
            openClass = 'mui--is-open',
            rightClass = 'mui-dropdown__menu--right',
            isUndef = angular.isUndefined,
            menuEl,
            buttonEl;

        // save references
        menuEl = angular.element(element[0].querySelector('.' + menuClass));
        buttonEl = angular.element(element[0].querySelector('.mui-btn'));

        menuEl.css('margin-top', '-3px');

        // handle is-open
        if (!isUndef(attrs.open)) scope.open = true;

        // handle disabled
        if (!isUndef(attrs.disabled)) {
          buttonEl.attr('disabled', true);
        }

        // handle right-align
        if (!isUndef(attrs.rightAlign)) menuEl.addClass(rightClass);

        // handle no-caret
        if (!isUndef(attrs.noCaret)) buttonEl.html(attrs.label);
        else buttonEl.html(attrs.label + ' <mui-caret></mui-caret>');

        function closeDropdownFn() {
          scope.open = false;
          scope.$apply();
        }

        // handle menu open
        scope.$watch('open', function(newValue) {
          if (newValue === true) {
            menuEl.addClass(openClass);
            document.addEventListener('click', closeDropdownFn);
          } else if (newValue === false) {
            menuEl.removeClass(openClass);
            document.removeEventListener('click', closeDropdownFn);
          }
        });

        // click handler
        scope.onClick = function($event) {
          // exit if disabled
          if (scope.disabled) return;

          // prevent form submission
          $event.preventDefault();
          $event.stopPropagation();

          // toggle open
          if (scope.open) scope.open = false;
          else scope.open = true;
        };
      }
    };
  }]);