Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ember-polyfills/ember-modifier-manager-polyfill
Polyfill element modifiers for Ember 2.12 through 3.7
https://github.com/ember-polyfills/ember-modifier-manager-polyfill
Last synced: 3 months ago
JSON representation
Polyfill element modifiers for Ember 2.12 through 3.7
- Host: GitHub
- URL: https://github.com/ember-polyfills/ember-modifier-manager-polyfill
- Owner: ember-polyfills
- License: mit
- Created: 2019-01-27T20:39:00.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-22T12:52:45.000Z (almost 4 years ago)
- Last Synced: 2024-05-28T17:55:25.327Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 2.33 MB
- Stars: 10
- Watchers: 2
- Forks: 4
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-modifier-manager-polyfill - Polyfill element modifiers for Ember.js 2.12 through 3.7. (Packages / Polyfills)
README
ember-modifier-manager-polyfill
==============================================================================
This addon provides a polyfill for implementing element modifier managers as
described in [emberjs/rfcs#373](https://emberjs.github.io/rfcs/0373-Element-Modifier-Managers.html).
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](https://emberjs.github.io/rfcs/0373-Element-Modifier-Managers.html),
but here are a few simple examples (shamelessly stolen from another modifier
RFC [emberjs/rfcs#353](https://github.com/emberjs/rfcs/pull/353)):
### Performance Marking
```hbs
About Us
{{!-- snip --}}
```
```js
// 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
```hbs
```
```js
// 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
```hbs
Chad liked a post
{{!-- Snip --}}
```
```js
// 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](LICENSE.md).