fix image component displaying alt text in uploader (#105)

closes TryGhost/Ghost#7064
- pull alt text from parsed markdown
- move text to image uploader component proper
This commit is contained in:
Austin Burdine 2016-07-14 06:27:18 -06:00 committed by Kevin Ansfield
parent b86da86de5
commit 5573d72e65
6 changed files with 20 additions and 11 deletions

View File

@ -67,22 +67,29 @@ export default Component.extend({
let el = oldEl.cloneNode(true);
let component = components[i];
let uploadTarget = el.querySelector('.js-upload-target');
let altTextWrapper = oldEl.querySelector('.js-drop-zone .description strong');
let id = uuid();
let destinationElementId = `image-uploader-${id}`;
let src;
let src, altText;
if (uploadTarget) {
src = uploadTarget.getAttribute('src');
}
if (altTextWrapper) {
altText = altTextWrapper.innerHTML;
}
if (component) {
component.set('destinationElementId', destinationElementId);
component.set('src', src);
component.set('altText', altText);
} else {
let imageUpload = EmberObject.create({
destinationElementId,
id,
src,
altText,
index: i
});

View File

@ -19,7 +19,7 @@ export default Component.extend({
classNameBindings: ['dragClass'],
image: null,
text: 'Upload an image',
text: '',
saveButton: true,
dragClass: null,

View File

@ -4,7 +4,7 @@
{{#ember-wormhole to=uploader.destinationElementId}}
{{gh-image-uploader-with-preview
image=uploader.src
text="Upload an image"
text=uploader.altText
update=(action "updateImageSrc" uploader.index)
remove=(action "updateImageSrc" uploader.index "")
uploadStarted=uploadStarted

View File

@ -16,7 +16,7 @@
{{!-- file selection/drag-n-drop --}}
<div class="upload-form">
{{#gh-file-input multiple=false alt=text action=(action 'fileSelected') accept="image/gif,image/jpg,image/jpeg,image/png,image/svg+xml"}}
<div class="description">{{text}}</div>
<div class="description">{{if text (concat "Upload image of " text) "Upload an image"}}</div>
{{/gh-file-input}}
</div>
@ -30,7 +30,7 @@
{{#if saveButton}}
<button class="btn btn-blue gh-input" {{action 'saveUrl'}}>Save</button>
{{else}}
<div class="description">{{text}}</div>
<div class="description">{{if text (concat "Upload image of " text) "Upload an image"}}</div>
{{/if}}
</form>

View File

@ -7,10 +7,12 @@
</a>
</div>
{{else}}
{{gh-image-uploader image=newUrl
saveButton=false
update=(action 'fileUploaded')
onInput=(action (mut newUrl))}}
{{gh-image-uploader
image=newUrl
saveButton=false
update=(action 'fileUploaded')
onInput=(action (mut newUrl))
}}
{{/if}}
</div>

View File

@ -132,7 +132,7 @@ describeComponent(
describe('file upload form', function () {
it('renders form with supplied text', function () {
this.render(hbs`{{gh-image-uploader image=image text="text test"}}`);
expect(this.$('.description').text().trim()).to.equal('text test');
expect(this.$('.description').text().trim()).to.equal('Upload image of text test');
});
it('generates request to correct endpoint', function (done) {
@ -433,7 +433,7 @@ describeComponent(
it('can render without a save button', function () {
this.render(hbs`{{gh-image-uploader image=image saveButton=false text="text test"}}`);
expect(this.$('button').length).to.equal(0);
expect(this.$('.description').text().trim()).to.equal('text test');
expect(this.$('.description').text().trim()).to.equal('Upload image of text test');
});
it('fires update action when save button clicked', function () {