improve components

README.md

@@ -49,9 +49,15 @@ This script also simplifies interacting with built-in Webflow components, such a
 
 ### Slider
 
-Wrap the slider in a Div Block and initialize the component by adding `x-data` attribute with `Slider({ el: '#myslider' })` value and `x-init` attribute with `__init()` value.
+Wrap the slider in a Div Block and initialize the component by adding `x-data` attribute with `Slider()` value and `x-init` attribute with `__init()` value.
 
 The component contains `slide` variable indicating current slide index (read/write) and `slideCount` variable (read-only). It also contains `nextSlide()` and `previousSlide()` convenience methods.
 
+### Tabs
+
+Wrap the slider in a Div Block and initialize the component by adding `x-data` attribute with `Tabs()` value and `x-init` attribute with `__init()` value.
+
+The component contains `tab` variable indicating current tab index (read/write) and `tabCount` variable (read-only). It also contains `nextTab()` and `previousTab()` convenience methods.
+
 ---
 For more information how to use Alpine.js please refer to [the official documentation](https://github.com/alpinejs/alpine). If you notice something not working as expected in Webflow, do not hesitate to report errors here.

index.js

@@ -51,9 +51,8 @@ document.querySelectorAll('[x-data] *').forEach((el) => {
 /* Components ------------------------------------------------------------- */
 
 /* Slider */
-function Slider ({ el }) { // eslint-disable-line no-unused-vars
+function Slider ({ el } = {}) { // eslint-disable-line no-unused-vars
   return {
-    el,
     slide: 0,
     slideCount: 0,
 
@@ -72,6 +71,15 @@ function Slider ({ el }) { // eslint-disable-line no-unused-vars
     },
 
     __init () {
+      if (el) {
+        this.el = document.querySelector(el)
+      } else {
+        this.el = this.$el.querySelector('.w-slider')
+      }
+      if (!this.el) {
+        throw new Error('Missing slider component to target')
+      }
+
       const config = { attributes: true, childList: false, subtree: false, attributeFilter: ['class'] }
 
       const setObserver = (target, index) => {
@@ -81,26 +89,25 @@ function Slider ({ el }) { // eslint-disable-line no-unused-vars
           }
 
           mutations.forEach((mutation) => {
-            if (/w-active/.test(mutation.target.className)) {
+            if (mutation.target.classList.contains('w-active')) {
               this.slide = index
             }
           })
         })
         observer.observe(target, config)
       }
 
-      // Wait for Webflow init before capturing the dots
-      setTimeout(() => {
+      Webflow.push(() => {
         const dots = document.querySelectorAll(`${this.el} .w-slider-dot`)
         this.slideCount = dots.length
         dots.forEach((dot, index) => {
           setObserver(dot, index)
         })
-      }, 100)
+      })
 
       this.$watch('slide', (index) => {
         const dot = document.querySelector(`${this.el} .w-slider-dot:nth-child(${index + 1})`)
-        if (dot && !/w-active/.test(dot.className)) {
+        if (dot && !dot.classList.contains('w-active')) {
           dot.dispatchEvent(new MouseEvent('click', { view: window, bubbles: true, cancelable: true }))
         }
       })
@@ -132,7 +139,6 @@ function Tabs ({ el } = {}) { // eslint-disable-line no-unused-vars
       } else {
         this.el = this.$el.querySelector('.w-tabs')
       }
-
       if (!this.el) {
         throw new Error('Missing tabs component to target')
       }