rails_onboarding 0.8.8 → 0.8.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 408fd1e294065de10f66f097028bca6ea0ef929c2da585fb5fe20034a14e0202
-  data.tar.gz: 2e015226988b1bda4bf5594d43c00341f4a9fb2c21c020b0607446be87dfe671
+  metadata.gz: 5de350daba589470bba3cfa3afe9daa037307873d47a888f81899b2e542172fa
+  data.tar.gz: 6871219f6639948ec9e66747c2e89be3b58d2260d6ef8bc2750a84900db14b1d
 SHA512:
-  metadata.gz: 6f924adbe61c18fc3b8070653655b04d74bd01a97562ed5eaa274d43276c07a331a11ef233ceab5484f545b20779485cbe55417921516bc9c2cd0557da694884
-  data.tar.gz: 678c83c71d204f027f92d65555af8cff1b3aecd53992cda79e5d234f5deffaf3a465e4b786295bc5ca2319b97a74946750e3a98083a45b8f1ad5ea4a37f3d4c1
+  metadata.gz: 2b6e4ccc57e00c7d41e4b21604be312330888ac2cc96e6b8ef0bc39206c529416ddc35f5d4bdc998632a6488fca0ce2a1c53e900c50115a17b08c17c2f9193f3
+  data.tar.gz: a4714eaed7cca529878cc9cc99ed06e0e48fa117a1cfa7f327eed5e9de97abf98cf5c35cc4ef7b51e2c8449cca5e78bf64953f9d2a8b2114487b60a9a0dc27d5

data/app/assets/javascripts/rails_onboarding/tour_controller.js

@@ -190,6 +190,7 @@ export default class extends Controller {
         const targetElement = step.selector ? document.querySelector(step.selector) : null
 
         this.currentTargetElement = targetElement
+        this.applyScrim(step, targetElement)
 
         if (targetElement) {
             this.scrollToElement(targetElement, step)
@@ -272,7 +273,7 @@ export default class extends Controller {
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, ${this.overlayOpacityValue});
+            background: transparent;
             z-index: 9998;
             opacity: 0;
             transition: opacity 0.3s ease;
@@ -300,6 +301,7 @@ export default class extends Controller {
         const overlay = this.overlay
         if (!overlay) return
 
+        document.documentElement.style.removeProperty('--onboarding-tour-scrim')
         this.overlay = null
         overlay.style.opacity = '0'
 
@@ -339,7 +341,6 @@ export default class extends Controller {
                     left: ${rect.left - padding}px;
                     width: ${rect.width + (padding * 2)}px;
                     height: ${rect.height + (padding * 2)}px;
-                    box-shadow: 0 0 0 9999px rgba(0, 0, 0, ${this.overlayOpacityValue});
                     border-radius: 8px;
                 `
                 break
@@ -384,6 +385,30 @@ export default class extends Controller {
         element.style.zIndex = '10000'
     }
 
+    /**
+     * Decide which layer paints the scrim for this step, and at what strength.
+     *
+     * A 'spotlight' highlight is already a full-viewport scrim - its box-shadow has a
+     * 9999px spread and covers everything but the cutout - so painting the overlay on
+     * top of it darkens every pixel twice. At the default 0.7 that composites to ~0.92,
+     * which buries the surrounding page and leaves someone unfamiliar with the layout
+     * with no idea what the highlight is being singled out *from*. Every other style
+     * (border, glow, none) draws no scrim of its own, and nor does a step with no target
+     * element, so those still need the overlay.
+     */
+    applyScrim(step, targetElement) {
+        document.documentElement.style.setProperty(
+            '--onboarding-tour-scrim', this.overlayOpacityValue
+        )
+
+        if (!this.overlay) return
+
+        const spotlit = Boolean(targetElement) && step.highlightStyle === 'spotlight'
+        this.overlay.style.background = spotlit
+            ? 'transparent'
+            : `rgba(0, 0, 0, ${this.overlayOpacityValue})`
+    }
+
     /**
      * Remove highlight/spotlight
      */

data/app/assets/stylesheets/rails_onboarding/tour.css

@@ -22,19 +22,15 @@
   border-radius: 8px;
 }
 
-/* Spotlight style - Creates cutout effect */
+/* Spotlight style - Creates cutout effect.
+   The 9999px spread makes this box-shadow a full-viewport scrim in its own right, so
+   tour_controller stops painting .tour-overlay whenever a spotlight is drawn - the two
+   together composited to ~0.92 and buried the surrounding page.
+   The alpha comes from --onboarding-tour-scrim, which the controller sets on :root from
+   its overlayOpacity value. It is deliberately not animated: an animation on this
+   property overrides the inline style, which is what made overlayOpacity a dead knob. */
 .tour-spotlight-spotlight {
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
-  animation: onboarding-spotlightPulse 2s ease-in-out infinite;
-}
-
-@keyframes onboarding-spotlightPulse {
-  0%, 100% {
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
-  }
-  50% {
-    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
-  }
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, var(--onboarding-tour-scrim, 0.7));
 }
 
 /* Border highlight style */
@@ -327,6 +323,10 @@
     background: rgba(0, 0, 0, 0.85);
   }
 
+  .tour-spotlight-spotlight {
+    --onboarding-tour-scrim: 0.85;
+  }
+
   .tour-spotlight-border {
     border-width: 4px;
   }
@@ -351,10 +351,6 @@
     animation: none;
   }
 
-  .tour-spotlight-spotlight {
-    animation: none;
-  }
-
   .tour-spotlight-border {
     animation: none;
   }

data/lib/rails_onboarding/version.rb

@@ -1,3 +1,3 @@
 module RailsOnboarding
-  VERSION = "0.8.8"
+  VERSION = "0.8.9"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rails_onboarding
 version: !ruby/object:Gem::Version
-  version: 0.8.8
+  version: 0.8.9
 platform: ruby
 authors:
 - David Lewis
@@ -282,7 +282,7 @@ licenses:
 metadata:
   allowed_push_host: https://rubygems.org
   homepage_uri: https://github.com/bunnahabhain/rails_onboarding
-  source_code_uri: https://github.com/bunnahabhain/rails_onboarding/tree/v0.8.8
+  source_code_uri: https://github.com/bunnahabhain/rails_onboarding/tree/v0.8.9
   changelog_uri: https://github.com/bunnahabhain/rails_onboarding/blob/master/docs/CHANGELOG.md
 rdoc_options: []
 require_paths: