jquery-no-conflict.slicknav.js 14 KB

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