]>
Commit | Line | Data |
---|---|---|
497b1c71 A |
1 | /** |
2 | * Retrieve an element up in the tree from its class name. | |
3 | */ | |
4 | function getParentByClass(el, className) { | |
5 | var p = el.parentNode; | |
6 | if (p == null || p.classList.contains(className)) { | |
7 | return p; | |
8 | } | |
9 | return getParentByClass(p, className); | |
10 | } | |
11 | ||
12 | ||
4ed6d1ba A |
13 | /** |
14 | * Handle responsive menu. | |
15 | * Source: http://purecss.io/layouts/tucked-menu-vertical/ | |
16 | */ | |
17 | (function (window, document) { | |
18 | var menu = document.getElementById('shaarli-menu'), | |
19 | WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize'; | |
20 | ||
21 | function toggleHorizontal() { | |
22 | [].forEach.call( | |
23 | document.getElementById('shaarli-menu').querySelectorAll('.menu-transform'), | |
24 | function(el){ | |
25 | el.classList.toggle('pure-menu-horizontal'); | |
26 | } | |
27 | ); | |
28 | }; | |
29 | ||
30 | function toggleMenu() { | |
31 | // set timeout so that the panel has a chance to roll up | |
32 | // before the menu switches states | |
33 | if (menu.classList.contains('open')) { | |
34 | setTimeout(toggleHorizontal, 500); | |
35 | } | |
36 | else { | |
37 | toggleHorizontal(); | |
38 | } | |
39 | menu.classList.toggle('open'); | |
40 | document.getElementById('menu-toggle').classList.toggle('x'); | |
41 | }; | |
42 | ||
43 | function closeMenu() { | |
44 | if (menu.classList.contains('open')) { | |
45 | toggleMenu(); | |
46 | } | |
47 | } | |
48 | ||
49 | document.getElementById('menu-toggle').addEventListener('click', function (e) { | |
50 | toggleMenu(); | |
51 | }); | |
52 | ||
53 | window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); | |
d63f7cf5 A |
54 | })(this, this.document); |
55 | ||
497b1c71 A |
56 | |
57 | /** | |
58 | * Expend search fields on focus. | |
59 | */ | |
d63f7cf5 A |
60 | var searchInputs = document.querySelectorAll('#search input[type="text"]'); |
61 | [].forEach.call(searchInputs, function(searchInput) { | |
62 | searchInput.addEventListener('focus', function(event) { | |
63 | event.target.style.width = '250px'; | |
64 | }); | |
65 | searchInput.addEventListener('blur', function(event) { | |
66 | event.target.style.width = '140px'; | |
67 | }); | |
497b1c71 A |
68 | }); |
69 | ||
70 | /** | |
71 | * Fold/Expand shaares description. | |
72 | */ | |
73 | var foldButtons = document.querySelectorAll('.fold-button'); | |
74 | [].forEach.call(foldButtons, function(foldButton) { | |
75 | // Retrieve description | |
76 | var description = null; | |
77 | var linklistItem = getParentByClass(foldButton, 'linklist-item'); | |
78 | if (linklistItem != null) { | |
79 | description = linklistItem.querySelector('.linklist-item-description'); | |
80 | if (description != null) { | |
81 | foldButton.style.display = 'inline'; | |
82 | } | |
83 | } | |
84 | ||
85 | foldButton.addEventListener('click', function(event) { | |
86 | event.preventDefault(); | |
87 | ||
88 | // Switch fold/expand - up = fold | |
89 | if (event.target.classList.contains('fa-chevron-up')) { | |
90 | ||
91 | event.target.title = 'Expand'; | |
92 | description.style.display = 'none'; | |
93 | } | |
94 | else { | |
95 | event.target.title = 'Fold'; | |
96 | description.style.display = 'block'; | |
97 | } | |
98 | event.target.classList.toggle('fa-chevron-down'); | |
99 | event.target.classList.toggle('fa-chevron-up'); | |
100 | }); | |
d63f7cf5 | 101 | }); |