Hype Gesture (Drag'n'Drop, intersection detection and custom Continue after Drag)

CleanShot 2021-11-22 at 16.10.54

Inspired by recent posts, I collected some of my code snippets and put them together in an extension called Hype Gesture. It supports efforts to deploy Drag'n'Drop, intersection detection and custom Continue after Drag. I am still working on it, but here is a preview and code sneak peek:

Preview:
HypeGesture.html

Code sneak peek:
HypeGesture.js
HypeGesture.min.js

Hype file sneak peek:
HypeGesture.hype.zip


As I am constantly updating, please make sure to reload to avoid caching of older versions.

7 Likes

↑ look at project
1.0.1 Minimal optimizations, action now added to event on triggerActions

↑ look at project
1.0.2 Added addClassToTarget and removeClassFromTarget, added extensive comments

↑ look at project
1.0.3 auto actions triggers based on dragGesturePhase, included ready made actions, Added setDefault and getDefault, added debug mode (defaults to false)

↑ look at project
1.0.4 Added resolveActionsToArray, createActionAlias and reflowed code for readability

Specially the HypeGesture.hype.zip should be interesting after all this clean up in 1.0.4 - It is my test case and not a real demo in the sense of being useful, but it should suffice in making some concepts clear. The action system is pretty neat and somewhat easy to use … from simple to powerful use-cases. It is essentially like the regular action stacks, but in a text or array form. There is also a hidden Button Gesture in the file. Next up will be to refine continueAfterDrag with the gesture actions event system.

extensive possibilities on first view :slight_smile:

1 Like

↑ look at project
1.0.5 Removed snapLock and createActionAlias as (Hype) functions also work and are simpler, made triggerActions more robust with defaults on element and event

I added some actions to continue after drag but am still contemplating if there should be global events by default or if that should be something only firing on demand.

Thanks! Contemplating some things... DM if you feel like discussing or got some feedback, as you have the drag and drop enabler and certainly some valuable thoughts on the topic!

Sneak-Peak v1.0.6:
Currently playing around with universal action triggers. This little clips uses mousedown and mouseup. This can obviously also be done with the regular Hype actions inspector, but making it more general is certainly fun and specially extendable (like changing events on the fly and more).

In the following example, I am using a single flash() function that continues a timeline forward or backwards based on the event.type being mouseup or mousedown. One could also just use two custom events and do it all in Hype without a single line of code.

CleanShot 2021-11-24 at 13.12.45

These are implemented so far (but not all tested):


// mouse events ( MouseEvent ):
'mousedown', 'mouseup', 'click', 'dblclick', 'mousemove', 'mouseover', 'mousewheel', 'mouseout', 'contextmenu',

// touch events ( TouchEvent ): 
'touchstart', 'touchmove', 'touchend', 'touchcancel',

// keyboard events ( KeyboardEvent ): 
'keydown', 'keypress', 'keyup',

// form events: 
'focus', 'blur', 'change', 'submit'

Sneak-Peak v1.0.6:
Also, I am contemplating Matter events now… this is data-collision-start-action triggering a red flash animation in the falling square :partying_face:

CleanShot 2021-11-24 at 15.59.29

Sneak-Peak v1.0.6:
This is using data-keypress-action. Making it really easy to monitor a contenteditable field:

CleanShot 2021-11-24 at 19.23.05

All that is needed in the action (Hype function) is:

hypeDocument.getElementById('letter').innerHTML = event.key;
hypeDocument.startTimelineNamed('zoomIn', hypeDocument.kDirectionForward);