Fold/Expand shaares

[github/shaarli/Shaarli.git] / tpl / default / js / shaarli.js

diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index cbce061792b7b42e62a55b7d999584c7e303e808..d73bd29beadd7f4aac23498882a91fff4d3b3b57 100644 (file)
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -1,3 +1,15 @@
+/**
+ * Retrieve an element up in the tree from its class name.
+ */
+function getParentByClass(el, className) {
+    var p = el.parentNode;
+    if (p == null || p.classList.contains(className)) {
+        return p;
+    }
+    return getParentByClass(p, className);
+}
+
+
 /**
  * Handle responsive menu.
  * Source: http://purecss.io/layouts/tucked-menu-vertical/
@@ -41,6 +53,10 @@
     window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
 })(this, this.document);
 
+
+/**
+ * Expend search fields on focus.
+ */
 var searchInputs = document.querySelectorAll('#search input[type="text"]');
 [].forEach.call(searchInputs, function(searchInput) {
     searchInput.addEventListener('focus', function(event) {
@@ -49,4 +65,37 @@ var searchInputs = document.querySelectorAll('#search input[type="text"]');
     searchInput.addEventListener('blur', function(event) {
         event.target.style.width = '140px';
     });
+});
+
+/**
+ * Fold/Expand shaares description.
+ */
+var foldButtons = document.querySelectorAll('.fold-button');
+[].forEach.call(foldButtons, function(foldButton) {
+    // Retrieve description
+    var description = null;
+    var linklistItem = getParentByClass(foldButton, 'linklist-item');
+    if (linklistItem != null) {
+        description = linklistItem.querySelector('.linklist-item-description');
+        if (description != null) {
+            foldButton.style.display = 'inline';
+        }
+    }
+
+    foldButton.addEventListener('click', function(event) {
+        event.preventDefault();
+
+        // Switch fold/expand - up = fold
+        if (event.target.classList.contains('fa-chevron-up')) {
+
+            event.target.title = 'Expand';
+            description.style.display = 'none';
+        }
+        else {
+            event.target.title = 'Fold';
+            description.style.display = 'block';
+        }
+        event.target.classList.toggle('fa-chevron-down');
+        event.target.classList.toggle('fa-chevron-up');
+    });
 });
\ No newline at end of file