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 var foldButtons = document.querySelectorAll('.fold-button');
  60 [].forEach.call(foldButtons, function(foldButton) {
  61     // Retrieve description
  62     var description = null;
  63     var thumbnail = null;
  64     var linklistItem = getParentByClass(foldButton, 'linklist-item');
  65     if (linklistItem != null) {
  66         description = linklistItem.querySelector('.linklist-item-description');
  67         thumbnail = linklistItem.querySelector('.linklist-item-thumbnail');
  68         if (description != null || thumbnail != null) {
  69             foldButton.style.display = 'inline';
  70         }
  71     }
  72
  73     foldButton.addEventListener('click', function(event) {
  74         event.preventDefault();
  75
  76         // Switch fold/expand - up = fold
  77         if (event.target.classList.contains('fa-chevron-up')) {
  78             event.target.title = 'Expand';
  79             if (description != null) {
  80                 description.style.display = 'none';
  81             }
  82             if (thumbnail != null) {
  83                 thumbnail.style.display = 'none';
  84             }
  85         }
  86         else {
  87             event.target.title = 'Fold';
  88             if (description != null) {
  89                 description.style.display = 'block';
  90             }
  91             if (thumbnail != null) {
  92                 thumbnail.style.display = 'block';
  93             }
  94         }
  95         event.target.classList.toggle('fa-chevron-down');
  96         event.target.classList.toggle('fa-chevron-up');
  97     });
  98 });
  99
 100 /**
 101  * Confirmation message before deletion.
 102  */
 103 var deleteLinks = document.querySelectorAll('.delete-link');
 104 [].forEach.call(deleteLinks, function(deleteLink) {
 105     deleteLink.addEventListener('click', function(event) {
 106         if(!confirm('Are you sure you want to delete this link ?')) {
 107             event.preventDefault();
 108         }
 109     });
 110 });
 111
 112 /**
 113  * Close alerts
 114  */
 115 var closeLinks = document.querySelectorAll('.pure-alert-close');
 116 [].forEach.call(closeLinks, function(closeLink) {
 117     closeLink.addEventListener('click', function(event) {
 118         var alert = getParentByClass(event.target, 'pure-alert-closable');
 119         alert.style.display = 'none';
 120     });
 121 });
 122
 123 /**
 124  * New version dismiss.
 125  * Hide the message for one week using localStorage.
 126  */
 127 var newVersionDismiss = document.getElementById('new-version-dismiss');
 128 var newVersionMessage = document.querySelector('.new-version-message');
 129 if (newVersionMessage != null
 130     && localStorage.getItem('newVersionDismiss') != null
 131     && parseInt(localStorage.getItem('newVersionDismiss')) + 7*24*60*60*1000 > (new Date()).getTime()
 132 ) {
 133     newVersionMessage.style.display = 'none';
 134 }
 135 if (newVersionDismiss != null) {
 136     newVersionDismiss.addEventListener('click', function () {
 137         localStorage.setItem('newVersionDismiss', (new Date()).getTime());
 138     });
 139 }
 140
 141 var hiddenReturnurl = document.getElementsByName('returnurl');
 142 if (hiddenReturnurl != null) {
 143     hiddenReturnurl.value = window.location.href;
 144 }
 145
 146 /**
 147  * Autofocus text fields
 148  */
 149 var autofocusElements = document.querySelector('.autofocus');
 150 if (autofocusElements != null) {
 151     autofocusElements.focus();
 152 }
 153
 154 /**
 155  * Handle sub menus/forms
 156  */
 157 var openers = document.getElementsByClassName('subheader-opener');
 158 if (openers != null) {
 159     [].forEach.call(openers, function(opener) {
 160          opener.addEventListener('click', function(event) {
 161              event.preventDefault();
 162
 163              var id = opener.getAttribute('data-open-id');
 164              var sub = document.getElementById(id);
 165
 166              if (sub != null) {
 167                 [].forEach.call(document.getElementsByClassName('subheader-form'), function (element) {
 168                     if (element != sub) {
 169                         removeClass(element, 'open')
 170                     }
 171                  });
 172
 173                  sub.classList.toggle('open');
 174              }
 175          });
 176     });
 177 }
 178
 179 function removeClass(element, classname) {
 180     element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' ');
 181 }