Fold/Expand shaares

2 files changed, 53 insertions, 0 deletions

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 72ea4df5..4770b058 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -341,6 +341,10 @@ body {
     border: solid 1px #d0fff0;
 }
 
+.linklist-item-title .fold-button {
+    display: none;
+}
+
 .linklist-item-editbuttons {
     float: right;
     padding: 5px;
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index cbce0617..d73bd29b 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -1,4 +1,16 @@
 /**
+ * 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