scroll

src/es/Environment.js

@@ -9,7 +9,7 @@ self.Environment = {
   language: currentScriptUrl.searchParams.get('language') || document.documentElement.getAttribute('lang') || 'en',
   stage: currentScriptUrl.searchParams.get('stage') || document.documentElement.getAttribute('stage') || 'alpha',
   keepAlive: 86400000,
-  version: currentScriptUrl.searchParams.get('version') || document.documentElement.getAttribute('version') || '4.2.10', // https://semver.org/
+  version: currentScriptUrl.searchParams.get('version') || document.documentElement.getAttribute('version') || '4.2.11', // https://semver.org/
   /**
    * Get custom mobile breakpoint
    * @param {{constructor?: string, tagName?: string, namespace?: string}} organism

src/es/components/atoms/scroll/Scroll.js

@@ -0,0 +1,91 @@
+// @ts-check
+import { Shadow } from '../../../event-driven-web-components-prototypes/src/Shadow.js'
+
+/**
+ * Scroll of decentral ninja
+ *
+ * @export
+ * @class Scroll
+ * @type {CustomElementConstructor}
+ * @attribute {
+ *  {string} src used for the image source
+ *  {string} href used for the link reference
+ * }
+ */
+export default class Scroll extends Shadow() {
+  constructor (options = {}, ...args) {
+    super({ importMetaUrl: import.meta.url, ...options }, ...args)
+  }
+
+  connectedCallback () {
+    super.connectedCallback()
+    if (this.shouldRenderCSS()) this.renderCSS()
+    if (this.shouldRenderHTML()) this.renderHTML()
+  }
+
+  /**
+   * evaluates if a render is necessary
+   *
+   * @return {boolean}
+   */
+  shouldRenderCSS () {
+    return !this.root.querySelector(`:host > style[_css], ${this.tagName} > style[_css]`)
+  }
+
+  /**
+   * evaluates if a render is necessary
+   *
+   * @return {boolean}
+   */
+  shouldRenderHTML () {
+    return !this.aIconMdx
+  }
+
+  /**
+   * renders the css
+   *
+   * @return {void}
+   */
+  renderCSS () {
+    this.css = /* css */`
+      :host > div {
+        display: flex;
+        background-color: var(--color-secondary);
+        border: 2px solid var(--color-secondary);
+        border-radius: 50%;
+        padding: 0.25em;
+        transition: background-color .3s ease-out;
+        justify-content: center;
+        align-items: center;
+      }
+      :host(.hover) > div, :host(:hover) > div {
+        background-color: var(--background-color);
+      }
+      :host > div > a-icon-mdx {
+        color: var(--background-color);
+        transform: translateY(0.25em);
+        transition: color .3s ease-out;
+        height: auto;
+        width: 100%;
+      }
+      :host(.hover) > div > a-icon-mdx, :host(:hover) > div > a-icon-mdx {
+        color: var(--color-hover);
+      }
+    `
+  }
+
+  /**
+   * renders the html
+   *
+   * @return {void}
+   */
+  renderHTML () {
+    this.html = ''
+    // https://tabler-icons.io/
+    this.html = /* html */`<div><a-icon-mdx hover-on-parent-element id="show-modal" icon-url="../../../../../../img/icons/swipe-down.svg" size="2em"></a-icon-mdx></div>`
+  }
+
+  get aIconMdx () {
+    return this.root.querySelector('a-icon-mdx')
+  }
+}

src/es/components/organisms/body/Body.js

@@ -18,13 +18,31 @@ export default class Body extends Shadow() {
     super({ importMetaUrl: import.meta.url, ...options }, ...args)
 
     this.setAttribute('aria-label', 'Body')
+    let timeoutId = null
+    this.scrollEventListener = event => {
+      clearTimeout(timeoutId)
+      timeoutId = setTimeout(async () => {
+        // isScrolledBottom
+        if (this.main.scrollHeight < this.main.scrollTop + this.main.offsetHeight + 40 /* tollerance */) {
+          this.setAttribute('is-scrolled-bottom', '')
+          if (this.hasAttribute('scroll-icon-only-show-on-event')) this.removeAttribute('scroll-icon-has-show-event')
+        } else {
+          this.removeAttribute('is-scrolled-bottom')
+        }
+      }, 200)
+    }
     this.mainScrollEventListener = event => {
       const options = {}
       if (event.detail?.x) options.left = event.detail?.x
       options.top = event.detail?.y || this.main.scrollHeight
       options.behavior = event.detail?.behavior || 'smooth'
       this.main.scroll(options)
     }
+    this.scrollIconShowEventListener = event => this.setAttribute('scroll-icon-has-show-event', '')
+    this.aScrollClickEventListener = event => {
+      this.mainScrollEventListener({detail: {}})
+      if (this.hasAttribute('scroll-icon-only-show-on-event')) this.removeAttribute('scroll-icon-has-show-event')
+    }
   }
 
   connectedCallback () {
@@ -33,11 +51,20 @@ export default class Body extends Shadow() {
     if (this.shouldRenderCSS()) showPromises.push(this.renderCSS())
     if (this.shouldRenderHTML()) showPromises.push(this.renderHTML())
     Promise.all(showPromises).then(() => (this.hidden = false))
-    document.body.addEventListener('main-scroll', this.mainScrollEventListener)
+    this.main.addEventListener('scroll', this.scrollEventListener)
+    this.globalEventTarget.addEventListener('main-scroll', this.mainScrollEventListener)
+    this.globalEventTarget.addEventListener('scroll-icon-show-event', this.scrollIconShowEventListener)
+    if (this.aScroll) {
+      this.setAttribute('is-scrolled-bottom', '')
+      this.aScroll.addEventListener('click', this.aScrollClickEventListener)
+    }
   }
 
   disconnectedCallback () {
-    document.body.removeEventListener('main-scroll', this.mainScrollEventListener)
+    this.main.removeEventListener('scroll', this.scrollEventListener)
+    this.globalEventTarget.removeEventListener('main-scroll', this.mainScrollEventListener)
+    this.globalEventTarget.removeEventListener('scroll-icon-show-event', this.scrollIconShowEventListener)
+    if (this.aScroll) this.aScroll.removeEventListener('click', this.aScrollClickEventListener)
   }
 
   /**
@@ -123,7 +150,17 @@ export default class Body extends Shadow() {
         max-width: min(100%, 1400px);
         position: relative;
       }
-    
+      :host > a-scroll {
+        position: absolute;
+        bottom: var(--spacing);
+        right: calc(3 * var(--spacing));
+        opacity: 0.8;
+        transition: opacity 0.3s ease-out;
+      }
+      :host([is-scrolled-bottom]:not([scroll-icon-only-show-on-event])) > a-scroll, :host([scroll-icon-only-show-on-event]:not([scroll-icon-has-show-event])) > a-scroll {
+        opacity: 0;
+        pointer-events: none;
+      }
     `
     return this.fetchTemplate()
   }
@@ -180,7 +217,14 @@ export default class Body extends Shadow() {
       contentDiv.appendChild(node)
     })
     this.html = this.main
-    return Promise.resolve()
+    if (!this.hasAttribute('scroll-icon')) return Promise.resolve()
+    this.html = '<a-scroll></a-scroll>'
+    return this.fetchModules([
+      {
+        path: `${this.importMetaUrl}../../atoms/scroll/Scroll.js`,
+        name: 'a-scroll'
+      }
+    ])
   }
 
   /**
@@ -195,4 +239,13 @@ export default class Body extends Shadow() {
     contentEl.innerHTML = html
     return true
   }
+
+  get aScroll () {
+    return this.root.querySelector('a-scroll')
+  }
+
+  get globalEventTarget () {
+    // @ts-ignore
+    return this._globalEventTarget || (this._globalEventTarget = self.Environment?.activeRoute || document.body)
+  }
 }

src/es/components/pages/Chat.js

@@ -58,7 +58,7 @@ export default class Chat extends Index {
                         </div>
                       </header>
                     </o-header>
-                    <o-body>
+                    <o-body scroll-icon scroll-icon-only-show-on-event>
                       <main>
                         <div class=pattern>
                           <div class=content>