Skip to content
Polyfill element modifiers for Ember 2.12 through 3.7
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
tests
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.prettierrc.js
.template-lintrc.js
.travis.yml
.watchmanconfig
CONTRIBUTING.md
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
testem.js
yarn.lock

README.md

ember-modifier-manager-polyfill

This addon provides a polyfill for implementing element modifier managers as described in emberjs/rfcs#373.

Compatibility

  • Completely inert when running ember-source 3.8 or higher
  • Tested against ember-source v2.12, v2.16, v2.18, v3.4, v3.5, v3.6, v3.7 in CI

Installation

ember install ember-modifier-manager-polyfill

Usage

At this point the best documentation is likely still the the RFC itself, but here are a few simple examples (shamelessly stolen from another modifier RFC emberjs/rfcs#353):

Performance Marking

<section id="about-us" {{performance 'mark' 'about-page'}}>
  <h1>About Us</h1>
  {{!-- snip --}}
</section>
// app/modifiers/performance.js
import Ember from 'ember';

export default Ember._setModifierManager(
  () => ({
    createModifier() {},

    installModifier(_instance, _element, args) {
      let [type, name] = args.positional;

      performance[type](name);
    },

    updateModifier() {},
    destroyModifier() {},
  }),
  class PerformanceModifier {}
);

jQuery Widget

<input type="date" {{datepicker changeMonth=true changeYear=true}} />
// app/modifiers/datepicker.js
import Ember from 'ember';
import $ from 'jquery';

export default Ember._setModifierManager(
  () => ({
    createModifier() {
      return { element: null };
    },

    installModifier(state, element, args) {
      let options = Object.assign({ minDate: 20, maxDate: '+1M +10D' }, args.named);

      // setup state bucket for use in destroyModifier
      state.element = element;
      state.options = options;

      $(this.element).datepicker(options);
    },

    updateModifier() {},
    destroyModifier(state) {
      $(state.element).datepicker(state.options);
    },
  }),
  class DatepickerModifier {}
);

Page View Tracking

<section {{track-impression eventCategory="Post"}}>
  <header>Chad liked a post</header>
  <img src="cat.jpg">
  {{!-- Snip --}}
<section>
// app/modifiers/track-impression.js
import Ember from 'ember';

export default Ember._setModifierManager(
  owner => ({
    createModifier() {
      return { element: null, observer: null };
    },

    installModifier(state, element, args) {
      let ga = owner.lookup('service:ga');
      let { eventCategory } = args.named;

      let interSectionObserver = new IntersectionObserver(entries => {
        entries.forEach(entry => ga.send('event', 'impression', eventCategory));
      });

      // setup state bucket for use in destroyModifier
      state.element = element;
      state.observer = interSectionObserver;
    },

    updateModifier() {},
    destroyModifier(state) {
     state.observer.unobserve(state.element);
    },
  }),
  class TrackImpressionModifier {}
);

License

This project is licensed under the MIT License.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.