X-Git-Url: https://scm.cri.ensmp.fr/git/ckeditor.git/blobdiff_plain/015e0dd96227ff485466c52dfa6c3d8ee541cf54..e26345ed9b0afe560d7f06d8cbbc9698eba433d2:/skins/ckeditor/plugins/plinn_image/plugin.js diff --git a/skins/ckeditor/plugins/plinn_image/plugin.js b/skins/ckeditor/plugins/plinn_image/plugin.js index c7ae5ec..3e2606c 100644 --- a/skins/ckeditor/plugins/plinn_image/plugin.js +++ b/skins/ckeditor/plugins/plinn_image/plugin.js @@ -4,12 +4,17 @@ (function(){ var reImage = /^image\//; +var MAX_PREVIEW = 2; var PlinnCKDDUploader = function(editor) { this.editor = editor; this.uploadUrl = editor.config.baseHref + 'attachments/put_upload'; this.uploadQueue = []; this._uploadQueueRunning = false; + this.previewQueue = []; + this._previewQueueRunning = false; + this.previewsLoaded = 0; + this.thumbnailSize = 310; var self = this; editor.document.on('dragenter', function(e) {self.dragenter(e);}); editor.document.on('dragover', function(e) {self.dragover(e);}); @@ -42,7 +47,7 @@ PlinnCKDDUploader.prototype.drop = function(e) { this.handleFiles(dt.files); }; -PlinnCKDDUploader.prototype.createFileProxy = function(file) { +PlinnCKDDUploader.prototype.createLinkProxy = function(file) { var container = new CKEDITOR.dom.element('span'); var rel = CKEDITOR.dom.element.createFromHtml(''); container.append(rel); @@ -51,31 +56,81 @@ PlinnCKDDUploader.prototype.createFileProxy = function(file) { rel.append(progressBar); var link = new CKEDITOR.dom.element('a'); link.setAttribute('href', '#'); + link.setStyle('opacity', 0.2); link.appendText(file.name); container.append(link); var proxy = {}; proxy.file = file; + proxy.type = 'link'; proxy.container = container; proxy.progressBar = progressBar; proxy.link = link; return proxy; }; +PlinnCKDDUploader.prototype.createImageProxy = function(file) { + var container = new CKEDITOR.dom.element('span'); + var rel = CKEDITOR.dom.element.createFromHtml(''); + container.append(rel); + var progressBar = CKEDITOR.dom.element.createFromHtml( + ''); + rel.append(progressBar); + + var img = new CKEDITOR.dom.element('img'); + img.setAttribute('width', 310); + img.setAttribute('height', 290); + img.setStyle('opacity', 0.2); + img.setAttribute('src', 'no_image.jpg'); + img.placeholder = true; + var size = this.thumbnailSize; + var self = this; + + img.on('load', function(e) { + if (e.sender.placeholder) { + e.sender.placeholder = false; + return; + }; + var img$ = e.data.$.target; + if (img$.naturalWidth > img$.naturalHeight) { // landscape + img$.height = Math.round(size * img$.naturalHeight / img$.naturalWidth); + img$.width = size; + } + else { + img$.width = Math.round(size * img$.naturalWidth / img$.naturalHeight); + img$.height = size; + } + self.progressBarMaxSize = img$.width; + img$.style.opacity = 0.2; + }); + + container.append(img); + + var proxy = {}; + proxy.file = file; + proxy.type = 'image'; + proxy.container = container; + proxy.progressBar = progressBar; + proxy.img = img; + return proxy; +}; + // Methods about upload PlinnCKDDUploader.prototype.handleFiles = function(files) { var file, i, proxy; for (i=0 ; i 1 && i < files.length-1) { + this.editor.insertText('\n'); } + this.uploadQueuePush(proxy); } }; @@ -122,10 +177,24 @@ PlinnCKDDUploader.prototype.upload = function(item) { PlinnCKDDUploader.prototype.uploadCompleteHandlerCB = function(req) { var item = this.uploadedItem; var data = req.responseXML.documentElement; - var link = new CKEDITOR.dom.element('a'); - link.setAttribute('href', 'attachments/' + data.getAttribute('id')); - link.appendText(data.getAttribute('title')); - link.replace(item.container); + switch (item.type) { + case 'link' : + var link = new CKEDITOR.dom.element('a'); + link.setAttribute('href', 'attachments/' + data.getAttribute('id')); + link.appendText(data.getAttribute('title')); + link.replace(item.container); + break; + case 'image' : + var img = new CKEDITOR.dom.element('img'); + img.setAttribute('src', data.getAttribute('src')); + img.setAttribute('alt', data.getAttribute('title')); + img.setAttribute('width', data.getAttribute('width')); + img.setAttribute('height', data.getAttribute('height')); + img.replace(item.container); + this.previewsLoaded--; + this.previewQueueLoadNext(); + break; + } }; PlinnCKDDUploader.prototype.uploadCompleteHandler = function(req) { @@ -138,6 +207,17 @@ PlinnCKDDUploader.prototype.progressHandlerCB = function(progress) { var size = this.progressBarMaxSize * progress; size = Math.round(size); this.progressBar.setStyle('width', String(size) + 'px'); + var currentOpacity; + switch(this.uploadedItem.type) { + case 'link' : + currentOpacity = this.uploadedItem.link.getStyle('opacity'); + this.uploadedItem.link.setStyle('opacity', Math.max(currentOpacity, progress)); + break; + case 'image' : + currentOpacity = this.uploadedItem.img.getStyle('opacity'); + this.uploadedItem.img.setStyle('opacity', Math.max(currentOpacity, progress)); + break; + } }; PlinnCKDDUploader.prototype.progressHandler = function(evt) { @@ -147,7 +227,7 @@ PlinnCKDDUploader.prototype.progressHandler = function(evt) { } }; -// Methods about queue +// Methods about upload queue PlinnCKDDUploader.prototype.uploadQueuePush = function(item) { this.uploadQueue.push(item); if (!this._uploadQueueRunning) { @@ -170,6 +250,44 @@ PlinnCKDDUploader.prototype.uploadQueueLoadNext = function() { } }; +// Methods about image preview queue. +PlinnCKDDUploader.prototype.previewQueuePush = function(proxy) { + this.previewQueue.push(proxy); + if (!this._previewQueueRunning) { + this.startPreviewQueue(); + } +}; + +PlinnCKDDUploader.prototype.startPreviewQueue = function() { + this._previewQueueRunning = true; + this.previewQueueLoadNext(); +}; + +PlinnCKDDUploader.prototype.previewQueueLoadNext = function() { + if (this.previewQueue.length && this.previewsLoaded < MAX_PREVIEW) { + var proxy = this.previewQueue.shift(); + this.previewUploadedImage(proxy); + this.previewsLoaded++; + } + else { + this._previewQueueRunning = false; + } +}; + +PlinnCKDDUploader.prototype.previewUploadedImage = function(proxy) { + var reader = new FileReader(); + var size = this.thumbnailSize; + var self = this; + + reader.onload = function(evt) { + proxy.img.setAttribute('src', evt.target.result); + setTimeout(function(){self.previewQueueLoadNext();}, 500); + }; + reader.readAsDataURL(proxy.file); +}; + + + var reSize = /getResizedImage\?size=(\d+)_(\d+)$/; function updateImageSizeUrlParameters(img) {