Ghost/ghost/admin/app/components/gh-ed-preview.js
Kevin Ansfield 62553cdf92 Replace jQuery-based uploader.js with ember components
no issue
- adds `gh-image-uploader` that handles image uploads in a fully ember fashion and with no dependency on `uploader.js`
- adds `gh-image-uploader-with-preview` that can fully replace the old `gh-uploader`
- replace uses of `gh-uploader` in PSM & TSM with `gh-image-uploader-with-preview`
- updates the editor preview image handling to use the new `gh-image-uploader-with-preview` component
- updates the image upload modal to use `gh-image-uploader` (utilises the `saveButton=false` flag which means the preview has to be handled externally to avoid auto-replacement when typing a URL)
- removes all old `uploader.js` related code
- adds custom `RequestEntityTooLargeError` and `UnsupportedMediaTypeError` errors to our `ajax` service
2016-04-05 12:03:20 +01:00

91 lines
2.6 KiB
JavaScript

import Ember from 'ember';
const {
$,
Component,
run,
uuid
} = Ember;
export default Component.extend({
_scrollWrapper: null,
init() {
this._super(...arguments);
this.set('imageUploadComponents', Ember.A([]));
},
didInsertElement() {
this._super(...arguments);
this._scrollWrapper = this.$().closest('.entry-preview-content');
this.adjustScrollPosition(this.get('scrollPosition'));
run.scheduleOnce('afterRender', this, this.registerImageUploadComponents);
},
didReceiveAttrs(attrs) {
this._super(...arguments);
if (!attrs.oldAttrs) {
return;
}
if (attrs.newAttrs.scrollPosition && attrs.newAttrs.scrollPosition.value !== attrs.oldAttrs.scrollPosition.value) {
this.adjustScrollPosition(attrs.newAttrs.scrollPosition.value);
}
if (attrs.newAttrs.markdown.value !== attrs.oldAttrs.markdown.value) {
// we need to clear the rendered components as we are unable to
// retain a reliable reference for the component's position in the
// document
// TODO: it may be possible to extract the dropzones and use the
// image src as a key, re-connecting any that match and
// dropping/re-rendering any unknown/no-source instances
this.set('imageUploadComponents', Ember.A([]));
run.scheduleOnce('afterRender', this, this.registerImageUploadComponents);
}
},
adjustScrollPosition(scrollPosition) {
let scrollWrapper = this._scrollWrapper;
if (scrollWrapper) {
scrollWrapper.scrollTop(scrollPosition);
}
},
registerImageUploadComponents() {
let dropzones = $('.js-drop-zone');
dropzones.each((i, el) => {
let id = uuid();
let destinationElementId = `image-uploader-${id}`;
let src = $(el).find('.js-upload-target').attr('src');
let imageUpload = Ember.Object.create({
destinationElementId,
id,
src,
index: i
});
el.id = destinationElementId;
$(el).empty();
$(el).removeClass('image-uploader');
run.schedule('afterRender', () => {
this.get('imageUploadComponents').pushObject(imageUpload);
});
});
},
actions: {
updateImageSrc(index, url) {
this.attrs.updateImageSrc(index, url);
},
updateHeight() {
this.attrs.updateHeight(this.$().height());
}
}
});