https://somerville.k12.ma.us/modules/contrib/responsive_menus/styl…/js/responsive_menus_simple.js?tld5am

1/**
2 * @file
3 * Simple responsification of menus.
4 */
5(function ($) {
6  /**
7   * Handle clicks & toggling the menu.
8   */
9  var toggler_click = function() {
10    $(this).parent().toggleClass('responsive-toggled');
11  };
12  /**
13   * Unbind other mouse events on the menu items.
14   *
15   * @todo
16   *   Not sure if it works 100%.
17   *   Doesn't restore binds when out-of-responsive (if window dragging).
18   */
19  function remove_mouse_events(menuElement) {
20    // Determine jQuery version and what disable options we have.
21    var jqVersion = $.fn.jquery;
22    if (jqVersion < 1.7) {
23      $(menuElement).die('mouseover mouseout mouseenter mouseleave');
24      $(menuElement + ' li').die('mouseover mouseout mouseenter mouseleave');
25      $(menuElement + ' li a').die('mouseover mouseout mouseenter mouseleave');
26    }
27    else {
28      $(menuElement).off('hover');
29      $(menuElement + ' li').off('hover');
30      $(menuElement + ' li a').off('hover');
31    }
32    $(menuElement).unbind('mouseover mouseout mouseenter mouseleave');
33    $(menuElement + ' li').unbind('mouseover mouseout mouseenter mouseleave');
34    $(menuElement + ' li a').unbind('mouseover mouseout mouseenter mouseleave');
35  }
36
37  /**
38   * Store classes & IDs for restoring later (if window dragging).
39   */
40  function store_classes_ids(menuElement) {
41    if (!$(menuElement).attr('id')) {
42      $(menuElement).attr('id', 'rm-no-id');
43    }
44    if (!$(menuElement).attr('class')) {
45      $(menuElement).attr('class', 'rm-no-class');
46    }
47    $(menuElement).data('removeattr', true)
48      .data('rmids', $(menuElement).attr('id'))
49      .data('rmclasses', $(menuElement).attr('class'));
50    // Handle ULs if selector is parent div.
51    $(menuElement).find('ul').each(function() {
52      // Prevent error if there is no id.
53      if (!$(this).attr('id')) {
54        $(this).attr('id', 'rm-no-id');
55      }
56      // Prevent error if there is no class.
57      if (!$(this).attr('class')) {
58        $(this).attr('class', 'rm-no-class');
59      }
60      $(this).data('removeattr', true)
61        .data('rmids', $(this).attr('id'))
62        .data('rmclasses', $(this).attr('class'));
63    });
64    // Finally, add our class to the parent.
65    $(menuElement).addClass('responsive-menus-simple');
66  }
67
68  /**
69   * Remove classes & IDs from original menu for easier theming.
70   */
71  function remove_classes_ids(menuElement) {
72    // Handle ULs if selector is parent div.
73    $(menuElement).find('ul').each(function() {
74      $(this).attr('class', 'rm-removed').attr('id', 'rm-removed');
75    });
76    // Remove classes/IDs.
77    $(menuElement).attr('class', 'responsive-menus-simple').attr('id', 'rm-removed');
78  }
79
80  // Iterate through selectors, check window sizes, add some classes.
81  Backdrop.behaviors.responsive_menus = {
82    attach: function (context, settings) {
83      settings.responsive_menus = settings.responsive_menus || {};
84      console.log(settings.responsive_menus);
85      $('body').once('responsive-menus-load', function() {
86        // Only doing this themes that don't include a viewport attribute.
87        // e.g. Bartik for testing out-of-the-box... yeah, stupid.
88        if (!$('meta[name=viewport]').length > 0) {
89          $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
90        }
91        // Window width with legacy browsers.
92        var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
93        $.each(settings.responsive_menus, function(ind, iteration) {
94          if (iteration.responsive_menus_style != 'responsive_menus_simple') {
95            return true;
96          }
97          if (!iteration.selectors.length) {
98            return true;
99          }
100          var $media_unit = iteration.media_unit || 'px';
101          if ($media_unit === 'em') {
102            var $base_font_size = parseFloat($('body').css('font-size'));
103            var $media_size = iteration.media_size * $base_font_size || 768;
104          }
105          else {
106            var $media_size = iteration.media_size || 768;
107          }
108
109          // Handle clicks & toggling.
110          var toggler_class = '';
111          var toggler_text = iteration.toggler_text;
112          // Iterate through our selectors.
113          $.each(iteration.selectors, function(index, value) {
114            // Stop if there is no menu element.
115            if ($(value).length < 1) {
116              return true;
117            }
118            // Handle nested menus.  Make sure we get the first, but not children.
119            if ($(value).length > 1) {
120              $(value).each(function(val_index) {
121                if (!$(this).parents('ul').length) {
122                  if (!$(this).hasClass('responsive-menus-simple')) {
123                    toggler_class = 'responsive-menus-' + ind + '-' + index + '-' + val_index;
124                    // Store classes & IDs before removing.
125                    if (iteration.remove_attributes) {
126                      store_classes_ids(this);
127                    }
128                    $(this).addClass('responsive-menus-simple');
129                    $(this).wrap('<div data-mediasize="' + $media_size + '" class="responsive-menus ' + toggler_class + '" />');
130                    $('.' + toggler_class).prepend('<span class="toggler">' + toggler_text + '</span>');
131                    $('.' + toggler_class + ' .toggler').bind('click', toggler_click);

132                    // Unbind other mouse events.
133                    if (iteration.disable_mouse_events) {
134                      //$(this).data('disablemouse', true);
135                      remove_mouse_events(this);
136                    }
137                    // Use absolute positioning.
138                    if (iteration.absolute) {
139                      $('.' + toggler_class).addClass('absolute');
140                    }
141                    // Handle first size check.
142                    if (windowWidth <= $media_size) {
143                      // Remove attributes setting.
144                      if (iteration.remove_attributes) {
145                        remove_classes_ids(this);
146                      }
147                      $('.' + toggler_class).addClass('responsified');
148                    }
149                  }
150                }
151              });
152            }
153            else {
154              // Single level menus.
155              if (!$(value).hasClass('responsive-menus-simple')) {
156                toggler_class = 'responsive-menus-' + ind + '-' + index;
157                // Store classes & IDs before removing.
158                if (iteration.remove_attributes) {
159                  store_classes_ids(value);
160                }
161                $(value).wrap('<div data-mediasize="' + $media_size + '" class="responsive-menus ' + toggler_class + '" />');
162                $('.' + toggler_class).prepend('<span class="toggler">' + toggler_text + '</span>');
163                $('.' + toggler_class + ' .toggler').bind('click', toggler_click);
164                // Unbind other mouse events.
165                if (iteration.disable_mouse_events) {
166                  // @todo For rebinding mouse events.
167                  /*if ($(value + ' li a').data('events')) {
168                    $(value).data('tmpevents', $(value + ' li a').data('events'));
169                  }*/
170                  remove_mouse_events(value);
171                }
172                // Use absolute positioning.
173                if (iteration.absolute) {
174                  $('.' + toggler_class).addClass('absolute');
175                }
176                // Handle first size check.
177                if (windowWidth <= $media_size) {
178                  // Remove attributes setting.
179                  if (iteration.remove_attributes) {
180                    remove_classes_ids(value);
181                  }
182                  $('.' + toggler_class).addClass('responsified');
183                }
184              }
185            }
186          });
187       });
188        // Handle window resizing.
189        $(window).resize(function() {

190          // Window width with legacy browsers.
191          windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
192          $('.responsive-menus').each(function(menuIndex, menuValue) {
193            var mediasize = $(this).data('mediasize') || 768;
194            // Prevent menu from going off the screen.  This only happens in
195            // non-responsive themes (like Bartik default), but it looks bad.
196            if ($(this).width() > windowWidth) {
197              $(this).data('nonresponsive', true);
198              $(this).width(windowWidth);
199            }
200            var menuElement = $(this).find('.responsive-menus-simple');
201            if (windowWidth >= mediasize) {
202              if (menuElement.data('removeattr')) {
203                menuElement.addClass(menuElement.data('rmclasses'));
204                menuElement.attr('id', menuElement.data('rmids'));
205                menuElement.find('ul').each(function() {
206                  $(this).addClass($(this).data('rmclasses'));
207                  $(this).attr('id', $(this).data('rmids'));
208                });
209              }
210              $(this).removeClass('responsified');
211            }
212            if (windowWidth <= mediasize) {
213              // Now fix repercussions for handling non-responsive themes above.
214              // Stretch width back out w/ the screen.
215              if ($(this).data('nonresponsive') && $(this).width() < windowWidth) {
216                $(this).width(windowWidth);
217              }
218              if (menuElement.data('removeattr')) {
219                remove_classes_ids(menuElement);
220              }
221              $(this).addClass('responsified');
222            }
223          });
224        });
225      });
226    }
227  };
228
229}(jQuery));