mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 13:54:35 +03:00
cb59388c5b
no issue
- adds `eslint-plugin-sort-imports-es6-autofix` dependency
- implements ESLint's base `sort-imports` rule but has a distinction in that `import {foo} from 'bar';` is considered `multiple` rather than `single`
- fixes ESLint's autofix behaviour so `eslint --fix` will actually fix the sort order
- updates all unordered import rules by using `eslint --fix`
With the increased number of `import` statements since Ember+ecosystem started moving towards es6 modules I've found it frustrating at times trying to search through randomly ordered import statements. Recently I've been sorting imports manually when I've added new code or touched old code so I thought I'd add an ESLint rule to codify it.
95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
import $ from 'jquery';
|
|
import Component from 'ember-component';
|
|
import Ember from 'ember';
|
|
import computed, {alias, equal} from 'ember-computed';
|
|
import injectService from 'ember-service/inject';
|
|
import {htmlSafe} from 'ember-string';
|
|
import {isBlank} from 'ember-utils';
|
|
|
|
// ember-cli-shims doesn't export these
|
|
const {Handlebars} = Ember;
|
|
|
|
export default Component.extend({
|
|
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'),
|
|
|
|
ghostPaths: injectService(),
|
|
|
|
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.{html,metaDescription}', function () {
|
|
let html = this.get('post.html');
|
|
let metaDescription = this.get('post.metaDescription');
|
|
let text;
|
|
|
|
if (!isBlank(metaDescription)) {
|
|
text = metaDescription;
|
|
} else {
|
|
let $html = $(`<div>${html}</div>`);
|
|
text = $html.text();
|
|
}
|
|
|
|
return htmlSafe(`${text.slice(0, 80)}…`);
|
|
}),
|
|
|
|
didReceiveAttrs() {
|
|
if (this.get('active')) {
|
|
this.scrollIntoView();
|
|
}
|
|
},
|
|
|
|
click() {
|
|
this.sendAction('onClick', this.get('post'));
|
|
},
|
|
|
|
doubleClick() {
|
|
this.sendAction('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
|
|
});
|
|
}
|
|
}
|
|
});
|