Skip to content

Commit

Permalink
Adds modal Image uploader on settings page
Browse files Browse the repository at this point in the history 
issue TryGhost#432

adds a modal template for image uploads
adds buttons to settings page to upload images for blog logo and icon
once image is uploaded displays an 'X' to reset back to dropzone
saves image and renders settings page.

ToDo

add url field when clicking on url icon

fix position of 'X' for both settings and editor
  • Loading branch information
@cobbspur
cobbspur committed Sep 4, 2013
1 parent 362cd42 commit e61f368
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 71 deletions.
50 changes: 10 additions & 40 deletions core/client/assets/lib/uploader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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});
Expand All @@ -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();
Expand All @@ -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();
});
Expand Down Expand Up @@ -128,26 +116,16 @@
},

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 () {
var self = this;
//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();
},

Expand All @@ -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();
});
},

Expand Down
4 changes: 4 additions & 0 deletions core/client/assets/sass/layouts/settings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,10 @@
margin-left: 15px;
}

img {
max-width: 100%;
}

display: none;
&.active {display:block;}

Expand Down
45 changes: 24 additions & 21 deletions core/client/assets/sass/modules/global.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1251,7 +1239,7 @@ main {
@include box-sizing(border-box);
@include baseline;
position: relative;
overflow:hidden;
overflow: hidden;
height: auto;
color: $brown;

Expand All @@ -1260,16 +1248,31 @@ main {
left: 9999px;
opacity: 0;
}
.image-edit {
a {
z-index: 10000;
color: $brown;
text-decoration: none;

line-height: 12px;
padding: 10px;
display: block;
&:hover {
color: $darkgrey;
}
}
img {
max-width: 100%;
}
.image-cancel {
@include icon($i-x, 16px);
position: absolute;
top: 0;
left: 0;
opacity: 0;
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;
}
}
}

Expand Down
4 changes: 4 additions & 0 deletions core/client/tpl/modals/uploadImage.hbs
View file
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 11 additions & 8 deletions core/client/tpl/settings/general.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
57 changes: 55 additions & 2 deletions core/client/views/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand All @@ -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 () {
Expand Down

0 comments on commit e61f368

Please sign in to comment.