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
  91             event.target.title = 'Expand';
  92             description.style.display = 'none';
  93         }
  94         else {
  95             event.target.title = 'Fold';
  96             description.style.display = 'block';
  97         }
  98         event.target.classList.toggle('fa-chevron-down');
  99         event.target.classList.toggle('fa-chevron-up');
 100     });
 101 });