tpl/default/js/shaarli.js

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