lato 3.11.0 → 3.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 890f6071431f470805aa8c253844356565814fbdc2ceb6152135fba2c02e79aa
-  data.tar.gz: 8eddac1dc91f0a5755ee40a115b45038c023393e7ffee6200e796968c79a1a7f
+  metadata.gz: aac7553d07bfc74cea7e43c829e5e68a99ef5c4c1ca84c0abafbe3ed9b28d4e2
+  data.tar.gz: 946fa0334adad14cd55836470e5969a04be8d8533085811fd206cc21685bc333
 SHA512:
-  metadata.gz: 04ece6a0739114376e060e78d5a05e967d76d5469363635d0f3912de92e1f1861ca7c6b862e666257b31a1beeec31d6387f03a6f9ebbe3ebffb366685929b6b4
-  data.tar.gz: 113ea99f5ba6a087dafdf6594d348ecb283451010766254b2c207c1ff68841791171482866e2df7b8f4d49a4a68f79755076b5a6a0a54870a71492dc8e738b69
+  metadata.gz: fa351b5aaeb8c3610000eef54cfc6dc1fe000ede31e9a6963b5282c2f6591239a475da8285066f7c2e2483f5c8e1f2b7fbc109157cc6c035f4155c7ac66db3a0
+  data.tar.gz: 0ec8ec42232d0ec5c0cd4411e6b5821348772cd451ea81c3698b2c852b20b96457e907a387f58634b2a711bf294140b55e55123503074f353d7bf828503eecaa

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

@@ -55,5 +55,10 @@ 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,48 +10,65 @@ 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()
+  }
+
+  itemTargetConnected(e) {
+    this.setupItems()
+    this.showGuide()
+  }
 
-    this.start()
+  itemTargetDisconnected(e) {
+    this.setupItems()
   }
 
-  start(e = null) {
+  setupItems(e = null) {
     if (e) e.preventDefault()
 
-    const targets = this.itemTargets.map(item => ({ element: item, key: item.dataset.guideKey, content: item.dataset.guideContent, index: parseInt(item.dataset.guideIndex) })).map(item => {
+    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)
-
-    this.showGuide(targets)
   }
 
-  async showGuide(targets) {
-    for (let i = 0; i < targets.length; i++) {
-      const item = targets[i]
-      if (this.status[item.key]) continue
+  async showGuide() {
+    if (this.showing) return
+    if (!this.status) return
+    if (!this.items) return
 
-      await this.showGuideItem(item, i === targets.length - 1)
+    for (const item of this.items) {
+      if (this.status[item.key]) continue
+      await this.showGuideItem(item)
     }
   }
 
-  async showGuideItem(item, isLast = false) {
+  async showGuideItem(item) {
+    if (this.showing) return
+    if (!this.status) return
     if (this.status[item.key]) return
 
+    this.showing = true
     return new Promise((resolve) => {
-      const tooltipCloseId = `guide-close-${Math.random().toString(36).substring(7)}`
+      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-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 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 })
+      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()
@@ -71,6 +88,6 @@ export default class extends Controller {
     if (e) e.preventDefault()
     this.status = {}
     this.storeStatus()
-    this.start()
+    this.showGuide()
   }
 }

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.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lato
 version: !ruby/object:Gem::Version
-  version: 3.11.0
+  version: 3.11.1
 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