mui/src/angular/dropdown.js at textbox · CssFormWork/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
90
91
92
93
94
module.exports = angular.module('mui.dropdown', [])
  .directive('muiDropdown', function($timeout, $compile) {
    return {
      restrict: 'AE',
      transclude: true,
      replace : true,
      scope: {
        variant: '@', //['default', 'flat', 'raised', 'fab']
        color: '@', //['default', 'primary', 'danger', 'dark','accent']
        size: '@', //['default', 'small', 'large']
        open: '=?', //open ?
        disable: '=ngDisabled'
      },
      template: '<div class="mui-dropdown">' +
                  '<mui-button variant="{{variant}}" ng-disabled="disable" color="{{color}}" '+
                  'size="{{size}}"></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',
          $menu,$muiButton;

        scope.open = scope.open || false;
        if (!angular.isUndefined(attrs.disabled) && angular.isUndefined(attrs.ngDisabled)) {
          scope.disable = true;
        }

        var _findMenuNode = function() {
          return angular.element(element[0].querySelector('.' + menuClass));
        };
        $menu = _findMenuNode().css('margin-top', '-3px');

        //menu right
        !angular.isUndefined(attrs.right) && $menu.addClass(rightClass);

        //html类型的 label
        attrs.$observe('label', function() {
          $muiButton = angular.element(element[0].querySelector('.mui-btn'));
          if (!angular.isUndefined(attrs.nocaret)) {
            $muiButton.html(attrs.label);
          } else {
            $muiButton.html(attrs.label + ' <mui-caret></mui-caret>');
          }
          $compile($muiButton.children())(scope);
        });

        scope.$watch('open', function() {
          $menu = _findMenuNode();
          scope.open ? $menu.addClass(openClass) : $menu.removeClass(openClass);
        });


        var toggleEvent = function(event) {
          var self = element[0].contains(event.target);
          /**
           * [_isLink description]
           * @return {Boolean} [description]
           */
          var _isLink = function() {
            var links = _findMenuNode()[0].querySelectorAll('a[href]'),
              bool = false;
            angular.forEach(links, function(link, index) {
              link.contains(event.target) && (bool = true);
            });
            return bool;
          };

          scope.$apply(function() {
            if (_isLink() || scope.disable) {
              return;
            }
            if (!self) {
              scope.open = false;
            } else {
              scope.open = !scope.open;
            }
          });
        };

        /**
         * document mousedown event
         */
        angular.element(document).on('mousedown', toggleEvent);

        scope.$on('$destroy', function() {
          angular.element(document).off('mousedown', toggleEvent);
        });

      }
    };
  });