From 72085762cf1d23f60c61dd9131d7655a94ae36a7 Mon Sep 17 00:00:00 2001 From: javascript603 Date: Tue, 15 Jan 2019 13:59:16 +0100 Subject: [PATCH 01/27] added the template validate function --- assests/js/lib/embed/core.js | 25 ++- assests/js/lib/embed/embeds.js | 373 ++++++++++++++++++--------------- 2 files changed, 232 insertions(+), 166 deletions(-) diff --git a/assests/js/lib/embed/core.js b/assests/js/lib/embed/core.js index 5a3811d..f3989ca 100755 --- a/assests/js/lib/embed/core.js +++ b/assests/js/lib/embed/core.js @@ -371,6 +371,28 @@ } }; + // check if there is a validate html pattern + Core.prototype.checkTemplateValidate = function (str) { + // const regex = /\[\!\[(.*?)\]\((.+\.(png|jpg|jpeg))\)\]/g; + const regex = /\[\!\[(.*?)\]\((.+)\)\]/g; + const matches = regex.exec(str); + + const data = matches && matches[2] ? + (()=>{ + const startPos = matches.index; + const lastPos = matches.index + matches[0].length; + const preText = str.slice(0, startPos); + const lastText = str.slice(lastPos); + const data = {url: matches[2], alt: matches[1]} + return {preText: preText, lastText: lastText, data: data} + })() + : + (()=>{ + console.log("Media file can't be empty!"); + return false + })(); + }; + Core.prototype.checkCustomPattern = function () { var an = window.getSelection().anchorNode; var pe = an.parentElement; @@ -587,7 +609,6 @@ var $a = $(e.currentTarget), addon = $a.data('addon'), action = $a.data('action'); - this.$el.data('plugin_' + pluginName + ucfirst(addon))[action](); }; @@ -600,7 +621,7 @@ * @return {void} */ - Core.prototype.appendAttribute(state) { + Core.prototype.appendAttribute = function (state) { const { tokens } = state; for (let i = 0; i < tokens.length; i += 1) { if (tokens[i].map) { diff --git a/assests/js/lib/embed/embeds.js b/assests/js/lib/embed/embeds.js index b41fc05..f0a8b27 100755 --- a/assests/js/lib/embed/embeds.js +++ b/assests/js/lib/embed/embeds.js @@ -1,48 +1,47 @@ ; (function ($, window, document, undefined) { 'use strict'; - /** Default values */ var pluginName = 'mediumInsert', - addonName = 'Embeds', // first char is uppercase - defaults = { - label: '', - placeholder: 'Paste a YouTube, Vimeo, Facebook, Twitter or Instagram link and press Enter', - oembedProxy: 'http://medium.iframe.ly/api/oembed?iframe=1', - captions: true, - captionPlaceholder: 'Type caption (optional)', - storeMeta: false, - styles: { - wide: { - label: '' - // added: function ($el) {}, - // removed: function ($el) {} - }, - left: { - label: '' - // added: function ($el) {}, - // removed: function ($el) {} - }, - right: { - label: '' - // added: function ($el) {}, - // removed: function ($el) {} - } + addonName = 'Embeds', // first char is uppercase + defaults = { + label: '', + placeholder: 'Paste a YouTube, Vimeo, Facebook, Twitter or Instagram link and press Enter', + oembedProxy: 'http://medium.iframe.ly/api/oembed?iframe=1', + captions: true, + captionPlaceholder: 'Type caption (optional)', + storeMeta: false, + styles: { + wide: { + label: '' + // added: function ($el) {}, + // removed: function ($el) {} }, - actions: { - remove: { - label: '', - clicked: function () { - var $event = $.Event('keydown'); - - $event.which = 8; - $(document).trigger($event); - } - } + left: { + label: '' + // added: function ($el) {}, + // removed: function ($el) {} }, - parseOnPaste: false - }; - + right: { + label: '' + // added: function ($el) {}, + // removed: function ($el) {} + } + }, + actions: { + remove: { + label: '', + clicked: function () { + var $event = $.Event('keydown'); + + $event.which = 8; + $(document).trigger($event); + } + } + }, + parseOnPaste: false + }; + /** * Embeds object * @@ -54,7 +53,10 @@ * @return {void} */ + function Embeds(el, options) { + + console.log('emped ===> @@@@@@@@@@@@@@') this.el = el; this.$el = $(el); this.templates = window.MediumInsert.Templates; @@ -175,6 +177,7 @@ */ Embeds.prototype.add = function () { + console.log('@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@') var $place = this.$el.find('.medium-insert-active'); // Fix #132 @@ -260,6 +263,9 @@ */ Embeds.prototype.processLink = function (e) { + console.log(this.core.capturePattern) + console.log('------------ Embded ProcessLink ---------------') + console.log('parsing url ===>', e) var $place = this.$el.find('.medium-insert-embeds-active'), url; @@ -295,6 +301,8 @@ */ Embeds.prototype.processPasted = function (e) { + console.log('------------ Embded ProcessPasted ---------------') + console.log('parsing url ===>', e) var pastedUrl, linkRegEx; if ($(".medium-insert-embeds-active").length) { return; @@ -319,57 +327,59 @@ */ Embeds.prototype.oembed = function (url, pasted) { - // var that = this; - - // $.support.cors = true; - - // $.ajax({ - // crossDomain: true, - // cache: false, - // url: this.options.oembedProxy, - // dataType: 'json', - // data: { - // url: url - // }, - // success: function (data) { - // var html = data && data.html; - - // if (that.options.storeMeta) { - // html += '
'; - // } - - // if (data && !html && data.type === 'photo' && data.url) { - // html = ''; - // } - - // if (!html) { - // // Prevent render empty embed. - // $.proxy(that, 'convertBadEmbed', url)(); - // return; - // } - - // if (pasted) { - // $.proxy(that, 'embed', html, url)(); - // } else { - // $.proxy(that, 'embed', html)(); - // } - // }, - // error: function (jqXHR, textStatus, errorThrown) { - // var responseJSON = (function () { - // try { - // return JSON.parse(jqXHR.responseText); - // } catch (e) { } - // })(); - - // if (typeof window.console !== 'undefined') { - // window.console.log((responseJSON && responseJSON.error) || jqXHR.status || errorThrown.message); - // } else { - // window.alert('Error requesting media from ' + that.options.oembedProxy + ' to insert: ' + errorThrown + ' (response status: ' + jqXHR.status + ')'); - // } - - // $.proxy(that, 'convertBadEmbed', url)(); - // } - // }); + console.log('------------ Embded Oembed ---------------') + console.log('parsing url ===>', url, pasted) + var that = this; + + $.support.cors = true; + + $.ajax({ + crossDomain: true, + cache: false, + url: this.options.oembedProxy, + dataType: 'json', + data: { + url: url + }, + success: function (data) { + var html = data && data.html; + + if (that.options.storeMeta) { + html += '
'; + } + + if (data && !html && data.type === 'photo' && data.url) { + html = ''; + } + + if (!html) { + // Prevent render empty embed. + $.proxy(that, 'convertBadEmbed', url)(); + return; + } + + if (pasted) { + $.proxy(that, 'embed', html, url)(); + } else { + $.proxy(that, 'embed', html)(); + } + }, + error: function (jqXHR, textStatus, errorThrown) { + var responseJSON = (function () { + try { + return JSON.parse(jqXHR.responseText); + } catch (e) { } + })(); + + if (typeof window.console !== 'undefined') { + window.console.log((responseJSON && responseJSON.error) || jqXHR.status || errorThrown.message); + } else { + window.alert('Error requesting media from ' + that.options.oembedProxy + ' to insert: ' + errorThrown + ' (response status: ' + jqXHR.status + ')'); + } + + $.proxy(that, 'convertBadEmbed', url)(); + } + }); }; /** @@ -381,34 +391,36 @@ */ Embeds.prototype.parseUrl = function (url, pasted) { - // var html; - - // if (!(new RegExp(['youtube', 'youtu.be', 'vimeo', 'instagram', 'twitter', 'facebook'].join('|')).test(url))) { - // $.proxy(this, 'convertBadEmbed', url)(); - // return false; - // } - - // html = url.replace(/\n?/g, '') - // .replace(/^((http(s)?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=|v\/)?)([a-zA-Z0-9\-_]+)(.*)?$/, '
') - // .replace(/^https?:\/\/vimeo\.com(\/.+)?\/([0-9]+)$/, '
') - // .replace(/^https:\/\/twitter\.com\/(\w+)\/status\/(\d+)\/?$/, '
') - // .replace(/^(https:\/\/www\.facebook\.com\/(.*))$/, '
Loading Facebook post...
') - // .replace(/^https?:\/\/instagram\.com\/p\/(.+)\/?$/, ''); - - // if (this.options.storeMeta) { - // html += '
'; - // } - - // if ((/<("[^"]*"|'[^']*'|[^'">])*>/).test(html) === false) { - // $.proxy(this, 'convertBadEmbed', url)(); - // return false; - // } - - // if (pasted) { - // this.embed(html, url); - // } else { - // this.embed(html); - // } + console.log('------------ Embded ParseURL ---------------') + console.log('parsing url ===>', url, pasted) + var html; + + if (!(new RegExp(['youtube', 'youtu.be', 'vimeo', 'instagram', 'twitter', 'facebook'].join('|')).test(url))) { + $.proxy(this, 'convertBadEmbed', url)(); + return false; + } + + html = url.replace(/\n?/g, '') + .replace(/^((http(s)?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=|v\/)?)([a-zA-Z0-9\-_]+)(.*)?$/, '
') + .replace(/^https?:\/\/vimeo\.com(\/.+)?\/([0-9]+)$/, '
') + .replace(/^https:\/\/twitter\.com\/(\w+)\/status\/(\d+)\/?$/, '
') + .replace(/^(https:\/\/www\.facebook\.com\/(.*))$/, '
Loading Facebook post...
') + .replace(/^https?:\/\/instagram\.com\/p\/(.+)\/?$/, ''); + + if (this.options.storeMeta) { + html += '
'; + } + + if ((/<("[^"]*"|'[^']*'|[^'">])*>/).test(html) === false) { + $.proxy(this, 'convertBadEmbed', url)(); + return false; + } + + if (pasted) { + this.embed(html, url); + } else { + this.embed(html); + } }; /** @@ -420,55 +432,88 @@ */ Embeds.prototype.embed = function (html, pastedUrl) { - // var $place = this.$el.find('.medium-insert-embeds-active'), - // $div; - - // if (!html) { - // alert('Incorrect URL format specified'); - // return false; - // } else { - // if (html.indexOf('') > -1) { - // // Store embed code with ') > -1) { + // Store embed code with '; } - if (data && !html && data.type === 'photo' && data.url) { + if (data && data.type.match(/(photo|rich)/) && data.url) { + that.$el.data('plugin_' + pluginName + ucfirst('images'))['showImageByURL']({type: 'image', url: data.url}, {}); html = ''; + return; } if (!html) { diff --git a/assests/js/lib/embed/images.js b/assests/js/lib/embed/images.js index d9e8dee..cfb7525 100755 --- a/assests/js/lib/embed/images.js +++ b/assests/js/lib/embed/images.js @@ -395,7 +395,7 @@ var $place = this.$el.find('.medium-insert-active'), domImage, that; - + // Hide editor's placeholder $place.click(); @@ -471,6 +471,59 @@ return data.context; }; + /** + * Display image to DOM + * + * @param {string} img // File data or File URL + * @returns {void} + */ + Images.prototype.showImageByURL = function (img) { + console.log('ShowimageByURL =>', img, data) + var $place = this.$el.find('.medium-insert-active').length? this.$el.find('.medium-insert-active') : this.$el.find('.medium-insert-embeds-active'), + that = this; + + $place.attr('class', 'medium-insert-active medium-insert-images'); + $place.click(); + + $place[0].innerHTML = this.templates['src/js/templates/images-image.hbs']({ + img: typeof img === 'object'? img.url : img, + progress: this.options.preview + }) + + $place.find('br').remove(); + + if (typeof img === 'object' && that.options.captions) { + const $image = $place.find('img'); + + img.alt? + (()=>{ + that.core.addCaption($image.closest('figure'), that.options.captionPlaceholder) + that.core.addCaptionContent($place, img.alt) + })() + : + null; + } + + if (this.options.autoGrid && $place.find('figure').length >= this.options.autoGrid) { + $.each(this.options.styles, function (style, options) { + var className = 'medium-insert-images-' + style; + + $place.removeClass(className); + + if (options.removed) { + options.removed($place); + } + }); + + $place.addClass('medium-insert-images-grid'); + + if (this.options.styles.grid.added) { + this.options.styles.grid.added($place); + } + } + this.core.triggerInput(); + }; + Images.prototype.getDOMImage = function () { return new window.Image(); }; From a1ac4e34eca4210b3525c50f0f4e48170759a1f4 Mon Sep 17 00:00:00 2001 From: javascript603 Date: Fri, 25 Jan 2019 10:27:16 -0800 Subject: [PATCH 21/27] video section fixed --- assests/js/lib/embed/core.js | 3 +- assests/js/lib/embed/embeds.js | 4 +- assests/js/lib/embed/images.js | 162 +++++++++++++++------------------ 3 files changed, 78 insertions(+), 91 deletions(-) diff --git a/assests/js/lib/embed/core.js b/assests/js/lib/embed/core.js index c9b4640..29e30e0 100755 --- a/assests/js/lib/embed/core.js +++ b/assests/js/lib/embed/core.js @@ -705,8 +705,7 @@ if(result === 'success' && data.type === 'img') { that.createEmptyMediaDiv(data, "medium-insert-active") - // that.$el.data('plugin_' + pluginName + ucfirst('images'))['uploadAdd'](data, {}); - that.$el.data('plugin_' + pluginName + ucfirst('images'))['showImageByURL'](data, {}); + that.$el.data('plugin_' + pluginName + ucfirst('images'))['showImageByURL'](data); } if(result === 'success' && data.type === 'mov') { diff --git a/assests/js/lib/embed/embeds.js b/assests/js/lib/embed/embeds.js index 36537bf..f1c3719 100755 --- a/assests/js/lib/embed/embeds.js +++ b/assests/js/lib/embed/embeds.js @@ -432,10 +432,12 @@ */ Embeds.prototype.embed = function (html, pastedUrl, altText) { - var $place = this.$el.find('.medium-insert-embeds-active'), + var $place = this.$el.find('.medium-insert-embeds-active').length? this.$el.find('.medium-insert-embeds-active') : this.$el.find('.medium-insert-active'), $div, that; that = this; + $place.attr('class', 'medium-insert-embeds-active'); + if (!html) { alert('Incorrect URL format specified'); return false; diff --git a/assests/js/lib/embed/images.js b/assests/js/lib/embed/images.js index cfb7525..c3d6133 100755 --- a/assests/js/lib/embed/images.js +++ b/assests/js/lib/embed/images.js @@ -79,6 +79,10 @@ // uploadCompleted: function ($el, data) {} }; + function ucfirst(str) { + return str.charAt(0).toUpperCase() + str.slice(1); + } + /** * Images object * @@ -214,19 +218,18 @@ // and test for XHR2 per: // http://stackoverflow.com/questions/6767887/ // what-is-the-best-way-to-check-for-xhr2-file-upload-support - // if (new XMLHttpRequest().upload) { - // fileUploadOptions.progress = function (e, data) { - // $.proxy(that, 'uploadProgress', e, data)(); - // }; + if (new XMLHttpRequest().upload) { + fileUploadOptions.progress = function (e, data) { + $.proxy(that, 'uploadProgress', e, data)(); + }; - // fileUploadOptions.progressall = function (e, data) { - // $.proxy(that, 'uploadProgressall', e, data)(); - // }; - // } + fileUploadOptions.progressall = function (e, data) { + $.proxy(that, 'uploadProgressall', e, data)(); + }; + } $file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions)); - $file.click(); }; @@ -248,72 +251,62 @@ maxFileSize = this.options.fileUploadOptions.maxFileSize, reader; - // If second parameter of uploadAdd, data has valid object value, - // Add classname for image content and let showimage handle to uplad media files. - if(file) { - console.log('file in upload function => ', file) - if (acceptFileTypes && !acceptFileTypes.test(file.type)) { - uploadErrors.push(this.options.messages.acceptFileTypesError + file.name); - } else if (maxFileSize && file.size > maxFileSize) { - uploadErrors.push(this.options.messages.maxFileSizeError + file.name); - } + if (acceptFileTypes && !acceptFileTypes.test(file.type)) { + uploadErrors.push(this.options.messages.acceptFileTypesError + file.name); + } else if (maxFileSize && file.size > maxFileSize) { + uploadErrors.push(this.options.messages.maxFileSizeError + file.name); + } - if (uploadErrors.length > 0) { - if (this.options.uploadFailed && typeof this.options.uploadFailed === "function") { - this.options.uploadFailed(uploadErrors, data); - return; - } - - alert(uploadErrors.join("\n")); - return; - } - - this.core.hideButtons(); - - // Replace paragraph with div, because figure elements can't be inside paragraph, - if ($place.is('p')) { - $place.replaceWith('
' + $place.html() + '
'); - $place = this.$el.find('.medium-insert-active'); - if ($place.next().is('p')) { - this.core.moveCaret($place.next()); - } else { - $place.after('


'); // add empty paragraph so we can move the caret to the next line. - this.core.moveCaret($place.next()); - } - } - - $place.addClass('medium-insert-images'); - - if (this.options.preview === false && $place.find('progress').length === 0 && (new XMLHttpRequest().upload)) { - $place.append(this.templates['src/js/templates/images-progressbar.hbs']()); - } - - if (data.autoUpload || (data.autoUpload !== false && $(e.target).fileupload('option', 'autoUpload'))) { + if (uploadErrors.length > 0) { + if (this.options.uploadFailed && typeof this.options.uploadFailed === "function") { + this.options.uploadFailed(uploadErrors, data); + return; + } - data.process().done(function () { - // If preview is set to true, let the showImage handle the upload start - if (that.options.preview) { - reader = new FileReader(); - - reader.onload = function (e) { - // first parameter is File content (data:image/jpeg;base64) - $.proxy(that, 'showImage', e.target.result, data)(); - }; - - reader.readAsDataURL(data.files[0]); - } else { - // If preview is set to false, then do force upload - data.submit(); - } - }); - } + alert(uploadErrors.join("\n")); + return; + } + + this.core.hideButtons(); + + // Replace paragraph with div, because figure elements can't be inside paragraph, + if ($place.is('p')) { + $place.replaceWith('
' + $place.html() + '
'); + $place = this.$el.find('.medium-insert-active'); + if ($place.next().is('p')) { + this.core.moveCaret($place.next()); } else { - $place.addClass('medium-insert-images'); - console.log('file doesn\'t exist in upload function') - // e is File URL - $.proxy(that, 'showImage', e, {})(); + $place.after('


'); // add empty paragraph so we can move the caret to the next line. + this.core.moveCaret($place.next()); } + } + + $place.addClass('medium-insert-images'); + + if (this.options.preview === false && $place.find('progress').length === 0 && (new XMLHttpRequest().upload)) { + $place.append(this.templates['src/js/templates/images-progressbar.hbs']()); + } + + if (data.autoUpload || (data.autoUpload !== false && $(e.target).fileupload('option', 'autoUpload'))) { + + data.process().done(function () { + // If preview is set to true, let the showImage handle the upload start + if (that.options.preview) { + reader = new FileReader(); + + reader.onload = function (e) { + // first parameter is File content (data:image/jpeg;base64) + $.proxy(that, 'showImage', e.target.result, data)(); + }; + + reader.readAsDataURL(data.files[0]); + } else { + // If preview is set to false, then do force upload + data.submit(); + } + }); + } }; /** @@ -376,8 +369,14 @@ */ Images.prototype.uploadDone = function (e, data) { - console.log('uploaddon=> ', data) - $.proxy(this, 'showImage', data.result, data)(); + console.log('uploadDone=> ', data) + // data.result: expect value -> {type: '', url: ''} + if(data.type ==='img') { + $.proxy(this, 'showImage', data.result, data)(); + } else { + // this.$el.data('plugin_' + pluginName + ucfirst('embeds'))['oembed'](data.result.url); + this.$el.data('plugin_' + pluginName + ucfirst('embeds'))['oembed']('https://www.youtube.com/watch?v=2Lwd46qBrqU'); + } this.core.clean(); this.sorting(); @@ -391,7 +390,7 @@ */ Images.prototype.showImage = function (img, data) { - console.log('Showimage =>', img, data) + console.log(img) var $place = this.$el.find('.medium-insert-active'), domImage, that; @@ -420,25 +419,12 @@ } else { console.log('data content does not exist') - data.context = $(this.templates['src/js/templates/images-image.hbs']({ img: typeof img === 'object'? img.url : img, progress: this.options.preview })).appendTo($place); $place.find('br').remove(); - - if (typeof img === 'object' && that.options.captions) { - const $image = $place.find('img'); - - img.alt? - (()=>{ - that.core.addCaption($image.closest('figure'), that.options.captionPlaceholder) - that.core.addCaptionContent($place, img.alt) - })() - : - null; - } if (this.options.autoGrid && $place.find('figure').length >= this.options.autoGrid) { $.each(this.options.styles, function (style, options) { @@ -459,7 +445,7 @@ } // Preview is to set as true, then upload media files here - if (this.options.preview && typeof img !== 'object') { + if (this.options.preview) { data.submit(); } else if (this.options.uploadCompleted) { this.options.uploadCompleted(data.context, data); @@ -478,7 +464,7 @@ * @returns {void} */ Images.prototype.showImageByURL = function (img) { - console.log('ShowimageByURL =>', img, data) + console.log('ShowimageByURL =>', img) var $place = this.$el.find('.medium-insert-active').length? this.$el.find('.medium-insert-active') : this.$el.find('.medium-insert-embeds-active'), that = this; From a03e0aa20c8eeeb9749cd10ec383c6f210b3ec8e Mon Sep 17 00:00:00 2001 From: javascript603 Date: Mon, 28 Jan 2019 07:38:30 -0800 Subject: [PATCH 22/27] cursor functions implement(get, set, update) --- assests/js/lib/embed/core.js | 104 +++++++++++++++++++++++++-------- assests/js/lib/embed/images.js | 2 - index.html | 4 +- 3 files changed, 82 insertions(+), 28 deletions(-) diff --git a/assests/js/lib/embed/core.js b/assests/js/lib/embed/core.js index 29e30e0..c955d3e 100755 --- a/assests/js/lib/embed/core.js +++ b/assests/js/lib/embed/core.js @@ -42,7 +42,8 @@ this.$el = $(el); this.templates = window.MediumInsert.Templates; this.extend = new Extend(); - this.targetEl = '' + this.targetEl = '', + this.ctTime = null; if (options) { // Fix #142 @@ -483,6 +484,7 @@ */ Core.prototype.positionButtons = function (activeAddon) { + // console.log(activeAddon) var $buttons = this.$el.find('.medium-insert-buttons'), $p = this.$el.find('.medium-insert-active'), $lastCaption = $p.hasClass('medium-insert-images-grid') ? [] : $p.find('figure:last figcaption'), @@ -521,6 +523,7 @@ */ Core.prototype.toggleAddons = function () { + console.log('~~~~~~~~~~~~~~~ toggleAddons ~~~~~~~~~~~~~~~~~') if (this.$el.find('.medium-insert-buttons').attr('data-active-addon') === 'images') { this.$el.find('.medium-insert-buttons').find('button[data-addon="images"]').click(); return; @@ -839,17 +842,78 @@ })(); }; + Core.prototype.getCursorPosition = function (element) { + element = element || document.querySelector('.editable') + var caretOffset = 0; + var preCaretRange = ''; + var doc = element.ownerDocument || element.document; + var win = doc.defaultView || doc.parentWindow; + var sel; + if (typeof win.getSelection != "undefined") { + sel = win.getSelection(); + if (sel.rangeCount > 0) { + var range = win.getSelection().getRangeAt(0); + preCaretRange = range.cloneRange(); + preCaretRange.selectNodeContents(element); + preCaretRange.setEnd(range.endContainer, range.endOffset); + caretOffset = preCaretRange.toString().length; + } + } else if ( (sel = doc.selection) && sel.type != "Control") { + var textRange = sel.createRange(); + var preCaretTextRange = doc.body.createTextRange(); + preCaretTextRange.moveToElementText(element); + preCaretTextRange.setEndPoint("EndToEnd", textRange); + caretOffset = preCaretTextRange.text.length; + } + + return {point: caretOffset, text: preCaretRange.toString()} + } + + Core.prototype.getAllTextnodes = function (el) { + el = el || document.querySelector('.editable') + var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false); + while(n=walk.nextNode()) a.push(n); + return a; + } + + Core.prototype.getCursorData = function (el, position){ + el = el || document.querySelector('.editable') + var node, nodes = this.getAllTextnodes(el); + for(var n = 0; n < nodes.length; n++) { + if (position > nodes[n].nodeValue.length && nodes[n+1]) { + // remove amount from the position, go to next node + position -= nodes[n].nodeValue.length; + } else { + node = nodes[n]; + break; + } + } + // you'll need the node and the position (offset) to set the caret + return { node: node, position: position }; + } + + Core.prototype.setCursorPosition = function (d) { + var sel = window.getSelection(), + range = document.createRange(); + range.setStart(d.node, d.position); + range.collapse(true); + sel.removeAllRanges(); + sel.addRange(range); + } + + Core.prototype.checkInputMediaToolbar = function () { + const cPoint = this.getCursorPosition(); + const cPointDetail = this.getCursorData(null, cPoint.point); + console.log(cPointDetail) + // cPointDetail.node.parentElement.replaceChild('

New heading

'); + + } + Core.prototype.checkCustomPattern = function () { var an = window.getSelection().anchorNode; this.targetEl = $(an.parentElement); - - // var $place1 = this.$el.find('.medium-insert-images'); - // var $place2 = this.$el.find('.medium-insert-embeds-active'); - // console.log(this.$el) - // console.log($place1) - // console.log($place2) - + this.checkInputMediaToolbar(); // Parsed element data || false const templateValidate = this.checkTemplateValidate(); if (templateValidate) { @@ -866,23 +930,17 @@ } } - - Core.prototype.simulateKeydown = function (el, keycode, isCtrl, isAlt, isShift) { - var e = new KeyboardEvent( "keydown", { bubbles:true, cancelable:true, char:String.fromCharCode(keycode), key:String.fromCharCode(keycode), shiftKey:isShift, ctrlKey:isCtrl, altKey:isAlt } ); - Object.defineProperty(e, 'keyCode', {get : function() { return this.keyCodeVal; } }); - e.keyCodeVal = keycode; - el.dispatchEvent(e); - } - + Core.prototype.capturePattern = function () { - if(ctTime) { - window.clearTimeout(ctTime) - ctTime = null - } else { - ctTime = window.setTimeout(() => { + if(this.ctTime) { + window.clearTimeout(this.ctTime) + this.ctTime = null + } + + this.ctTime = window.setTimeout(() => { this.checkCustomPattern(); - }, 100); - } + }, 500); + } /** Plugin initialization */ diff --git a/assests/js/lib/embed/images.js b/assests/js/lib/embed/images.js index c3d6133..bf275a1 100755 --- a/assests/js/lib/embed/images.js +++ b/assests/js/lib/embed/images.js @@ -369,8 +369,6 @@ */ Images.prototype.uploadDone = function (e, data) { - console.log('uploadDone=> ', data) - // data.result: expect value -> {type: '', url: ''} if(data.type ==='img') { $.proxy(this, 'showImage', data.result, data)(); } else { diff --git a/index.html b/index.html index a59c9d9..3098d77 100644 --- a/index.html +++ b/index.html @@ -64,15 +64,13 @@

Advanced Medium Editor

- + From 2930b1afc4a542862cd1ad3ffdff1463f0874900 Mon Sep 17 00:00:00 2001 From: javascript603 Date: Wed, 30 Jan 2019 00:24:13 -0800 Subject: [PATCH 23/27] drag&drop implemented --- README.md | 4 +- assests/js/lib/embed/core.js | 30 +++++++++++ assests/js/lib/embed/images.js | 85 ++++++++++++++++++------------ src/js/events.js | 26 ++++----- src/js/extensions/file-dragging.js | 5 +- 5 files changed, 98 insertions(+), 52 deletions(-) diff --git a/README.md b/README.md index 867c781..62a83f5 100644 --- a/README.md +++ b/README.md @@ -5,12 +5,14 @@ Live URL: https://medium-editor-3379b.firebaseapp.com - How to create img and video elements ```[![image caption](image_path)]``` + ```[@[video caption](video url)]``` Example: + ```[![Houses](http://sfeizigroup.com/wp-content/uploads/2017/05/slide-5.jpg)]``` [![Houses](http://sfeizigroup.com/wp-content/uploads/2017/05/slide-5.jpg)] - ![url parse](./asserts/img/a.png) + ```[@[video caption](video url)]``` ## Main features diff --git a/assests/js/lib/embed/core.js b/assests/js/lib/embed/core.js index c955d3e..35d3c7e 100755 --- a/assests/js/lib/embed/core.js +++ b/assests/js/lib/embed/core.js @@ -114,6 +114,7 @@ this.$el .on('dragover drop', function (e) { e.preventDefault(); + $.proxy(that, 'dragDropAction')(e) }) .on('keyup click', $.proxy(this, 'toggleButtons')) .on('selectstart mousedown', '.medium-insert, .medium-insert-buttons', $.proxy(this, 'disableSelection')) @@ -298,6 +299,7 @@ that.$el[addonName](options); that.options.addons[addon] = that.$el.data('plugin_' + addonName).options; }); + }; /** @@ -561,6 +563,33 @@ this.$el.data('plugin_' + pluginName + ucfirst(addon))[action](); }; + + /** + * Call drag-drop's action + * + * @param {Event} e + * @return {void} + */ + + Core.prototype.dragDropAction = function (e) { + + const targetElement = e.target; + if(e.type === 'drop') { + console.log(targetElement) + const mediaData = e.originalEvent.dataTransfer.files; + this.$el.find('.medium-insert-active').removeClass('medium-insert-active'); + this.$el.find('.medium-insert-embeds-active').removeClass('medium-insert-embeds-active'); + e.target.click(); + + const newMediaDiv = document.createElement("div") + newMediaDiv.className = 'medium-insert-active' + targetElement.after(newMediaDiv); + + // this.$el.data('plugin_' + pluginName + ucfirst('images'))['add'](mediaData); + } + }; + + /** * Move caret at the beginning of the empty paragraph * @@ -708,6 +737,7 @@ if(result === 'success' && data.type === 'img') { that.createEmptyMediaDiv(data, "medium-insert-active") + that.$el.data('plugin_' + pluginName + ucfirst('images'))['showImageByURL'](data); } diff --git a/assests/js/lib/embed/images.js b/assests/js/lib/embed/images.js index bf275a1..876686c 100755 --- a/assests/js/lib/embed/images.js +++ b/assests/js/lib/embed/images.js @@ -200,37 +200,48 @@ * @return {void} */ - Images.prototype.add = function () { + Images.prototype.add = function (mediaData) { console.log('add function') - var that = this, - $file = $(this.templates['src/js/templates/images-fileupload.hbs']()), - fileUploadOptions = { - dataType: 'json', - add: function (e, data) { - $.proxy(that, 'uploadAdd', e, data)(); - }, - done: function (e, data) { - $.proxy(that, 'uploadDone', e, data)(); - } - }; + if(!mediaData) { + var that = this, + $file = $(this.templates['src/js/templates/images-fileupload.hbs']()), + fileUploadOptions = { + dataType: 'json', + files: null, + add: function (e, data) { + console.log('new add call back', data) + + $.proxy(that, 'uploadAdd', e, data)(); + that.core.clean(); + that.sorting(); + }, + done: function (e, data) { + $.proxy(that, 'uploadDone', e, data)(); + } + }; // Only add progress callbacks for browsers that support XHR2, // and test for XHR2 per: // http://stackoverflow.com/questions/6767887/ // what-is-the-best-way-to-check-for-xhr2-file-upload-support - if (new XMLHttpRequest().upload) { - fileUploadOptions.progress = function (e, data) { - $.proxy(that, 'uploadProgress', e, data)(); - }; - - fileUploadOptions.progressall = function (e, data) { - $.proxy(that, 'uploadProgressall', e, data)(); - }; - } - + // if (new XMLHttpRequest().upload) { + // fileUploadOptions.progress = function (e, data) { + // $.proxy(that, 'uploadProgress', e, data)(); + // }; + + // fileUploadOptions.progressall = function (e, data) { + // $.proxy(that, 'uploadProgressall', e, data)(); + // }; + // } + + + $file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions)); + $file.click(); - $file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions)); - $file.click(); + // $file.fileupload('add', {files: mediaData}); + } else { + $file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions)); + } }; /** @@ -242,7 +253,6 @@ */ Images.prototype.uploadAdd = function (e, data) { - var $place = this.$el.find('.medium-insert-active'), that = this, uploadErrors = [], @@ -251,13 +261,12 @@ maxFileSize = this.options.fileUploadOptions.maxFileSize, reader; - if (acceptFileTypes && !acceptFileTypes.test(file.type)) { uploadErrors.push(this.options.messages.acceptFileTypesError + file.name); } else if (maxFileSize && file.size > maxFileSize) { uploadErrors.push(this.options.messages.maxFileSizeError + file.name); } - + if (uploadErrors.length > 0) { if (this.options.uploadFailed && typeof this.options.uploadFailed === "function") { this.options.uploadFailed(uploadErrors, data); @@ -320,7 +329,7 @@ Images.prototype.uploadProgressall = function (e, data) { var progress, $progressbar; - + if (this.options.preview === false) { progress = parseInt(data.loaded / data.total * 100, 10); $progressbar = this.$el.find('.medium-insert-active').find('progress'); @@ -345,6 +354,7 @@ */ Images.prototype.uploadProgress = function (e, data) { + var progress, $progressbar; if (this.options.preview) { @@ -369,13 +379,14 @@ */ Images.prototype.uploadDone = function (e, data) { - if(data.type ==='img') { - $.proxy(this, 'showImage', data.result, data)(); - } else { - // this.$el.data('plugin_' + pluginName + ucfirst('embeds'))['oembed'](data.result.url); - this.$el.data('plugin_' + pluginName + ucfirst('embeds'))['oembed']('https://www.youtube.com/watch?v=2Lwd46qBrqU'); + if(data.result) { + if(data.result.type ==='img') { + $.proxy(this, 'showImage', data.result, data)(); + } else { + // this.$el.data('plugin_' + pluginName + ucfirst('embeds'))['oembed'](data.result.url); + this.$el.data('plugin_' + pluginName + ucfirst('embeds'))['oembed']('https://www.youtube.com/watch?v=2Lwd46qBrqU'); + } } - this.core.clean(); this.sorting(); }; @@ -388,7 +399,7 @@ */ Images.prototype.showImage = function (img, data) { - console.log(img) + var $place = this.$el.find('.medium-insert-active'), domImage, that; @@ -462,6 +473,7 @@ * @returns {void} */ Images.prototype.showImageByURL = function (img) { + console.log('ShowimageByURL =>', img) var $place = this.$el.find('.medium-insert-active').length? this.$el.find('.medium-insert-active') : this.$el.find('.medium-insert-embeds-active'), that = this; @@ -520,6 +532,7 @@ */ Images.prototype.selectImage = function (e) { + var that = this, $image; @@ -552,6 +565,7 @@ */ Images.prototype.unselectImage = function (e) { + var $el = $(e.target), $image = this.$el.find('.medium-insert-image-active'); @@ -581,6 +595,7 @@ */ Images.prototype.removeImage = function (e) { + var images = [], $selectedImage = this.$el.find('.medium-insert-image-active'), $parent, $empty, selection, range, current, caretPosition, $current, $sibling, selectedHtml, i; diff --git a/src/js/events.js b/src/js/events.js index 858aabc..06fb1df 100644 --- a/src/js/events.js +++ b/src/js/events.js @@ -153,7 +153,7 @@ }, triggerCustomEvent: function (name, data, editable) { - if (this.customEvents[name] && !this.disabledEvents[name]) { + if (this.customEvents[name] && !this.disabledEvents[name]) { this.customEvents[name].forEach(function (listener) { listener(data, editable); }); @@ -365,19 +365,19 @@ break; case 'editableDrag': // Detecting dragover and dragleave on the contenteditables - this.attachToEachElement('dragover', this.handleDragging); - this.attachToEachElement('dragleave', this.handleDragging); - break; - case 'editableDrop': - // Detecting drop on the contenteditables - this.attachToEachElement('drop', this.handleDrop); - break; - // TODO: We need to have a custom 'paste' event separate from 'editablePaste' - // Need to think about the way to introduce this without breaking folks - case 'editablePaste': - // Detecting paste on the contenteditables - this.attachToEachElement('paste', this.handlePaste); + // this.attachToEachElement('dragover', this.handleDragging); + // this.attachToEachElement('dragleave', this.handleDragging); break; + // case 'editableDrop': + // // Detecting drop on the contenteditables + // this.attachToEachElement('drop', this.handleDrop); + // break; + // // TODO: We need to have a custom 'paste' event separate from 'editablePaste' + // // Need to think about the way to introduce this without breaking folks + // case 'editablePaste': + // // Detecting paste on the contenteditables + // this.attachToEachElement('paste', this.handlePaste); + // break; } this.listeners[name] = true; }, diff --git a/src/js/extensions/file-dragging.js b/src/js/extensions/file-dragging.js index 9efc5a7..d6abc66 100644 --- a/src/js/extensions/file-dragging.js +++ b/src/js/extensions/file-dragging.js @@ -1,6 +1,5 @@ -(function () { +;(function ($, document, window) { 'use strict'; - var CLASS_DRAG_OVER = 'medium-editor-dragover'; function clearClassNames(element) { @@ -87,4 +86,4 @@ }); MediumEditor.extensions.fileDragging = FileDragging; -}()); +})($, document, window); From 19cd123ec54659e073fca9f61fabfb53427957b1 Mon Sep 17 00:00:00 2001 From: javascript603 Date: Wed, 30 Jan 2019 01:27:18 -0800 Subject: [PATCH 24/27] fixed upload error --- assests/js/lib/embed/core.js | 7 ++++--- assests/js/lib/embed/images.js | 17 ++++++++++------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/assests/js/lib/embed/core.js b/assests/js/lib/embed/core.js index 35d3c7e..707f621 100755 --- a/assests/js/lib/embed/core.js +++ b/assests/js/lib/embed/core.js @@ -113,8 +113,8 @@ this.$el .on('dragover drop', function (e) { - e.preventDefault(); - $.proxy(that, 'dragDropAction')(e) + // e.preventDefault(); + // $.proxy(that, 'dragDropAction')(e) }) .on('keyup click', $.proxy(this, 'toggleButtons')) .on('selectstart mousedown', '.medium-insert, .medium-insert-buttons', $.proxy(this, 'disableSelection')) @@ -299,6 +299,7 @@ that.$el[addonName](options); that.options.addons[addon] = that.$el.data('plugin_' + addonName).options; }); + this.$el.data('plugin_' + pluginName + ucfirst('images'))['add'](true); }; @@ -585,7 +586,7 @@ newMediaDiv.className = 'medium-insert-active' targetElement.after(newMediaDiv); - // this.$el.data('plugin_' + pluginName + ucfirst('images'))['add'](mediaData); + // this.$el.data('plugin_' + pluginName + ucfirst('images'))['add'](true); } }; diff --git a/assests/js/lib/embed/images.js b/assests/js/lib/embed/images.js index 876686c..6ee7fdb 100755 --- a/assests/js/lib/embed/images.js +++ b/assests/js/lib/embed/images.js @@ -202,12 +202,15 @@ Images.prototype.add = function (mediaData) { console.log('add function') - if(!mediaData) { var that = this, $file = $(this.templates['src/js/templates/images-fileupload.hbs']()), fileUploadOptions = { dataType: 'json', - files: null, + replaceFileInput: true, + drop: function (e, data) { + console.log('drop axction', data) + + }, add: function (e, data) { console.log('new add call back', data) @@ -236,11 +239,11 @@ $file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions)); - $file.click(); - - // $file.fileupload('add', {files: mediaData}); - } else { - $file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions)); + if(mediaData) { + + // $file.fileupload('add', {files: mediaData}); + } else { + $file.click(); } }; From 3aa09dd0836a21c63785a42a3d432434c4a6178a Mon Sep 17 00:00:00 2001 From: javascript603 Date: Wed, 30 Jan 2019 23:40:14 -0800 Subject: [PATCH 25/27] fixed the duplicate request when drag-dropping. --- assests/js/lib/embed/core.js | 12 ++++++----- assests/js/lib/embed/images.js | 37 +++++++++++++++++----------------- 2 files changed, 25 insertions(+), 24 deletions(-) diff --git a/assests/js/lib/embed/core.js b/assests/js/lib/embed/core.js index 707f621..d45eb92 100755 --- a/assests/js/lib/embed/core.js +++ b/assests/js/lib/embed/core.js @@ -112,10 +112,10 @@ var that = this; this.$el - .on('dragover drop', function (e) { - // e.preventDefault(); - // $.proxy(that, 'dragDropAction')(e) - }) + // .on('dragover drop', function (e) { + // e.preventDefault(); + // // $.proxy(that, 'dragDropAction')(e) + // }) .on('keyup click', $.proxy(this, 'toggleButtons')) .on('selectstart mousedown', '.medium-insert, .medium-insert-buttons', $.proxy(this, 'disableSelection')) .on('click', '.medium-insert-buttons-show', $.proxy(this, 'toggleAddons')) @@ -299,8 +299,10 @@ that.$el[addonName](options); that.options.addons[addon] = that.$el.data('plugin_' + addonName).options; }); + + this.$el.append(this.templates['src/js/templates/images-fileupload.hbs']()); + this.$el.find('input:file').hide(); this.$el.data('plugin_' + pluginName + ucfirst('images'))['add'](true); - }; /** diff --git a/assests/js/lib/embed/images.js b/assests/js/lib/embed/images.js index 6ee7fdb..28e9395 100755 --- a/assests/js/lib/embed/images.js +++ b/assests/js/lib/embed/images.js @@ -202,8 +202,9 @@ Images.prototype.add = function (mediaData) { console.log('add function') + if(mediaData) { var that = this, - $file = $(this.templates['src/js/templates/images-fileupload.hbs']()), + $file = $('input:file'), fileUploadOptions = { dataType: 'json', replaceFileInput: true, @@ -223,27 +224,25 @@ } }; - // Only add progress callbacks for browsers that support XHR2, - // and test for XHR2 per: - // http://stackoverflow.com/questions/6767887/ - // what-is-the-best-way-to-check-for-xhr2-file-upload-support - // if (new XMLHttpRequest().upload) { - // fileUploadOptions.progress = function (e, data) { - // $.proxy(that, 'uploadProgress', e, data)(); - // }; - - // fileUploadOptions.progressall = function (e, data) { - // $.proxy(that, 'uploadProgressall', e, data)(); - // }; - // } - + // Only add progress callbacks for browsers that support XHR2, + // and test for XHR2 per: + // http://stackoverflow.com/questions/6767887/ + // what-is-the-best-way-to-check-for-xhr2-file-upload-support + if (new XMLHttpRequest().upload) { + fileUploadOptions.progress = function (e, data) { + $.proxy(that, 'uploadProgress', e, data)(); + }; + + fileUploadOptions.progressall = function (e, data) { + $.proxy(that, 'uploadProgressall', e, data)(); + }; + } $file.fileupload($.extend(true, {}, this.options.fileUploadOptions, fileUploadOptions)); - if(mediaData) { - // $file.fileupload('add', {files: mediaData}); - } else { - $file.click(); + } else { + var $file = $('input:file'); + $file.click(); } }; From d1ccb6a82e7c060e61d0a89aa17f29ae33d7e733 Mon Sep 17 00:00:00 2001 From: "React.DEV" Date: Thu, 31 Jan 2019 00:15:15 -0800 Subject: [PATCH 26/27] fixed input element initialization --- assests/js/lib/embed/core.js | 23 ++++++----------------- assests/js/lib/embed/images.js | 13 ++----------- 2 files changed, 8 insertions(+), 28 deletions(-) diff --git a/assests/js/lib/embed/core.js b/assests/js/lib/embed/core.js index d45eb92..c5abcc4 100755 --- a/assests/js/lib/embed/core.js +++ b/assests/js/lib/embed/core.js @@ -112,10 +112,10 @@ var that = this; this.$el - // .on('dragover drop', function (e) { - // e.preventDefault(); - // // $.proxy(that, 'dragDropAction')(e) - // }) + .on('dragover drop', function (e) { + e.preventDefault(); + $.proxy(that, 'dragDropAction')(e) + }) .on('keyup click', $.proxy(this, 'toggleButtons')) .on('selectstart mousedown', '.medium-insert, .medium-insert-buttons', $.proxy(this, 'disableSelection')) .on('click', '.medium-insert-buttons-show', $.proxy(this, 'toggleAddons')) @@ -489,7 +489,6 @@ */ Core.prototype.positionButtons = function (activeAddon) { - // console.log(activeAddon) var $buttons = this.$el.find('.medium-insert-buttons'), $p = this.$el.find('.medium-insert-active'), $lastCaption = $p.hasClass('medium-insert-images-grid') ? [] : $p.find('figure:last figcaption'), @@ -528,7 +527,6 @@ */ Core.prototype.toggleAddons = function () { - console.log('~~~~~~~~~~~~~~~ toggleAddons ~~~~~~~~~~~~~~~~~') if (this.$el.find('.medium-insert-buttons').attr('data-active-addon') === 'images') { this.$el.find('.medium-insert-buttons').find('button[data-addon="images"]').click(); return; @@ -559,7 +557,6 @@ */ Core.prototype.addonAction = function (e) { - console.log('select any media type here: core->addonAction') var $a = $(e.currentTarget), addon = $a.data('addon'), action = $a.data('action'); @@ -578,17 +575,13 @@ const targetElement = e.target; if(e.type === 'drop') { - console.log(targetElement) - const mediaData = e.originalEvent.dataTransfer.files; this.$el.find('.medium-insert-active').removeClass('medium-insert-active'); this.$el.find('.medium-insert-embeds-active').removeClass('medium-insert-embeds-active'); e.target.click(); const newMediaDiv = document.createElement("div") newMediaDiv.className = 'medium-insert-active' - targetElement.after(newMediaDiv); - - // this.$el.data('plugin_' + pluginName + ucfirst('images'))['add'](true); + targetElement.after(newMediaDiv); } }; @@ -736,8 +729,6 @@ */ Core.prototype.embedMedia = function(data, that, result) { - console.log('Validate Response successflully ===>', result, data) - if(result === 'success' && data.type === 'img') { that.createEmptyMediaDiv(data, "medium-insert-active") @@ -846,8 +837,6 @@ const altText = matches[2] const filePath = matches[3]; - console.log(`PatternType => ${mediaType}, AltText => ${altText}, FilePath => ${filePath}`) - // check if the current file is valid media file const fileURLValidate= this.checkMediaUrlParse(mediaType, filePath) if (fileURLValidate) { @@ -937,7 +926,7 @@ Core.prototype.checkInputMediaToolbar = function () { const cPoint = this.getCursorPosition(); const cPointDetail = this.getCursorData(null, cPoint.point); - console.log(cPointDetail) + // cPointDetail.node.parentElement.replaceChild('

New heading

'); } diff --git a/assests/js/lib/embed/images.js b/assests/js/lib/embed/images.js index 28e9395..773ddd4 100755 --- a/assests/js/lib/embed/images.js +++ b/assests/js/lib/embed/images.js @@ -16,6 +16,7 @@ captionPlaceholder: 'Type caption for image (optional)', autoGrid: 3, fileUploadOptions: { + // url: 'https://www.vikids.ru/medias', url: 'http://localhost:3000/upload', type: 'POST', acceptFileTypes: /(\.|\/)(gif|jpe?g|png|mp4|avi|mpeg|)$/i, @@ -201,7 +202,6 @@ */ Images.prototype.add = function (mediaData) { - console.log('add function') if(mediaData) { var that = this, $file = $('input:file'), @@ -209,15 +209,10 @@ dataType: 'json', replaceFileInput: true, drop: function (e, data) { - console.log('drop axction', data) - + e.preventDefault(); }, add: function (e, data) { - console.log('new add call back', data) - $.proxy(that, 'uploadAdd', e, data)(); - that.core.clean(); - that.sorting(); }, done: function (e, data) { $.proxy(that, 'uploadDone', e, data)(); @@ -413,7 +408,6 @@ // replace it with uploaded image that = this; if (this.options.preview && data.context) { - console.log('data content exist, replace the real data', img.url) domImage = this.getDOMImage(); const fileUrl = img.url.match(/(http|https):\/\//)? ima.url: `http://${img.url}`; @@ -429,7 +423,6 @@ domImage.src = fileUrl; } else { - console.log('data content does not exist') data.context = $(this.templates['src/js/templates/images-image.hbs']({ img: typeof img === 'object'? img.url : img, progress: this.options.preview @@ -475,8 +468,6 @@ * @returns {void} */ Images.prototype.showImageByURL = function (img) { - - console.log('ShowimageByURL =>', img) var $place = this.$el.find('.medium-insert-active').length? this.$el.find('.medium-insert-active') : this.$el.find('.medium-insert-embeds-active'), that = this; From cbb373d9aed040a20a55e830e4a59838e5624196 Mon Sep 17 00:00:00 2001 From: "React.DEV" Date: Thu, 31 Jan 2019 07:20:36 -0800 Subject: [PATCH 27/27] updated port config --- app.js | 2 +- assests/js/lib/embed/images.js | 4 ++-- package.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index 26f9875..6bdf727 100644 --- a/app.js +++ b/app.js @@ -2,7 +2,7 @@ let express = require('express') let path = require('path') let app = express() -const port = 8080; +const port = 3000; app.use(express.static(path.join(__dirname, '/'))); diff --git a/assests/js/lib/embed/images.js b/assests/js/lib/embed/images.js index 773ddd4..63622d1 100755 --- a/assests/js/lib/embed/images.js +++ b/assests/js/lib/embed/images.js @@ -10,7 +10,7 @@ defaults = { label: '', deleteMethod: 'POST', - deleteScript: 'delete.php', + deleteScript: 'http://localhost:3000/delete', preview: true, captions: true, captionPlaceholder: 'Type caption for image (optional)', @@ -209,7 +209,7 @@ dataType: 'json', replaceFileInput: true, drop: function (e, data) { - e.preventDefault(); + // e.preventDefault(); }, add: function (e, data) { $.proxy(that, 'uploadAdd', e, data)(); diff --git a/package.json b/package.json index 16046d5..529a9cb 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,7 @@ }, "scripts": { "build": "node node_modules/grunt-cli/bin/grunt", - "start": "open ./index.html", + "start": "nodemon app.js", "serve": "firebase serve", "deploy": "firebase deploy", "test": "node node_modules/grunt-cli/bin/grunt test --verbose",