lato 3.11.1 → 3.11.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aac7553d07bfc74cea7e43c829e5e68a99ef5c4c1ca84c0abafbe3ed9b28d4e2
-  data.tar.gz: 946fa0334adad14cd55836470e5969a04be8d8533085811fd206cc21685bc333
+  metadata.gz: a5f0eb7f689dbdeaf6ed25131cbc8a6a4a3bdd3c0f402426373a29a9124d0506
+  data.tar.gz: ae388fcd54a59d7ac1f0b7ca3d3a342ac7839aaee1807697159b5c5fa7c67094
 SHA512:
-  metadata.gz: fa351b5aaeb8c3610000eef54cfc6dc1fe000ede31e9a6963b5282c2f6591239a475da8285066f7c2e2483f5c8e1f2b7fbc109157cc6c035f4155c7ac66db3a0
-  data.tar.gz: 0ec8ec42232d0ec5c0cd4411e6b5821348772cd451ea81c3698b2c852b20b96457e907a387f58634b2a711bf294140b55e55123503074f353d7bf828503eecaa
+  metadata.gz: 4c788d7f5b53aeb6f4bea7a4d5614f12697e5883ab99ca40b6752179b1f9dd9903334455153dcbe7f89473888a2a32908bfc1f8009f9043383d836367340d881
+  data.tar.gz: 4402d91bc41aa788e358f9aaea6592ae70630f6b9bbb375f15e51817fc3a01737d9d6b33c4c7679a1a30ae3c5e7f14c92792ee8e5eb058a0477be935d65ffb17

data/app/assets/javascripts/lato/application.js

@@ -55,10 +55,5 @@ document.addEventListener('turbo:before-cache', (e) => {
   document.querySelector('.navbar-toggler').classList.add('collapsed')
   document.querySelector('.navbar-collapse').classList.remove('show')
 
-  // remove all tooltips
-  document.querySelectorAll('.tooltip').forEach((el) => {
-    el.remove()
-  })
-
   e.detail?.resume()
 })

data/app/assets/javascripts/lato/controllers/lato_guide_controller.js

@@ -10,84 +10,129 @@ export default class extends Controller {
   connect() {
     const localStorageStatus = localStorage.getItem('lato_guide')
     this.status = localStorageStatus ? JSON.parse(localStorageStatus) : {}
-    this.items = null
-    this.showing = false
-    
     this.storeStatus()
-    this.setupItems()
-    this.showGuide()
+
+    this.connected = true
+    this.tooltip = null
+    this.run()
+
+    window.addEventListener('resize', this.onWindowResize.bind(this))
+  }
+
+  disconnect() {
+    this.storeStatus()
+
+    if (this.tooltip) {
+      this.tooltip.hide()
+      this.tooltip.dispose()
+      this.tooltip = null
+    }
+
+    this.connected = false
+
+    window.removeEventListener('resize', this.onWindowResize.bind(this))
   }
 
   itemTargetConnected(e) {
-    this.setupItems()
-    this.showGuide()
+    this.run()
   }
 
   itemTargetDisconnected(e) {
-    this.setupItems()
+    if (this.tooltip && this.tooltip.itemKey === e.target.dataset.guideKey) {
+      this.tooltip.hide()
+      this.tooltip.dispose()
+      this.tooltip = null
+    }
+  }
+
+  /**
+   * Exposed functions
+   */
+
+  rerun(e = null) {
+    if (e) e.preventDefault()
+    this.resetStatus()
+    this.run()
   }
 
-  setupItems(e = null) {
+  run(e = null) {
     if (e) e.preventDefault()
+    if (!this.connected) return
 
-    this.items = this.itemTargets.map(item => ({ element: item, key: item.dataset.guideKey, content: item.dataset.guideContent, index: parseInt(item.dataset.guideIndex) })).map(item => {
-      item.index = isNaN(item.index) ? 999 : item.index
-      return item
-    }).sort((a, b) => a.index - b.index)
+    const items = this.getNotShowedItems()
+    if (items.length === 0) return
+
+    this.showItem(items[0])
   }
 
-  async showGuide() {
-    if (this.showing) return
-    if (!this.status) return
-    if (!this.items) return
+  /**
+   * Helpers
+   */
 
-    for (const item of this.items) {
-      if (this.status[item.key]) continue
-      await this.showGuideItem(item)
-    }
+  getNotShowedItems() {
+    const items = this.itemTargets.map(item => ({ element: item, key: item.dataset.guideKey, content: item.dataset.guideContent, index: parseInt(item.dataset.guideIndex) })).map(item => {
+      item.index = isNaN(item.index) ? 999 : item.index
+      return item
+    }).sort((a, b) => a.index - b.index).filter((item) => !this.status[item.key])
+
+    return items
   }
 
-  async showGuideItem(item) {
-    if (this.showing) return
+  showItem(item) {
     if (!this.status) return
     if (this.status[item.key]) return
+    if (this.tooltip) return
 
-    this.showing = true
-    return new Promise((resolve) => {
-      const tooltipIsLast = this.items.filter(target => !this.status[target.key]).length === 1
-      const tooltipCloseId = `lato-guide-close-${Math.random().toString(36).substring(7)}`
-      const tooltipTitle = `
-        <div class="px-2 py-2 d-flex align-items-center justify-content-between">
-          <p class="me-2 mb-0 text-start">${item.content}</p>
-          <a id="${tooltipCloseId}" class="btn btn-light btn-sm">${tooltipIsLast ? 'Close' : 'Next'}</a>
-        </div>
-      `
-
-      const tooltip = new bootstrap.Tooltip(item.element, { title: tooltipTitle, trigger: 'manual', html: true, customClass: 'lato-guide-tooltip' })
-      item.element.addEventListener('shown.bs.tooltip', () => {
-        setTimeout(() => {
-          document.getElementById(tooltipCloseId).addEventListener('click', () => {
-            tooltip.hide()
-            this.showing = false
-            this.status[item.key] = true
-            this.storeStatus()
-            resolve()
-          })
-        }, 250)
-      })
-      tooltip.show()  
+    // setup tooltip
+    const tooltipCloseId = `lato-guide-close-${Math.random().toString(36).substring(7)}`
+    const tooltipTitle = `
+      <div class="px-2 py-2 d-flex align-items-center justify-content-between">
+        <p class="me-2 mb-0 text-start">${item.content}</p>
+        <a id="${tooltipCloseId}" class="btn btn-light btn-sm">Next</a>
+      </div>
+    `
+    this.tooltip = new bootstrap.Tooltip(item.element, { title: tooltipTitle, trigger: 'manual', html: true, customClass: 'lato-guide-tooltip' })
+    this.tooltip.itemKey = item.key
+    
+    // listen to tooltip close
+    item.element.addEventListener('shown.bs.tooltip', () => {
+      setTimeout(() => {
+        document.getElementById(tooltipCloseId).addEventListener('click', () => {
+          this.tooltip.hide()
+          this.tooltip.dispose()
+          this.tooltip = null
+          this.status[item.key] = true
+          this.storeStatus()
+          this.run()
+        })
+      }, 250)
     })
+    this.tooltip.show()  
+
+    return true
   }
 
-  storeStatus(e = null) {
-    if (e) e.preventDefault()
+  storeStatus() {
     localStorage.setItem('lato_guide', JSON.stringify(this.status))
+
+    return true
   }
 
-  resetStatus(e = null) {
-    if (e) e.preventDefault()
+  resetStatus() {
     this.status = {}
     this.storeStatus()
-    this.showGuide()
+
+    return true
+  }
+
+  /**
+   * Events
+   */
+
+  onWindowResize(e) { // on window resize, repostion tooltip
+    if (this.tooltip) {
+      this.tooltip.hide()
+      this.tooltip.show()
+    }
   }
 }

data/lib/lato/version.rb

@@ -1,3 +1,3 @@
 module Lato
-  VERSION = "3.11.1"
+  VERSION = "3.11.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato
 version: !ruby/object:Gem::Version
-  version: 3.11.1
+  version: 3.11.3
 platform: ruby
 authors:
 - Gregorio Galante