From 192c040b03d0cce5c8580157802a87fe43d8c129 Mon Sep 17 00:00:00 2001 From: Kristinita Date: Mon, 26 Mar 2018 11:00:03 +0300 Subject: [PATCH] fix(gemini): Correct anchors in articles https://github.com/noeldelgado/gemini-scrollbar/issues/46#issuecomment-375553755 --- .eslintrc.yml | 6 +- grunt/browserSync.coffee | 59 +++--- .../static/js/Gemini/GeminiAndJQueryLazy.js | 177 ++++++++++++------ .../sashapelican/static/js/Malihu/malihu.js | 31 --- .../static/js/Malihu/non-scrollbar.js | 11 -- .../static/stylus/general/aside.styl | 16 +- .../static/stylus/general/basic.styl | 12 ++ .../static/stylus/general/image_left.styl | 18 +- .../static/stylus/general/image_right.styl | 19 +- .../stylus/script-colors/Gemini/gemini.styl | 22 ++- .../static/stylus/sections/404.styl | 4 + .../static/stylus/sections/sasha-black.styl | 171 ++++++++--------- themes/sashapelican/templates/base.html | 2 + .../templates/includes/footer-en.html | 2 +- 14 files changed, 308 insertions(+), 242 deletions(-) delete mode 100644 themes/sashapelican/static/js/Malihu/malihu.js delete mode 100644 themes/sashapelican/static/js/Malihu/non-scrollbar.js diff --git a/.eslintrc.yml b/.eslintrc.yml index 6ace1561..8d96a7db 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -1,9 +1,13 @@ env: browser: true es6: true + jquery: true extends: 'eslint:recommended' parserOptions: - sourceType: module + ecmaVersion: 9 + sourceType: script + ecmaFeatures: + jsx: true rules: indent: - error diff --git a/grunt/browserSync.coffee b/grunt/browserSync.coffee index 5c4ce73d..2d10f31a 100644 --- a/grunt/browserSync.coffee +++ b/grunt/browserSync.coffee @@ -1,27 +1,32 @@ -######################## -## grunt-browser-sync ## -######################## -# Live Reloading: -# https://www.npmjs.com/package/grunt-browser-sync -module.exports = - bsFiles: - src : ['output/theme/css/**/*.css', 'output/theme/css/**/**/*.css', 'output/theme/js/**/*.js'] - options: - port: 3000 - server: - baseDir: "../" - # localtunnel doesn't work, see: - # https://github.com/BrowserSync/browser-sync/issues/1513 - tunnel: false - plugins: [ - ################### - ## html-injector ## - ################### - # That HTML don't refresh, if I change HTML file: - # https://github.com/shakyshane/html-injector - # JavaScript needs refresh, see - # https://stackoverflow.com/q/30762114/5951529 - module: "bs-html-injector" - options: - files: "<%= templates.paths.html %>" - ] \ No newline at end of file +######################## +## grunt-browser-sync ## +######################## +# Live Reloading: +# https://www.npmjs.com/package/grunt-browser-sync +module.exports = + bsFiles: + src : ['output/theme/css/**/*.css', 'output/theme/css/**/**/*.css', 'output/theme/js/**/*.js'] + options: + # Doesn't open “http://localhost:3001/” tab, when BrowserSync start: + # https://browsersync.io/docs/options#option-open + open: false + port: 3000 + server: + baseDir: "../" + # localtunnel doesn't work, see: + # https://github.com/BrowserSync/browser-sync/issues/1513 + tunnel: false + plugins: [ + ################### + ## html-injector ## + ################### + # That HTML don't refresh, if I change HTML file: + # https://github.com/shakyshane/html-injector + # JavaScript needs refresh: + # https://stackoverflow.com/q/30762114/5951529 + # If I change HTML or CSS in HTML file, I need save file, that to see changes in browser. + # Else I change JavaScript in HTML file, I need save file 2 times, that HTML page reload in browser and I can to see changes in browser. + module: "bs-html-injector" + options: + files: "<%= templates.paths.html %>" + ] diff --git a/themes/sashapelican/static/js/Gemini/GeminiAndJQueryLazy.js b/themes/sashapelican/static/js/Gemini/GeminiAndJQueryLazy.js index 88ec1ef5..881975c5 100644 --- a/themes/sashapelican/static/js/Gemini/GeminiAndJQueryLazy.js +++ b/themes/sashapelican/static/js/Gemini/GeminiAndJQueryLazy.js @@ -1,60 +1,117 @@ -// @Author: Kristinita -// @Date: 2017-05-02 11:44:00 -// @Last Modified time: 2018-03-02 12:45:05 -//////////// -// Gemini // -//////////// -// Example — https://github.com/noeldelgado/gemini-scrollbar/blob/master/examples/01-body.html -window.onload = function() { - if (window.matchMedia("(orientation: landscape)").matches) { - // For landscape orientation - var landscapescrollbar = new GeminiScrollbar({ - // querySelector method — https://www.w3schools.com/jsref/met_document_queryselector.asp - element: document.querySelector("main"), - autoshow: true, - // Force Gemini for correct scrollbar displaying in mobile devices - // https://github.com/noeldelgado/gemini-scrollbar#options - forceGemini: true, - }).create(); - - window.myscroolbar = landscapescrollbar; - - // JQuery Lazy support — - // https://github.com/eisbehr-/jquery.lazy/issues/88#issuecomment-299138103 - $(".SashaLazy").Lazy({ - appendScroll: $(landscapescrollbar.getViewElement()), - // Run method “update” of Gemini: - // https://github.com/eisbehr-/jquery.lazy/issues/88#issuecomment-299196388 - // http://jquery.eisbehr.de/lazy/example_callback-functions - // https://github.com/noeldelgado/gemini-scrollbar#basic-methods - afterLoad: function() { - landscapescrollbar.update(); - } - }); - } else { - // For portrait orientation - var portraitscrollbar = new GeminiScrollbar({ - element: document.querySelector("body"), - autoshow: true, - forceGemini: true, - }).create(); - - window.myscroolbar = portraitscrollbar; - - $(".SashaLazy").Lazy({ - appendScroll: $(portraitscrollbar.getViewElement()), - afterLoad: function() { - portraitscrollbar.update(); - } - }); - } - -}; - -// Scrollbar works on resize -// Thanks to Alfy — https://vk.com/dark_alf -window.onresize = function() { - if(window.myscroolbar) - window.myscroolbar.destroy(); - window.onload(); -}; \ No newline at end of file +// @Author: Kristinita +// @Date: 2017-05-02 11:44:00 +// @Last Modified time: 2018-03-24 08:49:55 +////////////////////// +// gemini-scrollbar // +////////////////////// +// Custom scrollbar instead of native body scrollbar: +// https://github.com/noeldelgado/gemini-scrollbar/issues/46#issuecomment-374928170 +var internals; + +internals = {}; + +internals.initialize = function() { + internals.scrollbar = new GeminiScrollbar({ + // querySelector method — https://www.w3schools.com/jsref/met_document_queryselector.asp + element: document.querySelector("body"), + autoshow: true, + // Force Gemini for correct scrollbar displaying in mobile devices + // https://github.com/noeldelgado/gemini-scrollbar#options + forceGemini: true + }).create(); + internals.scrollingElement = internals.scrollbar.getViewElement(); + internals.scrollToHash(); + + // JQuery Lazy support — + // https://github.com/eisbehr-/jquery.lazy/issues/88#issuecomment-299138103 + $(".SashaLazy").Lazy({ + appendScroll: $(internals.scrollbar.getViewElement()), + // Run method “update” of Gemini: + // https://github.com/eisbehr-/jquery.lazy/issues/88#issuecomment-299196388 + // http://jquery.eisbehr.de/lazy/example_callback-functions + // https://github.com/noeldelgado/gemini-scrollbar#basic-methods + afterLoad: function() { + internals.scrollbar.update(); + } + }); +}; + +internals.handleOrientationChange = function() { + internals.scrollbar.update(); + internals.scrollToHash(); +}; + +internals.scrollToHash = function() { + var element, hash; + hash = location.hash; + if (hash) { + element = document.getElementById(hash.replace("#", "")); + if (element) { + internals.scrollingElement.scrollTo(0, element.offsetTop); + } + } +}; + +/* Listeners */ + +window.onload = internals.initialize; + +window.onorientationchange = internals.handleOrientationChange; + + +////////////////// +// [DEPRECATED] // +////////////////// +// window.onload = function() { +// if (window.matchMedia("(orientation: landscape)").matches) { +// // For landscape orientation +// var landscapescrollbar = new GeminiScrollbar({ +// // querySelector method — https://www.w3schools.com/jsref/met_document_queryselector.asp +// element: document.querySelector("main"), +// autoshow: true, +// // Force Gemini for correct scrollbar displaying in mobile devices +// // https://github.com/noeldelgado/gemini-scrollbar#options +// forceGemini: true, +// }).create(); + +// window.myscroolbar = landscapescrollbar; + +// // JQuery Lazy support — +// // https://github.com/eisbehr-/jquery.lazy/issues/88#issuecomment-299138103 +// $(".SashaLazy").Lazy({ +// appendScroll: $(landscapescrollbar.getViewElement()), +// // Run method “update” of Gemini: +// // https://github.com/eisbehr-/jquery.lazy/issues/88#issuecomment-299196388 +// // http://jquery.eisbehr.de/lazy/example_callback-functions +// // https://github.com/noeldelgado/gemini-scrollbar#basic-methods +// afterLoad: function() { +// landscapescrollbar.update(); +// } +// }); +// } else { +// // For portrait orientation +// var portraitscrollbar = new GeminiScrollbar({ +// element: document.querySelector("body"), +// autoshow: true, +// forceGemini: true, +// }).create(); + +// window.myscroolbar = portraitscrollbar; + +// $(".SashaLazy").Lazy({ +// appendScroll: $(portraitscrollbar.getViewElement()), +// afterLoad: function() { +// portraitscrollbar.update(); +// } +// }); +// } + +// }; + +// // Scrollbar works on resize +// // Thanks to Alfy — https://vk.com/dark_alf +// window.onresize = function() { +// if(window.myscroolbar) +// window.myscroolbar.destroy(); +// window.onload(); +// }; diff --git a/themes/sashapelican/static/js/Malihu/malihu.js b/themes/sashapelican/static/js/Malihu/malihu.js deleted file mode 100644 index 99d91016..00000000 --- a/themes/sashapelican/static/js/Malihu/malihu.js +++ /dev/null @@ -1,31 +0,0 @@ -// @Author: Kristinita -// @Date: 2017-03-30 16:31:37 -// @Last Modified time: 2017-05-02 11:47:54 -//////////// -// Mailhu // -//////////// -/// Don't use Malihu! Migrate to Gemini. Arguments: -// 1. Ctrl+F problem — https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/486#issuecomment-298243647 , -// 2. problem with lazy load plugins, -// 3. doesn't work link to article anchors. -// Settings — http://manos.malihu.gr/jquery-custom-content-scroller/ -$(window).on("load resize", function() { - if (window.matchMedia("(min-width: 960px)").matches) { - $("main").mCustomScrollbar({ - // Theme - theme: "sasha-scrollbar", - // If "outside", scrollbar don't display, but all hotkeys works, - // if cursor not in active tab. - // Mailhu have bug — different behavior for left and right scrollbars. - scrollbarPosition: "inside", - // Hide scrollbar, if cursor not in active window - autoHideScrollbar: true, - }); - } else { - $("body").mCustomScrollbar({ - theme: "sasha-scrollbar", - scrollbarPosition: "outside", - autoHideScrollbar: true, - }); - } -}); diff --git a/themes/sashapelican/static/js/Malihu/non-scrollbar.js b/themes/sashapelican/static/js/Malihu/non-scrollbar.js deleted file mode 100644 index ef6495ff..00000000 --- a/themes/sashapelican/static/js/Malihu/non-scrollbar.js +++ /dev/null @@ -1,11 +0,0 @@ -// @Author: Kristinita -// @Date: 2017-03-30 16:31:37 -// @Last Modified time: 2017-03-30 16:36:13 -(function($) { - $(window).load(function() { - $("body").mCustomScrollbar({ - // All hotkeys works, but scrollbar don't displayed - scrollbarPosition: "outside", - }); - }); -})(jQuery); diff --git a/themes/sashapelican/static/stylus/general/aside.styl b/themes/sashapelican/static/stylus/general/aside.styl index 0eefeb2f..b8c17bb7 100644 --- a/themes/sashapelican/static/stylus/general/aside.styl +++ b/themes/sashapelican/static/stylus/general/aside.styl @@ -9,10 +9,7 @@ General ========================================================================== */ - aside - // Relative, than .SashaBottomAside text will in aside - position relative // Icon the whole aside space background-size cover height 100% @@ -48,15 +45,18 @@ aside @media screen and (orientation: portrait) aside width 100% + /* + * That .SashaBottomAside text will child for