Ghost/ghost/admin/app/components/gh-posts-list-item.js
Matt Enlow 20cbc6c606 Load more posts after post deletion
Closes #6390
- check if more posts should be loaded whenever one is deleted
- delete dead code from posts controller
- delete duplicate component gh-infinite-scroll-box
- simplify posts-list-item `posts.post` or `editor.edit` link logic by modifying `gh-content-view-container` to yield necessary vars directly and use inline ifs in template
- add `gh-tag` component for rendering tags and updating infinite scroll box on `settings/tags` page
2016-02-09 09:08:31 -07:00

85 lines
2.4 KiB
JavaScript

import Ember from 'ember';
import ActiveLinkWrapper from 'ghost/mixins/active-link-wrapper';
const {
$,
Component,
computed,
inject: {service}
} = Ember;
const {alias, equal} = computed;
export default Component.extend(ActiveLinkWrapper, {
tagName: 'li',
classNameBindings: ['isFeatured:featured', 'isPage:page'],
post: null,
previewIsHidden: false,
isFeatured: alias('post.featured'),
isPage: alias('post.page'),
isPublished: equal('post.status', 'published'),
ghostPaths: service(),
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.subdir')}/ghost/img/user-image.png`;
}),
authorAvatarBackground: computed('authorAvatar', function () {
return Ember.String.htmlSafe(`background-image: url(${this.get('authorAvatar')})`);
}),
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);
if (this.get('post.isDeleted') && this.attrs.onDelete) {
this.attrs.onDelete();
}
},
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
});
}
}
});