clockwizz

~queviva

make a circular motion, while touching or pressing, on the image above
clockwizz.js adds a clockwise motion event to any of the specified elements in a page; listen for, and handle them, in the same way you would any event.

include the script, along with any optional parameters in a data-param; the following example lists all default values

            
<script src="clockwizz.js"
 data-wizz='{
    "selector"       : "wizz"
    "minimim"        :  5
    "preventDefault" :  true
 }'
></script>


<div id="sampleDiv" data-wizz>
    clockwise motions on this div
    will generate events
</div>


<script>

    document.getElementById('sampleDiv')
    .addEventListener(
        'clock-wizz',
        e => {
            // handle clockwise motion using
            //
            // e.detail.dir
            // for the direction of the turn
            //
            // e.detail.mag
            // for the magnitude of the turn
            //
            // e.detail.ref
            // for reference to the event
        }
    );
        
</script>

what do all of these things mean?

selector: this is the term that gets added to the element's tag as a data-param to indicate that it should generate clockwise motion events; by default, that might look like this <div data-wizz>; this is also appended to the event name, clock-[selector] will alway be the event to listen for

minimum: this is the smallest size, in pixels, that will be considered for a clockwise gesture

preventDefault: by default, stopPropagation() and preventDefault() are called on whatever event generated the clockwise motion - change this boolean value to false if you want default behaviors to occur

e.detail.dir: this is the direction of the clockwise motion; it has three possible values
- 1 ::: clockwise
- 0 ::: no turn
- -1 ::: counter-clockwise

e.detail.mag: is a pixel value of the magnitude of the turning - the larger the circles being swept out, the larger the integer's value

e.detail.ref is a reference to the actual event that generated the clockwise motion - that is, if a mouse event, or a touch event, or a pointer event, generated the clockwise event, e.detail.ref is a reference to that event

you can see more demonstrations with decryptive code if you want to

typically, a mouse-down or touch-start interaction is most useful, but if you are happy with the defaults, and you don't mind handling all the events and propagations yourself, there is a much smaller nano~fied version that will probably do everything you'd want - that is to say, if you are ok with...

using defer in the script tag

having <data-wizz> as the selector

having clock-wizz as the motion event name

handling stopPropagation() and preventDefault() with e.detail.ref

and using custom dispatchEvents to interact with objects

then you can use this version, which has been not simply compressed, but intentionally nano~fied into the smallest possible file that still provides all the functionality necessary for clock-wizz detection

this example uses wizznano.js to respond to motion whenever the mouse is over the element

wizznano objects must be activated by dispatching a custom event called able-wizz and sending some boolean true, or false, in the event's detail; this is what a simplementation might look like that activated and de-activated on double-clicks

<script defer src="wizznano.js"></script>

<div id="nano" data-wizz> ... </div>

<script>

    nano.addEventListener(
        'clock-wizz',
        (e, vals=e.detail) => {
        
            // vals.dir is the direction
            // vals.mag is the magnitude
            
            // suppress defaults
            vals.ref.preventDefault();
            vals.ref.stopPropagation();
            
        }
    );
    
    let toggle = false;
    
    nano.addEventListener('dblclick', e => {
        nano.dispatchEvent(new CustomEvent(
            'able-wizz',
            {detail:(toggle=!toggle)})
        )
    });
    
</script>

~queviva