Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Proposal: can-import to allow export-as="events" #46

Open
imjoshdean opened this issue Feb 2, 2017 · 3 comments
Open

Proposal: can-import to allow export-as="events" #46

imjoshdean opened this issue Feb 2, 2017 · 3 comments
Labels
enhancement

Comments

@imjoshdean
Copy link

imjoshdean commented Feb 2, 2017 •
edited by chasenlehara
Loading

Per discussion in Bitovi #general, it would be nice to allow the ability to export an events object if you need to do document-level events in cases where you do not have an app-level component.

Perhaps this would work by making a generic can-control on the document and utilizing the default export of whatever file we import using can-import[as="events"]

Example

In mobile, in order to get nice and responsive :hover interactions on buttons, you need to add and
remove a class on touchstart and touchend events, respectively. This might look like the following:

src/events.js

export default {
  'button touchstart': function onTouchStart(el, ev) {
    el.classList.add('hover');
  },
  'button touchend': function onTouchEnd(el, ev) {
    el.classList.remove('hover');
  }
}

src/index.stache

<!DOCTYPE html>
<html>
<head></head>
<body>
  <can-import from="./events.js" export-as="events"/>
    <form>
      <label>
        Email
        <input type="text">
      </label>
      <label>
        Password
        <input type="password">
      </label>
      <button type="submit">Login</button>
    </form>
</body>
</html>
@matthewp
Copy link
Contributor

matthewp commented Feb 2, 2017

Sounds good to me. Would it make more sense to export an object or to export a can-control constructor? You'd get a little more flexibility if you exported a constructor. It would also be easier on the done-autorender code, if you just exported an object it would mean done-autorender would have to depend on can-control. Not a big deal either way, just throwing the idea out there.

@justinbmeyer
Copy link
Contributor

Couldn't you just <can-import from="./events.js"/>

And have events.js look like:

var Control = require("can-control");

var DocControl = Control.extend({
  'button touchstart': function onTouchStart(el, ev) {
    el.classList.add('hover');
  },
  'button touchend': function onTouchEnd(el, ev) {
    el.classList.remove('hover');
  }
})

new DocControl(document.documentElement);

?

@imjoshdean
Copy link
Author

@matthewp I think it should allow for both, if you export a plain object, it should convert it to a can-control for you; however, if you export either an instance or constructor function of an inherited can-control it should use it as is.

@justinbmeyer I suppose you could, though it feels less explicit doing it that way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@justinbmeyer @imjoshdean @matthewp