From 53a217826a5260ff8e4bd53f1e5ede5b09a4ac37 Mon Sep 17 00:00:00 2001 From: Federico Torresan Date: Wed, 25 Mar 2020 17:14:14 +0100 Subject: [PATCH 1/3] feat: Added error messages on fileupload failed feat: Added option for personalization of input name and server response fix: Fix serialization when images not fully uploaded --- .../medium-editor-insert-plugin-frontend.css | 12 +++- ...dium-editor-insert-plugin-frontend.min.css | 2 +- dist/css/medium-editor-insert-plugin.css | 12 +++- dist/css/medium-editor-insert-plugin.min.css | 2 +- dist/js/medium-editor-insert-plugin.js | 60 +++++++++++++++++-- dist/js/medium-editor-insert-plugin.min.js | 2 +- package-lock.json | 2 +- src/js/core.js | 3 + src/js/images.js | 35 ++++++++++- src/js/templates.js | 22 ++++++- src/js/templates/images-error.hbs | 1 + src/js/templates/images-fileupload.hbs | 2 +- .../medium-editor-insert-plugin-frontend.scss | 11 ++++ 13 files changed, 149 insertions(+), 17 deletions(-) create mode 100644 src/js/templates/images-error.hbs diff --git a/dist/css/medium-editor-insert-plugin-frontend.css b/dist/css/medium-editor-insert-plugin-frontend.css index e1aab8c08..632f612f0 100644 --- a/dist/css/medium-editor-insert-plugin-frontend.css +++ b/dist/css/medium-editor-insert-plugin-frontend.css @@ -8,7 +8,8 @@ */ .medium-insert-images, .mediumInsert { - text-align: center; } + text-align: center; + position: relative; } .medium-insert-images figure, .mediumInsert figure { margin: 0; display: block; } @@ -42,6 +43,15 @@ .medium-insert-images.medium-insert-images-grid figure img, .medium-insert-images-grid.mediumInsert figure img { max-width: calc(100% - 1em); margin: 0.5em; } + .medium-insert-images .medium-editor-insert-error, .mediumInsert .medium-editor-insert-error { + color: #FFF; + text-transform: uppercase; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); } .medium-insert-embeds, .mediumInsert-embeds { text-align: center; diff --git a/dist/css/medium-editor-insert-plugin-frontend.min.css b/dist/css/medium-editor-insert-plugin-frontend.min.css index 4036c0f52..6326a7be0 100644 --- a/dist/css/medium-editor-insert-plugin-frontend.min.css +++ b/dist/css/medium-editor-insert-plugin-frontend.min.css @@ -7,4 +7,4 @@ * Released under the MIT license */ -.medium-insert-images,.mediumInsert{text-align:center}.medium-insert-images figure,.mediumInsert figure{margin:0;display:block}.medium-insert-images figure img,.mediumInsert figure img{max-width:100%;margin-top:1em;vertical-align:top}.medium-insert-images figure:first-child img,.mediumInsert figure:first-child img{margin-top:0}.medium-insert-images-left.mediumInsert,.medium-insert-images.medium-insert-images-left,.mediumInsert.small{max-width:33.33%;float:left;margin:0 30px 20px 0}.medium-insert-images-right.mediumInsert,.medium-insert-images.medium-insert-images-right{max-width:33.33%;float:right;margin:0 0 20px 30px}.medium-insert-images-grid.mediumInsert,.medium-insert-images.medium-insert-images-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;margin:.5em -.5em}.medium-insert-images-grid.mediumInsert figure,.medium-insert-images.medium-insert-images-grid figure{width:33.33%;display:inline-block}.medium-insert-images-grid.mediumInsert figure img,.medium-insert-images.medium-insert-images-grid figure img{max-width:calc(100% - 1em);margin:.5em}.medium-insert-embeds,.mediumInsert-embeds{text-align:center;margin:1em 0;position:relative}.medium-insert-embeds div,.medium-insert-embeds iframe,.mediumInsert-embeds div,.mediumInsert-embeds iframe{margin:0 auto!important}.medium-insert-embeds-left.mediumInsert-embeds,.medium-insert-embeds.medium-insert-embeds-left{width:33.33%;float:left;margin:0 30px 20px 0}.medium-insert-embeds-right.mediumInsert-embeds,.medium-insert-embeds.medium-insert-embeds-right{width:33.33%;float:right;margin:0 0 20px 30px}.medium-insert-embeds figure,.medium-insert-images figure,.mediumInsert figure,.mediumInsert-embeds figure{position:relative}.medium-insert-embeds figure figcaption,.medium-insert-images figure figcaption,.mediumInsert figure figcaption,.mediumInsert-embeds figure figcaption{position:relative;z-index:1;display:block;text-align:center;margin:10px 0;color:#ccc;font-size:.8em;font-style:italic;outline:0 solid transparent}.medium-insert-embeds figure figcaption:focus,.medium-insert-images figure figcaption:focus,.mediumInsert figure figcaption:focus,.mediumInsert-embeds figure figcaption:focus{outline:0 solid transparent} \ No newline at end of file +.medium-insert-images,.mediumInsert{text-align:center;position:relative}.medium-insert-images figure,.mediumInsert figure{margin:0;display:block}.medium-insert-images figure img,.mediumInsert figure img{max-width:100%;margin-top:1em;vertical-align:top}.medium-insert-images figure:first-child img,.mediumInsert figure:first-child img{margin-top:0}.medium-insert-images-left.mediumInsert,.medium-insert-images.medium-insert-images-left,.mediumInsert.small{max-width:33.33%;float:left;margin:0 30px 20px 0}.medium-insert-images-right.mediumInsert,.medium-insert-images.medium-insert-images-right{max-width:33.33%;float:right;margin:0 0 20px 30px}.medium-insert-images-grid.mediumInsert,.medium-insert-images.medium-insert-images-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;margin:.5em -.5em}.medium-insert-images-grid.mediumInsert figure,.medium-insert-images.medium-insert-images-grid figure{width:33.33%;display:inline-block}.medium-insert-images-grid.mediumInsert figure img,.medium-insert-images.medium-insert-images-grid figure img{max-width:calc(100% - 1em);margin:.5em}.medium-insert-images .medium-editor-insert-error,.mediumInsert .medium-editor-insert-error{color:#fff;text-transform:uppercase;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8)}.medium-insert-embeds,.mediumInsert-embeds{text-align:center;margin:1em 0;position:relative}.medium-insert-embeds div,.medium-insert-embeds iframe,.mediumInsert-embeds div,.mediumInsert-embeds iframe{margin:0 auto!important}.medium-insert-embeds-left.mediumInsert-embeds,.medium-insert-embeds.medium-insert-embeds-left{width:33.33%;float:left;margin:0 30px 20px 0}.medium-insert-embeds-right.mediumInsert-embeds,.medium-insert-embeds.medium-insert-embeds-right{width:33.33%;float:right;margin:0 0 20px 30px}.medium-insert-embeds figure,.medium-insert-images figure,.mediumInsert figure,.mediumInsert-embeds figure{position:relative}.medium-insert-embeds figure figcaption,.medium-insert-images figure figcaption,.mediumInsert figure figcaption,.mediumInsert-embeds figure figcaption{position:relative;z-index:1;display:block;text-align:center;margin:10px 0;color:#ccc;font-size:.8em;font-style:italic;outline:0 solid transparent}.medium-insert-embeds figure figcaption:focus,.medium-insert-images figure figcaption:focus,.mediumInsert figure figcaption:focus,.mediumInsert-embeds figure figcaption:focus{outline:0 solid transparent} \ No newline at end of file diff --git a/dist/css/medium-editor-insert-plugin.css b/dist/css/medium-editor-insert-plugin.css index bc77b9ac0..5f601c6b6 100644 --- a/dist/css/medium-editor-insert-plugin.css +++ b/dist/css/medium-editor-insert-plugin.css @@ -8,7 +8,8 @@ */ .medium-insert-images, .mediumInsert { - text-align: center; } + text-align: center; + position: relative; } .medium-insert-images figure, .mediumInsert figure { margin: 0; display: block; } @@ -42,6 +43,15 @@ .medium-insert-images.medium-insert-images-grid figure img, .medium-insert-images-grid.mediumInsert figure img { max-width: calc(100% - 1em); margin: 0.5em; } + .medium-insert-images .medium-editor-insert-error, .mediumInsert .medium-editor-insert-error { + color: #FFF; + text-transform: uppercase; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); } .medium-insert-embeds, .mediumInsert-embeds { text-align: center; diff --git a/dist/css/medium-editor-insert-plugin.min.css b/dist/css/medium-editor-insert-plugin.min.css index 527b794bd..7ab3e5c3b 100644 --- a/dist/css/medium-editor-insert-plugin.min.css +++ b/dist/css/medium-editor-insert-plugin.min.css @@ -7,4 +7,4 @@ * Released under the MIT license */ -.medium-insert-images,.mediumInsert{text-align:center}.medium-insert-images figure,.mediumInsert figure{margin:0;display:block}.medium-insert-images figure img,.mediumInsert figure img{max-width:100%;margin-top:1em;vertical-align:top}.medium-insert-images figure:first-child img,.mediumInsert figure:first-child img{margin-top:0}.medium-insert-images-left.mediumInsert,.medium-insert-images.medium-insert-images-left,.mediumInsert.small{max-width:33.33%;float:left;margin:0 30px 20px 0}.medium-insert-images-right.mediumInsert,.medium-insert-images.medium-insert-images-right{max-width:33.33%;float:right;margin:0 0 20px 30px}.medium-insert-images-grid.mediumInsert,.medium-insert-images.medium-insert-images-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;margin:.5em -.5em}.medium-insert-images-grid.mediumInsert figure,.medium-insert-images.medium-insert-images-grid figure{width:33.33%;display:inline-block}.medium-insert-images-grid.mediumInsert figure img,.medium-insert-images.medium-insert-images-grid figure img{max-width:calc(100% - 1em);margin:.5em}.medium-insert-embeds,.mediumInsert-embeds{text-align:center;margin:1em 0;position:relative}.medium-insert-embeds div,.medium-insert-embeds iframe,.mediumInsert-embeds div,.mediumInsert-embeds iframe{margin:0 auto!important}.medium-insert-embeds-left.mediumInsert-embeds,.medium-insert-embeds.medium-insert-embeds-left{width:33.33%;float:left;margin:0 30px 20px 0}.medium-insert-embeds-right.mediumInsert-embeds,.medium-insert-embeds.medium-insert-embeds-right{width:33.33%;float:right;margin:0 0 20px 30px}.medium-insert-embeds figure,.medium-insert-images figure,.mediumInsert figure,.mediumInsert-embeds figure{position:relative}.medium-insert-embeds figure figcaption,.medium-insert-images figure figcaption,.mediumInsert figure figcaption,.mediumInsert-embeds figure figcaption{position:relative;z-index:1;display:block;text-align:center;margin:10px 0;color:#ccc;font-size:.8em;font-style:italic;outline:0 solid transparent}.medium-editor-insert-plugin:focus,.medium-insert-embeds figure figcaption:focus,.medium-insert-images figure figcaption:focus,.mediumInsert figure figcaption:focus,.mediumInsert-embeds figure figcaption:focus{outline:0 solid transparent}.medium-editor-insert-plugin{outline:0 solid transparent}.medium-editor-insert-plugin .clearfix:after,.medium-editor-insert-plugin .clearfix:before,.medium-editor-insert-plugin:after,.medium-editor-insert-plugin:before{content:" ";display:table;clear:both}.medium-editor-insert-plugin p{margin:1em 0}.medium-editor-insert-plugin progress{display:block;margin:1em auto}.medium-editor-insert-plugin .hide{display:none}.medium-editor-insert-plugin.medium-editor-placeholder:after{padding:1em 0}.medium-editor-insert-plugin .medium-insert-buttons{position:absolute;color:#ddd;font-size:.9em}.medium-editor-insert-plugin .medium-insert-buttons button{display:block;cursor:pointer;color:#ddd;background:#fff;width:32px;height:32px;box-sizing:border-box;border-radius:20px;border:1px solid #ddd;line-height:30px;text-align:center;padding:0}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show{font-size:25px;transform:rotate(0);transition:transform 100ms}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show span{display:block;margin-top:-4px}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show.medium-insert-buttons-rotate{transition:transform 250ms;transform:rotate(45deg)}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons{margin:0;padding:0;list-style:none;display:none;position:relative;z-index:2;left:55px;top:-32px}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons li{display:inline-block;margin:0 5px}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons li .fa{font-size:15px}.medium-insert-caption-placeholder{position:relative}.medium-insert-caption-placeholder:after{position:absolute;top:0;left:0;width:100%;text-align:center;content:attr(data-placeholder)}.dragging{cursor:move}.medium-insert-image-active{outline:2px solid #000}.medium-insert-images-toolbar{display:none}.medium-insert-images,.mediumInsert{margin:1em 0}.medium-insert-images .dragged,.mediumInsert .dragged{position:absolute;top:0;opacity:.5;z-index:2000}.medium-insert-images .placeholder,.mediumInsert .placeholder{position:relative;margin:0;padding:0;border:0}.medium-insert-images .medium-insert-images-progress,.mediumInsert .medium-insert-images-progress{position:absolute;width:100%;height:100%;top:0;right:0;background:rgba(255,255,255,.4)}.medium-insert-embeds-input{position:relative;color:#ccc;z-index:1;text-align:left}.medium-insert-embeds-placeholder{position:relative}.medium-insert-embeds-placeholder:after{position:absolute;top:0;left:0;content:attr(data-placeholder);color:#ccc}.medium-insert-embeds-selected .medium-insert-embed{outline:2px solid #000}.medium-insert-embeds-toolbar{display:none}.medium-insert-embeds .medium-insert-embeds-overlay,.mediumInsert-embeds .medium-insert-embeds-overlay{position:absolute;width:100%;height:100%;top:0;left:0} \ No newline at end of file +.medium-insert-images,.mediumInsert{text-align:center;position:relative}.medium-insert-images figure,.mediumInsert figure{margin:0;display:block}.medium-insert-images figure img,.mediumInsert figure img{max-width:100%;margin-top:1em;vertical-align:top}.medium-insert-images figure:first-child img,.mediumInsert figure:first-child img{margin-top:0}.medium-insert-images-left.mediumInsert,.medium-insert-images.medium-insert-images-left,.mediumInsert.small{max-width:33.33%;float:left;margin:0 30px 20px 0}.medium-insert-images-right.mediumInsert,.medium-insert-images.medium-insert-images-right{max-width:33.33%;float:right;margin:0 0 20px 30px}.medium-insert-images-grid.mediumInsert,.medium-insert-images.medium-insert-images-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center;margin:.5em -.5em}.medium-insert-images-grid.mediumInsert figure,.medium-insert-images.medium-insert-images-grid figure{width:33.33%;display:inline-block}.medium-insert-images-grid.mediumInsert figure img,.medium-insert-images.medium-insert-images-grid figure img{max-width:calc(100% - 1em);margin:.5em}.medium-insert-images .medium-editor-insert-error,.mediumInsert .medium-editor-insert-error{color:#fff;text-transform:uppercase;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8)}.medium-insert-embeds,.mediumInsert-embeds{text-align:center;margin:1em 0;position:relative}.medium-insert-embeds div,.medium-insert-embeds iframe,.mediumInsert-embeds div,.mediumInsert-embeds iframe{margin:0 auto!important}.medium-insert-embeds-left.mediumInsert-embeds,.medium-insert-embeds.medium-insert-embeds-left{width:33.33%;float:left;margin:0 30px 20px 0}.medium-insert-embeds-right.mediumInsert-embeds,.medium-insert-embeds.medium-insert-embeds-right{width:33.33%;float:right;margin:0 0 20px 30px}.medium-insert-embeds figure,.medium-insert-images figure,.mediumInsert figure,.mediumInsert-embeds figure{position:relative}.medium-insert-embeds figure figcaption,.medium-insert-images figure figcaption,.mediumInsert figure figcaption,.mediumInsert-embeds figure figcaption{position:relative;z-index:1;display:block;text-align:center;margin:10px 0;color:#ccc;font-size:.8em;font-style:italic;outline:0 solid transparent}.medium-editor-insert-plugin:focus,.medium-insert-embeds figure figcaption:focus,.medium-insert-images figure figcaption:focus,.mediumInsert figure figcaption:focus,.mediumInsert-embeds figure figcaption:focus{outline:0 solid transparent}.medium-editor-insert-plugin{outline:0 solid transparent}.medium-editor-insert-plugin .clearfix:after,.medium-editor-insert-plugin .clearfix:before,.medium-editor-insert-plugin:after,.medium-editor-insert-plugin:before{content:" ";display:table;clear:both}.medium-editor-insert-plugin p{margin:1em 0}.medium-editor-insert-plugin progress{display:block;margin:1em auto}.medium-editor-insert-plugin .hide{display:none}.medium-editor-insert-plugin.medium-editor-placeholder:after{padding:1em 0}.medium-editor-insert-plugin .medium-insert-buttons{position:absolute;color:#ddd;font-size:.9em}.medium-editor-insert-plugin .medium-insert-buttons button{display:block;cursor:pointer;color:#ddd;background:#fff;width:32px;height:32px;box-sizing:border-box;border-radius:20px;border:1px solid #ddd;line-height:30px;text-align:center;padding:0}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show{font-size:25px;transform:rotate(0);transition:transform 100ms}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show span{display:block;margin-top:-4px}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-show.medium-insert-buttons-rotate{transition:transform 250ms;transform:rotate(45deg)}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons{margin:0;padding:0;list-style:none;display:none;position:relative;z-index:2;left:55px;top:-32px}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons li{display:inline-block;margin:0 5px}.medium-editor-insert-plugin .medium-insert-buttons .medium-insert-buttons-addons li .fa{font-size:15px}.medium-insert-caption-placeholder{position:relative}.medium-insert-caption-placeholder:after{position:absolute;top:0;left:0;width:100%;text-align:center;content:attr(data-placeholder)}.dragging{cursor:move}.medium-insert-image-active{outline:2px solid #000}.medium-insert-images-toolbar{display:none}.medium-insert-images,.mediumInsert{margin:1em 0}.medium-insert-images .dragged,.mediumInsert .dragged{position:absolute;top:0;opacity:.5;z-index:2000}.medium-insert-images .placeholder,.mediumInsert .placeholder{position:relative;margin:0;padding:0;border:0}.medium-insert-images .medium-insert-images-progress,.mediumInsert .medium-insert-images-progress{position:absolute;width:100%;height:100%;top:0;right:0;background:rgba(255,255,255,.4)}.medium-insert-embeds-input{position:relative;color:#ccc;z-index:1;text-align:left}.medium-insert-embeds-placeholder{position:relative}.medium-insert-embeds-placeholder:after{position:absolute;top:0;left:0;content:attr(data-placeholder);color:#ccc}.medium-insert-embeds-selected .medium-insert-embed{outline:2px solid #000}.medium-insert-embeds-toolbar{display:none}.medium-insert-embeds .medium-insert-embeds-overlay,.mediumInsert-embeds .medium-insert-embeds-overlay{position:absolute;width:100%;height:100%;top:0;left:0} \ No newline at end of file diff --git a/dist/js/medium-editor-insert-plugin.js b/dist/js/medium-editor-insert-plugin.js index 153f437b2..e16314bcb 100644 --- a/dist/js/medium-editor-insert-plugin.js +++ b/dist/js/medium-editor-insert-plugin.js @@ -105,8 +105,26 @@ this["MediumInsert"]["Templates"]["src/js/templates/embeds-wrapper.hbs"] = Handl + "\n \n \n
\n"; },"useData":true}); -this["MediumInsert"]["Templates"]["src/js/templates/images-fileupload.hbs"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { - return ""; +this["MediumInsert"]["Templates"]["src/js/templates/images-error.hbs"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { + var helper; + + return "
" + + container.escapeExpression(((helper = (helper = helpers.message || (depth0 != null ? depth0.message : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"message","hash":{},"data":data}) : helper))) + + "
"; +},"useData":true}); + +this["MediumInsert"]["Templates"]["src/js/templates/images-fileupload.hbs"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) { + var helper; + + return " name=\"" + + container.escapeExpression(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"name","hash":{},"data":data}) : helper))) + + "\""; +},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) { + var stack1; + + return ""; },"useData":true}); this["MediumInsert"]["Templates"]["src/js/templates/images-image.hbs"] = Handlebars.template({"1":function(container,depth0,helpers,partials,data) { @@ -313,6 +331,9 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl $data.find('.medium-insert-buttons').remove(); $data.find('.medium-insert-active').removeClass('medium-insert-active'); + // Remove images not fully uploaded + $data.find('.medium-insert-images img[src^="blob"]').parents('.medium-insert-images').remove(); + // Restore original embed code from embed wrapper attribute value. $data.find('[data-embed-code]').each(function () { var $this = $(this), @@ -1593,11 +1614,15 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl captions: true, captionPlaceholder: 'Type caption for image (optional)', autoGrid: 3, + fileUploadInputName: null, fileUploadOptions: { // See https://github.com/blueimp/jQuery-File-Upload/wiki/Options url: null, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i }, fileDeleteOptions: {}, + fileUploadResponseImageUrl: function (data) { + return data.result.files[0].url; + }, styles: { wide: { label: '' @@ -1649,7 +1674,8 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl }, messages: { acceptFileTypesError: 'This file is not in a supported format: ', - maxFileSizeError: 'This file is too big: ' + maxFileSizeError: 'This file is too big: ', + error: 'An error occurred!' } // uploadError: function($el, data) {} // uploadCompleted: function ($el, data) {} @@ -1774,7 +1800,7 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl Images.prototype.add = function () { var that = this, - $file = $(this.templates['src/js/templates/images-fileupload.hbs']()), + $file = $(this.templates['src/js/templates/images-fileupload.hbs']({name: this.options.fileUploadInputName})), fileUploadOptions = { dataType: 'json', add: function (e, data) { @@ -1782,6 +1808,9 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl }, done: function (e, data) { $.proxy(that, 'uploadDone', e, data)(); + }, + fail: function (e, data) { + $.proxy(that, 'uploadFail', e, data)(); } }; @@ -1929,6 +1958,27 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl } }; + /** + * Callback for failed upload requests. + * https://github.com/blueimp/jQuery-File-Upload/wiki/Options#done + * + * @param {Event} e + * @param {object} data + * @return {void} + */ + + Images.prototype.uploadFail = function (e, data) { + if (this.options.preview && data.context) { + var root = data.context.parent();// jscs:ignore requireVarDeclFirst + data.context.append(this.templates['src/js/templates/images-error.hbs']({message: this.options.messages.error})); + setTimeout(function () { + root.remove(); + }, 5000); + } + this.core.clean(); + this.sorting(); + }; + /** * Callback for successful upload requests. * https://github.com/blueimp/jQuery-File-Upload/wiki/Options#done @@ -1939,7 +1989,7 @@ this["MediumInsert"]["Templates"]["src/js/templates/images-toolbar.hbs"] = Handl */ Images.prototype.uploadDone = function (e, data) { - $.proxy(this, 'showImage', data.result.files[0].url, data)(); + $.proxy(this, 'showImage', this.options.fileUploadResponseImageUrl(data), data)(); this.core.clean(); this.sorting(); diff --git a/dist/js/medium-editor-insert-plugin.min.js b/dist/js/medium-editor-insert-plugin.min.js index 4fd7a233d..c0f6d5eec 100644 --- a/dist/js/medium-editor-insert-plugin.min.js +++ b/dist/js/medium-editor-insert-plugin.min.js @@ -8,4 +8,4 @@ */ -!function(t){"function"==typeof define&&define.amd?define(["jquery","handlebars/runtime","medium-editor","blueimp-file-upload","jquery-sortable"],t):"object"==typeof module&&module.exports?module.exports=function(e){if("undefined"==typeof window)throw new Error("medium-editor-insert-plugin runs only in a browser.");return void 0===e&&(e=require("jquery")),window.jQuery=e,Handlebars=require("handlebars/runtime"),MediumEditor=require("medium-editor"),require("jquery-sortable"),require("blueimp-file-upload"),t(e,Handlebars,MediumEditor),e}:t(jQuery,Handlebars,MediumEditor)}(function(e,t,f){this.MediumInsert=this.MediumInsert||{},this.MediumInsert.Templates=this.MediumInsert.Templates||{},this.MediumInsert.Templates["src/js/templates/core-buttons.hbs"]=t.template({1:function(e,t,i,s,o){var n,a,r=null!=t?t:e.nullContext||{},l=i.helperMissing,d="function";return'
    • \n"},compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){var n;return'\n"},useData:!0}),this.MediumInsert.Templates["src/js/templates/core-caption.hbs"]=t.template({compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){var n;return'
    '},useData:!0}),this.MediumInsert.Templates["src/js/templates/core-empty-line.hbs"]=t.template({compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){return"


    \n"},useData:!0}),this.MediumInsert.Templates["src/js/templates/embeds-toolbar.hbs"]=t.template({1:function(e,t,i,s,o){var n;return'
    \n \n
    \n"},2:function(e,t,i,s,o){var n;return null!=(n=i.if.call(null!=t?t:e.nullContext||{},null!=t?t.label:t,{name:"if",hash:{},fn:e.program(3,o,0),inverse:e.noop,data:o}))?n:""},3:function(e,t,i,s,o){var n,a,r=null!=t?t:e.nullContext||{},l=i.helperMissing,d="function";return'
  • \n \n
    • \n"},5:function(e,t,i,s,o){var n;return'
    \n \n
    \n"},compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){var n,a=null!=t?t:e.nullContext||{};return(null!=(n=i.if.call(a,null!=t?t.styles:t,{name:"if",hash:{},fn:e.program(1,o,0),inverse:e.noop,data:o}))?n:"")+"\n"+(null!=(n=i.if.call(a,null!=t?t.actions:t,{name:"if",hash:{},fn:e.program(5,o,0),inverse:e.noop,data:o}))?n:"")},useData:!0}),this.MediumInsert.Templates["src/js/templates/embeds-wrapper.hbs"]=t.template({compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){var n,a;return'
    \n\t
    \n\t\t
    \n\t\t\t'+(null!=(n="function"==typeof(a=null!=(a=i.html||(null!=t?t.html:t))?a:i.helperMissing)?a.call(null!=t?t:e.nullContext||{},{name:"html",hash:{},data:o}):a)?n:"")+'\n\t\t
    \n\t
    \n\t
    \n
    '},useData:!0}),this.MediumInsert.Templates["src/js/templates/images-fileupload.hbs"]=t.template({compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){return''},useData:!0}),this.MediumInsert.Templates["src/js/templates/images-image.hbs"]=t.template({1:function(e,t,i,s,o){return'
    \n'},compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){var n,a,r=null!=t?t:e.nullContext||{};return'
    \n \n'+(null!=(n=i.if.call(r,null!=t?t.progress:t,{name:"if",hash:{},fn:e.program(1,o,0),inverse:e.noop,data:o}))?n:"")+"
    \n"},useData:!0}),this.MediumInsert.Templates["src/js/templates/images-progressbar.hbs"]=t.template({compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){return'0'},useData:!0}),this.MediumInsert.Templates["src/js/templates/images-toolbar.hbs"]=t.template({1:function(e,t,i,s,o){var n;return null!=(n=i.if.call(null!=t?t:e.nullContext||{},null!=t?t.label:t,{name:"if",hash:{},fn:e.program(2,o,0),inverse:e.noop,data:o}))?n:""},2:function(e,t,i,s,o){var n,a,r=null!=t?t:e.nullContext||{},l=i.helperMissing,d="function";return'
  • \n \n
    • \n"},4:function(e,t,i,s,o){var n;return'\t
    \n\t\t\n
    \n"},5:function(e,t,i,s,o){var n;return null!=(n=i.if.call(null!=t?t:e.nullContext||{},null!=t?t.label:t,{name:"if",hash:{},fn:e.program(6,o,0),inverse:e.noop,data:o}))?n:""},6:function(e,t,i,s,o){var n,a,r=null!=t?t:e.nullContext||{},l=i.helperMissing,d="function";return' \t
  • \n \t \n \t
    • \n"},compiler:[7,">= 4.0.0"],main:function(e,t,i,s,o){var n,a=null!=t?t:e.nullContext||{};return'
    \n \n
    \n\n"+(null!=(n=i.if.call(a,null!=t?t.actions:t,{name:"if",hash:{},fn:e.program(4,o,0),inverse:e.noop,data:o}))?n:"")},useData:!0}),function(l,d,a,s){"use strict";var o="mediumInsert",n={editor:null,enabled:!0,addons:{images:!0,embeds:!0}};function r(e){return e.charAt(0).toUpperCase()+e.slice(1)}function m(e,t){var i;this.el=e,this.$el=l(e),this.templates=d.MediumInsert.Templates,t&&(i=t.editor,t.editor=null),this.options=l.extend(!0,{},n,t),this.options.editor=i,t&&(t.editor=i),this._defaults=n,this._name=o,this.options&&this.options.editor&&(this.options.editor._serialize===s&&(this.options.editor._serialize=this.options.editor.serialize),this.options.editor._destroy===s&&(this.options.editor._destroy=this.options.editor.destroy),this.options.editor._setup===s&&(this.options.editor._setup=this.options.editor.setup),this.options.editor._hideInsertButtons=this.hideButtons,this.options.editor.serialize=this.editorSerialize,this.options.editor.destroy=this.editorDestroy,this.options.editor.setup=this.editorSetup,this.options.editor.getExtensionByName("placeholder")!==s&&(this.options.editor.getExtensionByName("placeholder").updatePlaceholder=this.editorUpdatePlaceholder))}m.prototype.init=function(){this.$el.addClass("medium-editor-insert-plugin"),"object"==typeof this.options.addons&&0!==Object.keys(this.options.addons).length||this.disable(),this.initAddons(),this.clean(),this.events()},m.prototype.events=function(){var t=this;this.$el.on("dragover drop",function(e){e.preventDefault()}).on("keyup click",l.proxy(this,"toggleButtons")).on("selectstart mousedown",".medium-insert, .medium-insert-buttons",l.proxy(this,"disableSelection")).on("click",".medium-insert-buttons-show",l.proxy(this,"toggleAddons")).on("click",".medium-insert-action",l.proxy(this,"addonAction")).on("paste",".medium-insert-caption-placeholder",function(e){l.proxy(t,"removeCaptionPlaceholder")(l(e.target))}),l(d).on("resize",l.proxy(this,"positionButtons",null))},m.prototype.getEditor=function(){return this.options.editor},m.prototype.editorSerialize=function(){var i=this._serialize();return l.each(i,function(e){var t=l("
    ").html(i[e].value);t.find(".medium-insert-buttons").remove(),t.find(".medium-insert-active").removeClass("medium-insert-active"),t.find("[data-embed-code]").each(function(){var e=l(this),t=l("
    ").html(e.attr("data-embed-code")).text();e.html(t)}),i[e].value=t.html()}),i},m.prototype.editorDestroy=function(){l.each(this.elements,function(e,t){l(t).data("plugin_"+o)instanceof m&&l(t).data("plugin_"+o).disable()}),this._destroy()},m.prototype.editorSetup=function(){this._setup(),l.each(this.elements,function(e,t){l(t).data("plugin_"+o)instanceof m&&l(t).data("plugin_"+o).enable()})},m.prototype.editorUpdatePlaceholder=function(e,t){var i=l(e).children().not(".medium-insert-buttons").contents();t||1!==i.length||"br"!==i[0].nodeName.toLowerCase()?this.hidePlaceholder(e):(this.showPlaceholder(e),this.base._hideInsertButtons(l(e)))},m.prototype.triggerInput=function(){this.getEditor()&&this.getEditor().trigger("editableInput",null,this.el)},m.prototype.deselect=function(){a.getSelection().removeAllRanges()},m.prototype.disable=function(){this.options.enabled=!1,this.$el.find(".medium-insert-buttons").addClass("hide")},m.prototype.enable=function(){this.options.enabled=!0,this.$el.find(".medium-insert-buttons").removeClass("hide")},m.prototype.disableSelection=function(e){var t=l(e.target);(!1===t.is("img")||t.hasClass("medium-insert-buttons-show"))&&e.preventDefault()},m.prototype.initAddons=function(){var s=this;this.options.addons&&0!==this.options.addons.length&&l.each(this.options.addons,function(e,t){var i=o+r(e);!1!==t?(s.$el[i](t),s.options.addons[e]=s.$el.data("plugin_"+i).options):delete s.options.addons[e]})},m.prototype.clean=function(){var e,t,i=this;!1!==this.options.enabled&&(0===this.$el.html().length&&this.$el.html(this.templates["src/js/templates/core-empty-line.hbs"]().trim()),this.$el.contents().filter(function(){return"#text"===this.nodeName&&""!==l.trim(l(this).text())||"br"===this.nodeName.toLowerCase()}).each(function(){l(this).wrap("

    "),i.moveCaret(l(this).parent(),l(this).text().length)}),this.addButtons(),(t=(e=this.$el.find(".medium-insert-buttons")).prev()).attr("class")&&t.attr("class").match(/medium\-insert(?!\-active)/)&&e.before(this.templates["src/js/templates/core-empty-line.hbs"]().trim()))},m.prototype.getButtons=function(){if(!1!==this.options.enabled)return this.templates["src/js/templates/core-buttons.hbs"]({addons:this.options.addons}).trim()},m.prototype.addButtons=function(){0===this.$el.find(".medium-insert-buttons").length&&this.$el.append(this.getButtons())},m.prototype.toggleButtons=function(e){var t,i,s,o,n=l(e.target),a=d.getSelection(),r=this;!1!==this.options.enabled&&((i=a&&0!==a.rangeCount?(t=a.getRangeAt(0),l(t.commonAncestorContainer)):n).hasClass("medium-editor-insert-plugin")&&(i=i.find("p:first")),s=i.is("p")?i:i.closest("p"),this.clean(),!1===n.hasClass("medium-editor-placeholder")&&0===n.closest(".medium-insert-buttons").length&&0===i.closest(".medium-insert-buttons").length&&(this.$el.find(".medium-insert-active").removeClass("medium-insert-active"),l.each(this.options.addons,function(e){if(n.closest(".medium-insert-"+e).length&&(i=n),i.closest(".medium-insert-"+e).length)return s=i.closest(".medium-insert-"+e),void(o=e)}),s.length&&(""===s.text().trim()&&!o||"images"===o)?(s.addClass("medium-insert-active"),"images"===o?this.$el.find(".medium-insert-buttons").attr("data-active-addon",o):this.$el.find(".medium-insert-buttons").removeAttr("data-active-addon"),setTimeout(function(){r.positionButtons(o),r.showButtons(o)},o?100:0)):this.hideButtons()))},m.prototype.showButtons=function(e){var t=this.$el.find(".medium-insert-buttons");t.show(),t.find("li").show(),e&&(t.find("li").hide(),t.find('button[data-addon="'+e+'"]').parent().show())},m.prototype.hideButtons=function(e){(e=e||this.$el).find(".medium-insert-buttons").hide(),e.find(".medium-insert-buttons-addons").hide(),e.find(".medium-insert-buttons-show").removeClass("medium-insert-buttons-rotate")},m.prototype.positionButtons=function(e){var t=this.$el.find(".medium-insert-buttons"),i=this.$el.find(".medium-insert-active"),s=i.hasClass("medium-insert-images-grid")?[]:i.find("figure:last figcaption"),o=this.getEditor()?this.getEditor().options.elementsContainer:l("body").get(0),n=-1<["absolute","fixed"].indexOf(d.getComputedStyle(o).getPropertyValue("position")),a={};i.length&&(a.left=i.position().left,a.top=i.position().top,e?(a.left+=i.width()-t.find(".medium-insert-buttons-show").width()-10,a.top+=i.height()-20+(s.length?-s.height()-parseInt(s.css("margin-top"),10):10)):(a.left+=-parseInt(t.find(".medium-insert-buttons-addons").css("left"),10)-parseInt(t.find(".medium-insert-buttons-addons button:first").css("margin-left"),10),a.top+=parseInt(i.css("margin-top"),10)),n&&(a.top+=o.scrollTop),!1===this.$el.hasClass("medium-editor-placeholder")&&a.left<0&&(a.left=i.position().left),t.css(a))},m.prototype.toggleAddons=function(){"images"!==this.$el.find(".medium-insert-buttons").attr("data-active-addon")?(this.$el.find(".medium-insert-buttons-addons").fadeToggle(),this.$el.find(".medium-insert-buttons-show").toggleClass("medium-insert-buttons-rotate")):this.$el.find(".medium-insert-buttons").find('button[data-addon="images"]').click()},m.prototype.hideAddons=function(){this.$el.find(".medium-insert-buttons-addons").hide(),this.$el.find(".medium-insert-buttons-show").removeClass("medium-insert-buttons-rotate")},m.prototype.addonAction=function(e){var t=l(e.currentTarget),i=t.data("addon"),s=t.data("action");this.$el.data("plugin_"+o+r(i))[s]()},m.prototype.moveCaret=function(e,t){var i,s,o,n;t=t||0,i=a.createRange(),s=d.getSelection(),(o=e.get(0)).childNodes.length||(n=a.createTextNode(" "),o.appendChild(n)),i.setStart(o.childNodes[0],t),i.collapse(!0),s.removeAllRanges(),s.addRange(i)},m.prototype.addCaption=function(e,t){0===e.find("figcaption").length&&e.append(this.templates["src/js/templates/core-caption.hbs"]({placeholder:t}))},m.prototype.removeCaptions=function(e){var t=this.$el.find("figcaption");e&&(t=t.not(e)),t.each(function(){(l(this).hasClass("medium-insert-caption-placeholder")||""===l(this).text().trim())&&l(this).remove()})},m.prototype.removeCaptionPlaceholder=function(e){var t=e.is("figcaption")?e:e.find("figcaption");t.length&&t.removeClass("medium-insert-caption-placeholder").removeAttr("data-placeholder")},l.fn[o]=function(i){return this.each(function(){var e,t=this;l(t).is("textarea")&&(e=l(t).attr("medium-editor-textarea-id"),t=l(t).siblings('[medium-editor-textarea-id="'+e+'"]').get(0)),l.data(t,"plugin_"+o)?"string"==typeof i&&l.data(t,"plugin_"+o)[i]&&l.data(t,"plugin_"+o)[i]():(l.data(t,"plugin_"+o,new m(t,i)),l.data(t,"plugin_"+o).init())})}}(jQuery,window,document),function(l,d,t,e){"use strict";var i="mediumInsert",s="Embeds",o={label:'',placeholder:"Paste a YouTube, Vimeo, Facebook, Twitter or Instagram link and press Enter",oembedProxy:"http://medium.iframe.ly/api/oembed?iframe=1",captions:!0,captionPlaceholder:"Type caption (optional)",storeMeta:!1,styles:{wide:{label:''},left:{label:''},right:{label:''}},actions:{remove:{label:'',clicked:function(){var e=l.Event("keydown");e.which=8,l(t).trigger(e)}}},parseOnPaste:!1};function n(e,t){this.el=e,this.$el=l(e),this.templates=d.MediumInsert.Templates,this.core=this.$el.data("plugin_"+i),this.options=l.extend(!0,{},o,t),this._defaults=o,this._name=i,this.core.getEditor()&&(this.core.getEditor()._serializePreEmbeds=this.core.getEditor().serialize,this.core.getEditor().serialize=this.editorSerialize),this.init()}n.prototype.init=function(){var e=this.$el.find(".medium-insert-embeds");e.attr("contenteditable",!1),e.each(function(){0===l(this).find(".medium-insert-embeds-overlay").length&&l(this).append(l("

    ").addClass("medium-insert-embeds-overlay"))}),this.events(),this.backwardsCompatibility()},n.prototype.events=function(){l(t).on("click",l.proxy(this,"unselectEmbed")).on("keydown",l.proxy(this,"removeEmbed")).on("click",".medium-insert-embeds-toolbar .medium-editor-action",l.proxy(this,"toolbarAction")).on("click",".medium-insert-embeds-toolbar2 .medium-editor-action",l.proxy(this,"toolbar2Action")),this.$el.on("keyup click paste",l.proxy(this,"togglePlaceholder")).on("keydown",l.proxy(this,"processLink")).on("click",".medium-insert-embeds-overlay",l.proxy(this,"selectEmbed")).on("contextmenu",".medium-insert-embeds-placeholder",l.proxy(this,"fixRightClickOnPlaceholder")),this.options.parseOnPaste&&this.$el.on("paste",l.proxy(this,"processPasted")),l(d).on("resize",l.proxy(this,"autoRepositionToolbars"))},n.prototype.backwardsCompatibility=function(){var e=this;this.$el.find(".mediumInsert-embeds").removeClass("mediumInsert-embeds").addClass("medium-insert-embeds"),this.$el.find(".medium-insert-embeds").each(function(){0===l(this).find(".medium-insert-embed").length&&(l(this).after(e.templates["src/js/templates/embeds-wrapper.hbs"]({html:l(this).html()})),l(this).remove())})},n.prototype.editorSerialize=function(){var s=this._serializePreEmbeds();return l.each(s,function(e){var t=l("
    ").html(s[e].value),i=t.find(".medium-insert-embeds");i.removeAttr("contenteditable"),i.find("figcaption").removeAttr("contenteditable"),t.find(".medium-insert-embeds-overlay").remove(),s[e].value=t.html()}),s},n.prototype.add=function(){var e=this.$el.find(".medium-insert-active");e.html(this.templates["src/js/templates/core-empty-line.hbs"]().trim()),e.is("p")&&(e.replaceWith('
    '+e.html()+"
    "),e=this.$el.find(".medium-insert-active"),this.core.moveCaret(e)),e.addClass("medium-insert-embeds medium-insert-embeds-input medium-insert-embeds-active"),this.togglePlaceholder({target:e.get(0)}),e.click(),this.core.hideButtons()},n.prototype.togglePlaceholder=function(e){var t,i,s,o=l(e.target),n=d.getSelection();n&&0!==n.rangeCount&&(t=n.getRangeAt(0),(i=l(t.commonAncestorContainer)).hasClass("medium-insert-embeds-active")?o=i:i.closest(".medium-insert-embeds-active").length&&(o=i.closest(".medium-insert-embeds-active")),o.hasClass("medium-insert-embeds-active")?""===(s=o.text().trim())&&!1===o.hasClass("medium-insert-embeds-placeholder")?o.addClass("medium-insert-embeds-placeholder").attr("data-placeholder",this.options.placeholder):""!==s&&o.hasClass("medium-insert-embeds-placeholder")&&o.removeClass("medium-insert-embeds-placeholder").removeAttr("data-placeholder"):this.$el.find(".medium-insert-embeds-active").remove())},n.prototype.fixRightClickOnPlaceholder=function(e){this.core.moveCaret(l(e.target))},n.prototype.processLink=function(e){var t,i=this.$el.find(".medium-insert-embeds-active");i.length&&(""!==(t=i.text().trim())||-1===[8,46,13].indexOf(e.which)?13===e.which&&(e.preventDefault(),e.stopPropagation(),this.options.oembedProxy?this.oembed(t):this.parseUrl(t)):i.remove())},n.prototype.processPasted=function(e){var t;l(".medium-insert-embeds-active").length||(t=e.originalEvent.clipboardData.getData("text"),new RegExp("^(http(s?):)?//","i").test(t)&&(this.options.oembedProxy?this.oembed(t,!0):this.parseUrl(t,!0)))},n.prototype.oembed=function(o,i){var n=this;l.support.cors=!0,l.ajax({crossDomain:!0,cache:!1,url:this.options.oembedProxy,dataType:"json",data:{url:o},success:function(e){var t=e&&e.html;n.options.storeMeta&&(t+='