aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default/js
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-02-27 20:24:28 +0100
committerGitHub <noreply@github.com>2017-02-27 20:24:28 +0100
commit5978588578ca103152598ccfbe41019b12e00a4f (patch)
treeeedbb83c420f6af103440bcafbe6b79738ce7521 /tpl/default/js
parent9e5a37cc7f4eb1c83222a94eb83d4e99ce4460a4 (diff)
parent7dcbfde5ffbc057a44f710e3be7e4856d235e90b (diff)
downloadShaarli-5978588578ca103152598ccfbe41019b12e00a4f.tar.gz
Shaarli-5978588578ca103152598ccfbe41019b12e00a4f.tar.zst
Shaarli-5978588578ca103152598ccfbe41019b12e00a4f.zip
Merge pull request #754 from ArthurHoaro/webdesign2
New default template
Diffstat (limited to 'tpl/default/js')
-rw-r--r--tpl/default/js/shaarli.js262
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 @@
1window.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};