From 497b1c7194f199fe867bbb690691b0d8cbbeb8fc Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Tue, 1 Mar 2016 15:52:29 +0100 Subject: Fold/Expand shaares --- tpl/default/css/shaarli.css | 4 ++++ tpl/default/js/shaarli.js | 49 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 53 insertions(+) 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,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 -- cgit v1.2.3