From cda49e03018d3dbbe8b9dc3927719471150c1608 Mon Sep 17 00:00:00 2001
From: Jeffrey Tse <jeffreytse.mail@gmail.com>
Date: Tue, 24 Sep 2019 14:10:57 +0800
Subject: update: perfect animation, compatibility issue

---
 assets/css/main.scss | 25 +++++++++++++++++++++++
 assets/js/main.js    | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 assets/main.scss     | 25 -----------------------
 3 files changed, 82 insertions(+), 25 deletions(-)
 create mode 100644 assets/css/main.scss
 create mode 100644 assets/js/main.js
 delete mode 100644 assets/main.scss

(limited to 'assets')

diff --git a/assets/css/main.scss b/assets/css/main.scss
new file mode 100644
index 0000000..112a9ef
--- /dev/null
+++ b/assets/css/main.scss
@@ -0,0 +1,25 @@
+---
+# Only the main Sass file needs front matter (the dashes are enough)
+---
+
+// Default theme colors
+$theme-colors: (
+  spacegrey: #353535,
+  inkpurple: #543581,
+  aquablue: #00aaa0,
+  azureblue: #2863b1,
+  gracered: #a12a50,
+  aloegreen: #3d9e56,
+  rustbrown: #795548,
+);
+
+$theme-name: "{{ site.theme_color }}";
+$theme-color: map-get($theme-colors, "spacegrey");
+
+@if map-has-key($theme-colors, $theme-name) {
+  $theme-color: map-get($theme-colors, $theme-name);
+} @else if str-index($theme-name, "#") == 1 {
+  $theme-color: {{ site.theme_color | default: '#353535' }};
+}
+
+@import "yat";
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..231191b
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,57 @@
+// Fix DOM matches function
+if (!Element.prototype.matches) {
+  Element.prototype.matches =
+    Element.prototype.matchesSelector ||
+    Element.prototype.mozMatchesSelector ||
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.oMatchesSelector ||
+    Element.prototype.webkitMatchesSelector ||
+    function(s) {
+      var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+        i = matches.length;
+      while (--i >= 0 && matches.item(i) !== this) {}
+      return i > -1;
+    };
+}
+
+// Get Scroll position
+function getScrollPos() {
+  var supportPageOffset = window.pageXOffset !== undefined;
+  var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+  var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+  var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+
+  return { x: x, y: y };
+}
+
+var _scrollTimer = [];
+
+// Smooth scroll
+function smoothScrollTo(y, time) {
+  time = time == undefined ? 500 : time;
+
+  var scrollPos = getScrollPos();
+  var count = 60;
+  var length = (y - scrollPos.y);
+
+  function easeInOut(k) {
+    return .5 * (Math.sin((k - .5) * Math.PI) + 1);
+  }
+
+  for (var i = _scrollTimer.length - 1; i >= 0; i--) {
+    clearTimeout(_scrollTimer[i]);
+  }
+
+  for (var i = 0; i <= count; i++) {
+    (function() {
+      var cur = i;
+      _scrollTimer[cur] = setTimeout(function() {
+        window.scrollTo(
+          scrollPos.x,
+          scrollPos.y + length * easeInOut(cur/count)
+        );
+      }, (time / count) * cur);
+    })();
+  }
+}
diff --git a/assets/main.scss b/assets/main.scss
deleted file mode 100644
index 112a9ef..0000000
--- a/assets/main.scss
+++ /dev/null
@@ -1,25 +0,0 @@
----
-# Only the main Sass file needs front matter (the dashes are enough)
----
-
-// Default theme colors
-$theme-colors: (
-  spacegrey: #353535,
-  inkpurple: #543581,
-  aquablue: #00aaa0,
-  azureblue: #2863b1,
-  gracered: #a12a50,
-  aloegreen: #3d9e56,
-  rustbrown: #795548,
-);
-
-$theme-name: "{{ site.theme_color }}";
-$theme-color: map-get($theme-colors, "spacegrey");
-
-@if map-has-key($theme-colors, $theme-name) {
-  $theme-color: map-get($theme-colors, $theme-name);
-} @else if str-index($theme-name, "#") == 1 {
-  $theme-color: {{ site.theme_color | default: '#353535' }};
-}
-
-@import "yat";
-- 
cgit v1.2.3