Merge pull request #45 from laravelcm/update-ui

Update UI

Author: mckenziearts

public/css/app.css

@@ -1,5 +1,5 @@
 /*!
- * Fuse.js v3.4.5 - Lightweight fuzzy-search (http://fusejs.io)
+ * Fuse.js v3.4.6 - Lightweight fuzzy-search (http://fusejs.io)
  * 
  * Copyright (c) 2012-2017 Kirollos Risk (http://kiro.me)
  * All Rights Reserved. Apache Software License 2.0
@@ -22,4 +22,4 @@ See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
 
-/*! choices.js v9.0.1 | © 2019 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
+/*! choices.js v9.1.0 | © 2021 Josh Johnson | https://github.com/jshjohnson/Choices#readme */

public/js/app.js

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=1d8832a55a90910e91ad",
-    "/css/app.css": "/css/app.css?id=543449437fc1da0337d7"
+    "/js/app.js": "/js/app.js?id=3bd7a17ae8879cea08888521628605ff",
+    "/css/app.css": "/css/app.css?id=89e4f1f71a090dfd4a24efae763e948f"
 }

public/js/app.js.LICENSE.txt

@@ -11,8 +11,8 @@
 @import "forms.css";
 @import "torchlight.css";
 @import "toc.css";
-@import "media-library.css";
-/*@import "rain.css";*/
+@import "header.css";
+/*@import "media-library.css";*/
 /*@import "christmas.css";*/
 
 :root {

public/mix-manifest.json

@@ -0,0 +1,7 @@
+.header.is-fixed {
+  @apply fixed inset-x-0 transform duration-300 bg-skin-menu/80 backdrop-blur;
+}
+
+.header.is-hidden {
+  transform: translateY(-100%);
+}

resources/css/app.css

@@ -2,11 +2,13 @@ import Alpine from 'alpinejs'
 import intersect from '@alpinejs/intersect'
 
 import internationalNumber from './plugins/internationalNumber'
+import { registerHeader } from './header'
 import './elements'
 import './helpers'
 import './editor'
 import './scrollspy'
-// import './rain'
+
+registerHeader()
 
 // Add Alpine to window object.
 window.Alpine = Alpine;

resources/css/header.css

@@ -0,0 +1,82 @@
+import { throttle } from '@helpers/timers'
+
+let $header = document.querySelector('.header')
+let currentTop = 0
+let previousTop = 0
+let scrolling = false
+const scrollDelta = 20
+let scrollOffset = $header ? $header.offsetHeight : 0
+
+// Les différents états possible du header
+const FIXED = 0
+const HIDDEN = 1
+const DEFAULT = 2
+let state = DEFAULT
+
+/**
+ * Fonction de changement d'état du header
+ *
+ * @param {number} newState
+ */
+function setState (newState) {
+  // Le header n'a pas changé d'état
+  if (newState === state) {
+    return
+  }
+
+  if (newState === HIDDEN) {
+    $header.classList.add('is-hidden')
+  } else if (newState === FIXED) {
+    $header.classList.remove('is-hidden')
+    $header.classList.add('is-fixed')
+  } else if (newState === DEFAULT) {
+    $header.classList.remove('is-hidden')
+    $header.classList.remove('is-fixed')
+  }
+
+  state = newState
+}
+
+const autoHideHeader = function () {
+  if (!$header) {
+    return
+  }
+  currentTop = document.documentElement.scrollTop
+  // Opacité sur le header
+  if (currentTop > $header.offsetHeight) {
+    if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
+      setState(HIDDEN)
+    } else if (previousTop - currentTop > scrollDelta) {
+      setState(FIXED)
+    }
+  } else {
+    setState(DEFAULT)
+  }
+  /**
+   // Masquage / affichage
+   if (previousTop - currentTop > scrollDelta) {
+    $header.classList.remove('is-hidden')
+  } else if (currentTop - previousTop > scrollDelta && currentTop > scrollOffset) {
+    $header.classList.add('is-hidden')
+  }
+   **/
+  previousTop = currentTop
+  scrolling = false
+}
+
+/**
+ * Enregistre le comportement du header (fixed au scroll)
+ * @return {function(): void}
+ */
+export function registerHeader () {
+  const scrollListener = throttle(() => {
+    if (!scrolling) {
+      scrolling = true
+      window.requestAnimationFrame(autoHideHeader)
+    }
+  }, 100)
+  window.addEventListener('scroll', scrollListener)
+  return () => {
+    window.removeEventListener('scroll', scrollListener)
+  }
+}

resources/css/rain.css

@@ -0,0 +1,23 @@
+/**
+ * Throttle un callback
+ */
+export function throttle(callback, delay) {
+  let last;
+  let timer;
+  return function () {
+    let context = this;
+    let now = + new Date();
+    let args = arguments;
+    if (last && now < last + delay) {
+      // le délai n'est pas écoulé on reset le timer
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        last = now;
+        callback.apply(context, args);
+      }, delay);
+    } else {
+      last = now;
+      callback.apply(context, args);
+    }
+  };
+}