New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PROPOSAL: Create mix-ins for drag, drop, & swipe events #1117

Open
justinbmeyer opened this Issue Oct 10, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@justinbmeyer
Copy link
Contributor

justinbmeyer commented Oct 10, 2018

TLDR We should make it easy to use swipe events and drag and drop events in CanJS.

This was discussed on a recent live stream (5:13).

These events are available in jQuery++, but there is not a modern solution to these in CanJS.

We should make these events available to use in CanJS without requiring a dependency on jQuery. These will be available as mixins similar to the enter and radiochange events:

var domEvents = require('can-dom-events');
var swipeEvents = require('can-event-dom-swipe');

domEvents.addEvents(swipeEvents);

can-event-dom-swipe will add:

  • swipe
  • swiperight
  • swipeleft
  • swipeup
  • swipedown

Once added, you will be able to use these events in templates:

<img src="{{currentProfile.img}}"
  on:swiperight="like()"
  on:swipeleft="nope()" />

can-event-dom-drag-drop will add:

  • dragdown - the mouse cursor is pressed down
  • draginit - the drag motion is started
  • dragmove - the drag is moved
  • dragend - the drag has ended
  • dragover - the drag is over a drop point
  • dragout - the drag moved out of a drop point
  • dropinit - the drag motion is started, drop positions are calculated
  • dropover - a drag moves over a drop element, called once as the drop is dragged over the element
  • dropout - a drag moves out of the drop element
  • dropmove - a drag is moved over a drop element, called repeatedly as the element is moved
  • dropon - a drag is released over a drop element
  • dropend - the drag motion has completed

These can also be used in templates:

<ul>
  {{# for(result of searchResults) }}
    <li on:draginit="this.videoDrag(scope.element)">{{ result.name }}</li>
  {{/ for }}
</ul>

<div on:dropon="addToQueue()">Playlist</div>

@phillipskevin phillipskevin changed the title PROPOSAL: Make jQuery++ useful again PROPOSAL: Create mixins for drag, drop, and swipe events Nov 15, 2018

@phillipskevin

This comment has been minimized.

Copy link
Contributor

phillipskevin commented Nov 15, 2018

@justinbmeyer's original description:

TLDR jQuery++ still has some good stuff, but the project is no longer actively maintained. We should:

The problem

jQuery++ isn't actively maintained. And it isn't super useful to a modern CanJS application that doesn't need jQuery.

The solution

Lets move out the stuff that is still likely useful into their own projects:

DOM:

  • formParams
  • range?

EVENTS:

These should be made into can-event-dom-X:

  • drag / drop
  • hover
  • swipe

@phillipskevin phillipskevin changed the title PROPOSAL: Create mixins for drag, drop, and swipe events PROPOSAL: Create mixins for swipe events and drag/drop events Nov 15, 2018

@phillipskevin phillipskevin changed the title PROPOSAL: Create mixins for swipe events and drag/drop events PROPOSAL: Create mixins for swipe events and drag and drop events Nov 15, 2018

@chasenlehara chasenlehara changed the title PROPOSAL: Create mixins for swipe events and drag and drop events PROPOSAL: Create mix-ins for drag, drop, & swipe events Nov 16, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment