jquery.slicknav.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  1. /*!
  2. SlickNav Responsive Mobile Menu
  3. (c) 2014 Josh Cope
  4. licensed under MIT
  5. */
  6. ;(function ($, document, window) {
  7. var
  8. // default settings object.
  9. defaults = {
  10. label: 'MENU',
  11. duplicate: true,
  12. duration: 200,
  13. easingOpen: 'swing',
  14. easingClose: 'swing',
  15. closedSymbol: '►',
  16. openedSymbol: '▼',
  17. prependTo: 'body',
  18. parentTag: 'a',
  19. closeOnClick: false,
  20. allowParentLinks: false,
  21. init: function(){},
  22. open: function(){},
  23. close: function(){}
  24. },
  25. mobileMenu = 'slicknav',
  26. prefix = 'slicknav';
  27. function Plugin( element, options ) {
  28. this.element = element;
  29. // jQuery has an extend method which merges the contents of two or
  30. // more objects, storing the result in the first object. The first object
  31. // is generally empty as we don't want to alter the default options for
  32. // future instances of the plugin
  33. this.settings = $.extend( {}, defaults, options) ;
  34. this._defaults = defaults;
  35. this._name = mobileMenu;
  36. this.init();
  37. }
  38. Plugin.prototype.init = function () {
  39. var $this = this;
  40. var menu = $(this.element);
  41. var settings = this.settings;
  42. // clone menu if needed
  43. if (settings.duplicate) {
  44. $this.mobileNav = menu.clone();
  45. //remove ids from clone to prevent css issues
  46. $this.mobileNav.removeAttr('id');
  47. $this.mobileNav.find('*').each(function(i,e){
  48. $(e).removeAttr('id');
  49. });
  50. }
  51. else
  52. $this.mobileNav = menu;
  53. // styling class for the button
  54. var iconClass = prefix+'_icon';
  55. if (settings.label == '') {
  56. iconClass += ' '+prefix+'_no-text';
  57. }
  58. if (settings.parentTag == 'a') {
  59. settings.parentTag = 'a href="#"';
  60. }
  61. // create menu bar
  62. $this.mobileNav.attr('class', prefix+'_nav');
  63. var menuBar = $('<div class="'+prefix+'_menu"></div>');
  64. $this.btn = $('<'+settings.parentTag+' aria-haspopup="true" tabindex="0" class="'+prefix+'_btn '+prefix+'_collapsed"><span class="'+prefix+'_menutxt">'+settings.label+'</span><span class="'+iconClass+'"><span class="'+prefix+'_icon-bar"></span><span class="'+prefix+'_icon-bar"></span><span class="'+prefix+'_icon-bar"></span></span></a>');
  65. $(menuBar).append($this.btn);
  66. $(settings.prependTo).prepend(menuBar);
  67. menuBar.append($this.mobileNav);
  68. // iterate over structure adding additional structure
  69. var items = $this.mobileNav.find('li');
  70. $(items).each(function () {
  71. var item = $(this);
  72. data = {};
  73. data.children = item.children('ul').attr('role','menu');
  74. item.data("menu", data);
  75. // if a list item has a nested menu
  76. if (data.children.length > 0) {
  77. // select all text before the child menu
  78. var a = item.contents();
  79. var nodes = [];
  80. $(a).each(function(){
  81. if(!$(this).is("ul")) {
  82. nodes.push(this);
  83. }
  84. else {
  85. return false;
  86. }
  87. });
  88. // wrap item text with tag and add classes
  89. var wrap = $(nodes).wrapAll('<'+settings.parentTag+' role="menuitem" aria-haspopup="true" tabindex="-1" class="'+prefix+'_item"/>').parent();
  90. item.addClass(prefix+'_collapsed');
  91. item.addClass(prefix+'_parent');
  92. // create parent arrow
  93. $(nodes).last().after('<span class="'+prefix+'_arrow">'+settings.closedSymbol+'</span>');
  94. } else if ( item.children().length == 0) {
  95. item.addClass(prefix+'_txtnode');
  96. }
  97. // accessibility for links
  98. item.children('a').attr('role', 'menuitem').click(function(){
  99. //Emulate menu close if set
  100. if (settings.closeOnClick)
  101. $($this.btn).click();
  102. });
  103. });
  104. // structure is in place, now hide appropriate items
  105. $(items).each(function () {
  106. var data = $(this).data("menu");
  107. $this._visibilityToggle(data.children, false, null, true);
  108. });
  109. // finally toggle entire menu
  110. $this._visibilityToggle($this.mobileNav, false, 'init', true);
  111. // accessibility for menu button
  112. $this.mobileNav.attr('role','menu');
  113. // outline prevention when using mouse
  114. $(document).mousedown(function(){
  115. $this._outlines(false);
  116. });
  117. $(document).keyup(function(){
  118. $this._outlines(true);
  119. });
  120. // menu button click
  121. $($this.btn).click(function (e) {
  122. e.preventDefault();
  123. $this._menuToggle();
  124. });
  125. // click on menu parent
  126. $this.mobileNav.on('click', '.'+prefix+'_item', function(e){
  127. e.preventDefault();
  128. $this._itemClick($(this));
  129. });
  130. // check for enter key on menu button and menu parents
  131. $($this.btn).keydown(function (e) {
  132. var ev = e || event;
  133. if(ev.keyCode == 13) {
  134. e.preventDefault();
  135. $this._menuToggle();
  136. }
  137. });
  138. $this.mobileNav.on('keydown', '.'+prefix+'_item', function(e) {
  139. var ev = e || event;
  140. if(ev.keyCode == 13) {
  141. e.preventDefault();
  142. $this._itemClick($(e.target));
  143. }
  144. });
  145. // allow links clickable within parent tags if set
  146. if (settings.allowParentLinks) {
  147. $('.'+prefix+'_item a').click(function(e){
  148. e.stopImmediatePropagation();
  149. });
  150. }
  151. };
  152. //toggle menu
  153. Plugin.prototype._menuToggle = function(el){
  154. var $this = this;
  155. var btn = $this.btn;
  156. var mobileNav = $this.mobileNav;
  157. if (btn.hasClass(prefix+'_collapsed')) {
  158. btn.removeClass(prefix+'_collapsed');
  159. btn.addClass(prefix+'_open');
  160. } else {
  161. btn.removeClass(prefix+'_open');
  162. btn.addClass(prefix+'_collapsed');
  163. }
  164. btn.addClass(prefix+'_animating');
  165. $this._visibilityToggle(mobileNav, true, btn);
  166. }
  167. // toggle clicked items
  168. Plugin.prototype._itemClick = function(el) {
  169. var $this = this;
  170. var settings = $this.settings;
  171. var data = el.data("menu");
  172. if (!data) {
  173. data = {};
  174. data.arrow = el.children('.'+prefix+'_arrow');
  175. data.ul = el.next('ul');
  176. data.parent = el.parent();
  177. el.data("menu", data);
  178. }
  179. if (data.parent.hasClass(prefix+'_collapsed')) {
  180. data.arrow.html(settings.openedSymbol);
  181. data.parent.removeClass(prefix+'_collapsed');
  182. data.parent.addClass(prefix+'_open');
  183. data.parent.addClass(prefix+'_animating');
  184. $this._visibilityToggle(data.ul, true, el);
  185. } else {
  186. data.arrow.html(settings.closedSymbol);
  187. data.parent.addClass(prefix+'_collapsed');
  188. data.parent.removeClass(prefix+'_open');
  189. data.parent.addClass(prefix+'_animating');
  190. $this._visibilityToggle(data.ul, true, el);
  191. }
  192. }
  193. // toggle actual visibility and accessibility tags
  194. Plugin.prototype._visibilityToggle = function(el, animate, trigger, init) {
  195. var $this = this;
  196. var settings = $this.settings;
  197. var items = $this._getActionItems(el);
  198. var duration = 0;
  199. if (animate)
  200. duration = settings.duration;
  201. if (el.hasClass(prefix+'_hidden')) {
  202. el.removeClass(prefix+'_hidden');
  203. el.slideDown(duration, settings.easingOpen, function(){
  204. $(trigger).removeClass(prefix+'_animating');
  205. $(trigger).parent().removeClass(prefix+'_animating');
  206. //Fire open callback
  207. if (!init) {
  208. settings.open(trigger);
  209. }
  210. });
  211. el.attr('aria-hidden','false');
  212. items.attr('tabindex', '0');
  213. $this._setVisAttr(el, false);
  214. } else {
  215. el.addClass(prefix+'_hidden');
  216. el.slideUp(duration, this.settings.easingClose, function() {
  217. el.attr('aria-hidden','true');
  218. items.attr('tabindex', '-1');
  219. $this._setVisAttr(el, true);
  220. el.hide(); //jQuery 1.7 bug fix
  221. $(trigger).removeClass(prefix+'_animating');
  222. $(trigger).parent().removeClass(prefix+'_animating');
  223. //Fire init or close callback
  224. if (!init)
  225. settings.close(trigger);
  226. else if (trigger == 'init')
  227. settings.init();
  228. });
  229. }
  230. }
  231. // set attributes of element and children based on visibility
  232. Plugin.prototype._setVisAttr = function(el, hidden) {
  233. var $this = this;
  234. // select all parents that aren't hidden
  235. var nonHidden = el.children('li').children('ul').not('.'+prefix+'_hidden');
  236. // iterate over all items setting appropriate tags
  237. if (!hidden) {
  238. nonHidden.each(function(){
  239. var ul = $(this);
  240. ul.attr('aria-hidden','false');
  241. var items = $this._getActionItems(ul);
  242. items.attr('tabindex', '0');
  243. $this._setVisAttr(ul, hidden);
  244. });
  245. } else {
  246. nonHidden.each(function(){
  247. var ul = $(this);
  248. ul.attr('aria-hidden','true');
  249. var items = $this._getActionItems(ul);
  250. items.attr('tabindex', '-1');
  251. $this._setVisAttr(ul, hidden);
  252. });
  253. }
  254. }
  255. // get all 1st level items that are clickable
  256. Plugin.prototype._getActionItems = function(el) {
  257. var data = el.data("menu");
  258. if (!data) {
  259. data = {};
  260. var items = el.children('li');
  261. var anchors = items.children('a');
  262. data.links = anchors.add(items.children('.'+prefix+'_item'));
  263. el.data("menu", data);
  264. }
  265. return data.links;
  266. }
  267. Plugin.prototype._outlines = function(state) {
  268. if (!state) {
  269. $('.'+prefix+'_item, .'+prefix+'_btn').css('outline','none');
  270. } else {
  271. $('.'+prefix+'_item, .'+prefix+'_btn').css('outline','');
  272. }
  273. }
  274. Plugin.prototype.toggle = function(){
  275. $this._menuToggle();
  276. }
  277. Plugin.prototype.open = function(){
  278. $this = this;
  279. if ($this.btn.hasClass(prefix+'_collapsed')) {
  280. $this._menuToggle();
  281. }
  282. }
  283. Plugin.prototype.close = function(){
  284. $this = this;
  285. if ($this.btn.hasClass(prefix+'_open')) {
  286. $this._menuToggle();
  287. }
  288. }
  289. $.fn[mobileMenu] = function ( options ) {
  290. var args = arguments;
  291. // Is the first parameter an object (options), or was omitted, instantiate a new instance
  292. if (options === undefined || typeof options === 'object') {
  293. return this.each(function () {
  294. // Only allow the plugin to be instantiated once due to methods
  295. if (!$.data(this, 'plugin_' + mobileMenu)) {
  296. // if it has no instance, create a new one, pass options to our plugin constructor,
  297. // and store the plugin instance in the elements jQuery data object.
  298. $.data(this, 'plugin_' + mobileMenu, new Plugin( this, options ));
  299. }
  300. });
  301. // If is a string and doesn't start with an underscore or 'init' function, treat this as a call to a public method.
  302. } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
  303. // Cache the method call to make it possible to return a value
  304. var returns;
  305. this.each(function () {
  306. var instance = $.data(this, 'plugin_' + mobileMenu);
  307. // Tests that there's already a plugin-instance and checks that the requested public method exists
  308. if (instance instanceof Plugin && typeof instance[options] === 'function') {
  309. // Call the method of our plugin instance, and pass it the supplied arguments.
  310. returns = instance[options].apply( instance, Array.prototype.slice.call( args, 1 ) );
  311. }
  312. });
  313. // If the earlier cached method gives a value back return the value, otherwise return this to preserve chainability.
  314. return returns !== undefined ? returns : this;
  315. }
  316. };
  317. }(jQuery, document, window));
  318. (function($) {
  319. // Create the responsive menu using SlickNav.
  320. Drupal.admin.behaviors.responsivemenu = function (context, settings, $adminMenu) {
  321. $('#admin-menu-menu-responsive').slicknav({
  322. label: 'Menu',
  323. prependTo:'body',
  324. closedSymbol: "<i class=\"closed\"></i>",
  325. openedSymbol: "<i class=\"open\"></i>",
  326. allowParentLinks: true
  327. });
  328. };
  329. // Create the responsive shortcuts dropdown.
  330. Drupal.admin.behaviors.responsiveshortcuts = function (context, settings, $adminMenu) {
  331. // Check if there are any shortucts to respondify.
  332. if(jQuery("div.toolbar-shortcuts ul.menu li").length){
  333. // Create the dropdown base
  334. $("<select id='responsive-shortcuts-dropdown'/>").appendTo("#admin-menu-shortcuts-responsive div.toolbar-shortcuts");
  335. // Create default option "Select"
  336. $("<option />", {
  337. "selected" : "selected",
  338. "class" : "hide",
  339. "value" : "",
  340. "text" : Drupal.t('Shortcuts')
  341. }).appendTo("#admin-menu-shortcuts-responsive div.toolbar-shortcuts select");
  342. // Populate dropdown with menu items
  343. $("#admin-menu-shortcuts-responsive div.toolbar-shortcuts a").each(function() {
  344. var el = $(this);
  345. $("<option />", {
  346. "value" : el.attr("href"),
  347. "text" : el.text()
  348. }).appendTo("#admin-menu-shortcuts-responsive div.toolbar-shortcuts select");
  349. });
  350. // Redirect the user when selecting an option.
  351. $("#admin-menu-shortcuts-responsive div.toolbar-shortcuts select").change(function() {
  352. window.location = $(this).find("option:selected").val();
  353. });
  354. // Clean the mess.
  355. $('#admin-menu-shortcuts-responsive div.toolbar-shortcuts ul').remove();
  356. // Move the select box into the responsive menu.
  357. $("#admin-menu-shortcuts-responsive").prependTo(".slicknav_menu");
  358. }
  359. // Remove the edit shortcuts link from the DOM to avoid duble rendering.
  360. $('#admin-menu-shortcuts-responsive #edit-shortcuts').remove();
  361. };
  362. })(jQuery);