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 /**
 142  * Login button
 143  */
 144 var loginButton = document.getElementById('login-button');
 145 var loginBlock = document.getElementById('header-login-form');
 146
 147 if (loginButton != null) {
 148     loginButton.addEventListener('click', function(event) {
 149         event.preventDefault();
 150         loginBlock.classList.toggle('open');
 151         document.getElementById('content').style.boxShadow = 'none';
 152     });
 153 }
 154
 155 // Focus on login field.
 156 if (loginBlock != null) {
 157     loginBlock.addEventListener('transitionend', function () {
 158         loginBlock.firstElementChild.focus();
 159     });
 160 }
 161
 162 var hiddenReturnurl = document.getElementsByName('returnurl');
 163 if (hiddenReturnurl != null) {
 164     hiddenReturnurl.value = window.location.href;
 165 }
 166
 167 /**
 168  * Autofocus text fields
 169  */
 170 var autofocusElements = document.querySelector('.autofocus');
 171 if (autofocusElements != null) {
 172     autofocusElements.focus();
 173 }
 174
 175 /**
 176  * Hide search bar, and display it on search click.
 177  */
 178 var searchBar = document.getElementById('search');
 179 var searchButton = document.getElementById('search-button');
 180 if (searchBar != null && searchButton != null) {
 181     searchBar.classList.toggle('closed');
 182     searchButton.addEventListener('click', function(event) {
 183         event.preventDefault();
 184         searchBar.classList.toggle('closed');
 185         searchBar.classList.toggle('open');
 186     });
 187 }