mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-29 07:09:48 +03:00
9adbcd1fd0
no issue Automated tools, code generators, and editor integrations are increasingly standardising on the import style used in `ember-modules-codemod`. Our import style differed a little with regards to service/controller injection imports which meant we were starting to see inconsistent naming.
94 lines
2.8 KiB
JavaScript
94 lines
2.8 KiB
JavaScript
import $ from 'jquery';
|
|
import Component from '@ember/component';
|
|
import Ember from 'ember';
|
|
import {alias, equal} from '@ember/object/computed';
|
|
import {computed} from '@ember/object';
|
|
import {htmlSafe} from '@ember/string';
|
|
import {isBlank} from '@ember/utils';
|
|
import {inject as service} from '@ember/service';
|
|
|
|
const {Handlebars} = Ember;
|
|
|
|
export default Component.extend({
|
|
ghostPaths: service(),
|
|
|
|
tagName: 'li',
|
|
classNames: ['gh-posts-list-item'],
|
|
classNameBindings: ['active'],
|
|
|
|
post: null,
|
|
active: false,
|
|
|
|
isFeatured: alias('post.featured'),
|
|
isPage: alias('post.page'),
|
|
isPublished: equal('post.status', 'published'),
|
|
isScheduled: equal('post.status', 'scheduled'),
|
|
|
|
// closure actions
|
|
onClick() {},
|
|
onDoubleClick() {},
|
|
|
|
authorName: computed('post.author.name', 'post.author.email', function () {
|
|
return this.get('post.author.name') || this.get('post.author.email');
|
|
}),
|
|
|
|
authorAvatar: computed('post.author.profileImage', function () {
|
|
return this.get('post.author.profileImage') || `${this.get('ghostPaths.assetRoot')}/img/user-image.png`;
|
|
}),
|
|
|
|
authorAvatarBackground: computed('authorAvatar', function () {
|
|
let authorAvatar = this.get('authorAvatar');
|
|
let safeUrl = Handlebars.Utils.escapeExpression(authorAvatar);
|
|
return htmlSafe(`background-image: url(${safeUrl})`);
|
|
}),
|
|
|
|
// HACK: this is intentionally awful due to time constraints
|
|
// TODO: find a better way to get an excerpt! :)
|
|
subText: computed('post.{plaintext,metaDescription}', function () {
|
|
let text = this.get('post.plaintext');
|
|
let metaDescription = this.get('post.metaDescription');
|
|
|
|
if (!isBlank(metaDescription)) {
|
|
text = metaDescription;
|
|
}
|
|
return `${text.slice(0, 80)}...`;
|
|
}),
|
|
|
|
didReceiveAttrs() {
|
|
if (this.get('active')) {
|
|
this.scrollIntoView();
|
|
}
|
|
},
|
|
|
|
click() {
|
|
this.onClick(this.get('post'));
|
|
},
|
|
|
|
doubleClick() {
|
|
this.onDoubleClick(this.get('post'));
|
|
},
|
|
|
|
scrollIntoView() {
|
|
let element = this.$();
|
|
let offset = element.offset().top;
|
|
let elementHeight = element.height();
|
|
let container = $('.content-list');
|
|
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
|
|
});
|
|
}
|
|
}
|
|
});
|