feat: add events for page transitions

Author: alangdm

custom-elements.json

@@ -54,6 +54,16 @@
           "default": "\"\""
         }
       ],
+      "events": [
+        {
+          "name": "helium-start",
+          "description": "Fires when the page transition starts"
+        },
+        {
+          "name": "helium-end",
+          "description": "Fires when the page transition ends"
+        }
+      ],
       "slots": [
         {
           "name": "",

demo/components/property-demo.js

@@ -23,6 +23,11 @@ class PropertyDemo extends PageViewElement {
           If you don't use the <code>attrForSelected</code> property you can
           just set the numerical index of which element you wish to show.
         </p>
+        <p>
+          Note that we're using the <code>helium-start</code> and
+          <code>helium-end</code> events to disable the input changing the
+          slides while the animation is running
+        </p>
         <p>
           <label for="select-index">Slide Index:</label>
           <input
@@ -40,6 +45,8 @@ class PropertyDemo extends PageViewElement {
           class="sample-pages"
           selected="${this._selectedIndex}"
           .animationClasses="${this._propAnimationClasses}"
+          @helium-start="${this._toggleDisabledIndex}"
+          @helium-end="${this._toggleDisabledIndex}"
         >
           <div>Slide index: 0</div>
           <div>Slide index: 1</div>
@@ -158,6 +165,8 @@ class PropertyDemo extends PageViewElement {
 <helium-animated-pages
   selected="\${this._selectedIndex}"
   .animationClasses="\${this._propAnimationClasses}"
+  @helium-start="\${this._toggleDisabledIndex}"
+  @helium-end="\${this._toggleDisabledIndex}"
 >
   <div>Slide index: 0</div>
   <div>Slide index: 1</div>
@@ -180,6 +189,10 @@ class PropertyDemo extends PageViewElement {
       this._selectedIndex = parseInt(e.target.value);
     }
   }
+  _toggleDisabledIndex() {
+    const input = this.shadowRoot.querySelector('#select-index');
+    input.disabled = !input.disabled;
+  }
   _nameChanged(e) {
     if (e.target.value) {
       this._selectedName = e.target.value;

src/HeliumAnimatedPages.js

@@ -13,6 +13,9 @@ const _isString = (next) => {
  *
  * @slot - The slot for the pages to animate
  *
+ * @fires helium-start - Fires when the page transition starts
+ * @fires helium-end - Fires when the page transition ends
+ *
  * @cssprop --helium-children-visible - Whether this component should be visible if it's a children of another `helium-animated-pages`.
  *
  * @prop {Boolean} isAnimating - This property will get the state of the animation, whether it's currently in the middle of an animation or not.
@@ -242,12 +245,22 @@ export default class HeliumAnimatedPages extends LitElement {
   }
 
   _changeActive(next, prev) {
+    const startEvent = new CustomEvent('helium-start', {
+      composed: true,
+      bubbles: true,
+    });
+    this.dispatchEvent(startEvent);
     if (!this.animationClasses) {
       // this is a fallback just in case animationClasses wasn't set
       this._inPage.setAttribute('active', true);
       if (this._outPage) {
         this._outPage.removeAttribute('active');
       }
+      const endEvent = new CustomEvent('helium-end', {
+        composed: true,
+        bubbles: true,
+      });
+      this.dispatchEvent(endEvent);
     } else {
       this._currentClasses = this._animationClasses(next, prev);
       this._beginAnimation();
@@ -309,6 +322,11 @@ export default class HeliumAnimatedPages extends LitElement {
       this._inPage = null;
       this._outPage = null;
       this._currentClasses = null;
+      const endEvent = new CustomEvent('helium-end', {
+        composed: true,
+        bubbles: true,
+      });
+      this.dispatchEvent(endEvent);
     }
   }
 }