FEATURE: create hyperlinked images from the image insertion dialog

This commit is contained in:
Régis Hanol 2014-03-31 18:18:39 +02:00
parent d84b2b5117
commit 7e33834afe
5 changed files with 32 additions and 7 deletions

View File

@ -10,10 +10,14 @@
Discourse.UploadSelectorController = Discourse.Controller.extend(Discourse.ModalFunctionality, { Discourse.UploadSelectorController = Discourse.Controller.extend(Discourse.ModalFunctionality, {
remote: Em.computed.not("local"), remote: Em.computed.not("local"),
local: false, local: false,
showMore: false,
init: function() { init: function() {
this._super(); this._super();
this.set("local", this.get("allowLocal")); this.setProperties({
local: this.get("allowLocal"),
showMore: false
});
}, },
allowLocal: function() { allowLocal: function() {
@ -21,8 +25,9 @@ Discourse.UploadSelectorController = Discourse.Controller.extend(Discourse.Modal
}.property(), }.property(),
actions: { actions: {
useLocal: function() { this.set("local", true); }, useLocal: function() { this.setProperties({ local: true, showMore: false}); },
useRemote: function() { this.set("local", false); } useRemote: function() { this.set("local", false); },
toggleShowMore: function() { this.toggleProperty("showMore"); }
} }
}); });

View File

@ -16,11 +16,19 @@
<label class="radio" for="remote">{{i18n upload_selector.from_the_web}}</label> <label class="radio" for="remote">{{i18n upload_selector.from_the_web}}</label>
{{#if remote}} {{#if remote}}
<div class="inputs"> <div class="inputs">
<input type="text" id="fileurl-input"><br> <input type="text" id="fileurl-input" placeholder="http://example.com/image.png"><br>
<span class="description">{{unbound view.tip}}</span> <span class="description">{{unbound view.tip}}</span>
</div> </div>
{{/if}} {{/if}}
</div> </div>
{{#if showMore}}
<div class="radios">
<div class="inputs">
<input type="text" id="link-input" placeholder="http://example.com"><br>
<span class="description">{{i18n upload_selector.image_link}}</span>
</div>
</div>
{{/if}}
<div class="radios"> <div class="radios">
<div class="inputs"> <div class="inputs">
<p class="hint">{{unbound view.hint}}</p> <p class="hint">{{unbound view.hint}}</p>
@ -34,4 +42,5 @@
{{i18n upload}} {{i18n upload}}
</button> </button>
<a {{action closeModal}}>{{i18n cancel}}</a> <a {{action closeModal}}>{{i18n cancel}}</a>
{{#if remote}}<a {{action toggleShowMore}} class="pull-right">{{i18n show_more}}</a>{{/if}}
</div> </div>

View File

@ -47,7 +47,14 @@ Discourse.UploadSelectorView = Discourse.ModalBodyView.extend({
if (this.get("controller.local")) { if (this.get("controller.local")) {
$('#reply-control').fileupload('add', { fileInput: $('#filename-input') }); $('#reply-control').fileupload('add', { fileInput: $('#filename-input') });
} else { } else {
this.get('controller.composerView').addMarkdown($('#fileurl-input').val()); var imageUrl = $('#fileurl-input').val();
var imageLink = $('#link-input').val();
var composerView = this.get('controller.composerView');
if (this.get("controller.showMore") && imageLink.length > 3) {
composerView.addMarkdown("<a href='" + imageLink + "'>\n <img src='" + imageUrl + "'>\n</a>");
} else {
composerView.addMarkdown(imageUrl);
}
this.get('controller').send('closeModal'); this.get('controller').send('closeModal');
} }
} }

View File

@ -19,7 +19,7 @@
padding-left: 10px; padding-left: 10px;
} }
.radios { .radios {
margin: 0 0 25px 0; height: 60px;
.inputs { .inputs {
float: right; float: right;
width: 75%; width: 75%;
@ -40,4 +40,7 @@
} }
} }
} }
.radios:last-child {
height: 20px;
}
} }

View File

@ -611,6 +611,7 @@ en:
hint: "(you can also drag & drop into the editor to upload them)" hint: "(you can also drag & drop into the editor to upload them)"
hint_for_chrome: "(you can also drag and drop or paste images into the editor to upload them)" hint_for_chrome: "(you can also drag and drop or paste images into the editor to upload them)"
uploading: "Uploading" uploading: "Uploading"
image_link: "enter the link you want your image to point to"
search: search:
title: "search for topics, posts, users, or categories" title: "search for topics, posts, users, or categories"