Ghost/ghost/admin/app/components/gh-posts-list-item.js
Kevin Ansfield e01ffa3620 Always call _super when using Ember hooks
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.
2015-11-30 12:45:37 +00:00

81 lines
2.4 KiB
JavaScript

import Ember from 'ember';
const {Component, computed, inject} = Ember;
const {alias, equal} = computed;
export default Component.extend({
tagName: 'li',
classNameBindings: ['active', 'isFeatured:featured', 'isPage:page'],
post: null,
active: false,
previewIsHidden: false,
isFeatured: alias('post.featured'),
isPage: alias('post.page'),
isPublished: equal('post.status', 'published'),
ghostPaths: inject.service('ghost-paths'),
authorName: computed('post.author.name', 'post.author.email', function () {
return this.get('post.author.name') || this.get('post.author.email');
}),
authorAvatar: computed('post.author.image', function () {
return this.get('post.author.image') || this.get('ghostPaths.url').asset('/shared/img/user-image.png');
}),
authorAvatarBackground: computed('authorAvatar', function () {
return Ember.String.htmlSafe(`background-image: url(${this.get('authorAvatar')})`);
}),
viewOrEdit: computed('previewIsHidden', function () {
return this.get('previewIsHidden') ? 'editor.edit' : 'posts.post';
}),
click() {
this.sendAction('onClick', this.get('post'));
},
doubleClick() {
this.sendAction('onDoubleClick', this.get('post'));
},
didInsertElement() {
this._super(...arguments);
this.addObserver('active', this, this.scrollIntoView);
},
willDestroyElement() {
this._super(...arguments);
this.removeObserver('active', this, this.scrollIntoView);
},
scrollIntoView() {
if (!this.get('active')) {
return;
}
let element = this.$();
let offset = element.offset().top;
let elementHeight = element.height();
let container = $('.js-content-scrollbox');
let containerHeight = container.height();
let currentScroll = container.scrollTop();
let isBelowTop, isAboveBottom, isOnScreen;
isAboveBottom = offset < containerHeight;
isBelowTop = offset > elementHeight;
isOnScreen = isBelowTop && isAboveBottom;
if (!isOnScreen) {
// Scroll so that element is centered in container
// 40 is the amount of padding on the container
container.clearQueue().animate({
scrollTop: currentScroll + offset - 40 - containerHeight / 2
});
}
}
});