https://register.deca.ca/v3/assets/js/sections/menubar.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  var $body = $('body'),
10    $html = $('html');
11
12  $.site.menubar = {
13    opened: null,
14    folded: null,
15    top: false,
16    foldAlt: false,
17    $instance: null,
18    auto: true,
19
20    init: function() {
21      $html.removeClass('css-menubar').addClass('js-menubar');
22
23      this.$instance = $(".site-menubar");
24
25      if (this.$instance.length === 0) {
26        return;
27      }
28
29      var self = this;
30
31      if ($body.is('.site-menubar-top')) {
32        this.top = true;
33      }
34
35      if ($body.is('.site-menubar-fold-alt')) {
36        this.foldAlt = true;
37      }
38
39      if ($body.data('autoMenubar') === false || $body.is('.site-menubar-keep')) {
40        if ($body.hasClass('site-menubar-fold')) {
41          this.auto = 'fold';
42        } else if ($body.hasClass('site-menubar-unfold')) {
43          this.auto = 'unfold';
44        }
45      }
46
47      this.$instance.on('changed.site.menubar', function() {
48        self.update();
49      });
50
51      this.change();
52    },
53
54    change: function() {
55      var breakpoint = Breakpoints.current();
56      if (this.auto !== true) {
57        switch (this.auto) {
58          case 'fold':
59            this.reset();
60            if (breakpoint.name == 'xs') {
61              this.hide();
62            } else {
63              this.fold();
64            }
65            return;
66          case 'unfold':
67            this.reset();
68            if (breakpoint.name == 'xs') {
69              this.hide();
70            } else {
71              this.unfold();
72            }
73            return;
74        }
75      }
76
77      this.reset();
78
79      if (breakpoint) {
80        switch (breakpoint.name) {
81          case 'lg':
82            this.unfold();
83            break;
84          case 'md':
85          case 'sm':
86            this.fold();
87            break;
88          case 'xs':
89            this.hide();
90            break;
91        }
92      }
93    },
94
95    animate: function(doing, callback) {
96      var self = this;
97      $body.addClass('site-menubar-changing');
98
99      doing.call(self);
100      this.$instance.trigger('changing.site.menubar');
101
102      setTimeout(function() {
103        callback.call(self);
104        $body.removeClass('site-menubar-changing');
105
106        self.$instance.trigger('changed.site.menubar');
107      }, 500);
108    },
109
110    reset: function() {
111      this.opened = null;
112      this.folded = null;
113      $body.removeClass('site-menubar-hide site-menubar-open site-menubar-fold site-menubar-unfold');
114      $html.removeClass('disable-scrolling');
115    },
116
117    open: function() {
118      if (this.opened !== true) {
119        this.animate(function() {
120          $body.removeClass('site-menubar-hide').addClass('site-menubar-open site-menubar-unfold');
121          this.opened = true;
122
123          $html.addClass('disable-scrolling');
124
125        }, function() {
126          this.scrollable.enable();
127        });
128      }
129    },
130
131    hide: function() {
132      this.hoverscroll.disable();
133
134      if (this.opened !== false) {
135        this.animate(function() {
136
137          $html.removeClass('disable-scrolling');
138          $body.removeClass('site-menubar-open').addClass('site-menubar-hide site-menubar-unfold');
139          this.opened = false;
140
141        }, function() {
142          this.scrollable.enable();
143        });
144      }
145    },
146
147    unfold: function() {
148      this.hoverscroll.disable();
149
150      if (this.folded !== false) {
151        this.animate(function() {
152          $body.removeClass('site-menubar-fold').addClass('site-menubar-unfold');
153          this.folded = false;
154
155        }, function() {
156          this.scrollable.enable();
157
158          if (this.folded !== null) {
159            $.site.resize();
160          }
161        });
162      }
163    },
164
165    fold: function() {
166      this.scrollable.disable();
167
168      if (this.folded !== true) {
169        this.animate(function() {
170
171          $body.removeClass('site-menubar-unfold').addClass('site-menubar-fold');
172          this.folded = true;
173
174        }, function() {
175          this.hoverscroll.enable();
176
177          if (this.folded !== null) {
178            $.site.resize();
179          }
180        });
181      }
182    },
183
184    toggle: function() {

185      var breakpoint = Breakpoints.current();
186      var folded = this.folded;
187      var opened = this.opened;
188
189      switch (breakpoint.name) {
190        case 'lg':
191          if (folded === null || folded === false) {
192            this.fold();
193          } else {
194            this.unfold();
195          }
196          break;
197        case 'md':
198        case 'sm':
199          if (folded === null || folded === true) {
200            this.unfold();
201          } else {
202            this.fold();
203          }
204          break;
205        case 'xs':
206          if (opened === null || opened === false) {
207            this.open();
208          } else {
209            this.hide();
210          }
211          break;
212      }
213    },
214
215    update: function() {
216      this.scrollable.update();
217      this.hoverscroll.update();
218    },
219
220    scrollable: {
221      api: null,
222      native: false,
223      init: function() {
224        // if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
225        //   this.native = true;
226        //   $body.addClass('site-menubar-native');
227        //   return;
228        // }
229
230        if ($body.is('.site-menubar-native')) {
231          this.native = true;
232          return;
233        }
234
235        this.api = $.site.menubar.$instance.children('.site-menubar-body').asScrollable({
236          namespace: 'scrollable',
237          skin: 'scrollable-inverse',
238          direction: 'vertical',
239          contentSelector: '>',
240          containerSelector: '>'
241        }).data('asScrollable');
242      },
243
244      update: function() {
245        if (this.api) {
246          this.api.update();
247        }
248      },
249
250      enable: function() {
251        if (this.native) {
252          return;
253        }
254        if (!this.api) {
255          this.init();
256        }
257        if (this.api) {
258          this.api.enable();
259        }
260      },
261
262      disable: function() {
263        if (this.api) {
264          this.api.disable();
265        }
266      }
267    },
268
269    hoverscroll: {
270      api: null,
271
272      init: function() {
273        this.api = $.site.menubar.$instance.children('.site-menubar-body').asHoverScroll({
274          namespace: 'hoverscorll',
275          direction: 'vertical',
276          list: '.site-menu',
277          item: '> li',
278          exception: '.site-menu-sub',
279          fixed: false,
280          boundary: 100,
281          onEnter: function() {
282            //$(this).siblings().removeClass('hover');
283            //$(this).addClass('hover');
284          },
285          onLeave: function() {
286            //$(this).removeClass('hover');
287          }
288        }).data('asHoverScroll');
289      },
290
291      update: function() {
292        if (this.api) {
293          this.api.update();
294        }
295      },
296
297      enable: function() {
298        if (!this.api) {
299          this.init();
300        }
301        if (this.api) {
302          this.api.enable();
303        }
304      },
305
306      disable: function() {
307        if (this.api) {
308          this.api.disable();
309        }
310      }
311    }
312  };
313})(window, document, jQuery);