adopted-ember-addons / adopted-ember-addons/ember-collection
Allow integration of third-party js e.g. perfect-scrollbar
- 主要言語
- JavaScript
- スター
- 235
- フォーク
- 81
- PR マージ指標
- 30日以内にマージされた PR はありません
説明
Ember-Collection should allow for easier integration of custom scrollbar js.
Right now we have to override `EmberNativeScrollable` to change the `contentElement` in `didInsertElement` and the `element` in `scrollCheck` and to override the default template of `EmberCollection`.
```
import Ember from 'ember';
import EmberNativeScrollable from 'ember-collection/components/ember-native-scrollable';
export default EmberNativeScrollable.extend({
didInsertElement() {
this.contentElement = this.element.firstElementChild.firstElementChild;
this.applyStyle();
this.applyContentSize();
this.syncScrollFromAttr();
this.startScrollCheck();
},
scrollCheck() {
let element = this.element.firstElementChild;
let scrollLeft = element.scrollLeft;
let scrollTop = element.scrollTop;
let scrollChanged = false;
if (scrollLeft !== this._appliedScrollLeft || scrollTop !== this._appliedScrollTop) {
scrollChanged = true;
this._appliedScrollLeft = scrollLeft;
this._appliedScrollTop = scrollTop;
}
let clientWidth = element.clientWidth;
let clientHeight = element.clientHeight;
let clientSizeChanged = false;
if (clientWidth !== this._clientWidth || clientHeight !== this._clientHeight) {
clientSizeChanged = true;
this._clientWidth = clientWidth;
this._clientHeight = clientHeight;
}
if (scrollChanged || clientSizeChanged) {
Ember.run.join(this, function sendActionsFromScrollCheck(){
if (scrollChanged) {
this.sendAction('scrollChange', scrollLeft, scrollTop);
}
if (clientSizeChanged) {
this.sendAction('clientSizeChange', clientWidth, clientHeight);
}
});
}
}
});
```
```
import EmberCollection from 'ember-collection/components/ember-collection';
import layout from './template';
export default EmberCollection.extend({
layout: layout
});
```
```
{{#custom-native-scrollable content-size=_contentSize scroll-left=_scrollLeft scroll-top=_scrollTop scrollChange=(action "scrollChange") clientSizeChange=(action "clientSizeChange")}}
{{#custom-scroller}}
{{~#each _cells as |cell|~}}
{{~/each~}}
{{/custom-scroller}}
{{/custom-native-scrollable}}
```
コントリビューションガイド
評価
この issue はまだ評価されていません。