mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-30 11:54:33 +03:00
e01ffa3620
no issue - review use of Ember core hooks and add a call to `this._super` if missing - fix a few occurrences of using the wrong component lifecycle hooks that could result in multiple/duplicate event handlers being attached `_super` should always be called when overriding Ember's base hooks so that core functionality or app functionality added through extensions, mixins or addons is not lost. This is important as it guards against issues arising from later refactorings or core changes. As example of lost functionality, there were a number of routes that extended from `AuthenticatedRoute` but then overrode the `beforeModel` hook without calling `_super` which meant that the route was no longer treated as authenticated.
76 lines
2.3 KiB
JavaScript
76 lines
2.3 KiB
JavaScript
import Ember from 'ember';
|
|
import setScrollClassName from 'ghost/utils/set-scroll-classname';
|
|
|
|
const {Component, computed, run} = Ember;
|
|
const {equal} = computed;
|
|
|
|
export default Component.extend({
|
|
tagName: 'section',
|
|
classNames: ['gh-view'],
|
|
|
|
// updated when gh-ed-editor component scrolls
|
|
editorScrollInfo: null,
|
|
// updated when markdown is rendered
|
|
height: null,
|
|
activeTab: 'markdown',
|
|
|
|
markdownActive: equal('activeTab', 'markdown'),
|
|
previewActive: equal('activeTab', 'preview'),
|
|
|
|
// HTML Preview listens to scrollPosition and updates its scrollTop value
|
|
// This property receives scrollInfo from the textEditor, and height from the preview pane, and will update the
|
|
// scrollPosition value such that when either scrolling or typing-at-the-end of the text editor the preview pane
|
|
// stays in sync
|
|
scrollPosition: computed('editorScrollInfo', 'height', function () {
|
|
let scrollInfo = this.get('editorScrollInfo');
|
|
let $previewContent = this.get('$previewContent');
|
|
let $previewViewPort = this.get('$previewViewPort');
|
|
|
|
if (!scrollInfo || !$previewContent || !$previewViewPort) {
|
|
return 0;
|
|
}
|
|
|
|
let previewHeight = $previewContent.height() - $previewViewPort.height();
|
|
let previewPosition, ratio;
|
|
|
|
ratio = previewHeight / scrollInfo.diff;
|
|
previewPosition = scrollInfo.top * ratio;
|
|
|
|
return previewPosition;
|
|
}),
|
|
|
|
scheduleAfterRender() {
|
|
run.scheduleOnce('afterRender', this, this.afterRenderEvent);
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
this.scheduleAfterRender();
|
|
},
|
|
|
|
afterRenderEvent() {
|
|
let $previewViewPort = this.$('.js-entry-preview-content');
|
|
|
|
// cache these elements for use in other methods
|
|
this.set('$previewViewPort', $previewViewPort);
|
|
this.set('$previewContent', this.$('.js-rendered-markdown'));
|
|
|
|
$previewViewPort.on('scroll', run.bind($previewViewPort, setScrollClassName, {
|
|
target: this.$('.js-entry-preview'),
|
|
offset: 10
|
|
}));
|
|
},
|
|
|
|
willDestroyElement() {
|
|
this._super(...arguments);
|
|
// removes scroll handlers from the view
|
|
this.get('$previewViewPort').off('scroll');
|
|
},
|
|
|
|
actions: {
|
|
selectTab(tab) {
|
|
this.set('activeTab', tab);
|
|
}
|
|
}
|
|
});
|