fix(gemini): Correct anchors in articles

noeldelgado/gemini-scrollbar#46 (comment)
Kristinita · Mar 26, 2018 · 192c040 · 192c040
1 parent d33776a
commit 192c040
Show file tree

Hide file tree

Showing 14 changed files with 308 additions and 242 deletions.
diff --git 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
@@ -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 %>"
-			]
+########################
+## 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
@@ -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();
-};
+// @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
diff --git a/themes/sashapelican/static/js/Malihu/non-scrollbar.js b/themes/sashapelican/static/js/Malihu/non-scrollbar.js
diff --git 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 <aside> element:
+		 * https://github.com/noeldelgado/gemini-scrollbar/issues/46#issuecomment-374928170
+		 */
+		position relative
 
 /* For landscape orientation */
 
 @media screen and (orientation: landscape)
 	aside
 		width 35%
+		position fixed
 
-	/* [NOTE] Do not delete this! Page will display incorrect, if landscape orientation.
-	Child scrollbar element for <main> tag because child elements have priority to parent elements. */
-
-	.gm-scrollbar-container
-		width 65%
+	main
+		width 65%
diff --git a/themes/sashapelican/static/stylus/general/basic.styl b/themes/sashapelican/static/stylus/general/basic.styl
@@ -8,6 +8,7 @@
 * TOC
 *
 * General
+* - overflow-wrap
 * - HTML, body
 * - Links
 * - Headers
@@ -61,6 +62,17 @@
    > General
    ========================================================================== */
 
+/* >> overflow-wrap
+   ========================================================================== */
+
+/*
+ * Wrap all long words:
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
+ */
+
+*
+	overflow-wrap: break-word
+
 /* >> HTML, body
    ========================================================================== */