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

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

未关闭
#99 1 条评论 0 个 reaction 已指派 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 摘要。