11<!DOCTYPE html>
22< html lang ="en ">
3-
43< head >
54 < meta charset ="UTF-8 ">
65 < title > Scoped CSS Variables and JS</ title >
7-
86 < style >
9- /*
10- Define variables at the root level so their scope is the entire document
11- */
7+ /* Define variables at the root level so their scope is the entire document */
128 : root {
139 --base : goldenrod;
1410 --blur : 10px ;
1511 --padding : 10px ;
1612 }
1713
18- /*
19- Set image property values as the variables defined at the root element
20- */
14+ /* Set image property values using previously defined variables */
2115 img {
16+ box-sizing : border-box;
2217 background : var (--base );
2318 filter : blur (var (--blur ));
2419 padding : var (--padding );
20+ border-radius : 2rem ;
2521 }
2622
23+ /* 'JS' text color that will match the image background color */
2724 .hl {
2825 color : var (--base );
2926 }
4946 }
5047 </ style >
5148</ head >
52-
5349< body >
5450 < h2 > Update CSS Variables with < span class ='hl '> JS</ span > </ h2 >
5551
@@ -64,26 +60,43 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
6460 < input type ="color " name ="base " value ="#ffc600 ">
6561 </ div >
6662
67- < img src ="https://source.unsplash.com/7bwQXzbF6KE/ 800x500 ">
63+ < img src ="https://source.unsplash.com/800x500 ">
6864
6965 < script >
70- // Declare & define variable reference to all inputs inside the 'control' class
71- const inputs = document . querySelectorAll ( '.controls input' ) ;
72-
73- // Event Handler function
74- function handleUpdate ( ) {
75- // Get the data-sizing property value if one exists, or set as empty string
76- const suffix = this . dataset . sizing || '' ;
77- // Target the entire document and update the value of the CSS variable which corresponds
78- // with the 'name' property of the HTML element that triggered this function.
79- document . documentElement . style . setProperty ( `--${ this . name } , this . value + suffix )
80- }
81-
82- // Attach event listeners to each input
83- inputs . forEach ( input => input . addEventListener ( 'change' , handleUpdate ) ) ;
84- inputs . forEach ( input => input . addEventListener ( 'mousemove' , handleUpdate ) ) ;
66+ ( ( ) => {
67+ 'use strict' ;
68+ // Declare & define variable reference to all inputs inside the 'control' class
69+ const inputs = document . querySelectorAll ( '.controls input' ) ;
70+
71+ // Event Handler function. Such object destructure much default parameters wow
72+ const handleUpdate = ( { target : { name, value, dataset : { sizing : suffix = '' } } } ) => {
73+ document . documentElement . style . setProperty ( `--${ name } , value + suffix )
74+ }
75+
76+ // Helper function to add/remove event listeners because the standard syntax is long and ugly
77+ const listen = ( event , element , handler , cb = false , add = true ) => (
78+ add ?
79+ cb ?
80+ ( ) => element . addEventListener ( event , handler ) :
81+ element . addEventListener ( event , handler ) :
82+ cb ?
83+ ( ) => element . removeEventListener ( event , handler ) :
84+ element . removeEventListener ( event , handler )
85+ ) ;
86+
87+ // Attach event listeners to each input
88+ inputs . forEach ( inp => {
89+ // When input value is changed, call handleUpdate function
90+ listen ( 'change' , inp , handleUpdate )
91+ // When a mousedown event occurs on the input, attach *another* event listener to the input.
92+ // This new event listener will listen for 'mousemove' event, and call on the
93+ // handleUpdate function.
94+ listen ( 'mousedown' , inp , listen ( 'mousemove' , inp , handleUpdate , true ) )
95+ // When a mouseup event occurs on the input, remove the event listener for the 'mousemove'
96+ // event (if one exists) that uses the `handleUpdate` function for the event handler.
97+ listen ( 'mouseup' , inp , listen ( 'mousemove' , inp , handleUpdate , true , false ) )
98+ } ) ;
99+ } ) ( ) ;
85100 </ script >
86-
87101</ body >
88-
89- </ html >
102+ </ html >
0 commit comments