]>
Commit | Line | Data |
---|---|---|
402b0346 A |
1 | window.onload = function () { |
2 | ||
3 | /** | |
4 | * Retrieve an element up in the tree from its class name. | |
5 | */ | |
6 | function getParentByClass(el, className) { | |
7 | var p = el.parentNode; | |
8 | if (p == null || p.classList.contains(className)) { | |
9 | return p; | |
10 | } | |
11 | return getParentByClass(p, className); | |
12 | } | |
13 | ||
14 | ||
15 | /** | |
16 | * Handle responsive menu. | |
17 | * Source: http://purecss.io/layouts/tucked-menu-vertical/ | |
18 | */ | |
19 | (function (window, document) { | |
20 | var menu = document.getElementById('shaarli-menu'), | |
21 | WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize'; | |
22 | ||
23 | function toggleHorizontal() { | |
24 | [].forEach.call( | |
25 | document.getElementById('shaarli-menu').querySelectorAll('.menu-transform'), | |
26 | function(el){ | |
27 | el.classList.toggle('pure-menu-horizontal'); | |
28 | } | |
29 | ); | |
30 | }; | |
31 | ||
32 | function toggleMenu() { | |
33 | // set timeout so that the panel has a chance to roll up | |
34 | // before the menu switches states | |
35 | if (menu.classList.contains('open')) { | |
36 | setTimeout(toggleHorizontal, 500); | |
37 | } | |
38 | else { | |
39 | toggleHorizontal(); | |
40 | } | |
41 | menu.classList.toggle('open'); | |
42 | document.getElementById('menu-toggle').classList.toggle('x'); | |
43 | }; | |
44 | ||
45 | function closeMenu() { | |
46 | if (menu.classList.contains('open')) { | |
47 | toggleMenu(); | |
48 | } | |
49 | } | |
50 | ||
51 | document.getElementById('menu-toggle').addEventListener('click', function (e) { | |
52 | toggleMenu(); | |
53 | }); | |
54 | ||
55 | window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); | |
56 | })(this, this.document); | |
57 | ||
58 | /** | |
59 | * Fold/Expand shaares description and thumbnail. | |
60 | */ | |
61 | var foldAllButtons = document.getElementsByClassName('fold-all'); | |
62 | var foldButtons = document.getElementsByClassName('fold-button'); | |
63 | ||
64 | [].forEach.call(foldButtons, function (foldButton) { | |
65 | // Retrieve description | |
66 | var description = null; | |
67 | var thumbnail = null; | |
68 | var linklistItem = getParentByClass(foldButton, 'linklist-item'); | |
69 | if (linklistItem != null) { | |
70 | description = linklistItem.querySelector('.linklist-item-description'); | |
71 | thumbnail = linklistItem.querySelector('.linklist-item-thumbnail'); | |
72 | if (description != null || thumbnail != null) { | |
73 | foldButton.style.display = 'inline'; | |
74 | } | |
75 | } | |
76 | ||
77 | foldButton.addEventListener('click', function (event) { | |
78 | event.preventDefault(); | |
79 | toggleFold(event.target, description, thumbnail); | |
80 | }); | |
81 | }); | |
82 | ||
83 | if (foldAllButtons != null) { | |
84 | [].forEach.call(foldAllButtons, function (foldAllButton) { | |
85 | foldAllButton.addEventListener('click', function (event) { | |
86 | event.preventDefault(); | |
70401690 | 87 | var state = foldAllButton.firstElementChild.getAttribute('class').indexOf('down') != -1 ? 'down' : 'up'; |
402b0346 | 88 | [].forEach.call(foldButtons, function (foldButton) { |
70401690 A |
89 | if (foldButton.firstElementChild.classList.contains('fa-chevron-up') && state == 'down' |
90 | || foldButton.firstElementChild.classList.contains('fa-chevron-down') && state == 'up' | |
91 | ) { | |
92 | return; | |
93 | } | |
402b0346 A |
94 | // Retrieve description |
95 | var description = null; | |
96 | var thumbnail = null; | |
97 | var linklistItem = getParentByClass(foldButton, 'linklist-item'); | |
98 | if (linklistItem != null) { | |
99 | description = linklistItem.querySelector('.linklist-item-description'); | |
100 | thumbnail = linklistItem.querySelector('.linklist-item-thumbnail'); | |
101 | if (description != null || thumbnail != null) { | |
102 | foldButton.style.display = 'inline'; | |
103 | } | |
104 | } | |
105 | ||
106 | toggleFold(foldButton.firstElementChild, description, thumbnail); | |
107 | }); | |
108 | foldAllButton.firstElementChild.classList.toggle('fa-chevron-down'); | |
109 | foldAllButton.firstElementChild.classList.toggle('fa-chevron-up'); | |
110 | }); | |
111 | }); | |
112 | } | |
113 | ||
114 | function toggleFold(button, description, thumb) | |
115 | { | |
116 | // Switch fold/expand - up = fold | |
117 | if (button.classList.contains('fa-chevron-up')) { | |
118 | button.title = 'Expand'; | |
119 | if (description != null) { | |
120 | description.style.display = 'none'; | |
121 | } | |
122 | if (thumb != null) { | |
123 | thumb.style.display = 'none'; | |
124 | } | |
125 | } | |
126 | else { | |
127 | button.title = 'Fold'; | |
128 | if (description != null) { | |
129 | description.style.display = 'block'; | |
130 | } | |
131 | if (thumb != null) { | |
132 | thumb.style.display = 'block'; | |
133 | } | |
134 | } | |
135 | button.classList.toggle('fa-chevron-down'); | |
136 | button.classList.toggle('fa-chevron-up'); | |
137 | } | |
138 | ||
139 | /** | |
140 | * Confirmation message before deletion. | |
141 | */ | |
142 | var deleteLinks = document.querySelectorAll('.confirm-delete'); | |
143 | [].forEach.call(deleteLinks, function(deleteLink) { | |
144 | deleteLink.addEventListener('click', function(event) { | |
145 | if(! confirm('Are you sure you want to delete this link ?')) { | |
146 | event.preventDefault(); | |
147 | } | |
148 | }); | |
149 | }); | |
150 | ||
151 | /** | |
152 | * Close alerts | |
153 | */ | |
154 | var closeLinks = document.querySelectorAll('.pure-alert-close'); | |
155 | [].forEach.call(closeLinks, function(closeLink) { | |
156 | closeLink.addEventListener('click', function(event) { | |
157 | var alert = getParentByClass(event.target, 'pure-alert-closable'); | |
158 | alert.style.display = 'none'; | |
159 | }); | |
160 | }); | |
161 | ||
162 | /** | |
163 | * New version dismiss. | |
164 | * Hide the message for one week using localStorage. | |
165 | */ | |
166 | var newVersionDismiss = document.getElementById('new-version-dismiss'); | |
167 | var newVersionMessage = document.querySelector('.new-version-message'); | |
168 | if (newVersionMessage != null | |
169 | && localStorage.getItem('newVersionDismiss') != null | |
170 | && parseInt(localStorage.getItem('newVersionDismiss')) + 7*24*60*60*1000 > (new Date()).getTime() | |
171 | ) { | |
172 | newVersionMessage.style.display = 'none'; | |
173 | } | |
174 | if (newVersionDismiss != null) { | |
175 | newVersionDismiss.addEventListener('click', function () { | |
176 | localStorage.setItem('newVersionDismiss', (new Date()).getTime()); | |
177 | }); | |
178 | } | |
179 | ||
180 | var hiddenReturnurl = document.getElementsByName('returnurl'); | |
181 | if (hiddenReturnurl != null) { | |
182 | hiddenReturnurl.value = window.location.href; | |
183 | } | |
184 | ||
185 | /** | |
186 | * Autofocus text fields | |
187 | */ | |
188 | var autofocusElements = document.querySelector('.autofocus'); | |
189 | if (autofocusElements != null) { | |
190 | autofocusElements.focus(); | |
191 | } | |
192 | ||
193 | /** | |
194 | * Handle sub menus/forms | |
195 | */ | |
196 | var openers = document.getElementsByClassName('subheader-opener'); | |
197 | if (openers != null) { | |
198 | [].forEach.call(openers, function(opener) { | |
199 | opener.addEventListener('click', function(event) { | |
200 | event.preventDefault(); | |
201 | ||
202 | var id = opener.getAttribute('data-open-id'); | |
203 | var sub = document.getElementById(id); | |
204 | ||
205 | if (sub != null) { | |
206 | [].forEach.call(document.getElementsByClassName('subheader-form'), function (element) { | |
207 | if (element != sub) { | |
208 | removeClass(element, 'open') | |
209 | } | |
210 | }); | |
211 | ||
212 | sub.classList.toggle('open'); | |
213 | } | |
214 | }); | |
215 | }); | |
216 | } | |
217 | ||
218 | function removeClass(element, classname) { | |
219 | element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' '); | |
220 | } | |
221 | ||
222 | /** | |
223 | * Remove CSS target padding (for fixed bar) | |
224 | */ | |
225 | if (location.hash != '') { | |
226 | var anchor = document.querySelector(location.hash); | |
227 | if (anchor != null) { | |
228 | var padsize = anchor.clientHeight; | |
229 | console.log(document.querySelector(location.hash).clientHeight); | |
230 | this.window.scroll(0, this.window.scrollY - padsize); | |
231 | anchor.style.paddingTop = 0; | |
232 | } | |
233 | } | |
70401690 A |
234 | |
235 | /** | |
236 | * Text area resizer | |
237 | */ | |
238 | var description = document.getElementById('lf_description'); | |
239 | var observe = function (element, event, handler) { | |
240 | element.addEventListener(event, handler, false); | |
241 | }; | |
242 | function init () { | |
243 | function resize () { | |
244 | description.style.height = 'auto'; | |
245 | description.style.height = description.scrollHeight+10+'px'; | |
246 | } | |
247 | /* 0-timeout to get the already changed text */ | |
248 | function delayedResize () { | |
249 | window.setTimeout(resize, 0); | |
250 | } | |
251 | observe(description, 'change', resize); | |
252 | observe(description, 'cut', delayedResize); | |
253 | observe(description, 'paste', delayedResize); | |
254 | observe(description, 'drop', delayedResize); | |
255 | observe(description, 'keydown', delayedResize); | |
256 | ||
257 | resize(); | |
258 | } | |
259 | if (description != null) { | |
260 | init(); | |
261 | } | |
402b0346 | 262 | }; |