mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-15 11:34:24 +03:00
571b9e783a
no issue - review use of Ember core hooks and add a call to `this._super` if missing - fix a few occurrences of using the wrong component lifecycle hooks that could result in multiple/duplicate event handlers being attached `_super` should always be called when overriding Ember's base hooks so that core functionality or app functionality added through extensions, mixins or addons is not lost. This is important as it guards against issues arising from later refactorings or core changes. As example of lost functionality, there were a number of routes that extended from `AuthenticatedRoute` but then overrode the `beforeModel` hook without calling `_super` which meant that the route was no longer treated as authenticated.
81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
import Ember from 'ember';
|
|
import uploader from 'ghost/assets/lib/uploader';
|
|
|
|
const {Component, computed, get, inject, isEmpty, run} = Ember;
|
|
|
|
export default Component.extend({
|
|
classNames: ['image-uploader', 'js-post-image-upload'],
|
|
|
|
config: inject.service(),
|
|
|
|
imageSource: computed('image', function () {
|
|
return this.get('image') || '';
|
|
}),
|
|
|
|
// removes event listeners from the uploader
|
|
removeListeners() {
|
|
let $this = this.$();
|
|
|
|
$this.off();
|
|
$this.find('.js-cancel').off();
|
|
},
|
|
|
|
// NOTE: because the uploader is sometimes in the same place in the DOM
|
|
// between transitions Glimmer will re-use the existing elements including
|
|
// those that arealready decorated by jQuery. The following works around
|
|
// situations where the image is changed without a full teardown/rebuild
|
|
didReceiveAttrs(attrs) {
|
|
let oldValue = attrs.oldAttrs && get(attrs.oldAttrs, 'image.value');
|
|
let newValue = attrs.newAttrs && get(attrs.newAttrs, 'image.value');
|
|
|
|
this._super(...arguments);
|
|
|
|
// always reset when we receive a blank image
|
|
// - handles navigating to populated image from blank image
|
|
if (isEmpty(newValue) && !isEmpty(oldValue)) {
|
|
this.$()[0].uploaderUi.reset();
|
|
}
|
|
|
|
// re-init if we receive a new image but the uploader is blank
|
|
// - handles back button navigating from blank image to populated image
|
|
if (!isEmpty(newValue) && this.$()) {
|
|
if (this.$('.js-upload-target').attr('src') === '') {
|
|
this.$()[0].uploaderUi.reset();
|
|
this.$()[0].uploaderUi.initWithImage();
|
|
}
|
|
}
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super(...arguments);
|
|
this.send('initUploader');
|
|
},
|
|
|
|
willDestroyElement() {
|
|
this._super(...arguments);
|
|
this.removeListeners();
|
|
},
|
|
|
|
actions: {
|
|
initUploader() {
|
|
let el = this.$();
|
|
let ref = uploader.call(el, {
|
|
editor: true,
|
|
fileStorage: this.get('config.fileStorage')
|
|
});
|
|
|
|
el.on('uploadsuccess', (event, result) => {
|
|
if (result && result !== '' && result !== 'http://') {
|
|
run(this, function () {
|
|
this.sendAction('uploaded', result);
|
|
});
|
|
}
|
|
});
|
|
|
|
el.on('imagecleared', run.bind(this, 'sendAction', 'canceled'));
|
|
|
|
this.sendAction('initUploader', ref);
|
|
}
|
|
}
|
|
});
|