2018-02-03 21:20:50 +03:00
|
|
|
import Component from '@ember/component';
|
2018-04-03 20:34:01 +03:00
|
|
|
import {computed} from '@ember/object';
|
2019-04-16 10:20:59 +03:00
|
|
|
import {utils as ghostHelperUtils} from '@tryghost/helpers';
|
2018-03-15 20:54:15 +03:00
|
|
|
import {isBlank} from '@ember/utils';
|
|
|
|
import {run} from '@ember/runloop';
|
2018-02-03 21:20:50 +03:00
|
|
|
import {set} from '@ember/object';
|
|
|
|
|
2019-04-16 10:20:59 +03:00
|
|
|
const {countWords, countImages} = ghostHelperUtils;
|
|
|
|
|
2018-02-03 21:20:50 +03:00
|
|
|
export default Component.extend({
|
2018-02-15 18:57:44 +03:00
|
|
|
// attrs
|
2018-02-03 21:20:50 +03:00
|
|
|
payload: null,
|
2018-02-15 18:57:44 +03:00
|
|
|
isSelected: false,
|
|
|
|
isEditing: false,
|
2018-05-01 17:55:51 +03:00
|
|
|
headerOffset: 0,
|
2018-02-15 18:57:44 +03:00
|
|
|
|
|
|
|
// closure actions
|
2018-05-23 13:59:20 +03:00
|
|
|
selectCard() {},
|
|
|
|
deselectCard() {},
|
2018-04-03 20:34:01 +03:00
|
|
|
editCard() {},
|
2018-03-15 20:54:15 +03:00
|
|
|
saveCard() {},
|
|
|
|
deleteCard() {},
|
2018-07-20 17:53:21 +03:00
|
|
|
registerComponent() {},
|
|
|
|
|
2021-11-10 17:45:54 +03:00
|
|
|
isEmpty: computed('payload.html', function () {
|
|
|
|
return isBlank(this.payload.html);
|
|
|
|
}),
|
|
|
|
|
2018-07-20 17:53:21 +03:00
|
|
|
counts: computed('payload.html', function () {
|
|
|
|
return {
|
2019-04-16 10:20:59 +03:00
|
|
|
wordCount: countWords(this.payload.html),
|
2018-07-20 17:53:21 +03:00
|
|
|
imageCount: countImages(this.payload.html)
|
|
|
|
};
|
|
|
|
}),
|
2018-02-03 21:20:50 +03:00
|
|
|
|
2018-04-03 20:34:01 +03:00
|
|
|
toolbar: computed('isEditing', function () {
|
2019-06-24 18:33:21 +03:00
|
|
|
if (this.isEditing) {
|
|
|
|
return false;
|
2018-04-03 20:34:01 +03:00
|
|
|
}
|
2019-06-24 18:33:21 +03:00
|
|
|
|
|
|
|
return {
|
|
|
|
items: [{
|
|
|
|
buttonClass: 'fw4 flex items-center white',
|
|
|
|
icon: 'koenig/kg-edit',
|
|
|
|
iconClass: 'fill-white',
|
|
|
|
title: 'Edit',
|
|
|
|
text: '',
|
|
|
|
action: run.bind(this, this.editCard)
|
|
|
|
}]
|
|
|
|
};
|
2018-04-03 20:34:01 +03:00
|
|
|
}),
|
|
|
|
|
2018-02-03 21:20:50 +03:00
|
|
|
init() {
|
|
|
|
this._super(...arguments);
|
2018-05-01 19:13:53 +03:00
|
|
|
let payload = this.payload || {};
|
2018-02-03 21:20:50 +03:00
|
|
|
|
2018-05-07 17:39:45 +03:00
|
|
|
// CodeMirror errors on a `null` or `undefined` value
|
2018-05-01 19:13:53 +03:00
|
|
|
if (!payload.html) {
|
2018-05-07 17:39:45 +03:00
|
|
|
set(payload, 'html', '');
|
2018-02-03 21:20:50 +03:00
|
|
|
}
|
2018-05-01 19:13:53 +03:00
|
|
|
|
|
|
|
this.set('payload', payload);
|
2018-07-20 17:53:21 +03:00
|
|
|
|
|
|
|
this.registerComponent(this);
|
2018-02-03 21:20:50 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
actions: {
|
|
|
|
updateHtml(html) {
|
2018-02-20 18:53:58 +03:00
|
|
|
this._updatePayloadAttr('html', html);
|
|
|
|
},
|
2018-02-03 21:20:50 +03:00
|
|
|
|
2018-03-15 20:54:15 +03:00
|
|
|
leaveEditMode() {
|
2021-11-10 17:45:54 +03:00
|
|
|
if (this.isEmpty) {
|
2018-03-15 20:54:15 +03:00
|
|
|
// afterRender is required to avoid double modification of `isSelected`
|
|
|
|
// TODO: see if there's a way to avoid afterRender
|
2020-01-16 20:01:12 +03:00
|
|
|
run.scheduleOnce('afterRender', this, this.deleteCard);
|
2018-03-15 20:54:15 +03:00
|
|
|
}
|
2018-02-03 21:20:50 +03:00
|
|
|
}
|
2018-02-20 18:53:58 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_updatePayloadAttr(attr, value) {
|
2018-05-01 19:13:53 +03:00
|
|
|
let payload = this.payload;
|
|
|
|
let save = this.saveCard;
|
2018-02-20 18:53:58 +03:00
|
|
|
|
|
|
|
set(payload, attr, value);
|
|
|
|
|
|
|
|
// update the mobiledoc and stay in edit mode
|
|
|
|
save(payload, false);
|
2018-02-03 21:20:50 +03:00
|
|
|
}
|
|
|
|
});
|