From ce43bb9a6aab445286afac54e5048b1547efa63d Mon Sep 17 00:00:00 2001
From: Jeffrey Tse <jeffreytse.mail@gmail.com>
Date: Fri, 20 Sep 2019 12:40:14 +0800
Subject: update: header transparent, animation, banner, etc

---
 _includes/extensions/trianglify.html | 13 +++++---
 _includes/views/banner.html          | 15 +++++----
 _includes/views/header.html          | 59 +++++++++++++++++++++++++++++++++++-
 3 files changed, 75 insertions(+), 12 deletions(-)

(limited to '_includes')

diff --git a/_includes/extensions/trianglify.html b/_includes/extensions/trianglify.html
index 22003dc..c11458e 100644
--- a/_includes/extensions/trianglify.html
+++ b/_includes/extensions/trianglify.html
@@ -8,16 +8,19 @@
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/2.0.0/trianglify.min.js"></script>
 <script>
-  function setRandomBgImage(selector, seed) {
+  function setRandomBgImage(selector, seed, zoom = 1) {
     var element = document.querySelector(selector);
     if (!element) return;
     var pattern = Trianglify({
-      width: screen.width,
-      height: element.offsetHeight,
+      width: screen.width * zoom,
+      height: element.offsetHeight * zoom,
       seed: seed
     });
-    element.appendChild(pattern.canvas());
+
+    var image = document.createElement("div");
+    image.style.backgroundImage = "url(" + pattern.png() + ")";
+    element.appendChild(image);
   }
 
-  setRandomBgImage('{{ selector }}', '{{ seed }}');
+  setRandomBgImage('{{ selector }}', '{{ seed }}', {{ zoom | default: 1}});
 </script>
diff --git a/_includes/views/banner.html b/_includes/views/banner.html
index baa8465..45ea62c 100644
--- a/_includes/views/banner.html
+++ b/_includes/views/banner.html
@@ -44,12 +44,14 @@
 
         {%- else -%}
 
-        <h1 class="page-banner-heading">
-          {{ heading | default: page.title | escape }}
-        </h1>
-        <h3 class="page-banner-subheading">
-          {{ subheading | default: page.subtitle | escape }}
-        </h3>
+          <div class="page-banner-default">
+            <h1 class="page-banner-heading">
+              {{ heading | default: page.title | escape }}
+            </h1>
+            <h3 class="page-banner-subheading">
+              {{ subheading | default: page.subtitle | escape }}
+            </h3>
+          <div>
 
         {%- endif -%}
       </div>
@@ -72,6 +74,7 @@
 
     {%- endif -%}
 
+    {%- assign zoom = 1.5 -%}
     {%- include extensions/trianglify.html -%}
 
   {%- endif -%}
diff --git a/_includes/views/header.html b/_includes/views/header.html
index 06a20ed..10637c2 100644
--- a/_includes/views/header.html
+++ b/_includes/views/header.html
@@ -1,4 +1,19 @@
-<header class="site-header" role="banner">
+
+{%- include functions.html func='log' level='debug' msg='Get banner value' -%}
+{% assign name = 'banner' %}
+{%- include functions.html func='get_value' -%}
+{% assign banner = return %}
+
+{%- include functions.html func='log' level='debug' msg='Get header_transparent value' -%}
+{% assign name = 'header_transparent' %}
+{%- include functions.html func='get_value' -%}
+{% assign header_transparent = return %}
+
+{%- if banner and header_transparent -%}
+  {%- assign header_transparent_class = "site-header-transparent" -%}
+{%- endif -%}
+
+<header class="site-header {{ header_transparent_class }}" role="banner">
 
   <div class="wrapper">
     {%- assign default_paths = site.pages | where: "dir", "/" | map: "path" -%}
@@ -42,3 +57,45 @@
     {%- endif -%}
   </div>
 </header>
+
+<script>
+  (function() {
+    var supportPageOffset = window.pageXOffset !== undefined;
+    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
+
+    function scrollY() {
+      return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+    }
+
+    var lastScrollY = scrollY();
+    var dataset = document.documentElement.dataset;
+
+    function storeScrollData() {
+      var y = scrollY();
+
+      {%- if banner and header_transparent -%}
+      dataset.headerTransparent = "";
+      {%- endif -%}
+
+      var scrollStatus = "";
+
+      if (y <= 0) {
+        scrollStatus = "top";
+      } else if ((window.innerHeight + y) >= document.body.offsetHeight) {
+        scrollStatus = "bottom";
+      } else {
+        var isScrollDown = (y - lastScrollY > 0) ? true : false;
+        scrollStatus = isScrollDown ? "down" : "up";
+      }
+
+      lastScrollY = y;
+      dataset.scrollStatus = scrollStatus;
+    }
+
+    window.addEventListener('scroll', function(e) {
+      storeScrollData();
+    });
+
+    storeScrollData();
+  })();
+</script>
-- 
cgit v1.2.3