From 326d49176566a350f7b6a2781225a9913723c7db Mon Sep 17 00:00:00 2001
From: Tony Air <tony@thewebdevelopmentagency.com>
Date: Sat, 30 Nov 2019 15:29:27 +0700
Subject: [PATCH] Cookies and Flyout UI demo

---
 src/html/_components/Flyout.html     | 10 +++++
 src/js/_components/_ui.cookie.js     | 33 ++++++++++++++
 src/js/_components/_ui.flyout.js     | 64 ++++++++++++++++++++++++++++
 src/scss/_components/_ui.flyout.scss | 34 +++++++++++++++
 4 files changed, 141 insertions(+)
 create mode 100644 src/html/_components/Flyout.html
 create mode 100755 src/js/_components/_ui.cookie.js
 create mode 100755 src/js/_components/_ui.flyout.js
 create mode 100755 src/scss/_components/_ui.flyout.scss

diff --git a/src/html/_components/Flyout.html b/src/html/_components/Flyout.html
new file mode 100644
index 0000000..9f33b0a
--- /dev/null
+++ b/src/html/_components/Flyout.html
@@ -0,0 +1,10 @@
+<div class="flyout-FlyoutUI">
+	<i class="fas fa-times flyout-FlyoutUI__close"></i>
+	<h2 class="flyout-FlyoutUI__title">
+	<i class="fas fa-asterisk"></i>
+	Flyout Demo
+	</h2>
+	<div class="flyout-FlyoutUI__content typography">
+		<p>Lipsum .... .... ....</p>
+	</div>
+</div>
\ No newline at end of file
diff --git a/src/js/_components/_ui.cookie.js b/src/js/_components/_ui.cookie.js
new file mode 100755
index 0000000..dd40bff
--- /dev/null
+++ b/src/js/_components/_ui.cookie.js
@@ -0,0 +1,33 @@
+"use strict";
+
+const CookieUI = (($) => {
+  const D = document;
+  const W = window;
+
+  class CookieUI {
+    static get(name) {
+      return D.cookie.split("; ").reduce((r, v) => {
+        const parts = v.split("=");
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+      }, "");
+    }
+
+    static set(name, value, days = 7, path = "/") {
+      const expires = new Date(Date.now() + days * 864e5).toUTCString();
+      D.cookie =
+        name +
+        "=" +
+        encodeURIComponent(value) +
+        "; expires=" +
+        expires +
+        "; path=" +
+        path;
+    }
+  }
+
+  //W.CookieUI = new CookieUI();
+
+  return CookieUI;
+})($);
+
+export default CookieUI;
diff --git a/src/js/_components/_ui.flyout.js b/src/js/_components/_ui.flyout.js
new file mode 100755
index 0000000..ed387cc
--- /dev/null
+++ b/src/js/_components/_ui.flyout.js
@@ -0,0 +1,64 @@
+"use strict";
+
+import $ from 'jquery';
+
+import Events from '../_events';
+import CookieUI from './_ui.cookie';
+
+const FlyoutUI = (($) => {
+  const W = window;
+  const D = document;
+  const $Body = $('body');
+
+  const NAME = 'FlyoutUI';
+  const COOKIE = `${NAME}-hide`;
+  const TIMEOUT = 2000;
+
+  class FlyoutUI {
+    static init() {
+      const ui = this;
+
+      ui.$modal = $(`.flyout-${NAME}`);
+      const hide = CookieUI.get(COOKIE);
+
+      if (ui.$modal.length && (!hide || hide !== 'true')) {
+        ui.$modal.data(NAME, ui);
+
+        const $close = ui.$modal.find(`.flyout-${NAME}__close`);
+
+        if ($close.length) {
+          $close.on('click', () => {
+            ui.hide();
+          });
+        }
+
+        setTimeout(() => {
+          ui.show();
+        }, TIMEOUT);
+      }
+    }
+
+    static show(callback) {
+      const ui = this;
+
+      ui.$modal.addClass(`flyout-${NAME}__active`);
+    }
+
+    static hide(callback) {
+      const ui = this;
+
+      CookieUI.set(COOKIE, 'true', 1);
+      ui.$modal.removeClass(`flyout-${NAME}__active`);
+    }
+  }
+
+  $(W).on(`${Events.AJAX} ${Events.LOADED}`, () => {
+    FlyoutUI.init();
+  });
+
+  W.FlyoutUI = FlyoutUI;
+
+  return FlyoutUI;
+})($);
+
+export default FlyoutUI;
diff --git a/src/scss/_components/_ui.flyout.scss b/src/scss/_components/_ui.flyout.scss
new file mode 100755
index 0000000..639e216
--- /dev/null
+++ b/src/scss/_components/_ui.flyout.scss
@@ -0,0 +1,34 @@
+$flyout-height-padding: 1rem;
+$flyout-width-padding: 2rem;
+$flyout-padding: $flyout-height-padding $flyout-width-padding;
+$flyout-bg: #000 !default;
+$flyout-color: #fff !default;
+$flyout-title-color: #fff !default;
+$flyout-transition: right 2s;
+
+.flyout-FlyoutUI {
+    position: absolute;
+    z-index: 99;
+    transform: translateY(-50%);
+    transition: $flyout-transition;
+    right: -100%;
+    top: 50%;
+    background: $flyout-bg;
+    color: $flyout-color;
+    padding: $flyout-padding;
+
+    &__active {
+        display: block;
+        right: 0;
+    }
+
+    &__title {
+        color: $flyout-title-color;
+    }
+
+    &__close {
+        position: absolute;
+        top: $flyout-height-padding;
+        right: $flyout-width-padding;
+    }
+}