From f80cd8acdd38249a2a75629e3dc70c29e0ebc5cc Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Sat, 14 Jan 2017 14:43:06 +0100 Subject: Fix scrolling issue with Chrome --- tpl/default/css/shaarli.css | 2 +- tpl/default/js/shaarli.js | 332 ++++++++++++++++++++++---------------------- 2 files changed, 168 insertions(+), 166 deletions(-) (limited to 'tpl') diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index ed9a86ca..f9dd3e76 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css @@ -814,7 +814,7 @@ pre { .page-form-complete .form-label, .page-form-complete .form-input { position: relative; - min-height: 60px; + height: 60px; } .page-form-complete .form-label label, diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js index a3d40b0d..2e533af6 100644 --- a/tpl/default/js/shaarli.js +++ b/tpl/default/js/shaarli.js @@ -1,62 +1,63 @@ -/** - * 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; +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); } - 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'); + + + /** + * 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); } - ); - }; - - 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'); - }; + else { + toggleHorizontal(); + } + menu.classList.toggle('open'); + document.getElementById('menu-toggle').classList.toggle('x'); + }; - function closeMenu() { - if (menu.classList.contains('open')) { - toggleMenu(); + function closeMenu() { + if (menu.classList.contains('open')) { + toggleMenu(); + } } - } - document.getElementById('menu-toggle').addEventListener('click', function (e) { - toggleMenu(); - }); + document.getElementById('menu-toggle').addEventListener('click', function (e) { + toggleMenu(); + }); - window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); -})(this, this.document); + window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); + })(this, this.document); -/** - * Fold/Expand shaares description and thumbnail. - */ -(function (window, document) { + /** + * Fold/Expand shaares description and thumbnail. + */ var foldAllButtons = document.getElementsByClassName('fold-all'); var foldButtons = document.getElementsByClassName('fold-button'); @@ -103,122 +104,123 @@ function getParentByClass(el, className) { }); }); } -})(this, this.document); - -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'; + + 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'; + } } - if (thumb != null) { - thumb.style.display = 'block'; + 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'); } - 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()); + + /** + * 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(); + } + }); }); -} - -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'); - } - }); + /** + * 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'; + }); }); -} - -function removeClass(element, classname) { - element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' '); -} - -/** - * Remove CSS target padding (for fixed bar) - */ -var anchor = document.querySelector('.anchor:target'); -if (anchor != null) { - var padsize = anchor.clientHeight; - this.window.scroll(0, this.window.scrollY - padsize); - anchor.style.paddingTop = 0; -} + + /** + * 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) + */ + 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