diff options
Diffstat (limited to 'tpl/default/js/shaarli.js')
-rw-r--r-- | tpl/default/js/shaarli.js | 262 |
1 files changed, 262 insertions, 0 deletions
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js new file mode 100644 index 00000000..d47c257f --- /dev/null +++ b/tpl/default/js/shaarli.js | |||
@@ -0,0 +1,262 @@ | |||
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(); | ||
87 | var state = foldAllButton.firstElementChild.getAttribute('class').indexOf('down') != -1 ? 'down' : 'up'; | ||
88 | [].forEach.call(foldButtons, function (foldButton) { | ||
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 | } | ||
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 | } | ||
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 | } | ||
262 | }; | ||