https://setneg.go.id/classic/topbar/assets/js/sections/menu.js

1/*!
2 * remark (http://getbootstrapadmin.com/remark)
3 * Copyright 2016 amazingsurge
4 * Licensed under the Themeforest Standard Licenses
5 */
6(function(window, document, $) {
7  'use strict';
8
9  $.site.menu = {
10    speed: 250,
11    accordion: true, // A setting that changes the collapsible behavior to expandable instead of the default accordion style
12
13    init: function() {
14      this.$instance = $('.site-menu');
15
16      if (this.$instance.length === 0) {
17        return;
18      }
19
20      this.bind();
21
22      if (Breakpoints.current().name !== 'xs') {
23        this.scrollable.init();
24      }
25    },
26
27    globalClick: function(flag) {
28      switch (flag) {
29        case 'on':
30          $(document).on('click.site.menu', function(e) {
31            if ($('.dropdown > [data-dropdown-toggle="true"]').length > 0) {
32              if ($(e.target).closest(".dropdown-menu").length === 0) {
33                $('.dropdown > [data-dropdown-toggle="true"]').attr('data-dropdown-toggle', 'false').closest(".dropdown").removeClass('open');
34              }
35            }
36          });
37          break;
38        case 'off':
39          $(document).off('click.site.menu');
40          break;
41      }
42    },
43
44    open: function($tag) {
45      if ($tag.is('.dropdown')) {
46        $('[data-dropdown-toggle="true"]').attr('data-dropdown-toggle', 'false').closest(".dropdown").removeClass('open');
47        $tag.find('>.dropdown-toggle').attr('data-dropdown-toggle', 'true');
48      }
49      $tag.addClass('open');
50    },
51
52    close: function($tag) {
53      $tag.removeClass('open');
54      if ($tag.is('.dropdown')) {
55        $tag.find('>.dropdown-toggle').attr('data-dropdown-toggle', 'false');
56      }
57    },
58
59    bind: function() {
60      var self = this;
61
62      if (Breakpoints.current().name !== 'xs') {
63        self.globalClick('on');
64      }
65
66      this.$instance.on('open.site.menu', '.site-menu-item', function(e) {
67        var $item = $(this);
68
69        if (Breakpoints.current().name === 'xs') {
70          self.expand($item, function() {
71            self.open($item);
72          });
73        } else {
74          self.open($item);
75        }
76
77        if (self.accordion) {
78          $item.siblings('.open').trigger('close.site.menu');
79        }
80
81        e.stopPropagation();
82      }).on('close.site.menu', '.site-menu-item.open', function(e) {
83        var $item = $(this);
84
85        if (Breakpoints.current().name === 'xs') {
86          self.collapse($item, function() {
87            self.close($item);
88          });
89        } else {
90          self.close($item);
91        }
92
93        e.stopPropagation();
94      }).on('click.site.menu', '.site-menu-item', function(e) {
95        var $this = $(this);
96
97        if ($this.is('.has-sub') && $(e.target).closest('.site-menu-item').is(this)) {
98          if ($this.is('.open')) {
99            $this.trigger('close.site.menu');
100          } else {
101            $this.trigger('open.site.menu');
102          }
103        }
104
105        if (Breakpoints.current().name === 'xs') {
106          e.stopPropagation();
107        } else {
108          if ($this.is('.dropdown')) {
109            e.stopPropagation();
110          }
111
112          if ($(e.target).closest('.site-menu-scroll-wrap').length === 1) {
113            self.scrollable.update($(e.target).closest('.site-menu-scroll-wrap'))
114            e.stopPropagation();
115          }
116        }
117      });
118
119      var prevBreakpoint = Breakpoints.current().name;
120
121      Breakpoints.on('change', function() {
122        var current = Breakpoints.current().name;
123
124        self.reset();
125        if (current === 'xs') {
126          self.globalClick('off');
127          self.scrollable.destory();
128          self.$instance.off('click.site.menu.scroll');
129        } else {
130          if (prevBreakpoint === 'xs') {
131
132            if (!self.scrollable.built) {
133              self.scrollable.init();
134            }
135
136            self.globalClick('off');
137            self.globalClick('on');
138
139            $('.site-menu .scrollable-container', self.$instance).css({
140              'height': '',
141              'width': ''
142            });
143
144            self.$instance.one('click.site.menu.scroll', '.site-menu-item', function() {
145              self.scrollable.refresh();
146            });
147          }
148        }
149        prevBreakpoint = current;
150      });
151    },
152
153    reset: function() {
154      $('.dropdown > [data-dropdown-toggle="true"]').attr('data-dropdown-toggle', 'false').closest(".dropdown").removeClass('open');
155    },
156
157    collapse: function($item, callback) {
158      var self = this;
159      var $sub = $($('> .site-menu-sub', $item)[0] || $('> .dropdown-menu', $item)[0] || $('> .site-menu-scroll-wrap', $item)[0]);
160
161      $sub.show().slideUp(this.speed, function() {
162        $(this).css('display', '');
163
164        $(this).find('> .site-menu-item').removeClass('is-shown');
165
166        if (callback) {
167          callback();
168        }
169
170        self.$instance.trigger('collapsed.site.menu');
171      });
172    },
173
174    expand: function($item, callback) {
175      var self = this;
176      var $sub = $($('> .site-menu-sub', $item)[0] || $('> .dropdown-menu', $item)[0] || $('> .site-menu-scroll-wrap', $item)[0]);
177      var $children = $sub.is('.site-menu-sub') ? $sub.children('.site-menu-item').addClass('is-hidden') : $($sub.find('.site-menu-sub')[0]).addClass('is-hidden');
178
179      $sub.hide().slideDown(this.speed, function() {
180        $(this).css('display', '');
181
182        if (callback) {
183          callback();
184        }
185

186        self.$instance.trigger('expanded.site.menu');
187      });
188
189      setTimeout(function() {
190        $children.addClass('is-shown');
191        $children.removeClass('is-hidden');
192      }, 0);
193    },
194
195    refresh: function() {
196      this.$instance.find('.open').filter(':not(.active)').removeClass('open');
197    },
198
199    scrollable: {
200      built: false,
201      init: function() {
202        var skin = 'scrollable-inverse';
203
204        if ($.site.menubar.$instance && $.site.menubar.$instance.is('.site-menubar-light')) {
205          skin = '';
206        } else if ($('.site-menubar').is('.site-menubar-light')) {
207          skin = '';
208        }
209
210        $.each($('.site-menu-scroll-wrap', $.site.menu.$instance), function(i, list) {
211          $(list).asScrollable({
212            namespace: 'scrollable',
213            skin: skin,
214            direction: 'vertical',
215            contentSelector: '>',
216            containerSelector: '>'
217          }).data('asScrollable');
218        });
219        this.built = true;
220      },
221
222      update: function($target) {
223        $target.data('asScrollable').update();
224      },
225
226      enable: function($target) {
227        $target.data('asScrollable').enable();
228      },
229
230      disable: function($target) {
231        $target.data('asScrollable').disable();
232      },
233
234      refresh: function() {
235        var self = this;
236
237        $.each($('.site-menu-scroll-wrap', this.$instance), function(i, list) {
238          self.enable($(list));
239        });
240      },
241
242      destory: function() {
243        var self = this;
244
245        $.each($('.site-menu-scroll-wrap', this.$instance), function(i, list) {
246          self.disable($(list));
247        });
248      }
249    }
250  };
251})(window, document, jQuery);