mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
Merge pull request #617 from cobbspur/dropzone2
Adds modal Image uploader on settings page
This commit is contained in:
Hannah Wolfe
commit
6cb7252978
@ -7,19 +7,16 @@
|
||||
|
||||
UploadUi = function ($dropzone, settings) {
|
||||
var source,
|
||||
$link = $('<a class="js-edit-image image-edit" href="#" >' +
|
||||
'<img src="/public/assets/img/add-image.png" width="16" height="16" alt="add, edit"></a>'),
|
||||
$back = $('<a class="js-return-image image-edit" href="#" >' +
|
||||
'<img src="/public/assets/img/return-image.png" width="16" height="16" alt="add, edit"></a>'),
|
||||
$cancel = '<a class="image-cancel js-cancel"><span class="hidden">Delete</span></a>',
|
||||
$progress = $('<div />', {
|
||||
"class" : "js-upload-progress progress progress-success active",
|
||||
"role": "progressbar",
|
||||
"aria-valuemin": "0",
|
||||
"aria-valuemax": "100"
|
||||
}).append($("<div />", {
|
||||
"class": "js-upload-progress-bar bar",
|
||||
"style": "width:0%"
|
||||
}));
|
||||
"class": "js-upload-progress-bar bar",
|
||||
"style": "width:0%"
|
||||
}));
|
||||
|
||||
$.extend(this, {
|
||||
bindFileUpload: function () {
|
||||
@ -30,7 +27,6 @@
|
||||
add: function (e, data) {
|
||||
$progress.find('.js-upload-progress-bar').removeClass('fail');
|
||||
$dropzone.trigger('uploadstart');
|
||||
$dropzone.find('a.js-return-image').remove();
|
||||
$dropzone.find('span.media, div.description, a.image-url, a.image-webcam')
|
||||
.animate({opacity: 0}, 250, function () {
|
||||
$dropzone.find('div.description').hide().css({"opacity": 100});
|
||||
@ -55,10 +51,6 @@
|
||||
$dropzone.find('div.js-fail, button.js-fail').fadeIn(1500);
|
||||
$dropzone.find('button.js-fail').on('click', function () {
|
||||
$dropzone.css({minHeight: 0});
|
||||
if (source !== undefined && !$dropzone.find('a.js-return-image')[0]) {
|
||||
$back.css({"opacity": 100});
|
||||
$dropzone.find('.js-upload-target').after($back);
|
||||
}
|
||||
$dropzone.find('div.description').show();
|
||||
self.removeExtras();
|
||||
self.init();
|
||||
@ -69,10 +61,6 @@
|
||||
$dropzone.find('img.js-upload-target').attr({"width": width, "height": height}).css({"display": "block"});
|
||||
$dropzone.find('.fileupload-loading').removeClass('fileupload-loading');
|
||||
$dropzone.css({"height": "auto"});
|
||||
if (!$dropzone.find('a.js-edit-image')[0]) {
|
||||
$link.css({"opacity": 100});
|
||||
$dropzone.find('.js-upload-target').after($link);
|
||||
}
|
||||
$dropzone.delay(250).animate({opacity: 100}, 1000, function () {
|
||||
self.init();
|
||||
});
|
||||
@ -128,7 +116,7 @@
|
||||
},
|
||||
|
||||
removeExtras: function () {
|
||||
$dropzone.find('span.media, div.js-upload-progress, a.image-url, a.image-webcam, div.js-fail, button.js-fail').remove();
|
||||
$dropzone.find('span.media, div.js-upload-progress, a.image-url, a.image-webcam, div.js-fail, button.js-fail, a.js-cancel').remove();
|
||||
},
|
||||
|
||||
initWithDropzone: function () {
|
||||
@ -136,18 +124,8 @@
|
||||
//This is the start point if no image exists
|
||||
$dropzone.find('img.js-upload-target').css({"display": "none"});
|
||||
$dropzone.removeClass('pre-image-uploader').addClass('image-uploader');
|
||||
|
||||
this.removeExtras();
|
||||
this.buildExtras();
|
||||
|
||||
$dropzone.find('a.js-edit-image').remove();
|
||||
|
||||
$back.on('click', function () {
|
||||
$dropzone.find('a.js-return-image').remove();
|
||||
$dropzone.find('img.js-upload-target').attr({"src": source}).css({"display": "block"});
|
||||
self.removeExtras();
|
||||
$dropzone.removeClass('image-uploader').addClass('pre-image-uploader');
|
||||
self.init();
|
||||
});
|
||||
this.bindFileUpload();
|
||||
},
|
||||
|
||||
@ -157,19 +135,11 @@
|
||||
source = $dropzone.find('img.js-upload-target').attr('src');
|
||||
$dropzone.removeClass('image-uploader').addClass('pre-image-uploader');
|
||||
$dropzone.find('div.description').hide();
|
||||
|
||||
if (!$dropzone.find('a.js-edit-image')[0]) {
|
||||
$link.css({"opacity": 100});
|
||||
$dropzone.find('.js-upload-target').after($link);
|
||||
}
|
||||
|
||||
$link.on('click', function () {
|
||||
$dropzone.find('a.js-edit-image').remove();
|
||||
$dropzone.find('img.js-upload-target').attr({"src": ""}).css({"display": "none"});
|
||||
$back.css({"cursor": "pointer", "z-index": 9999, "opacity": 100});
|
||||
$dropzone.find('.js-upload-target').after($back);
|
||||
$dropzone.append($cancel);
|
||||
$dropzone.find('.js-cancel').on('click', function () {
|
||||
$dropzone.find('img.js-upload-target').attr({'src': ''});
|
||||
$dropzone.find('div.description').show();
|
||||
self.init();
|
||||
self.initWithDropzone();
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
@ -172,6 +172,10 @@
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
display: none;
|
||||
&.active {display:block;}
|
||||
|
||||
|
||||
@ -1015,13 +1015,12 @@ body.blur > *:not(#modal-container) {
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.modal-style-wide {
|
||||
@ -1176,17 +1175,6 @@ main {
|
||||
padding-left:5px;
|
||||
}
|
||||
|
||||
.image-edit {
|
||||
line-height: 12px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.image-webcam {
|
||||
@include icon($i-camera, 12px);
|
||||
line-height: 12px;
|
||||
@ -1251,7 +1239,7 @@ main {
|
||||
@include box-sizing(border-box);
|
||||
@include baseline;
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
overflow: hidden;
|
||||
height: auto;
|
||||
color: $brown;
|
||||
|
||||
@ -1260,16 +1248,31 @@ main {
|
||||
left: 9999px;
|
||||
opacity: 0;
|
||||
}
|
||||
.image-edit {
|
||||
|
||||
line-height: 12px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
a {
|
||||
z-index: 10000;
|
||||
color: $brown;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $darkgrey;
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.image-cancel {
|
||||
@include icon($i-x, 16px);
|
||||
position: absolute;
|
||||
color: white;
|
||||
text-shadow: rgba(0,0,0,0.5) 0 0 1px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
4
core/client/tpl/modals/uploadImage.hbs
Normal file
4
core/client/tpl/modals/uploadImage.hbs
Normal file
@ -0,0 +1,4 @@
|
||||
<section class="js-drop-zone">
|
||||
<img id="{{options.val}}" class="js-upload-target" src="{{options.src}}"{{#unless options.src}} style="display: none"{{/unless}} alt="logo">
|
||||
<input data-url="upload" class="js-fileupload" type="file" name="uploadimage">
|
||||
</section>
|
||||
@ -15,19 +15,22 @@
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Logo</strong></label>
|
||||
<section class="js-drop-zone">
|
||||
<img id="logo" class="js-upload-target" src="{{logo}}"{{#unless logo}} style="display: none"{{/unless}} alt="logo">
|
||||
<input data-url="upload" class="js-fileupload" type="file" name="uploadimage">
|
||||
</section>
|
||||
{{#if logo}}
|
||||
<a class="js-modal-logo"><img src="{{logo}}" alt="logo"></a>
|
||||
{{else}}
|
||||
<a class="button-add js-modal-logo" href="#">Upload Image</a>
|
||||
{{/if}}
|
||||
<p>Display a logo on your site in place of blog title</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label><strong>Blog Icon</strong></label>
|
||||
<section class="js-drop-zone">
|
||||
<img id="icon" class="js-upload-target" src="{{icon}}"{{#unless icon}} style="display: none"{{/unless}} style="display: none" alt="icon">
|
||||
<input data-url="upload" class="js-fileupload" type="file" name="uploadimage">
|
||||
</section>
|
||||
{{#if icon}}
|
||||
<a class="js-modal-icon"><img src="{{icon}}" alt="icon"></a>
|
||||
{{else}}
|
||||
<a class="button-add js-modal-icon" href="#">Upload Image</a>
|
||||
{{/if}}
|
||||
|
||||
<p>The icon for your blog, used in your browser tab and elsewhere</p>
|
||||
</div>
|
||||
|
||||
|
||||
@ -151,7 +151,9 @@
|
||||
id: "general",
|
||||
|
||||
events: {
|
||||
'click .button-save': 'saveSettings'
|
||||
'click .button-save': 'saveSettings',
|
||||
'click .js-modal-logo': 'showLogo',
|
||||
'click .js-modal-icon': 'showIcon'
|
||||
},
|
||||
|
||||
saveSettings: function () {
|
||||
@ -169,7 +171,58 @@
|
||||
});
|
||||
this.model.set({availableThemes: themes});
|
||||
},
|
||||
|
||||
showLogo: function () {
|
||||
var settings = this.model.toJSON();
|
||||
this.showUpload('#logo', 'logo', settings.logo);
|
||||
},
|
||||
showIcon: function () {
|
||||
var settings = this.model.toJSON();
|
||||
this.showUpload('#icon', 'icon', settings.icon);
|
||||
},
|
||||
showUpload: function (id, key, src) {
|
||||
var self = this;
|
||||
this.addSubview(new Ghost.Views.Modal({
|
||||
model: {
|
||||
options: {
|
||||
close: false,
|
||||
type: "action",
|
||||
style: "wide",
|
||||
animation: 'fadeIn',
|
||||
afterRender: function () {
|
||||
this.$('.js-drop-zone').upload();
|
||||
},
|
||||
confirm: {
|
||||
accept: {
|
||||
func: function () { // The function called on acceptance
|
||||
var data = {};
|
||||
data[key] = this.$('.js-upload-target').attr('src');
|
||||
self.model.save(data, {
|
||||
success: self.saveSuccess,
|
||||
error: self.saveError
|
||||
});
|
||||
self.render();
|
||||
return true;
|
||||
},
|
||||
buttonClass: "button-save right",
|
||||
text: "Save" // The accept button text
|
||||
},
|
||||
reject: {
|
||||
func: function () { // The function called on rejection
|
||||
return true;
|
||||
},
|
||||
buttonClass: true,
|
||||
text: "Cancel" // The reject button text
|
||||
}
|
||||
},
|
||||
id: id,
|
||||
src: src
|
||||
},
|
||||
content: {
|
||||
template: 'uploadImage'
|
||||
}
|
||||
}
|
||||
}));
|
||||
},
|
||||
templateName: 'settings/general',
|
||||
|
||||
beforeRender: function () {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user