Ghost/ghost/admin/app/components/gh-canvas-header.js
Gabriel Csapo 8d01fb5556 Switched majority of files from EmberObject to native class syntax using @classic decorator (#2227)
no issue

- ran [ember-native-class-codemod](https://github.com/ember-codemods/ember-native-class-codemod) to convert the majority of remaining EmberObject based controllers and components to native class syntax using the `@classic` decorator
- skipped older style modal components (`components/modal-*.js`) due to observed incompatibilities in some cases
2022-02-01 09:34:03 +00:00

36 lines
1.1 KiB
JavaScript

import Component from '@ember/component';
import classic from 'ember-classic-decorator';
import {action} from '@ember/object';
import {run} from '@ember/runloop';
import {tagName} from '@ember-decorators/component';
@classic
@tagName('')
export default class GhCanvasHeader extends Component {
@action
initScrollWatch(element) {
this._onScroll = run.bind(this, this.onScroll, element);
this._scrollContainer = element.closest('.gh-main');
if (this._scrollContainer) {
this._scrollContainer.addEventListener('scroll', this._onScroll, {passive: true});
}
}
@action
clearScrollWatch() {
if (this._scrollContainer) {
this._scrollContainer.removeEventListener('scroll', this._onScroll);
}
}
onScroll(element) {
if (this._isSticky && this._scrollContainer.scrollTop < 10) {
element.classList.remove('gh-canvas-header--sticky');
this._isSticky = false;
} else if (!this._isSticky && this._scrollContainer.scrollTop > 10) {
element.classList.add('gh-canvas-header--sticky');
this._isSticky = true;
}
}
}