adopted-ember-addons / adopted-ember-addons/ember-collection

Allow integration of third-party js e.g. perfect-scrollbar

オープン
#99 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
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|~}}
{{yield cell.item cell.index this }}

{{~/each~}}

{{/custom-scroller}}
{{/custom-native-scrollable}}
```

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。