clockwizz/demo.html at master · queviva/clockwizz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html><html>

<head><title>wizz</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">

<!--script tag with customized event name -->
<script src="clockwizz.js"></script>

<style>
[data-wizz] {
    height: 300px;
    width: 600px;
    font-size: 90px;
    margin-bottom: 20px;
    user-select: none;
    color: #fff;
    border-radius: 0px 50px 0px 50px;
}
.qa {
    font-size : 20px;
}
</style>
</head>

<body>
<center>

<div class="qa"><br>turn clockwise on any element</div>

<div id="samp0" data-wizz></div>

<div id="samp1"
 data-comment="this instance is customized"
 data-wizz='{
  "selector" : "rat",
  "preventDefault" : false
 }'
></div>

<div id="samp2" data-wizz></div>

</center>
</body>

<script id="demoScript">

window.addEventListener('load', e => {

    // handler to change the object color and display it
    function sampHandler(e, obj) {

        obj.hue = ((((obj.hue + (3 * e.detail.dir)) % 360) + 360) % 360);
        obj.innerHTML = obj.hue;
        obj.style.backgroundColor = 'hsla(' + obj.hue + ',100%,40%,1.0)';

    }

    // loop through all clockwizzers to set the colors and listeners
    document.querySelectorAll('[data-wizz]').forEach((samp, i) => {

        // set the color
        samp.hue = 20 * (i + 1);
        samp.style.backgroundColor = 'hsla(' + samp.hue + ',100%,40%,1.0)';

        // add handler for the customized event name
        samp.addEventListener('clock-wizz', e => sampHandler(e, samp),{passive:false});

    });

    // demonstration of handling an individually customized wizzer
    // {
    //
    // listen for event name customized to just this element
    samp1.addEventListener('clock-rat', e => {

        // pass it to the same handler just for example
        sampHandler(e, samp1);

        // this object had its preventDefault set to false
        // incase the default behavior is desired
        // ...
        // it can be handled, or ignored, using the
        // event details _event_ reference
        // or whatever custome name was provided
        e.detail.ref.preventDefault();
        e.detail.ref.stopPropagation();

        // tell the browser that this method isn't playing fair
    }, { passive: false });
    //}

});

</script>
</html>