diff --git a/ghost/admin/assets/lib/uploader.js b/ghost/admin/assets/lib/uploader.js index 06a81f4986..cca7c22044 100644 --- a/ghost/admin/assets/lib/uploader.js +++ b/ghost/admin/assets/lib/uploader.js @@ -3,11 +3,6 @@ "use strict"; var UploadUi, - $loader = '' + - '
Add image
' + - '' + - '' + - '', $progress = $('
', { "class" : "js-upload-progress progress progress-success active", "style": "opacity:0", @@ -33,11 +28,13 @@ $dropzone.find('.js-fileupload').fileupload().fileupload("option", { url: '/ghost/upload', 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') + $dropzone.find('span.media, div.description, a.image-url, a.image-webcam, div.js-fail, button.js-fail') .animate({opacity: 0}, 250, function () { if (settings.progressbar) { - $dropzone.find('span.media').after($progress); + $dropzone.find('div.js-fail').after($progress); $progress.animate({opacity: 100}, 250); } data.submit(); @@ -48,16 +45,11 @@ var progress = parseInt(data.loaded / data.total * 100, 10); if (!settings.editor) {$progress.find('div.js-progress').css({"position": "absolute", "top": "40px"}); } if (settings.progressbar) { + $dropzone.trigger("uploadprogress", [progress, data]); $progress.find('.js-upload-progress-bar').css('width', progress + '%'); - if (data.loaded / data.total === 1) { - $progress.animate({opacity: 0}, 250, function () { - $dropzone.find('span.media').after(''); - if (!settings.editor) {$progress.find('.fileupload-loading').css({"top": "56px"}); } - }); - } } - }, + done: function (e, data) { function showImage(width, height) { $dropzone.find('img.js-upload-target').attr({"width": width, "height": height}).css({"display": "block"}); @@ -83,19 +75,65 @@ }); } - function preloadImage() { + function failedImageUpload() { + $progress.find('.js-upload-progress-bar').addClass('fail'); + $dropzone.find('div.js-fail').animate({"opacity": 100}, 1500); + $dropzone.find('button.js-fail').animate({"opacity": 100}, 1500).on('click', function () { + $dropzone.css({minHeight: 0}); + if (source !== undefined && !$dropzone.find('a.js-return-image')[0]) { + console.log("source:", source); + $back.css({"opacity": 100}); + $dropzone.find('.js-upload-target').after($back); + } + self.removeExtras(); + self.init(); + }); + } + + function preLoadImage() { var $img = $dropzone.find('img.js-upload-target') .attr({'src': '', "width": 'auto', "height": 'auto'}); - $img.one('load', function () { animateDropzone($img); }) - .attr('src', data.result); + if (data.result === "Invalid filetype") { + $dropzone.trigger("uploadfailed", [data.result]); + failedImageUpload(); + } else { + $progress.animate({opacity: 0}, 250, function () { + $dropzone.find('span.media').after(''); + if (!settings.editor) {$progress.find('.fileupload-loading').css({"top": "56px"}); } + }); + $dropzone.trigger("uploadsuccess", [data.result]); + $img.one('load', function () { animateDropzone($img); }) + .attr('src', data.result); + } } - preloadImage(); + preLoadImage(); } }); }, + buildExtras: function () { + if (!$dropzone.find('span.media')[0]) { + $dropzone.prepend(''); + } + if (!$dropzone.find('div.description')[0]) { + $dropzone.append('
Add image
'); + } + if (!$dropzone.find('div.js-fail')[0]) { + $dropzone.append('
Something went wrong :(
'); + } + if (!$dropzone.find('button.js-fail')[0]) { + $dropzone.append(''); + } + if (!$dropzone.find('a.image-url')[0]) { + $dropzone.append(''); + } + if (!$dropzone.find('a.image-webcam')[0]) { + $dropzone.append(''); + } + }, + removeExtras: function () { - $dropzone.find('div.description, span.media, div.js-upload-progress, a.image-url, a.image-webcam') + $dropzone.find('div.description, span.media, div.js-upload-progress, a.image-url, a.image-webcam, div.js-fail, button.js-fail') .remove(); }, @@ -104,12 +142,10 @@ //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'); - if (!$dropzone.find('span.media')[0]) { - $dropzone.append($loader); - } - if ($dropzone.find('a.js-edit-image')[0]) { - $dropzone.find('a.js-edit-image').remove(); - } + + this.buildExtras(); + + $dropzone.find('a.js-edit-image').remove(); $back.on('click', function () { $dropzone.find('a.js-return-image').remove(); @@ -142,18 +178,16 @@ }, init: function () { - var img; // First check if field image is defined by checking for js-upload-target class - if ($dropzone.find('img.js-upload-target')[0]) { - if ($dropzone.find('img.js-upload-target').attr('src') === '') { - this.initWithDropzone(); - } else { - this.initWithImage(); - } - } else { + if (!$dropzone.find('img.js-upload-target')[0]) { // This ensures there is an image we can hook into to display uploaded image $dropzone.prepend(''); - this.init(); + } + + if ($dropzone.find('img.js-upload-target').attr('src') === '') { + this.initWithDropzone(); + } else { + this.initWithImage(); } } }); @@ -162,9 +196,9 @@ $.fn.upload = function (options) { var settings = $.extend({ - progressbar: true, - editor: false - }, options); + progressbar: true, + editor: false + }, options); return this.each(function () { var $dropzone = $(this), diff --git a/ghost/admin/assets/sass/modules/global.scss b/ghost/admin/assets/sass/modules/global.scss index d3d1048346..e1a747092f 100644 --- a/ghost/admin/assets/sass/modules/global.scss +++ b/ghost/admin/assets/sass/modules/global.scss @@ -1142,6 +1142,14 @@ main { color: $brown; text-decoration: none; } + .button-add { + display: inline-block; + position:relative; + z-index: 700; + color: #fff; + padding-left:5px; + } + .image-edit { line-height: 12px; padding: 10px; @@ -1163,7 +1171,6 @@ main { right: 0; color: $brown; text-decoration: none; - } input { @@ -1199,11 +1206,21 @@ main { background-size: contain; } + .failed { + position: relative; + top: -40px; + font-size: 16px; + } .bar { height: 12px; background: $blue; + + &.fail { + background: $orange; + } } } + .pre-image-uploader { @include box-sizing(border-box); @include baseline; @@ -1231,35 +1248,6 @@ main { } - - - -//.progress { -// position: relative; -// top: -39px; -// margin: auto; -// margin-bottom: -12px; -// display: block; -// overflow: hidden; -// @include linear-gradient(to bottom, #f5f5f5, #f9f9f9); -// border-radius: 12px; -// box-shadow: (rgba(0,0,0,0.1) 0 1px 2px inset); -//} -// -//.fileupload-loading { -// display: block; -// top: 50%; -// width: 35px; -// height: 28px; -// margin: -28px auto 0; -// background-size: contain; -//} -// -//.bar { -// height: 12px; -// background: $blue; -//} - /* ========================================================================== Misc ========================================================================== */ diff --git a/ghost/admin/assets/vendor/showdown/extensions/ghostdown.js b/ghost/admin/assets/vendor/showdown/extensions/ghostdown.js index 984c044974..94f42b94f1 100644 --- a/ghost/admin/assets/vendor/showdown/extensions/ghostdown.js +++ b/ghost/admin/assets/vendor/showdown/extensions/ghostdown.js @@ -7,13 +7,8 @@ filter: function (source) { return source.replace(/\n?!(?:image)?\[([^\n\]]*)\](?:\(([^\n\)]*)\))?/gi, function (match, alt, a) { return '
' + - '' + '
Add image of ' + alt + '
' + - '' + '' + - '' + - '' + - '' + '
'; }); }