Skip to content

Commit 985e6ba

Browse files
author
[email protected]
committed
added glow
1 parent 03f491e commit 985e6ba

File tree

3 files changed

+94
-21
lines changed

3 files changed

+94
-21
lines changed

‎src/components/guided-modal-tour/editor.scss

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.ugb-tour-modal--overlay {
2-
z-index: 1000000;
2+
z-index: 1000001;
33
background-color: transparent !important;
44
pointer-events: none;
55
}
@@ -67,7 +67,7 @@
6767
&.ugb-tour-modal--top,
6868
&.ugb-tour-modal--bottom {
6969
.components-modal__content {
70-
box-shadow: rgba(0, 0, 0, 0.3) -20px 22px 70px 4px;
70+
box-shadow: rgba(0, 0, 0, 0.2) -20px 22px 60px -4px;
7171
&::after {
7272
content: "";
7373
position: absolute;
@@ -84,7 +84,7 @@
8484
}
8585
&.ugb-tour-modal--left {
8686
.components-modal__content {
87-
box-shadow: rgba(0, 0, 0, 0.3) 20px 22px 70px 4px;
87+
box-shadow: rgba(0, 0, 0, 0.2) 20px 22px 60px -4px;
8888
&::after {
8989
left: auto;
9090
right: -10px;
@@ -93,7 +93,7 @@
9393
}
9494
&.ugb-tour-modal--top {
9595
.components-modal__content {
96-
box-shadow: rgba(0, 0, 0, 0.3) 0px 22px 70px 4px;
96+
box-shadow: rgba(0, 0, 0, 0.2) 0px 22px 60px -4px;
9797
&::after {
9898
top: auto;
9999
left: 50%;
@@ -104,7 +104,7 @@
104104
}
105105
&.ugb-tour-modal--bottom {
106106
.components-modal__content {
107-
box-shadow: rgba(0, 0, 0, 0.3) 0px -22px 70px 4px;
107+
box-shadow: rgba(0, 0, 0, 0.2) 0px -22px 60px -4px;
108108
&::after {
109109
left: 50%;
110110
top: -10px;
@@ -138,3 +138,26 @@
138138
// background-color: #aaa;
139139
// }
140140
}
141+
142+
.ugb-tour-modal__glow {
143+
position: absolute;
144+
z-index: 999999;
145+
box-shadow: 0 0 20px #f00069;
146+
border-radius: 8px;
147+
pointer-events: none;
148+
animation: tour-modal-glow 0.7s infinite alternate;
149+
mix-blend-mode: multiply;
150+
will-change: transform, box-shadow;
151+
}
152+
153+
// Animation keyframes to grow the box-shadow like it's glowing
154+
@keyframes tour-modal-glow {
155+
0% {
156+
box-shadow: 0 0 20px #ff2283, 0 0 5px #f00069;
157+
transform: scaleX(1) scaleY(1);
158+
}
159+
100% {
160+
box-shadow: 0 0 50px #ff2283, 0 0 5px #f00069;
161+
transform: scaleX(1.05) scaleY(1.12);
162+
}
163+
}

‎src/components/guided-modal-tour/index.js

Lines changed: 44 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,12 @@ const STEPS = [
2828
anchor: '.ugb-modal-design-library__enable-background',
2929
position: 'right',
3030
nextEventTarget: '.ugb-modal-design-library__enable-background',
31-
ctaLabel: __( 'Enable Background', i18n ),
32-
ctaOnClick: () => {
33-
const element = document.querySelector( '.ugb-modal-design-library__enable-background .components-form-toggle__input' )
34-
element?.click()
35-
},
31+
// ctaLabel: __( 'Enable Background', i18n ),
32+
// ctaOnClick: () => {
33+
// const element = document.querySelector( '.ugb-modal-design-library__enable-background .components-form-toggle__input' )
34+
// element?.click()
35+
// },
36+
glowTarget: '.ugb-modal-design-library__enable-background',
3637
// showNext: false,
3738
},
3839
{
@@ -96,6 +97,7 @@ const ModalTour = props => {
9697
showNext = true, // If true, a "Next" button will be shown.
9798
nextEventTarget = null, // If provided, this is a selector for the element to trigger the next event if there is one.
9899
nextEvent = 'click', // This is the event to listen for to trigger the next step.
100+
glowTarget = null, // If provided, this is a selector for the element to glow when the step is active.
99101
} = steps[ currentStep ]
100102

101103
// Create a stable function reference for the event listener
@@ -112,7 +114,7 @@ const ModalTour = props => {
112114
setIsVisible( true )
113115
setTimeout( () => {
114116
setIsVisibleDelayed( true )
115-
}, 30 )
117+
}, 50 )
116118
}, 1000 )
117119

118120
return () => clearTimeout( timer )
@@ -152,16 +154,16 @@ const ModalTour = props => {
152154
switch ( position ) {
153155
case 'left':
154156
// Left, middle
155-
return [ `${ anchorRect.left - modalRect.width - 24 }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
157+
return [ `${ anchorRect.left - modalRect.width - 16 }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
156158
case 'right':
157159
// Right, middle
158-
return [ `${ anchorRect.right + 24 }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
160+
return [ `${ anchorRect.right + 16 }px`, `${ anchorRect.top + ( anchorRect.height / 2 ) - ( modalRect.height / 2 ) }px` ]
159161
case 'top':
160162
// Center, top
161-
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.top - modalRect.height - 24 }px` ]
163+
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.top - modalRect.height - 16 }px` ]
162164
case 'bottom':
163165
// Center, bottom
164-
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.bottom + 24 }px` ]
166+
return [ `${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`, `${ anchorRect.bottom + 16 }px` ]
165167
case 'center':
166168
return [
167169
`${ anchorRect.left + ( anchorRect.width / 2 ) - ( modalRect.width / 2 ) }px`,
@@ -172,6 +174,33 @@ const ModalTour = props => {
172174
}
173175
}, [ anchor, position, modalRef.current, isVisible, isVisibleDelayed, forceRefresh ] )
174176

177+
// If we have a glow target, create a new element in the body, placed on the top of the target, below the modal.
178+
useEffect( () => {
179+
if ( glowTarget ) {
180+
// Get the top, left, width, and height of the target.
181+
const target = document.querySelector( glowTarget )
182+
if ( target ) {
183+
const targetRect = target.getBoundingClientRect()
184+
185+
// Create the element.
186+
const element = document.createElement( 'div' )
187+
element.className = 'ugb-tour-modal__glow'
188+
element.style.top = `${ targetRect.top - 8 }px`
189+
element.style.left = `${ targetRect.left - 8 }px`
190+
element.style.width = `${ targetRect.width + 16 }px`
191+
element.style.height = `${ targetRect.height + 16 }px`
192+
document.body.appendChild( element )
193+
}
194+
}
195+
// Remove the element when the component unmounts or the step changes.
196+
return () => {
197+
if ( glowTarget ) {
198+
const element = document.querySelector( '.ugb-tour-modal__glow' )
199+
element?.remove()
200+
}
201+
}
202+
}, [ glowTarget, currentStep, isVisible, isVisibleDelayed, forceRefresh ] )
203+
175204
if ( ! isVisible ) {
176205
return null
177206
}
@@ -272,7 +301,7 @@ const ModalTour = props => {
272301
setCurrentStep( currentStep + 1 )
273302
setTimeout( () => {
274303
setForceRefresh( forceRefresh + 1 )
275-
}, 50 )
304+
}, 100 )
276305
}
277306
} }
278307
>
@@ -299,6 +328,10 @@ const Steps = props => {
299328
// onClickStep = NOOP,
300329
} = props
301330

331+
if ( numSteps === 1 ) {
332+
return null
333+
}
334+
302335
return (
303336
<div className="ugb-tour-modal__steps">
304337
{ Array.from( { length: numSteps } ).map( ( _, index ) => {

‎src/plugins/design-library-button/design-library-button.js

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,20 @@ import { dispatch, useSelect } from '@wordpress/data'
1212
import { __ } from '@wordpress/i18n'
1313
import { useCallback } from '@wordpress/element'
1414
import { ToolbarButton } from '@wordpress/components'
15+
import { GuidedModalTour } from '~stackable/components'
16+
17+
const STEPS = [
18+
{
19+
title: '👋 ' + __( 'Welcome to Stackable', i18n ),
20+
description: __( 'We’re excited to have you here. Let\’s get you started by opening the Design Library. Click the button above to get started.', i18n ),
21+
// size: 'medium',
22+
anchor: '.ugb-insert-library-button',
23+
position: 'bottom',
24+
nextEventTarget: '.ugb-insert-library-button',
25+
glowTarget: '.ugb-insert-library-button',
26+
showNext: false,
27+
},
28+
]
1529

1630
const DesignLibraryButton = () => {
1731
const { getEditorDom } = useSelect( 'stackable/editor-dom' )
@@ -41,11 +55,14 @@ const DesignLibraryButton = () => {
4155
}, [ getEditorDom ] )
4256

4357
return ( settings.stackable_enable_design_library &&
44-
<ToolbarButton
45-
onClick={ onClick }
46-
className="ugb-insert-library-button"
47-
icon={ <SVGStackableIcon /> }
48-
>{ __( 'Design Library', i18n ) }</ToolbarButton>
58+
<>
59+
<GuidedModalTour steps={ STEPS } hasConfetti={ false } />
60+
<ToolbarButton
61+
onClick={ onClick }
62+
className="ugb-insert-library-button"
63+
icon={ <SVGStackableIcon /> }
64+
>{ __( 'Design Library', i18n ) }</ToolbarButton>
65+
</>
4966
)
5067
}
5168

0 commit comments

Comments
 (0)