X-Git-Url: https://scm.cri.mines-paristech.fr/git/ckeditor.git/blobdiff_plain/90e3d8dbc707760aefad9ea1004ccdeaadd56351..1badda86f23d981e3cc8d73cf04b7463a531c482:/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 149de7f..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);}); @@ -18,13 +23,13 @@ var PlinnCKDDUploader = function(editor) { // Drag and drop PlinnCKDDUploader.prototype.dragenter = function(e) { - evt = e.data.$; + var evt = e.data.$; disableDefault(evt); disablePropagation(evt); }; PlinnCKDDUploader.prototype.dragover = function(e) { - evt = e.data.$; + var evt = e.data.$; disableDefault(evt); disablePropagation(evt); evt = getEventObject(evt); @@ -33,7 +38,7 @@ PlinnCKDDUploader.prototype.dragover = function(e) { }; PlinnCKDDUploader.prototype.drop = function(e) { - evt = e.data.$; + var evt = e.data.$; disableDefault(evt); disablePropagation(evt); getEventObject(evt); @@ -42,38 +47,90 @@ 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); - var progressBar = CKEDITOR.dom.element.createFromHtml('') + var progressBar = CKEDITOR.dom.element.createFromHtml( + ''); 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 = new Object(); + 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); } }; @@ -120,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) { @@ -136,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) { @@ -145,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) { @@ -168,18 +250,56 @@ 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) { if (reSize.test(img.src)){ var matches = reSize.exec(img.src); - var srcWidth = parseInt(matches[1]); - var srcHeight = parseInt(matches[2]); + var srcWidth = parseInt(matches[1], 10); + var srcHeight = parseInt(matches[2], 10); - var imgWidth = parseInt((img.style.width) ? img.style.width : img.width); - var imgHeight = parseInt((img.style.height) ? img.style.height : img.height); + var imgWidth = parseInt((img.style.width) ? img.style.width : img.width, 10); + var imgHeight = parseInt((img.style.height) ? img.style.height : img.height, 10); - if ((imgWidth && imgHeight) && srcWidth != imgWidth && srcHeight != imgHeight) { + if ((imgWidth && imgHeight) && srcWidth !== imgWidth && srcHeight !== imgHeight) { var newUrl = img.getAttribute('src', 2).replace(reSize, 'getResizedImage?size=' + imgWidth + '_' + imgHeight); img.width = imgWidth; img.height = imgHeight; @@ -197,7 +317,7 @@ function openPlinnImageDialog(path, editor) { //",left=" + iLeft ; var win = open(path + 'dialog/plinn_image.html', 'PlinnImageDialog', winOptions); - win.dialogArguments = new Object(); + win.dialogArguments = {}; win.dialogArguments.editor = editor; win.dialogArguments.pluginPath = path; win.dialogArguments.CKEDITOR = CKEDITOR; @@ -217,8 +337,9 @@ CKEDITOR.plugins.add( 'plinn_image', var tmpDiv = document.createElement('div'); tmpDiv.innerHTML = evt.data.dataValue; var images = tmpDiv.getElementsByTagName('IMG'); - for (var i = 0 ; i < images.length ; i++) - updateImageSizeUrlParameters(images[i]); + var i; + for (i = 0 ; i < images.length ; i++) { + updateImageSizeUrlParameters(images[i]);} evt.data.dataValue = tmpDiv.innerHTML; } ); @@ -248,4 +369,4 @@ CKEDITOR.plugins.add( 'plinn_image', }); -})(); +}());