From 478d3e6611e73974bd3b917c625bf0d099cbf123 Mon Sep 17 00:00:00 2001 From: Patrick Crandol Date: Wed, 12 Dec 2018 06:04:31 -0500 Subject: Decouple scrolling of feeds and articles (#2117) * Remove Sticky Kit Remove sticky-kit, as functionality is unsuitable for separate scrolling. * Remove sticky-kit load in main.js Further removing the sticky-kit kruft * Finish removal of references to Sticky-kit * CSS Changes to template for Independent Scrolling * Addition of JS and supporting CSS and html * More CSS fixes to establish expected behavior Should be able to scroll navbar without it being in sticky mode now. * Fix typo in main.js sortcut.js -> shortcut.js * Fix unexpected tree scrolling behavior * Change name of generic JS function * Improve sticky-aside * CSS changes in themes to accommodate independent Scroll In themes where .aside's width is not the standard 300px, .tree's width must be specified to be equal to .aside * Remove Sticky-Kit from README files * Updates to Sticky-Aside * Update Template to fix screwup * Make Recalculating height actually work * Let sidebar fill height if nav buttons aren't visible * Make accommodating for nav buttons actually work * update Swage theme for Independent Scroll feature * Integrate sticky_aside into main.js * Add Simple Scrollbar * Patch scrollbar color for themes with dark colored asides * Increase Visibility of scrollbar on Dark Themes * Improve async loading, events, and performance * CSS typo * Fix double scrollbar on mobile * Fix regression causing sticky to not be removed * No $ for non-jQuery variables * Fix strange condition + option for nice scrollbar * Initial attempt to use css sticky * Add stickyfill * make the correct element sticky * re-add incorrectly removed sidebar code * Continue fixing mistaken deletions * decrease frequency of recalc * use minified version of simple-scrollbar. * Load stickyfill instead of injecting * put recalc back where it belongs * re-remove script injector * remove padding bottom padding was causing the last item in the feed to be hidden under the nav buttons * Manual merge of css_scrollbar Add auto-detection of -webkit-scrollbar-thumb, otherwise fall back to simple-scrollbar.js * Fix Regression Sticky recalc is still needed when using css scrollbars * Replace method of closing dropdowns Changed from an overlay href to a javascript solution, for better compatibility * Remove Treepadding Treepadding was causing dropdown menus at the bottom of the tree to be obscured. * Undo unnecessary move of dropdown-target * Move Dropdown Handler to a sensibleish place * Fix light Scrollbar color not picking up on Firefox * Minor syntax * Minor Clarification of CSS/ patch BlueLagoon * Change logic for native WebKit scrollbar detection Fix https://github.com/FreshRSS/FreshRSS/pull/2117#issuecomment-444251419 Tested with Firefox 63, Firefox 65, Chrome 71, IE11, Edge 42 * Fixes for other views E.g. reader view * Cleaner way of generating hash for dropdowns * Make dropdown-toggle an actual toggle * Prepare for CSS Scrollbars Module Level 1 * Fix regression causing my labels dropdown not to appear * remove unneeded dropdown-close css rule * Re-apply some lost changes https://github.com/FreshRSS/FreshRSS/pull/2117/commits/3c509989e890b88852e52c67c1c5507d1e0bf28c * Add standard scrollbar compatibility E.g. Firefox 64+ * Make All dropdowns click-to-close * Remove BlueLagoon template * Try to fix Firefox https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r239539984 * Add CSS rules necessary for consistent function of scrollbar in Firefox * Use inheritance to determine width * Use overlay scrollbar where possible * Test Reduced Listener * Fix Firefox 62 And show subtle scrollbar even when not hovering * Add margin at bottom To allow opening the menus https://github.com/FreshRSS/FreshRSS/pull/2117#issuecomment-444571218 * Minor - tab correction * Spaces -> tabs * Remove unneeded inheritance * Fix indenting * Revert bad merge * Messy WIP to make dropdowns work * Style Cleanup * Break it down * Lets try a move-it move-it * Update p/scripts/main.js Co-Authored-By: pattems * Update p/themes/BlueLagoon/BlueLagoon.css Co-Authored-By: pattems * separate ALL THE THINGS * erroneous commas * and to or * removing double condition that doesn't do what I want * More breaking down * fix var * Fix variable name again * Remove magic number https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240052598 * Suuuuper inelegant solution for dropdowns * lets try that again * Inelegant Fix For Dropdowns Now with 100% more working dropdowns * Make sidebar dropdowns work correctly? * Fix reversion * Make JS scrollbar always visible * Remove unneeded CSS Added early in this pull request, didn't get pulled out when it was obsolete * Fix CSS removal I missed * CSS comment update/consistency for dark themes * Clean Up Duplicate code * Make dropdowns properly hide Downside: Can no longer click on header/nav buttons to close * Strip unneeded if statement * jshint -W018 https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240392851 * Half-reversion to old dropdown * make overlay href scale to sidebar width * remove init of nonexistent method * remove trailing tabs * move #close href where it belongs in index.phtml * Revert all changes to index.phtml * remove whitespace accidentally added in last commit * Move var's in init_column categories * Finish putting old style dropdowns back * Make CSS changes to use support statements * Cleanup Whitespace * re-add missing class * spaces -> tabs in main.js * tabs -> spaces css * Minor whitespace * Cleanup per @Alkarex * Second attempt to add bottom margin https://github.com/FreshRSS/FreshRSS/pull/2117#discussion_r240820901 * Fix error in IE11 * Simple-scrollbar color match for dark themes --- p/themes/Flat/flat.css | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) (limited to 'p/themes/Flat/flat.css') diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index be047a394..176a541f7 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -505,6 +505,31 @@ a.btn { color: #fff; } +/*=== Scrollbar */ +@supports (scrollbar-width: thin) { + #sidebar { + scrollbar-color: rgba(255, 255, 255, 0.05) rgba(0, 0, 0, 0.0); + } + #sidebar:hover { + scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); + } +} +.ss-scroll { + background: rgba(255, 255, 255, 0.1); +} +.ss-container:hover .ss-scroll, +.ss-container:active .ss-scroll { + background: rgba(255, 255, 255, 0.3); +} +@supports not (scrollbar-width: thin) { + #sidebar::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + } + #sidebar:hover::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.3); + } +} + /*=== STRUCTURE */ /*===============*/ /*=== Header */ -- cgit v1.2.3 From e0e96d6a13788c539be1bcce3cde0a1d614ff2c3 Mon Sep 17 00:00:00 2001 From: Alexandre Alapetite Date: Sun, 16 Dec 2018 15:04:46 +0100 Subject: Remove simple-scrollbar fallback (#2182) https://github.com/FreshRSS/FreshRSS/pull/2181#issuecomment-447636787 --- README.fr.md | 1 - README.md | 1 - p/scripts/main.js | 71 ++---------------------------------- p/scripts/simple-scrollbar.min.js | 2 - p/themes/BlueLagoon/BlueLagoon.css | 7 ---- p/themes/Dark/dark.css | 7 ---- p/themes/Flat/flat.css | 7 ---- p/themes/Screwdriver/screwdriver.css | 7 ---- p/themes/Swage/swage.css | 8 ---- p/themes/Swage/swage.scss | 8 ---- p/themes/base-theme/template.css | 51 -------------------------- 11 files changed, 4 insertions(+), 166 deletions(-) delete mode 100644 p/scripts/simple-scrollbar.min.js (limited to 'p/themes/Flat/flat.css') diff --git a/README.fr.md b/README.fr.md index 1cf1c07a0..9db5907a0 100644 --- a/README.fr.md +++ b/README.fr.md @@ -209,7 +209,6 @@ Tout client supportant une API de type Fever ; Sélection : ## Uniquement pour certaines options ou configurations * [bcrypt.js](https://github.com/dcodeIO/bcrypt.js) * [phpQuery](https://github.com/phpquery/phpquery) -* [simple-scrollbar](https://github.com/buzinas/simple-scrollbar) ## Si les fonctions natives ne sont pas disponibles * [Services_JSON](https://pear.php.net/pepr/pepr-proposal-show.php?id=198) diff --git a/README.md b/README.md index a97edc736..1904dad2c 100644 --- a/README.md +++ b/README.md @@ -209,7 +209,6 @@ Supported clients are: ## Only for some options or configurations * [bcrypt.js](https://github.com/dcodeIO/bcrypt.js) * [phpQuery](https://github.com/phpquery/phpquery) -* [simple-scrollbar](https://github.com/buzinas/simple-scrollbar) ## If native functions are not available * [Services_JSON](https://pear.php.net/pepr/pepr-proposal-show.php?id=198) diff --git a/p/scripts/main.js b/p/scripts/main.js index c8d520ef7..4ba329dc1 100644 --- a/p/scripts/main.js +++ b/p/scripts/main.js @@ -1,5 +1,5 @@ "use strict"; -/* globals $, jQuery, context, i18n, shortcut, shortcuts, SimpleScrollbar, url */ +/* globals $, jQuery, context, i18n, shortcut, shortcuts, url */ /* jshint strict:global */ var $stream = null, @@ -527,14 +527,6 @@ function init_posts() { } } -function inject_script(name) { - var script = document.createElement('script'); - script.async = 'async'; - script.defer = 'defer'; - script.src = '../scripts/' + name; - document.head.appendChild(script); -} - function init_column_categories() { if (context.current_view !== 'normal' && context.current_view !== 'reader') { return; @@ -551,15 +543,13 @@ function init_column_categories() { } }); $(this).parent().next(".tree-folder-items").slideToggle(300, function () { - if (!useJsScrollbar && //Workaround for Gecko bug in Firefox 64-65(+?): - sidebar.scrollHeight > sidebar.clientHeight && //if needs scrollbar + //Workaround for Gecko bug in Firefox 64-65(+?): + var sidebar = document.getElementById('sidebar'); + if (sidebar && sidebar.scrollHeight > sidebar.clientHeight && //if needs scrollbar sidebar.scrollWidth >= sidebar.offsetWidth) { //but no scrollbar sidebar.style['overflow-y'] = 'scroll'; //then force scrollbar setTimeout(function () { sidebar.style['overflow-y'] = ''; }, 0); } - if (useJsScrollbar && typeof(Event) === 'function') { //Refresh JS scrollbar - sidebar.querySelector('.ss-content').dispatchEvent(new Event('scroll')); - } }); return false; }); @@ -1280,58 +1270,6 @@ function init_crypto_form() { } // -var sidebar = document.getElementById('sidebar'); -var useJsScrollbar = true; -try { - /*jshint -W018 */ - useJsScrollbar = sidebar && !CSS.supports('scrollbar-color: auto') && - !(parseInt(getComputedStyle(sidebar, '::-webkit-scrollbar').width) < sidebar.scrollWidth); - /*jshint +W018 */ -} catch (ex) { -} -if (useJsScrollbar) { - inject_script('simple-scrollbar.min.js'); -} - -function sticky_recalc() { - var h = 0; - if ($nav_entries && $nav_entries.length > 0) { - h = $(window).height() - sidebar.getBoundingClientRect().top - $nav_entries.height(); - } else { - h = $(window).height() - sidebar.getBoundingClientRect().top; - } - if (h > 0) { - $(sidebar).height(h); - } -} - -function init_simple_scrollbar() { - if (!window.SimpleScrollbar) { - if (window.console) { - console.log('FreshRSS waiting for simple-scrollbar…'); - } - window.setTimeout(init_simple_scrollbar, 100); - } else { - SimpleScrollbar.initEl(sidebar); - } -} - -var scrollTimeout; -function init_sticky_sidebar(){ - if (!useJsScrollbar) { - return; - } - init_simple_scrollbar(); - $(window).scroll(function () { - if (scrollTimeout) { - clearTimeout(scrollTimeout); - scrollTimeout = null; - } - scrollTimeout = setTimeout(sticky_recalc, 200); - }); - window.onresize = sticky_recalc; -} - function init_confirm_action() { $('body').on('click', '.confirm', function () { var str_confirmation = $(this).attr('data-str-confirm'); @@ -1597,7 +1535,6 @@ function init_afterDOM() { $stream = $('#stream'); if ($stream.length > 0) { init_load_more($stream); - init_sticky_sidebar(); init_posts(); init_nav_entries(); init_dynamic_tags(); diff --git a/p/scripts/simple-scrollbar.min.js b/p/scripts/simple-scrollbar.min.js deleted file mode 100644 index 36b7df0b8..000000000 --- a/p/scripts/simple-scrollbar.min.js +++ /dev/null @@ -1,2 +0,0 @@ -// https://github.com/buzinas/simple-scrollbar -!function(t,e){"object"==typeof exports?module.exports=e(window,document):t.SimpleScrollbar=e(window,document)}(this,function(t,e){function s(t){Object.prototype.hasOwnProperty.call(t,"data-simple-scrollbar")||Object.defineProperty(t,"data-simple-scrollbar",{value:new o(t)})}function i(t,s){function i(t){var e=t.pageY-a;a=t.pageY,n(function(){s.el.scrollTop+=e/s.scrollRatio})}function r(){t.classList.remove("ss-grabbed"),e.body.classList.remove("ss-grabbed"),e.removeEventListener("mousemove",i),e.removeEventListener("mouseup",r)}var a;t.addEventListener("mousedown",function(s){return a=s.pageY,t.classList.add("ss-grabbed"),e.body.classList.add("ss-grabbed"),e.addEventListener("mousemove",i),e.addEventListener("mouseup",r),!1})}function r(t){for(this.target=t,this.direction=window.getComputedStyle(this.target).direction,this.bar='
',this.wrapper=e.createElement("div"),this.wrapper.setAttribute("class","ss-wrapper"),this.el=e.createElement("div"),this.el.setAttribute("class","ss-content"),"rtl"===this.direction&&this.el.classList.add("rtl"),this.wrapper.appendChild(this.el);this.target.firstChild;)this.el.appendChild(this.target.firstChild);this.target.appendChild(this.wrapper),this.target.insertAdjacentHTML("beforeend",this.bar),this.bar=this.target.lastChild,i(this.bar,this),this.moveBar(),this.el.addEventListener("scroll",this.moveBar.bind(this)),this.el.addEventListener("mouseenter",this.moveBar.bind(this)),this.target.classList.add("ss-container");var s=window.getComputedStyle(t);"0px"===s.height&&"0px"!==s["max-height"]&&(t.style.height=s["max-height"])}function a(){for(var t=e.querySelectorAll("*[ss-container]"),i=0;i=1?i.bar.classList.add("ss-hidden"):(i.bar.classList.remove("ss-hidden"),i.bar.style.cssText="height:"+Math.max(100*i.scrollRatio,10)+"%; top:"+i.el.scrollTop/e*100+"%;right:"+a+"px;")})}},e.addEventListener("DOMContentLoaded",a),r.initEl=s,r.initAll=a;var o=r;return o}); \ No newline at end of file diff --git a/p/themes/BlueLagoon/BlueLagoon.css b/p/themes/BlueLagoon/BlueLagoon.css index 263764a9c..94eb8e3a8 100644 --- a/p/themes/BlueLagoon/BlueLagoon.css +++ b/p/themes/BlueLagoon/BlueLagoon.css @@ -574,13 +574,6 @@ a.btn { scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); } } -.ss-scroll { - background: rgba(255, 255, 255, 0.1); -} -.ss-container:hover .ss-scroll, -.ss-container:active .ss-scroll { - background: rgba(255, 255, 255, 0.3); -} @supports not (scrollbar-width: thin) { #sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); diff --git a/p/themes/Dark/dark.css b/p/themes/Dark/dark.css index b8366caeb..28ea253ff 100644 --- a/p/themes/Dark/dark.css +++ b/p/themes/Dark/dark.css @@ -511,13 +511,6 @@ a.btn { scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); } } -.ss-scroll { - background: rgba(255, 255, 255, 0.1); -} -.ss-container:hover .ss-scroll, -.ss-container:active .ss-scroll { - background: rgba(255, 255, 255, 0.3); -} @supports not (scrollbar-width: thin) { #sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); diff --git a/p/themes/Flat/flat.css b/p/themes/Flat/flat.css index 176a541f7..1c5c3e795 100644 --- a/p/themes/Flat/flat.css +++ b/p/themes/Flat/flat.css @@ -514,13 +514,6 @@ a.btn { scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); } } -.ss-scroll { - background: rgba(255, 255, 255, 0.1); -} -.ss-container:hover .ss-scroll, -.ss-container:active .ss-scroll { - background: rgba(255, 255, 255, 0.3); -} @supports not (scrollbar-width: thin) { #sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); diff --git a/p/themes/Screwdriver/screwdriver.css b/p/themes/Screwdriver/screwdriver.css index b92dbac3e..2576c485f 100644 --- a/p/themes/Screwdriver/screwdriver.css +++ b/p/themes/Screwdriver/screwdriver.css @@ -568,13 +568,6 @@ a.btn { scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); } } -.ss-scroll { - background: rgba(255, 255, 255, 0.1); -} -.ss-container:hover .ss-scroll, -.ss-container:active .ss-scroll { - background: rgba(255, 255, 255, 0.3); -} @supports not (scrollbar-width: thin) { #sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); diff --git a/p/themes/Swage/swage.css b/p/themes/Swage/swage.css index a8ff0bdd5..24a3ccbed 100644 --- a/p/themes/Swage/swage.css +++ b/p/themes/Swage/swage.css @@ -538,14 +538,6 @@ scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.0); } } -.ss-scroll { -background: rgba(255, 255, 255, 0.1); -} -.ss-container:hover .ss-scroll, -.ss-container:active .ss-scroll { -background: rgba(255, 255, 255, 0.3); -} - @supports not (scrollbar-width: thin) { #sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); diff --git a/p/themes/Swage/swage.scss b/p/themes/Swage/swage.scss index 8ddac14db..ecacba832 100644 --- a/p/themes/Swage/swage.scss +++ b/p/themes/Swage/swage.scss @@ -612,14 +612,6 @@ form { } } -.ss-scroll { - background: rgba(255, 255, 255, 0.1); -} -.ss-container:hover .ss-scroll, -.ss-container:active .ss-scroll { - background: rgba(255, 255, 255, 0.3); -} - @supports not (scrollbar-width: thin) { #sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css index 86c985d0c..099aee916 100644 --- a/p/themes/base-theme/template.css +++ b/p/themes/base-theme/template.css @@ -382,57 +382,6 @@ a.btn { } /*=== Scrollbar */ -.ss-wrapper { - overflow: hidden; - width: 100%; - height: 100%; - position: relative; - z-index: 1; - float: left; -} - -.ss-content { - height: 100%; - width: calc(100% + 18px); - padding: 0 0 0 0; - position: relative; - overflow-y: scroll; - box-sizing: border-box; -} - -.ss-content.rtl { - width: calc(100% + 18px); - right: auto; -} - -.ss-scroll { - position: relative; - background: rgba(0, 0, 0, 0.1); - width: 9px; - border-radius: 4px; - top: 0; - z-index: 2; - cursor: pointer; - transition: opacity 0.25s linear; -} - -.ss-hidden { - display: none; -} - -.ss-container:hover .ss-scroll, -.ss-container:active .ss-scroll { - background: rgba(0, 0, 0, 0.3); -} - -.ss-grabbed { - -o-user-select: none; - -ms-user-select: none; - -moz-user-select: none; - -webkit-user-select: none; - user-select: none; -} - @supports (scrollbar-width: thin) { #sidebar { overflow-y: auto; -- cgit v1.2.3