Merge pull request #797 from cobbspur/uploadurl

core/client/assets/lib/uploader.js

@@ -7,6 +7,7 @@
 
     UploadUi = function ($dropzone, settings) {
         var source,
+            $url = '<div class="js-url"><input id="uploadurl" class="url" type="url" placeholder="http://"/></div>',
             $cancel = '<a class="image-cancel js-cancel"><span class="hidden">Delete</span></a>',
             $progress =  $('<div />', {
                 "class" : "js-upload-progress progress progress-success active",
@@ -19,12 +20,56 @@
             }));
 
         $.extend(this, {
+            complete: function (result) {
+                var self = this;
+
+                $dropzone.trigger("uploadsuccess", [result, $dropzone.attr('id')]);
+
+                function showImage(width, height) {
+                    $dropzone.find('img.js-upload-target').attr({"width": width, "height": height}).css({"display": "block"});
+                    $dropzone.find('.fileupload-loading').remove();
+                    $dropzone.css({"height": "auto"});
+                    $dropzone.delay(250).animate({opacity: 100}, 1000, function () {
+                        self.init();
+                    });
+                }
+
+                function animateDropzone($img) {
+                    $dropzone.animate({opacity: 0}, 250, function () {
+                        $dropzone.removeClass('image-uploader').addClass('pre-image-uploader');
+                        $dropzone.css({minHeight: 0});
+                        self.removeExtras();
+                        $dropzone.animate({height: $img.height()}, 250, function () {
+                            showImage($img.width(), $img.height());
+                        });
+                    });
+                }
+
+                function preLoadImage() {
+                    var $img = $dropzone.find('img.js-upload-target')
+                        .attr({'src': '', "width": 'auto', "height": 'auto'});
+
+                    $progress.animate({"opacity": 0}, 250, function () {
+                        $dropzone.find('span.media').after('<img class="fileupload-loading"  src="/public/img/loadingcat.gif" />');
+                        if (!settings.editor) {$progress.find('.fileupload-loading').css({"top": "56px"}); }
+                    });
+                    $dropzone.trigger("uploadsuccess", [result]);
+                    $img.one('load', function () {
+                        animateDropzone($img);
+                    }).attr('src', result);
+                }
+                preLoadImage();
+
+            },
+
             bindFileUpload: function () {
                 var self = this;
 
                 $dropzone.find('.js-fileupload').fileupload().fileupload("option", {
                     url: '/ghost/upload/',
                     add: function (e, data) {
+                        $dropzone.find('.js-fileupload').removeClass('right');
+                        $dropzone.find('.js-url, button.centre').remove();
                         $progress.find('.js-upload-progress-bar').removeClass('fail');
                         $dropzone.trigger('uploadstart', [$dropzone.attr('id')]);
                         $dropzone.find('span.media, div.description, a.image-url, a.image-webcam')
@@ -58,40 +103,7 @@
                         });
                     },
                     done: function (e, data) {
-                        $dropzone.trigger("uploadsuccess", [data.result, $dropzone.attr('id')]);
+                        self.complete(data.result);
-
-                        function showImage(width, height) {
-                            $dropzone.find('img.js-upload-target').attr({"width": width, "height": height}).css({"display": "block"});
-                            $dropzone.find('.fileupload-loading').remove();
-                            $dropzone.css({"height": "auto"});
-                            $dropzone.delay(250).animate({opacity: 100}, 1000, function () {
-                                self.init();
-                            });
-                        }
-
-                        function animateDropzone($img) {
-                            $dropzone.animate({opacity: 0}, 250, function () {
-                                $dropzone.removeClass('image-uploader').addClass('pre-image-uploader');
-                                $dropzone.css({minHeight: 0});
-                                self.removeExtras();
-                                $dropzone.animate({height: $img.height()}, 250, function () {
-                                    showImage($img.width(), $img.height());
-                                });
-                            });
-                        }
-
-                        function preLoadImage() {
-                            var $img = $dropzone.find('img.js-upload-target')
-                                .attr({'src': '', "width": 'auto', "height": 'auto'});
-
-                            $progress.animate({"opacity": 0}, 250, function () {
-                                $dropzone.find('span.media').after('<img class="fileupload-loading"  src="/public/img/loadingcat.gif" />');
-                                if (!settings.editor) {$progress.find('.fileupload-loading').css({"top": "56px"}); }
-                            });
-                            $img.one('load', function () { animateDropzone($img); })
-                                .attr('src', data.result);
-                        }
-                        preLoadImage();
                     }
                 });
             },
@@ -112,9 +124,9 @@
                 if (!$dropzone.find('a.image-url')[0]) {
                     $dropzone.append('<a class="image-url" title="Add image from URL"><span class="hidden">URL</span></a>');
                 }
-                if (!$dropzone.find('a.image-webcam')[0]) {
+//                if (!$dropzone.find('a.image-webcam')[0]) {
-                    $dropzone.append('<a class="image-webcam" title="Add image from webcam"><span class="hidden">Webcam</span></a>');
+//                    $dropzone.append('<a class="image-webcam" title="Add image from webcam"><span class="hidden">Webcam</span></a>');
-                }
+//                }
             },
 
             removeExtras: function () {
@@ -129,8 +141,36 @@
                 this.removeExtras();
                 this.buildExtras();
                 this.bindFileUpload();
+                $dropzone.find('a.image-url').on('click', function () {
+                    self.initUrl();
+                });
             },
+            initUrl: function () {
+                var self = this, val;
+                this.removeExtras();
+                $dropzone.find('.js-fileupload').addClass('right');
+                $dropzone.append($cancel);
+                $dropzone.find('.js-cancel').on('click', function () {
+                    $dropzone.find('.js-url').remove();
+                    $dropzone.find('.js-fileupload').removeClass('right');
+                    $dropzone.find('button.centre').remove();
+                    self.removeExtras();
+                    self.initWithDropzone();
+                });
+                if (settings.editor) {
+                    $dropzone.find('div.description').after('<button class="js-button-accept button-save centre">Save</button>');
+                }
+                $dropzone.find('div.description').before($url);
 
+                $dropzone.find('.js-button-accept').on('click', function () {
+                    $dropzone.find('div.description').hide();
+                    val = $('#uploadurl').val();
+                    $dropzone.find('.js-fileupload').removeClass('right');
+                    $dropzone.find('.js-url').remove();
+                    $dropzone.find('button.centre').remove();
+                    self.complete(val);
+                });
+            },
             initWithImage: function () {
                 var self = this;
                 // This is the start point if an image already exists

core/client/assets/sass/modules/global.scss

@@ -1235,7 +1235,15 @@ main {
             color: $darkgrey;
         }
     }
-
+    .description {
+        margin-top: 10px;
+        margin-bottom: -40px;
+    }
+    .centre{
+        position: relative;
+        top: 50px;
+        margin-bottom: -6px;
+    }
     .media {
         @include icon($i-image, 60px, darken($lightbrown, 3%)) {
             display:inline-block;
@@ -1273,19 +1281,53 @@ main {
         color: $brown;
         text-decoration: none;
     }
-
+    .image-cancel {
-    input {
+        @include icon($i-x, 16px);
         position: absolute;
-        right: 0;
+        color: white;
-        margin: 0;
+        text-shadow: rgba(0,0,0,0.3) 0 0 3px;
-        opacity: 0;
+        top: 10px;
-        @include transform-origin(right);
+        right: 10px;
-        @include transform( scale(14));
+        text-decoration: none;
-        font-size: 23px;
-        direction: ltr;
-        cursor: pointer;
-    }
 
+        &:hover {
+            cursor: pointer;
+            color: white;
+        }
+    }
+    input {
+        &.main{
+            position: absolute;
+            right: 0;
+            margin: 0;
+            opacity: 0;
+            @include transform-origin(right);
+            @include transform( scale(14));
+            font-size: 23px;
+            direction: ltr;
+            cursor: pointer;
+            &.right {
+                position: relative;
+                right: 9999px;
+            }
+        }
+        &.url{
+            font: -webkit-small-control;
+            box-sizing: border-box;
+            width: 276px;
+            padding: 5px 7px;
+            margin: 0;
+            margin-top: -10px;
+            margin-bottom: -1px; outline: 0;
+            font-size: 1.1em;
+            line-height: 1.4em;
+            background: #fff;
+            border: #e3e1d5 1px solid;
+            border-radius: 4px;
+            -webkit-transition: all 0.15s ease-in-out;
+            -moz-transition: all 0.15s ease-in-out;
+        }
+    }
     .progress {
         position: relative;
         top: -22px;
@@ -1321,7 +1363,6 @@ main {
         }
     }
 }
-
 .pre-image-uploader {
     @include box-sizing(border-box);
     @include baseline;

core/client/assets/vendor/showdown/extensions/ghostdown.js

@@ -18,7 +18,7 @@
                         }
                         return '<section id="image_upload_' + key + '" class="js-drop-zone image-uploader">' + result +
                                '<div class="description">Add image of <strong>' + alt + '</strong></div>' +
-                               '<input data-url="upload" class="js-fileupload fileupload" type="file" name="uploadimage">' +
+                               '<input data-url="upload" class="js-fileupload main fileupload" type="file" name="uploadimage">' +
                                '</section>';
                     });
                 }

core/client/tpl/modals/uploadImage.hbs

@@ -1,4 +1,4 @@
 <section class="js-drop-zone">
     <img 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">
+    <input data-url="upload" class="js-fileupload main" type="file" name="uploadimage">
 </section>

core/client/views/settings.js

@@ -202,7 +202,12 @@
             var self = this, upload = new Ghost.Models.uploadModal({'key': key, 'src': src, 'accept': {
                 func: function () { // The function called on acceptance
                     var data = {};
-                    data[key] = this.$('.js-upload-target').attr('src');
+                    if (this.$('#uploadurl').val()) {
+                        data[key] = this.$('#uploadurl').val();
+                    } else {
+                        data[key] = this.$('.js-upload-target').attr('src');
+                    }
+
                     self.model.save(data, {
                         success: self.saveSuccess,
                         error: self.saveError
@@ -254,7 +259,11 @@
             var self = this, upload = new Ghost.Models.uploadModal({'key': key, 'src': src, 'accept': {
                 func: function () { // The function called on acceptance
                     var data = {};
-                    data[key] = this.$('.js-upload-target').attr('src');
+                    if (this.$('#uploadurl').val()) {
+                        data[key] = this.$('#uploadurl').val();
+                    } else {
+                        data[key] = this.$('.js-upload-target').attr('src');
+                    }
                     self.model.save(data, {
                         success: self.saveSuccess,
                         error: self.saveError