issue-#34 - Renamed 'container' property to 'trigger', on x-togglecla…

…ssonscroll component.
elycruz · Jul 13, 2023 · c47bbc4 · c47bbc4
1 parent 534c0dc
commit c47bbc4
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 53 deletions.
diff --git a/apps/atomic-ui-js-site/src/app/components/x-toggleclassonscroll/page.tsx b/apps/atomic-ui-js-site/src/app/components/x-toggleclassonscroll/page.tsx
@@ -2,7 +2,16 @@ import XToggleClassOnScrollComponent from 'atomic-ui-js-next/x-toggleclassonscro
 import XRippleComponent from 'atomic-ui-js-next/x-ripple';
 import styles from './page.module.scss';
 
-// const triggerThresholds = Array(100).fill(null, 0, 100).map((_, i) => i * 0.01);
+const triggerThresholds = Array(10).fill(null, 0, 10).map((_, i) => i * 0.1);
+
+interface LipsumArticleProps extends IntersectionObserverInit {
+  anchorTarget?: string;
+  className?: string;
+  classNameToToggle?: string;
+  scrollableParent?: string;
+  title?: string;
+  triggerTarget?: string;
+}
 
 const lipsumArticle = ({
   scrollableParent = null,
@@ -12,8 +21,8 @@ const lipsumArticle = ({
   anchorTarget = '#',
   classNameToToggle = styles['with-back-to-top-btn--visible'],
   rootMargin = '200px 0px 0px 0px',
-  thresholds = [0.5, 1]
-} = {}) => {
+  threshold = [0.5, 1]
+} = {} as LipsumArticleProps) => {
   return <article className={className}>
     {anchorTarget !== '#' && <a id={anchorTarget.slice(1)}></a>}
 
@@ -202,12 +211,12 @@ const lipsumArticle = ({
       <XToggleClassOnScrollComponent
         className={styles['back-to-top-btn-container']}
         classNameToToggle={classNameToToggle}
-        container={triggerTarget}
+        triggerSelector={triggerTarget}
         rootMargin={rootMargin}
-        threshold={thresholds}
+        threshold={threshold}
         scrollableParentSelector={scrollableParent}
       >
-        <a href={anchorTarget} className="back-to-top-btn x-btn x-filled x-theme-primary">
+        <a href={anchorTarget} className="back-to-top-btn x-btn x-filled x-raised x-theme-primary">
           <XRippleComponent></XRippleComponent>
           <span>Back to top</span>
         </a>
@@ -232,19 +241,18 @@ export default function XToggleonscrollPage() {
       triggerTarget: '.scrollable-elm-example-1 section',
       scrollableParent: '.scrollable-elm-example-1',
       title: 'Scrollable Element 1',
-      rootMargin: '200px 0px 0px 0px',
-      thresholds: [0.16]
+      rootMargin: '0px',
+      threshold: [0.16, 0.5, 1]
     })}
 
-    {lipsumArticle({
-      className: `${styles['scrollable-element-example']} scrollable-elm-example-2`,
-      anchorTarget: '#example-2',
-      triggerTarget: '.scrollable-elm-example-2 section',
-      scrollableParent: '.scrollable-elm-example-2',
-      title: 'Scrollable Element 2',
-      rootMargin: '200px 0px 0px 0px',
-      thresholds: [0.16]
-    })}
+    {/*{lipsumArticle({*/}
+    {/*  className: `${styles['scrollable-element-example']} scrollable-elm-example-2`,*/}
+    {/*  anchorTarget: '#example-2',*/}
+    {/*  triggerTarget: '.scrollable-elm-example-2 section',*/}
+    {/*  scrollableParent: '.scrollable-elm-example-2',*/}
+    {/*  title: 'Scrollable Element 2',*/}
+    {/*  threshold: 0.25*/}
+    {/*})}*/}
 
   </section>;
 }
diff --git a/packages/atomic-ui-js/utils/constants.js b/packages/atomic-ui-js/utils/constants.js
@@ -20,17 +20,18 @@ export const xThemes = {
   },
 
   CHECKED_NAME = 'checked',
+  CLASSNAME_TO_TOGGLE_NAME = 'classNameToToggle',
+  CLASS_NAME_ON_INTERSECT_NAME = 'classNameOnIntersect',
   DEFAULT_CHECKED_NAME = 'defaultChecked',
-  THEME_NAME = 'theme',
-  VARIETY_NAME = 'variety',
   PARENT_SELECTOR_NAME = 'parentSelector',
-  CLASS_NAME_ON_INTERSECT_NAME = 'classNameOnIntersect',
-  CLASSNAME_TO_TOGGLE_NAME = 'classNameToToggle',
-  ROOT_NAME = 'root',
   ROOT_MARGIN_NAME = 'rootMargin',
-  THRESHHOLD_NAME = 'threshold',
+  ROOT_NAME = 'root',
   SCROLLABLE_PARENT_NAME = 'scrollableParent',
   SCROLLABLE_PARENT_SELECTOR_NAME = `${SCROLLABLE_PARENT_NAME}Selector`,
-  CONTAINER_NAME = 'container',
-  CONTAINER_SELECTOR_NAME = 'containerSelector'
+  THEME_NAME = 'theme',
+  THRESHHOLD_NAME = 'threshold',
+  TOGGLE_TARGET_NAME = 'toggleTarget',
+  TRIGGER_NAME = 'trigger',
+  TRIGGER_SELECTOR_NAME = 'triggerSelector',
+  VARIETY_NAME = 'variety'
 ;
diff --git a/packages/atomic-ui-js/x-toggleclassonscroll/x-toggleclassonscroll.js b/packages/atomic-ui-js/x-toggleclassonscroll/x-toggleclassonscroll.js
@@ -2,8 +2,8 @@ import {ReactiveElement} from 'lit';
 
 import {
   CLASSNAME_TO_TOGGLE_NAME,
-  CONTAINER_NAME,
-  CONTAINER_SELECTOR_NAME,
+  TRIGGER_NAME,
+  TRIGGER_SELECTOR_NAME,
   isset,
   isUsableNumber,
   replaceClass,
@@ -30,7 +30,7 @@ const
  * @class XToggleClassOnScrollElement
  * @element x-toggleclassonscroll
  *
- * An element for quickly setting up a classname toggle when a container element scrolls in/out from view.
+ * An element for quickly setting up a classname toggle when a trigger element scrolls in/out from view.
  *
  * @extends {ReactiveElement & HTMLElement}
  */
@@ -39,7 +39,7 @@ export class XToggleClassOnScrollElement extends ReactiveElement {
 
   static properties = {
     [CLASSNAME_TO_TOGGLE_NAME]: {type: String},
-    [CONTAINER_SELECTOR_NAME]: {type: String, attribute: CONTAINER_NAME},
+    [TRIGGER_SELECTOR_NAME]: {type: String, attribute: TRIGGER_NAME},
     [ROOT_MARGIN_NAME]: {type: String},
     [SCROLLABLE_PARENT_SELECTOR_NAME]: {type: String, attribute: SCROLLABLE_PARENT_NAME},
     [THRESHHOLD_NAME]: {
@@ -110,41 +110,41 @@ export class XToggleClassOnScrollElement extends ReactiveElement {
   /**
    * @type {string}
    */
-  #containerSelector;
+  #triggerSelector;
 
-  get containerSelector() {
-    return this.#containerSelector ?? '';
+  get triggerSelector() {
+    return this.#triggerSelector ?? '';
   }
 
-  set containerSelector(str) {
-    const prevValue = this.containerSelector;
-    this.#containerSelector = (str ?? '') + '';
-    this.#container = null;
-    this.requestUpdate(CONTAINER_SELECTOR_NAME, prevValue);
+  set triggerSelector(str) {
+    const prevValue = this.triggerSelector;
+    this.#triggerSelector = (str ?? '') + '';
+    this.#trigger = null;
+    this.requestUpdate(TRIGGER_SELECTOR_NAME, prevValue);
   }
 
   /**
-   * Container to observe/toggle class on.
+   * Container to observe for intersection with scrollable parent.
    *
    * @type {Element | Document}
    */
-  #container;
+  #trigger;
 
   /**
    * @type {Element | Document}
    */
-  get container() {
-    if (!this.#container) {
-      this.#container = this.#containerSelector ?
-        this.ownerDocument?.querySelector(this.#containerSelector) :
+  get trigger() {
+    if (!this.#trigger) {
+      this.#trigger = this.#triggerSelector ?
+        this.ownerDocument?.querySelector(this.#triggerSelector) :
         this;
     }
 
-    return this.#container;
+    return this.#trigger;
   }
 
-  set container(str) {
-    this.containerSelector = str;
+  set trigger(str) {
+    this.triggerSelector = str;
   }
 
   /**
@@ -241,19 +241,19 @@ export class XToggleClassOnScrollElement extends ReactiveElement {
       prevClassNameToToggle = _changedProps.get(CLASSNAME_TO_TOGGLE_NAME);
 
     if ((this.#flags & CLASSNAME_SHOWING) && _changedProps.has(CLASSNAME_TO_TOGGLE_NAME)) {
-      replaceClass(prevClassNameToToggle, classNameToToggle, this.container) ||
-      toggleClass(classNameToToggle, this.container, true);
+      replaceClass(prevClassNameToToggle, classNameToToggle, this.trigger) ||
+      toggleClass(classNameToToggle, this.trigger, true);
     }
   }
 
   updated(_changedProps) {
     this.updateComplete.then(() => {
-      const containerSelectorChanged = _changedProps.has(CONTAINER_SELECTOR_NAME),
+      const triggerSelectorChanged = _changedProps.has(TRIGGER_SELECTOR_NAME),
         scrollableParentSelectorChanged = _changedProps.has(SCROLLABLE_PARENT_SELECTOR_NAME),
         rootMarginChanged = _changedProps.has(ROOT_MARGIN_NAME),
         thresholdChanged = _changedProps.has(THRESHHOLD_NAME);
 
-      if (scrollableParentSelectorChanged || containerSelectorChanged ||
+      if (scrollableParentSelectorChanged || triggerSelectorChanged ||
         rootMarginChanged || thresholdChanged) {
         this.#refreshObservers();
       }
@@ -267,12 +267,12 @@ export class XToggleClassOnScrollElement extends ReactiveElement {
     else if (!isIntersecting) this.#flags &= (~CLASSNAME_SHOWING);
 
     return Boolean(classToToggle) &&
-      this.container.classList.toggle(classToToggle, isIntersecting);
+      this.trigger.classList.toggle(classToToggle, isIntersecting);
   };
 
   #clearObservers() {
     if (this.#intersectionObserver) {
-      this.#intersectionObserver.unobserve(this.container);
+      this.#intersectionObserver.unobserve(this.trigger);
       this.#intersectionObserver.disconnect();
     }
   }
@@ -290,10 +290,11 @@ export class XToggleClassOnScrollElement extends ReactiveElement {
 
     this.#intersectionObserver = new IntersectionObserver(records => {
       records.forEach(r => {
+        console.log('Intersection ratio: ', r.intersectionRatio, '\n', r);
         this.#toggleClassToToggle(r.isIntersecting);
       });
     }, obsrvrOptions);
 
-    this.#intersectionObserver.observe(this.container);
+    this.#intersectionObserver.observe(this.trigger);
   }
 }