1 | /*global $ */ |
---|
2 | 'use strict'; |
---|
3 | |
---|
4 | $(document).ready(function() { |
---|
5 | if ($(window).width() < 1024) { |
---|
6 | |
---|
7 | const create_name = function(text) { |
---|
8 | |
---|
9 | // Convert text to lower case. |
---|
10 | let name = text.toLowerCase(); |
---|
11 | |
---|
12 | // Remove leading and trailing spaces, and any non-alphanumeric |
---|
13 | // characters except for ampersands, spaces and dashes. |
---|
14 | name = name.replace(/^\s+|\s+$|[^a-z0-9&\s-]/g, ''); |
---|
15 | |
---|
16 | // Replace '&' with 'and'. |
---|
17 | name = name.replace(/&/g, 'and'); |
---|
18 | |
---|
19 | // Replaces spaces with dashes. |
---|
20 | name = name.replace(/\s/g, '-'); |
---|
21 | |
---|
22 | // Squash any duplicate dashes. |
---|
23 | name = name.replace(/(-)+\1/g, '$1'); |
---|
24 | |
---|
25 | return name; |
---|
26 | }; |
---|
27 | |
---|
28 | // Set toggle class to each #sidebar h2 |
---|
29 | $('#sidebar div div h2').addClass('toggle'); |
---|
30 | |
---|
31 | // Hide all h2.toggle siblings |
---|
32 | $('#sidebar div div h2').nextAll().hide(); |
---|
33 | |
---|
34 | // Add a link to each h2.toggle element. |
---|
35 | $('h2.toggle').each(function() { |
---|
36 | |
---|
37 | // Convert the h2 element text into a value that |
---|
38 | // is safe to use in a name attribute. |
---|
39 | const name = create_name($(this).text()); |
---|
40 | |
---|
41 | // Create a name attribute in the following sibling |
---|
42 | // to act as a fragment anchor. |
---|
43 | $(this).next().attr('name', name); |
---|
44 | |
---|
45 | // Replace the h2.toggle element with a link to the |
---|
46 | // fragment anchor. Use the h2 text to create the |
---|
47 | // link title attribute. |
---|
48 | $(this).html( |
---|
49 | '<a href="#' + name + '" title="Reveal ' + |
---|
50 | $(this).text() + ' content">' + |
---|
51 | $(this).html() + '</a>'); |
---|
52 | }); |
---|
53 | |
---|
54 | // Add a click event handler to all h2.toggle elements. |
---|
55 | $('h2.toggle').click(function(event) { |
---|
56 | event.preventDefault(); |
---|
57 | // Toggle the 'expanded' class of the h2.toggle |
---|
58 | // element, then apply the slideToggle effect |
---|
59 | // to all siblings. |
---|
60 | $(this).toggleClass('expanded'). |
---|
61 | nextAll().slideToggle('fast'); |
---|
62 | }); |
---|
63 | |
---|
64 | // Remove the focus from the link tag when accessed with a mouse. |
---|
65 | $('h2.toggle a').mouseup(function() { |
---|
66 | // Use the blur() method to remove focus. |
---|
67 | $(this).blur(); |
---|
68 | }); |
---|
69 | } |
---|
70 | }); |
---|