]>
Commit | Line | Data |
---|---|---|
4ed6d1ba A |
1 | /** |
2 | * Handle responsive menu. | |
3 | * Source: http://purecss.io/layouts/tucked-menu-vertical/ | |
4 | */ | |
5 | (function (window, document) { | |
6 | var menu = document.getElementById('shaarli-menu'), | |
7 | WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize'; | |
8 | ||
9 | function toggleHorizontal() { | |
10 | [].forEach.call( | |
11 | document.getElementById('shaarli-menu').querySelectorAll('.menu-transform'), | |
12 | function(el){ | |
13 | el.classList.toggle('pure-menu-horizontal'); | |
14 | } | |
15 | ); | |
16 | }; | |
17 | ||
18 | function toggleMenu() { | |
19 | // set timeout so that the panel has a chance to roll up | |
20 | // before the menu switches states | |
21 | if (menu.classList.contains('open')) { | |
22 | setTimeout(toggleHorizontal, 500); | |
23 | } | |
24 | else { | |
25 | toggleHorizontal(); | |
26 | } | |
27 | menu.classList.toggle('open'); | |
28 | document.getElementById('menu-toggle').classList.toggle('x'); | |
29 | }; | |
30 | ||
31 | function closeMenu() { | |
32 | if (menu.classList.contains('open')) { | |
33 | toggleMenu(); | |
34 | } | |
35 | } | |
36 | ||
37 | document.getElementById('menu-toggle').addEventListener('click', function (e) { | |
38 | toggleMenu(); | |
39 | }); | |
40 | ||
41 | window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); | |
d63f7cf5 A |
42 | })(this, this.document); |
43 | ||
44 | var searchInputs = document.querySelectorAll('#search input[type="text"]'); | |
45 | [].forEach.call(searchInputs, function(searchInput) { | |
46 | searchInput.addEventListener('focus', function(event) { | |
47 | event.target.style.width = '250px'; | |
48 | }); | |
49 | searchInput.addEventListener('blur', function(event) { | |
50 | event.target.style.width = '140px'; | |
51 | }); | |
52 | }); |