auto commit at 11/02/2019 Sat

src/ts/index.ts

@@ -5,31 +5,16 @@
  */
 
 import * as components from "./components/index"
-//import * as modules from "./modules/index"
+import coverImgIni from "./modules/coverImgIni"
+import headerBarScrollHandler from "./modules/headerBarScrollHandler"
 
 //TODO: move to ./particails
 let componentsIni = components
-//let modulesIni = modules
-
-import scrollDirection from "./modules/scrollEvent"
 
 window.onscroll = function () {
-  let ele: HTMLElement = document.getElementById("nav-header")
-  if (scrollDirection('y') == 'down') {
-    ele.style.top = `-120px`
-  }
-  else if (scrollDirection('y') == 'up') {
-    ele.style.top = `0px`
-  }
+  headerBarScrollHandler()
 }
 
-let coverImageContainer: HTMLElement = document.getElementById("cover-img-container")
-coverImageContainer.style.height = `${window.innerHeight}px`
-
-import Parallax from 'parallax-js'
-//let scene = document.getElementById('cover-img-container')
-//let parallaxInstance = new Parallax(scene)
-
-let ele: HTMLImageElement = document.querySelector("#cover-img") as HTMLImageElement
-let eleW: number = ele.naturalWidth
-console.log(eleW)
+window.onload = function () {
+  coverImgIni()
+}

src/ts/modules/coverImgIni.ts

@@ -0,0 +1,32 @@
+/**
+ * @description Sakura theme module
+ * @author Mashiro
+ * @since 19/10/31
+ * @license MIT
+ */
+
+import Parallax from 'parallax-js'
+
+/**
+ * Initial index cover image and image box.
+ * Include Parallax box initial and `#cover-img-container` size initial.
+ */
+export default function () {
+    let coverImageContainer: HTMLElement = document.querySelector("#cover-img-container")
+    coverImageContainer.style.height = `${window.innerHeight}px`
+
+    let scene = document.querySelector('#cover-img-container')
+    let parallaxInstance = new Parallax(scene);
+
+    let cover: {
+        e: HTMLImageElement,
+        w: number,
+        h: number
+    }
+
+    cover.e = document.querySelector("#cover-img") as HTMLImageElement
+    cover.w = cover.e.naturalWidth
+    cover.h = cover.e.naturalHeight
+
+    console.log(cover.w)
+}

src/ts/modules/headerBarScrollHandler.ts

@@ -0,0 +1,21 @@
+/**
+ * @description Sakura theme module
+ * @author Mashiro
+ * @since 19/10/31
+ * @license MIT
+ */
+
+import scrollDirection from "./scrollDirection"
+
+/**
+ * Site top bar handler when page scroll
+ */
+export default function () {
+    let ele: HTMLElement = document.querySelector("#nav-header")
+    if (scrollDirection('y') == 'down') {
+        ele.style.top = `-120px`
+    }
+    else if (scrollDirection('y') == 'up') {
+        ele.style.top = `0px`
+    }
+}

src/ts/modules/index.ts

@@ -1 +0,0 @@
-export * from './scrollEvent';

src/ts/modules/scrollDirection.ts

@@ -1,3 +1,10 @@
+/**
+ * @description Sakura theme module
+ * @author Mashiro
+ * @since 19/10/31
+ * @license MIT
+ */
+
 let scrollAction: {
     x: number,
     y: number,
@@ -8,6 +15,11 @@ let scrollAction: {
     d: undefined
 }
 
+/**
+ * Detect window scroll direction
+ * @param  {string}  direction  option: `Y`/`y` - horizontal; `X`/`x` - vertical
+ * @return {string}             return window scroll direction
+ */
 export default function (direction: string) {
     if (scrollAction.x == undefined) {
         scrollAction.x = window.pageXOffset