lato 3.11.0 → 3.11.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 890f6071431f470805aa8c253844356565814fbdc2ceb6152135fba2c02e79aa
-  data.tar.gz: 8eddac1dc91f0a5755ee40a115b45038c023393e7ffee6200e796968c79a1a7f
+  metadata.gz: a5f0eb7f689dbdeaf6ed25131cbc8a6a4a3bdd3c0f402426373a29a9124d0506
+  data.tar.gz: ae388fcd54a59d7ac1f0b7ca3d3a342ac7839aaee1807697159b5c5fa7c67094
 SHA512:
-  metadata.gz: 04ece6a0739114376e060e78d5a05e967d76d5469363635d0f3912de92e1f1861ca7c6b862e666257b31a1beeec31d6387f03a6f9ebbe3ebffb366685929b6b4
-  data.tar.gz: 113ea99f5ba6a087dafdf6594d348ecb283451010766254b2c207c1ff68841791171482866e2df7b8f4d49a4a68f79755076b5a6a0a54870a71492dc8e738b69
+  metadata.gz: 4c788d7f5b53aeb6f4bea7a4d5614f12697e5883ab99ca40b6752179b1f9dd9903334455153dcbe7f89473888a2a32908bfc1f8009f9043383d836367340d881
+  data.tar.gz: 4402d91bc41aa788e358f9aaea6592ae70630f6b9bbb375f15e51817fc3a01737d9d6b33c4c7679a1a30ae3c5e7f14c92792ee8e5eb058a0477be935d65ffb17

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

@@ -12,65 +12,127 @@ export default class extends Controller {
     this.status = localStorageStatus ? JSON.parse(localStorageStatus) : {}
     this.storeStatus()
 
-    this.start()
+    this.connected = true
+    this.tooltip = null
+    this.run()
+
+    window.addEventListener('resize', this.onWindowResize.bind(this))
   }
 
-  start(e = null) {
-    if (e) e.preventDefault()
+  disconnect() {
+    this.storeStatus()
 
-    const targets = 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)
+    if (this.tooltip) {
+      this.tooltip.hide()
+      this.tooltip.dispose()
+      this.tooltip = null
+    }
+
+    this.connected = false
 
-    this.showGuide(targets)
+    window.removeEventListener('resize', this.onWindowResize.bind(this))
   }
 
-  async showGuide(targets) {
-    for (let i = 0; i < targets.length; i++) {
-      const item = targets[i]
-      if (this.status[item.key]) continue
+  itemTargetConnected(e) {
+    this.run()
+  }
 
-      await this.showGuideItem(item, i === targets.length - 1)
+  itemTargetDisconnected(e) {
+    if (this.tooltip && this.tooltip.itemKey === e.target.dataset.guideKey) {
+      this.tooltip.hide()
+      this.tooltip.dispose()
+      this.tooltip = null
     }
   }
 
-  async showGuideItem(item, isLast = false) {
+  /**
+   * Exposed functions
+   */
+
+  rerun(e = null) {
+    if (e) e.preventDefault()
+    this.resetStatus()
+    this.run()
+  }
+
+  run(e = null) {
+    if (e) e.preventDefault()
+    if (!this.connected) return
+
+    const items = this.getNotShowedItems()
+    if (items.length === 0) return
+
+    this.showItem(items[0])
+  }
+
+  /**
+   * Helpers
+   */
+
+  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
+  }
+
+  showItem(item) {
+    if (!this.status) return
     if (this.status[item.key]) return
+    if (this.tooltip) return
 
-    return new Promise((resolve) => {
-      const tooltipCloseId = `guide-close-${Math.random().toString(36).substring(7)}`
-      const tooltipTitle = `
-        <div class="px-3 py-3">
-          <p class="mb-1">${item.content}</p>
-          <a id="${tooltipCloseId}" class="btn btn-light btn-sm mt-2">${isLast ? 'Close' : 'Next'}</a>
-        </div>
-      `
-
-      const tooltip = new bootstrap.Tooltip(item.element, { title: tooltipTitle, trigger: 'manual', html: true })
-      item.element.addEventListener('shown.bs.tooltip', () => {
-        setTimeout(() => {
-          document.getElementById(tooltipCloseId).addEventListener('click', () => {
-            tooltip.hide()
-            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.start()
+
+    return true
+  }
+
+  /**
+   * Events
+   */
+
+  onWindowResize(e) { // on window resize, repostion tooltip
+    if (this.tooltip) {
+      this.tooltip.hide()
+      this.tooltip.show()
+    }
   }
 }

data/app/assets/stylesheets/lato/application.scss

@@ -17,6 +17,9 @@ $gray-700: #454f58 !default;
 $gray-800: #313a42 !default;
 $gray-900: #1f262c !default;
 
+$tooltip-opacity: 1;
+$tooltip-max-width: 300px;
+
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css");
 @import "bootstrap";
 
@@ -127,4 +130,8 @@ main, aside {
   100% {
     transform: rotate(360deg);
   }
+}
+
+.lato-guide-tooltip {
+
 }

data/lib/lato/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lato
 version: !ruby/object:Gem::Version
-  version: 3.11.0
+  version: 3.11.3
 platform: ruby
 authors:
 - Gregorio Galante
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-12 00:00:00.000000000 Z
+date: 2025-02-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails