Skip to content
This repository has been archived by the owner on Mar 9, 2022. It is now read-only.

Commit

Permalink
image upload to multi-compose
Browse files Browse the repository at this point in the history
  • Loading branch information
angusmcleod committed Mar 27, 2016
1 parent 1fb2aab commit b3b696b
Show file tree
Hide file tree
Showing 11 changed files with 222 additions and 58 deletions.
Expand Up @@ -199,7 +199,7 @@ export default Ember.Component.extend({

var staged = false;
const imageSizes = {};
this.$('.d-editor img').each((i, e) => {
this.$('.docked-editor img').each((i, e) => {
const $img = $(e);
const src = $img.prop('src');
if (src && src.length) {
Expand Down Expand Up @@ -305,10 +305,6 @@ export default Ember.Component.extend({
},
toggle() {
this.toggle()
},
showUploadSelector(toolbarEvent) {
console.log('docked-composer', toolbarEvent)
this.sendAction('showUploadSelector', toolbarEvent);
}
},

Expand Down
43 changes: 21 additions & 22 deletions assets/javascripts/discourse/components/docked-editor.js.es6
Expand Up @@ -35,15 +35,13 @@ class Toolbar {
{group: 'quick', buttons: []}
];

/* - not working yet
this.addButton({
id: 'upload',
group: 'quick',
icon: 'upload',
icon: 'picture-o',
title: 'upload',
sendAction: 'showUploadSelector'
action: 'upload'
});
*/

this.addButton({
id: 'emoji',
Expand Down Expand Up @@ -110,9 +108,10 @@ class Toolbar {
}

export default Ember.Component.extend({
classNames: ['d-editor'],
classNames: ['docked-editor'],
ready: false,
insertLinkHidden: true,
dockedUpload: false,
link: '',
lastSel: null,
_mouseTrap: null,
Expand Down Expand Up @@ -148,6 +147,7 @@ export default Ember.Component.extend({
});
this.$('.d-editor-input').putCursorAtEnd();

this._bindUploadTarget();
this._mouseTrap = mouseTrap;
},

Expand Down Expand Up @@ -193,7 +193,6 @@ export default Ember.Component.extend({
});
},

/* - uploads not working yet
_resetUpload(removePlaceholder) {
this._validUploads--;
if (this._validUploads === 0) {
Expand Down Expand Up @@ -232,7 +231,7 @@ export default Ember.Component.extend({
this._validUploads++;
// add upload placeholders (as much placeholders as valid files dropped)
const placeholder = _.times(this._validUploads, () => uploadPlaceholder).join("\n");
this.appEvents.trigger('composer:insert-text', placeholder);
this._addText(this._getSelected(), placeholder);

if (data.xhr && data.originalFiles.length === 1) {
this.set("isCancellable", true);
Expand All @@ -256,9 +255,9 @@ export default Ember.Component.extend({
if (upload && upload.url) {
if (!this._xhr || !this._xhr._userCancelled) {
const markdown = Discourse.Utilities.getUploadMarkdown(upload);
console.log(this.get('value'))
this.set('value', this.get('value').replace(uploadPlaceholder, markdown));
this._resetUpload(false);
this.set('dockedUpload', false)
} else {
this._resetUpload(true);
}
Expand All @@ -268,27 +267,18 @@ export default Ember.Component.extend({
}
});

if (this.site.mobileView) {
this.$(".mobile-file-upload").on("click.uploader", function () {
// redirect the click on the hidden file input
$("#mobile-uploader").click();
});
}
this._firefoxPastingHack();
},

@on('willDestroyElement')
_unbindUploadTarget() {
this._validUploads = 0;
this.$(".mobile-file-upload").off("click.uploader");
this.messageBus.unsubscribe("/uploads/composer");
const $uploadTarget = this.$();
try { $uploadTarget.fileupload("destroy"); }
catch (e) { }
$uploadTarget.off();
},
*/

@computed
toolbar() {
Expand Down Expand Up @@ -562,14 +552,23 @@ export default Ember.Component.extend({
applySurround: (head, tail, exampleKey) => this._applySurround(selected, head, tail, exampleKey),
addText: text => this._addText(selected, text),
};
button.perform(toolbarEvent);
},

console.log(button)
addText(text) {
this._addText(this._getSelected(), text)
},

if (button.sendAction === 'showUploadSelector') {
return this.sendAction('showUploadSelector', toolbarEvent)
} else {
button.perform(toolbarEvent);
cancelUpload() {
if (this._xhr) {
this._xhr._userCancelled = true;
this._xhr.abort();
}
this._resetUpload(true);
},

upload() {
this.set('dockedUpload', true)
},

emoji() {
Expand Down
16 changes: 15 additions & 1 deletion assets/javascripts/discourse/components/docked-post.js.es6
@@ -1,4 +1,18 @@
export default Ember.Component.extend({
tagName: "div",
classNames: 'docked-post'
classNames: 'docked-post',

test: function() {
var imgs = this.$('img')
if (imgs.length) {
imgs.each(function(i){
$(this).one("load", function() {
$('.docked-composer-top').scrollTop($('.docked-post-stream').height())
}).each(function() {
if(this.complete) $(this).load();
});
})
}
}.on('didInsertElement'),

})
73 changes: 73 additions & 0 deletions assets/javascripts/discourse/components/docked-upload.js.es6
@@ -0,0 +1,73 @@
import { default as computed, on, observes } from 'ember-addons/ember-computed-decorators';
import { uploadTranslate } from 'discourse/controllers/upload-selector';

export default Ember.Component.extend({
tagName: "div",
classNameBindings: [':docked-upload', ':docked-modal', 'visible::hidden'],
local: true,
imageUrl: null,
showMore: false,
remote: Ember.computed.not("local"),

@on('didInsertElement')
@observes('local')
selectedChanged() {
Ember.run.next(() => {
// *HACK* to select the proper radio button
const value = this.get('local') ? 'local' : 'remote';
$('input:radio[name="upload"]').val([value]);
$('.inputs input:first').focus();
});
},

@computed()
title() {
return uploadTranslate("title");
},

touchStart(evt) {
// HACK: workaround Safari iOS being really weird and not shipping click events
if (this.capabilities.isSafari && evt.target.id === "filename-input") {
this.$('#filename-input').click();
}
},

@computed
uploadIcon() {
return Discourse.Utilities.allowsAttachments() ? "upload" : "picture-o";
},

close: function() {
this.set('visible', false)
},

actions: {
upload() {
if (this.get('local')) {
this.$().parents('.docked-editor').fileupload('add', { fileInput: $('#filename-input') });
} else {
const imageUrl = this.get('imageUrl') || '';
const imageLink = imageUrl.substr(imageUrl.lastIndexOf('/') + 1)
this.sendAction('addText', `![${imageLink}](${imageUrl})`)
}
this.close()
},

closeModal() {
this.close()
},

useLocal() {
this.setProperties({ local: true, showMore: false});
},

useRemote() {
this.set("local", false);
},

toggleShowMore() {
this.toggleProperty("showMore");
}
}

});
5 changes: 2 additions & 3 deletions assets/javascripts/discourse/components/messages-menu.js.es6
Expand Up @@ -75,14 +75,13 @@ export default Ember.Component.extend({
}.observes('currentUser.unread_private_messages', 'currentUser.topic_count', 'currentUser.reply_count'),

actions: {
showUploadSelector(toolbarEvent) {
this.sendAction('showUploadSelector', toolbarEvent)
},

removeDocked(index) {
var docked = this.get('docked');
docked.removeAt(index)
this.set('docked', docked)
},

onScreen(index) {
var docked = this.get('docked');
var max = this.get('maxIndex'),
Expand Down
@@ -1,6 +1,5 @@
{{#if currentUser}}
{{#unless site.mobileView}}
{{messages-menu visible=messagesVisible
showUploadSelector="showUploadSelector"}}
{{messages-menu visible=messagesVisible}}
{{/unless}}
{{/if}}
Expand Up @@ -26,6 +26,5 @@
markdownOptions=markdownOptions
extraButtons="extraButtons"
showOptions="showOptions"
showUploadSelector="showUploadSelector"
loading=loading}}
{{/if}}
@@ -1,9 +1,5 @@
<div class='d-editor-overlay hidden'></div>
<div class='d-editor-modals'>
{{#d-editor-modal class="insert-link" hidden=insertLinkHidden okAction="insertLink"}}
<h3>{{i18n "composer.link_dialog_title"}}</h3>
{{text-field value=link placeholderKey="composer.link_placeholder"}}
{{/d-editor-modal}}
{{docked-upload addText="addText" visible=dockedUpload}}
</div>

<div class='d-editor-container'>
Expand All @@ -17,11 +13,6 @@
{{/unless}}
{{/each}}
</div>
<div class="d-editor-textarea-wrapper">
{{conditional-loading-spinner condition=loading}}
{{textarea tabindex=tabindex value=value class="d-editor-input" placeholder=placeholderTranslated}}
{{popup-input-tip validation=validation}}
</div>
{{#if isUploading}}
<div id="file-uploading">
{{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}}
Expand All @@ -31,4 +22,9 @@
{{/if}}
</div>
{{/if}}
<div class="d-editor-textarea-wrapper">
{{conditional-loading-spinner condition=loading}}
{{textarea tabindex=tabindex value=value class="d-editor-input" placeholder=placeholderTranslated}}
{{popup-input-tip validation=validation}}
</div>
</div>
@@ -0,0 +1,32 @@
<div class="modal-body">
<div class="radios">
<input type="radio" id="local" value="local" name="upload" {{action "useLocal"}}>
<label class="radio" for="local">{{i18n 'upload_selector.from_my_computer'}}</label>
{{#if local}}
<div class="inputs">
<input type="file" id="filename-input" multiple><br>
</div>
{{/if}}
</div>
<div class="radios">
<input type="radio" id="remote" value="remote" name="upload" {{action "useRemote"}}>
<label class="radio" for="remote">{{i18n 'upload_selector.from_the_web'}}</label>
{{#if remote}}
<div class="inputs">
{{input value=imageUrl placeholder="http://example.com/image.png"}}
</div>
{{/if}}
</div>
<div class="hint">
{{#if capabilities.canPasteImages}}
{{i18n 'upload_selector.hint'}}
{{else}}
{{i18n 'upload_selector.hint_for_supported_browsers'}}
{{/if}}
</div>
</div>

<div class="modal-footer">
{{d-button action="upload" class='btn-primary' icon=uploadIcon label='upload'}}
<a href {{action "closeModal"}}>{{i18n 'cancel'}}</a>
</div>
Expand Up @@ -30,7 +30,6 @@
docked=docked
maxIndex=maxIndex
index=index
showUploadSelector="showUploadSelector"
removeDocked="removeDocked"
updatedId="updateId"
onScreen="onScreen"}}
Expand Down

0 comments on commit b3b696b

Please sign in to comment.