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