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