Ghost/ghost/admin/app/components/gh-posts-list-item.js
Kevin Ansfield 352c4af1d7 Refactored usage of .get('property') with es5 getters
no issue
- ran [es5-getter-ember-codemod](https://github.com/rondale-sc/es5-getter-ember-codemod)
- [es5 getters RFC](https://github.com/emberjs/rfcs/blob/master/text/0281-es5-getters.md)
- updates the majority of `object.get('property')` with `object.property` with exceptions:
  - `.get('nested.property')` - it's not possible to determine if this is relying on "safe" path chaining for when `nested` doesn't exist
  - `.get('config.x')` and `.get('settings.x')` - both our `config` and `settings` services are proxy objects which do not support es5 getters
- this PR is not exhaustive, there are still a number of places where `.get('service.foo')` and similar could be replaced but it gets us a long way there in a quick and automated fashion
2019-03-06 13:54:14 +00:00

85 lines
2.4 KiB
JavaScript

import $ from 'jquery';
import Component from '@ember/component';
import {alias, equal} from '@ember/object/computed';
import {computed} from '@ember/object';
import {isBlank} from '@ember/utils';
import {inject as service} from '@ember/service';
export default Component.extend({
ghostPaths: service(),
tagName: 'li',
classNames: ['gh-posts-list-item'],
classNameBindings: ['active'],
post: null,
active: false,
// closure actions
onClick() {},
onDoubleClick() {},
isFeatured: alias('post.featured'),
isPage: alias('post.page'),
isDraft: equal('post.status', 'draft'),
isPublished: equal('post.status', 'published'),
isScheduled: equal('post.status', 'scheduled'),
authorNames: computed('post.authors.[]', function () {
let authors = this.get('post.authors');
return authors.map(author => author.get('name') || author.get('email')).join(', ');
}),
subText: computed('post.{excerpt,customExcerpt,metaDescription}', function () {
let text = this.get('post.excerpt') || '';
let customExcerpt = this.get('post.customExcerpt');
let metaDescription = this.get('post.metaDescription');
if (!isBlank(customExcerpt)) {
text = customExcerpt;
} else if (!isBlank(metaDescription)) {
text = metaDescription;
}
return `${text.slice(0, 80)}...`;
}),
didReceiveAttrs() {
if (this.active) {
this.scrollIntoView();
}
},
click() {
this.onClick(this.post);
},
doubleClick() {
this.onDoubleClick(this.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
});
}
}
});