/app/assets/javascripts/mobile/jquery.meanmenu.js

https://bitbucket.org/travelin7/fiesta-seafood · JavaScript · 254 lines · 183 code · 25 blank · 46 comment · 44 complexity · 5ed9dffa81ddbcd4a96236bb81479c22 MD5 · raw file

  1. /**
  2. * jQuery meanMenu v2.0
  3. * Copyright (C) 2012-2013 Chris Wharton (themes@meanthemes.com)
  4. *
  5. * This program is free software: you can redistribute it and/or modify
  6. * it under the terms of the GNU General Public License as published by
  7. * the Free Software Foundation, either version 3 of the License, or
  8. * (at your option) any later version.
  9. *
  10. * THIS SOFTWARE AND DOCUMENTATION IS PROVIDED "AS IS," AND COPYRIGHT
  11. * HOLDERS MAKE NO REPRESENTATIONS OR WARRANTIES, EXPRESS OR IMPLIED,
  12. * INCLUDING BUT NOT LIMITED TO, WARRANTIES OF MERCHANTABILITY OR
  13. * FITNESS FOR ANY PARTICULAR PURPOSE OR THAT THE USE OF THE SOFTWARE
  14. * OR DOCUMENTATION WILL NOT INFRINGE ANY THIRD PARTY PATENTS,
  15. * COPYRIGHTS, TRADEMARKS OR OTHER RIGHTS.COPYRIGHT HOLDERS WILL NOT
  16. * BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL OR CONSEQUENTIAL
  17. * DAMAGES ARISING OUT OF ANY USE OF THE SOFTWARE OR DOCUMENTATION.
  18. *
  19. * You should have received a copy of the GNU General Public License
  20. * along with this program. If not, see <http://gnu.org/licenses/>.
  21. *
  22. * Find more information at http://www.meanthemes.com/plugins/meanmenu/
  23. *
  24. */
  25. (function ($) {
  26. $.fn.meanmenu = function (options) {
  27. var defaults = {
  28. meanMenuTarget: jQuery(this), // Target the current HTML markup you wish to replace
  29. meanMenuClose: "", // single character you want to represent the close menu button
  30. meanMenuCloseSize: "18px", // set font size of close button
  31. meanMenuOpen: "<span /><span /><span />", // text/markup you want when menu is closed
  32. meanRevealPosition: "right", // left right or center positions
  33. meanRevealPositionDistance: "0", // Tweak the position of the menu
  34. meanRevealColour: "", // override CSS colours for the reveal background
  35. meanRevealHoverColour: "", // override CSS colours for the reveal hover
  36. meanScreenWidth: "1880", // set the screen width you want meanmenu to kick in at
  37. meanNavPush: "", // set a height here in px, em or % if you want to budge your layout now the navigation is missing.
  38. meanShowChildren: true, // true to show children in the menu, false to hide them
  39. meanExpandableChildren: true, // true to allow expand/collapse children
  40. meanExpand: "+", // single character you want to represent the expand for ULs
  41. meanContract: "-", // single character you want to represent the contract for ULs
  42. meanRemoveAttrs: false // true to remove classes and IDs, false to keep them
  43. };
  44. var options = $.extend(defaults, options);
  45. // get browser width
  46. currentWidth = window.innerWidth || document.documentElement.clientWidth;
  47. return this.each(function () {
  48. var meanMenu = options.meanMenuTarget;
  49. var meanReveal = options.meanReveal;
  50. var meanMenuClose = options.meanMenuClose;
  51. var meanMenuCloseSize = options.meanMenuCloseSize;
  52. var meanMenuOpen = options.meanMenuOpen;
  53. var meanRevealPosition = options.meanRevealPosition;
  54. var meanRevealPositionDistance = options.meanRevealPositionDistance;
  55. var meanRevealColour = options.meanRevealColour;
  56. var meanRevealHoverColour = options.meanRevealHoverColour;
  57. var meanScreenWidth = options.meanScreenWidth;
  58. var meanNavPush = options.meanNavPush;
  59. var meanRevealClass = ".meanmenu-reveal";
  60. meanShowChildren = options.meanShowChildren;
  61. meanExpandableChildren = options.meanExpandableChildren;
  62. var meanExpand = options.meanExpand;
  63. var meanContract = options.meanContract;
  64. var meanRemoveAttrs = options.meanRemoveAttrs;
  65. //detect known mobile/tablet usage
  66. if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/Blackberry/i)) || (navigator.userAgent.match(/Windows Phone/i)) ) {
  67. var isMobile = true;
  68. }
  69. if ( (navigator.userAgent.match(/MSIE 8/i)) || (navigator.userAgent.match(/MSIE 7/i)) ) {
  70. // add scrollbar for IE7 & 8 to stop breaking resize function on small content sites
  71. jQuery('html').css("overflow-y" , "scroll");
  72. }
  73. function meanCentered() {
  74. if (meanRevealPosition == "center") {
  75. var newWidth = window.innerWidth || document.documentElement.clientWidth;
  76. var meanCenter = ( (newWidth/2)-22 )+"px";
  77. meanRevealPos = "left:" + meanCenter + ";right:auto;";
  78. if (!isMobile) {
  79. jQuery('.meanmenu-reveal').css("left",meanCenter);
  80. } else {
  81. jQuery('.meanmenu-reveal').animate({
  82. left: meanCenter
  83. });
  84. }
  85. }
  86. }
  87. menuOn = false;
  88. meanMenuExist = false;
  89. if (meanRevealPosition == "right") {
  90. meanRevealPos = "right:" + meanRevealPositionDistance + ";left:auto;";
  91. }
  92. if (meanRevealPosition == "left") {
  93. meanRevealPos = "left:" + meanRevealPositionDistance + ";right:auto;";
  94. }
  95. // run center function
  96. meanCentered();
  97. // set all styles for mean-reveal
  98. meanStyles = "background:"+meanRevealColour+";color:"+meanRevealColour+";"+meanRevealPos;
  99. function meanInner() {
  100. // get last class name
  101. if (jQuery($navreveal).is(".meanmenu-reveal.meanclose")) {
  102. $navreveal.html(meanMenuClose);
  103. } else {
  104. $navreveal.html(meanMenuOpen);
  105. }
  106. }
  107. //re-instate original nav (and call this on window.width functions)
  108. function meanOriginal() {
  109. jQuery('.mean-bar,.mean-push').remove();
  110. jQuery('body').removeClass("mean-container");
  111. jQuery(meanMenu).show();
  112. menuOn = false;
  113. meanMenuExist = false;
  114. }
  115. //navigation reveal
  116. function showMeanMenu() {
  117. if (currentWidth <= meanScreenWidth) {
  118. meanMenuExist = true;
  119. // add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.mean-container'
  120. jQuery('body').addClass("mean-container");
  121. jQuery('.mean-container').prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+meanStyles+'">Show Navigation</a><nav class="mean-nav"></nav></div>');
  122. //push meanMenu navigation into .mean-nav
  123. var meanMenuContents = jQuery(meanMenu).html();
  124. jQuery('.mean-nav').html(meanMenuContents);
  125. // remove all classes from EVERYTHING inside meanmenu nav
  126. if(meanRemoveAttrs) {
  127. jQuery('nav.mean-nav *').each(function() {
  128. jQuery(this).removeAttr("class");
  129. jQuery(this).removeAttr("id");
  130. });
  131. }
  132. // push in a holder div (this can be used if removal of nav is causing layout issues)
  133. jQuery(meanMenu).before('<div class="mean-push" />');
  134. jQuery('.mean-push').css("margin-top",meanNavPush);
  135. // hide current navigation and reveal mean nav link
  136. jQuery(meanMenu).hide();
  137. jQuery(".meanmenu-reveal").show();
  138. // turn 'X' on or off
  139. jQuery(meanRevealClass).html(meanMenuOpen);
  140. $navreveal = jQuery(meanRevealClass);
  141. //hide mean-nav ul
  142. jQuery('.mean-nav ul').hide();
  143. // hide sub nav
  144. if(meanShowChildren) {
  145. // allow expandable sub nav(s)
  146. if(meanExpandableChildren){
  147. jQuery('.mean-nav ul ul').each(function() {
  148. if(jQuery(this).children().length){
  149. jQuery(this,'li:first').parent().append('<a class="mean-expand" href="#" style="font-size: '+ meanMenuCloseSize +'">'+ meanExpand +'</a>');
  150. }
  151. });
  152. jQuery('.mean-expand').on("click",function(e){
  153. e.preventDefault();
  154. if (jQuery(this).hasClass("mean-clicked")) {
  155. jQuery(this).text(meanExpand);
  156. console.log("Been clicked");
  157. jQuery(this).prev('ul').slideUp(300, function(){
  158. });
  159. } else {
  160. jQuery(this).text(meanContract);
  161. jQuery(this).prev('ul').slideDown(300, function(){
  162. });
  163. }
  164. jQuery(this).toggleClass("mean-clicked");
  165. });
  166. } else {
  167. jQuery('.mean-nav ul ul').show();
  168. }
  169. } else {
  170. jQuery('.mean-nav ul ul').hide();
  171. }
  172. // add last class to tidy up borders
  173. jQuery('.mean-nav ul li').last().addClass('mean-last');
  174. $navreveal.removeClass("meanclose");
  175. jQuery($navreveal).click(function(e){
  176. e.preventDefault();
  177. if(menuOn == false) {
  178. $navreveal.css("text-align", "center");
  179. $navreveal.css("text-indent", "0");
  180. $navreveal.css("font-size", meanMenuCloseSize);
  181. jQuery('.mean-nav ul:first').slideDown();
  182. menuOn = true;
  183. } else {
  184. jQuery('.mean-nav ul:first').slideUp();
  185. menuOn = false;
  186. }
  187. $navreveal.toggleClass("meanclose");
  188. meanInner();
  189. });
  190. } else {
  191. meanOriginal();
  192. }
  193. }
  194. if (!isMobile) {
  195. //reset menu on resize above meanScreenWidth
  196. jQuery(window).resize(function () {
  197. currentWidth = window.innerWidth || document.documentElement.clientWidth;
  198. if (currentWidth > meanScreenWidth) {
  199. meanOriginal();
  200. } else {
  201. meanOriginal();
  202. }
  203. if (currentWidth <= meanScreenWidth) {
  204. showMeanMenu();
  205. meanCentered();
  206. } else {
  207. meanOriginal();
  208. }
  209. });
  210. }
  211. // adjust menu positioning on centered navigation
  212. window.onorientationchange = function() {
  213. meanCentered();
  214. // get browser width
  215. currentWidth = window.innerWidth || document.documentElement.clientWidth;
  216. if (currentWidth >= meanScreenWidth) {
  217. meanOriginal();
  218. }
  219. if (currentWidth <= meanScreenWidth) {
  220. if (meanMenuExist == false) {
  221. showMeanMenu();
  222. }
  223. }
  224. }
  225. // run main menuMenu function on load
  226. showMeanMenu();
  227. });
  228. };
  229. })(jQuery);