From 402b03464812aaec76bc841ca7dacb775baf1e03 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Sat, 14 Jan 2017 15:52:17 +0100 Subject: Introduce the new default Shaarli template --- tpl/default/js/shaarli.js | 228 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 tpl/default/js/shaarli.js (limited to 'tpl/default/js') diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js new file mode 100644 index 00000000..d8464aa4 --- /dev/null +++ b/tpl/default/js/shaarli.js @@ -0,0 +1,228 @@ +window.onload = function () { + + /** + * 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/ + */ + (function (window, document) { + var menu = document.getElementById('shaarli-menu'), + WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize'; + + function toggleHorizontal() { + [].forEach.call( + document.getElementById('shaarli-menu').querySelectorAll('.menu-transform'), + function(el){ + el.classList.toggle('pure-menu-horizontal'); + } + ); + }; + + function toggleMenu() { + // set timeout so that the panel has a chance to roll up + // before the menu switches states + if (menu.classList.contains('open')) { + setTimeout(toggleHorizontal, 500); + } + else { + toggleHorizontal(); + } + menu.classList.toggle('open'); + document.getElementById('menu-toggle').classList.toggle('x'); + }; + + function closeMenu() { + if (menu.classList.contains('open')) { + toggleMenu(); + } + } + + document.getElementById('menu-toggle').addEventListener('click', function (e) { + toggleMenu(); + }); + + window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); + })(this, this.document); + + /** + * Fold/Expand shaares description and thumbnail. + */ + var foldAllButtons = document.getElementsByClassName('fold-all'); + var foldButtons = document.getElementsByClassName('fold-button'); + + [].forEach.call(foldButtons, function (foldButton) { + // Retrieve description + var description = null; + var thumbnail = null; + var linklistItem = getParentByClass(foldButton, 'linklist-item'); + if (linklistItem != null) { + description = linklistItem.querySelector('.linklist-item-description'); + thumbnail = linklistItem.querySelector('.linklist-item-thumbnail'); + if (description != null || thumbnail != null) { + foldButton.style.display = 'inline'; + } + } + + foldButton.addEventListener('click', function (event) { + event.preventDefault(); + toggleFold(event.target, description, thumbnail); + }); + }); + + if (foldAllButtons != null) { + [].forEach.call(foldAllButtons, function (foldAllButton) { + foldAllButton.addEventListener('click', function (event) { + event.preventDefault(); + [].forEach.call(foldButtons, function (foldButton) { + // Retrieve description + var description = null; + var thumbnail = null; + var linklistItem = getParentByClass(foldButton, 'linklist-item'); + if (linklistItem != null) { + description = linklistItem.querySelector('.linklist-item-description'); + thumbnail = linklistItem.querySelector('.linklist-item-thumbnail'); + if (description != null || thumbnail != null) { + foldButton.style.display = 'inline'; + } + } + + toggleFold(foldButton.firstElementChild, description, thumbnail); + }); + foldAllButton.firstElementChild.classList.toggle('fa-chevron-down'); + foldAllButton.firstElementChild.classList.toggle('fa-chevron-up'); + }); + }); + } + + function toggleFold(button, description, thumb) + { + // Switch fold/expand - up = fold + if (button.classList.contains('fa-chevron-up')) { + button.title = 'Expand'; + if (description != null) { + description.style.display = 'none'; + } + if (thumb != null) { + thumb.style.display = 'none'; + } + } + else { + button.title = 'Fold'; + if (description != null) { + description.style.display = 'block'; + } + if (thumb != null) { + thumb.style.display = 'block'; + } + } + button.classList.toggle('fa-chevron-down'); + button.classList.toggle('fa-chevron-up'); + } + + /** + * Confirmation message before deletion. + */ + var deleteLinks = document.querySelectorAll('.confirm-delete'); + [].forEach.call(deleteLinks, function(deleteLink) { + deleteLink.addEventListener('click', function(event) { + if(! confirm('Are you sure you want to delete this link ?')) { + event.preventDefault(); + } + }); + }); + + /** + * Close alerts + */ + var closeLinks = document.querySelectorAll('.pure-alert-close'); + [].forEach.call(closeLinks, function(closeLink) { + closeLink.addEventListener('click', function(event) { + var alert = getParentByClass(event.target, 'pure-alert-closable'); + alert.style.display = 'none'; + }); + }); + + /** + * New version dismiss. + * Hide the message for one week using localStorage. + */ + var newVersionDismiss = document.getElementById('new-version-dismiss'); + var newVersionMessage = document.querySelector('.new-version-message'); + if (newVersionMessage != null + && localStorage.getItem('newVersionDismiss') != null + && parseInt(localStorage.getItem('newVersionDismiss')) + 7*24*60*60*1000 > (new Date()).getTime() + ) { + newVersionMessage.style.display = 'none'; + } + if (newVersionDismiss != null) { + newVersionDismiss.addEventListener('click', function () { + localStorage.setItem('newVersionDismiss', (new Date()).getTime()); + }); + } + + var hiddenReturnurl = document.getElementsByName('returnurl'); + if (hiddenReturnurl != null) { + hiddenReturnurl.value = window.location.href; + } + + /** + * Autofocus text fields + */ + var autofocusElements = document.querySelector('.autofocus'); + if (autofocusElements != null) { + autofocusElements.focus(); + } + + /** + * Handle sub menus/forms + */ + var openers = document.getElementsByClassName('subheader-opener'); + if (openers != null) { + [].forEach.call(openers, function(opener) { + opener.addEventListener('click', function(event) { + event.preventDefault(); + + var id = opener.getAttribute('data-open-id'); + var sub = document.getElementById(id); + + if (sub != null) { + [].forEach.call(document.getElementsByClassName('subheader-form'), function (element) { + if (element != sub) { + removeClass(element, 'open') + } + }); + + sub.classList.toggle('open'); + } + }); + }); + } + + function removeClass(element, classname) { + element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' '); + } + + /** + * Remove CSS target padding (for fixed bar) + */ + if (location.hash != '') { + var anchor = document.querySelector(location.hash); + if (anchor != null) { + var padsize = anchor.clientHeight; + console.log(document.querySelector(location.hash).clientHeight); + this.window.scroll(0, this.window.scrollY - padsize); + anchor.style.paddingTop = 0; + } + } +}; -- cgit v1.2.3 From 7040169069322d72cec4276b7b812291b57a0d40 Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Tue, 21 Feb 2017 14:16:48 +0100 Subject: Multiple minor improvements and bugfixes regarding the new templates: * Add API settings in `configure.html` * Fix textarea autoresize * Load user.css from data folder * Move fold/expand all button to the right and fix an issue with already folded items * Reset datetime display to international datetime * Temporarilly remove JS login panel (need improvement and integration with the plugin system) * Body background is slightly lighter * Fix an issue where thumbnails were hidden by description * Fix an issue where private orange bar wasn't displayed with thumbnails * Remove the gradient bar behind titles * Fix empty bookmarklet name in Firefox --- tpl/default/js/shaarli.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) (limited to 'tpl/default/js') diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js index d8464aa4..d47c257f 100644 --- a/tpl/default/js/shaarli.js +++ b/tpl/default/js/shaarli.js @@ -84,7 +84,13 @@ window.onload = function () { [].forEach.call(foldAllButtons, function (foldAllButton) { foldAllButton.addEventListener('click', function (event) { event.preventDefault(); + var state = foldAllButton.firstElementChild.getAttribute('class').indexOf('down') != -1 ? 'down' : 'up'; [].forEach.call(foldButtons, function (foldButton) { + if (foldButton.firstElementChild.classList.contains('fa-chevron-up') && state == 'down' + || foldButton.firstElementChild.classList.contains('fa-chevron-down') && state == 'up' + ) { + return; + } // Retrieve description var description = null; var thumbnail = null; @@ -225,4 +231,32 @@ window.onload = function () { anchor.style.paddingTop = 0; } } + + /** + * Text area resizer + */ + var description = document.getElementById('lf_description'); + var observe = function (element, event, handler) { + element.addEventListener(event, handler, false); + }; + function init () { + function resize () { + description.style.height = 'auto'; + description.style.height = description.scrollHeight+10+'px'; + } + /* 0-timeout to get the already changed text */ + function delayedResize () { + window.setTimeout(resize, 0); + } + observe(description, 'change', resize); + observe(description, 'cut', delayedResize); + observe(description, 'paste', delayedResize); + observe(description, 'drop', delayedResize); + observe(description, 'keydown', delayedResize); + + resize(); + } + if (description != null) { + init(); + } }; -- cgit v1.2.3