https://www.itam.mx/sites/all/modules/responsive_menus/styles/resp…/js/responsive_menus_simple.js?tls0hd

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-main');
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    var incr = 0;
52    $(menuElement).find('ul').each(function() {
53      incr++;
54      // Prevent error if there is no id.
55      if (!$(this).attr('id')) {
56        $(this).attr('id', 'rm-no-id-' + incr);
57      }
58      // Prevent error if there is no class.
59      if (!$(this).attr('class')) {
60        $(this).attr('class', 'rm-no-class');
61      }
62      $(this).data('removeattr', true)
63        .data('rmids', $(this).attr('id'))
64        .data('rmclasses', $(this).attr('class'));
65    });
66    // Finally, add our class to the parent.
67    $(menuElement).addClass('responsive-menus-simple');
68  }
69
70  /**
71   * Remove classes & IDs from original menu for easier theming.
72   */
73  function remove_classes_ids(menuElement) {
74    // Handle ULs if selector is parent div.
75    $(menuElement).find('ul').each(function() {
76      $(this).attr('class', 'rm-removed').attr('id', 'rm-removed');
77    });
78    // Remove classes/IDs.
79    $(menuElement).attr('class', 'responsive-menus-simple').attr('id', 'rm-removed');
80  }
81
82  // Iterate through selectors, check window sizes, add some classes.
83  Drupal.behaviors.responsive_menus = {
84    attach: function (context, settings) {
85      settings.responsive_menus = settings.responsive_menus || {};
86      $('body').once('responsive-menus-load', function() {
87        // Only doing this themes that don't include a viewport attribute.
88        // e.g. Bartik for testing out-of-the-box... yeah, stupid.
89        if (!$('meta[name=viewport]').length > 0) {
90          $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">');
91        }
92        // Window width with legacy browsers.
93        var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
94        $.each(settings.responsive_menus, function(ind, iteration) {
95          if (iteration.responsive_menus_style != 'responsive_menus_simple') {
96            return true;
97          }
98          if (!iteration.selectors.length) {
99            return true;
100          }
101          var $media_unit = iteration.media_unit || 'px';
102          if ($media_unit === 'em') {
103            var $base_font_size = parseFloat($('body').css('font-size'));
104            var $media_size = iteration.media_size * $base_font_size || 768;
105          }
106          else {
107            var $media_size = iteration.media_size || 768;
108          }
109
110          // Handle clicks & toggling.
111          var toggler_class = '';
112          var toggler_text = iteration.toggler_text;
113          // Iterate through our selectors.
114          $.each(iteration.selectors, function(index, value) {
115            // Stop if there is no menu element.
116            if ($(value).length < 1) {
117              return true;
118            }
119            // Handle nested menus.  Make sure we get the first, but not children.
120            if ($(value).length > 1) {
121              $(value).each(function(val_index) {
122                if (!$(this).parents('ul').length) {
123                  if (!$(this).hasClass('responsive-menus-simple')) {
124                    toggler_class = 'responsive-menus-' + ind + '-' + index + '-' + val_index;
125                    // Store classes & IDs before removing.
126                    if (iteration.remove_attributes) {
127                      store_classes_ids(this);
128                    }
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));