2019-09-15 14:16:32 +02:00
|
|
|
import baron from 'baron';
|
2019-09-16 22:57:56 +02:00
|
|
|
import { Events } from 'framework/events';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { Features } from 'util/features';
|
2016-01-17 21:19:42 +01:00
|
|
|
|
2019-09-15 08:11:11 +02:00
|
|
|
const isEnabled = !Features.isMobile;
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-22 22:24:45 +02:00
|
|
|
const SymbolRemoveScrollListenerAdded = Symbol('removeScrollAdded');
|
2019-09-22 22:24:19 +02:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const Scrollable = {
|
2019-08-18 10:17:09 +02:00
|
|
|
createScroll(opts) {
|
2016-07-17 13:30:38 +02:00
|
|
|
// opts.cssGuru = true;
|
2016-01-17 21:19:42 +01:00
|
|
|
if (isEnabled) {
|
2016-02-07 10:16:24 +01:00
|
|
|
if (this.scroll) {
|
|
|
|
this.removeScroll();
|
|
|
|
}
|
2016-01-17 21:19:42 +01:00
|
|
|
this.scroll = baron(opts);
|
2019-09-22 22:24:19 +02:00
|
|
|
if (!this[SymbolRemoveScrollListenerAdded]) {
|
|
|
|
this.once('remove', () => this.removeScroll);
|
|
|
|
this[SymbolRemoveScrollListenerAdded] = true;
|
|
|
|
}
|
2016-01-17 21:19:42 +01:00
|
|
|
}
|
|
|
|
this.scroller = this.$el.find('.scroller');
|
|
|
|
this.scrollerBar = this.$el.find('.scroller__bar');
|
|
|
|
this.scrollerBarWrapper = this.$el.find('.scroller__bar-wrapper');
|
|
|
|
},
|
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
removeScroll() {
|
2016-02-07 10:16:24 +01:00
|
|
|
if (this.scroll) {
|
2019-09-15 18:33:45 +02:00
|
|
|
try {
|
|
|
|
this.scroll.dispose();
|
|
|
|
} catch {}
|
2016-02-07 10:16:24 +01:00
|
|
|
this.scroll = null;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
pageResized() {
|
2015-10-17 23:49:24 +02:00
|
|
|
// TODO: check size on window resize
|
2016-07-17 13:30:38 +02:00
|
|
|
// if (this.checkSize && (!e || e.source === 'window')) {
|
|
|
|
// this.checkSize();
|
|
|
|
// }
|
2015-10-17 23:49:24 +02:00
|
|
|
if (this.scroll) {
|
|
|
|
this.scroll.update();
|
2019-09-15 12:12:00 +02:00
|
|
|
requestAnimationFrame(() => {
|
2016-04-17 13:56:19 +02:00
|
|
|
if (this.scroll) {
|
|
|
|
this.scroll.update();
|
2019-09-28 10:18:00 +02:00
|
|
|
const barHeight = Math.round(this.scrollerBar.height());
|
|
|
|
const wrapperHeight = Math.round(this.scrollerBarWrapper.height());
|
2016-04-17 13:56:19 +02:00
|
|
|
this.scrollerBarWrapper.toggleClass('invisible', barHeight >= wrapperHeight);
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
initScroll() {
|
2016-01-17 21:19:42 +01:00
|
|
|
if (isEnabled) {
|
2019-09-16 22:57:56 +02:00
|
|
|
this.listenTo(Events, 'page-geometry', this.pageResized);
|
2016-01-17 21:19:42 +01:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { Scrollable };
|