]>
git.immae.eu Git - github/shaarli/Shaarli.git/blob - tpl/default/js/shaarli.js
1 window
.onload = function () {
4 * Retrieve an element up in the tree from its class name.
6 function getParentByClass(el
, className
) {
8 if (p
== null || p
.classList
.contains(className
)) {
11 return getParentByClass(p
, className
);
16 * Handle responsive menu.
17 * Source: http://purecss.io/layouts/tucked-menu-vertical/
19 (function (window
, document
) {
20 var menu
= document
.getElementById('shaarli-menu'),
21 WINDOW_CHANGE_EVENT
= ('onorientationchange' in window
) ? 'orientationchange':'resize';
23 function toggleHorizontal() {
25 document
.getElementById('shaarli-menu').querySelectorAll('.menu-transform'),
27 el
.classList
.toggle('pure-menu-horizontal');
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);
41 menu
.classList
.toggle('open');
42 document
.getElementById('menu-toggle').classList
.toggle('x');
45 function closeMenu() {
46 if (menu
.classList
.contains('open')) {
51 document
.getElementById('menu-toggle').addEventListener('click', function (e
) {
55 window
.addEventListener(WINDOW_CHANGE_EVENT
, closeMenu
);
56 })(this, this.document
);
59 * Fold/Expand shaares description and thumbnail.
61 var foldAllButtons
= document
.getElementsByClassName('fold-all');
62 var foldButtons
= document
.getElementsByClassName('fold-button');
64 [].forEach
.call(foldButtons
, function (foldButton
) {
65 // Retrieve description
66 var description
= 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';
77 foldButton
.addEventListener('click', function (event
) {
78 event
.preventDefault();
79 toggleFold(event
.target
, description
, thumbnail
);
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'
94 // Retrieve description
95 var description
= 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';
106 toggleFold(foldButton
.firstElementChild
, description
, thumbnail
);
108 foldAllButton
.firstElementChild
.classList
.toggle('fa-chevron-down');
109 foldAllButton
.firstElementChild
.classList
.toggle('fa-chevron-up');
114 function toggleFold(button
, description
, thumb
)
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';
123 thumb
.style
.display
= 'none';
127 button
.title
= 'Fold';
128 if (description
!= null) {
129 description
.style
.display
= 'block';
132 thumb
.style
.display
= 'block';
135 button
.classList
.toggle('fa-chevron-down');
136 button
.classList
.toggle('fa-chevron-up');
140 * Confirmation message before deletion.
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();
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';
163 * New version dismiss.
164 * Hide the message for one week using localStorage.
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()
172 newVersionMessage
.style
.display
= 'none';
174 if (newVersionDismiss
!= null) {
175 newVersionDismiss
.addEventListener('click', function () {
176 localStorage
.setItem('newVersionDismiss', (new Date()).getTime());
180 var hiddenReturnurl
= document
.getElementsByName('returnurl');
181 if (hiddenReturnurl
!= null) {
182 hiddenReturnurl
.value
= window
.location
.href
;
186 * Autofocus text fields
188 var autofocusElements
= document
.querySelector('.autofocus');
189 if (autofocusElements
!= null) {
190 autofocusElements
.focus();
194 * Handle sub menus/forms
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();
202 var id
= opener
.getAttribute('data-open-id');
203 var sub
= document
.getElementById(id
);
206 [].forEach
.call(document
.getElementsByClassName('subheader-form'), function (element
) {
207 if (element
!= sub
) {
208 removeClass(element
, 'open')
212 sub
.classList
.toggle('open');
218 function removeClass(element
, classname
) {
219 element
.className
= element
.className
.replace(new RegExp('(?:^|\\s)'+ classname
+ '(?:\\s|$)'), ' ');
223 * Remove CSS target padding (for fixed bar)
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;
238 var description
= document
.getElementById('lf_description');
239 var observe = function (element
, event
, handler
) {
240 element
.addEventListener(event
, handler
, false);
244 description
.style
.height
= 'auto';
245 description
.style
.height
= description
.scrollHeight
+10+'px';
247 /* 0-timeout to get the already changed text */
248 function delayedResize () {
249 window
.setTimeout(resize
, 0);
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
);
260 if (description
!= null) {
262 // Submit editlink form with CTRL + Enter in the text area.
263 description
.addEventListener('keydown', function (event
) {
264 if (event
.ctrlKey
&& event
.keyCode
=== 13) {
265 document
.getElementById('button-save-edit').click();