From: Benoît Pin <benoit.pin@gmail.com>
Date: Thu, 10 Apr 2014 03:10:23 +0000 (+0200)
Subject: Implémentation envoi d'images (finitions à faire).
X-Git-Url: https://scm.cri.ensmp.fr/git/ckeditor.git/commitdiff_plain/35d32f35f43e33f068b39a4c7daf9eb16773cbe7?ds=inline;hp=2d713e87d60560e07419d37004b0261fbd972baf

Implémentation envoi d'images (finitions à faire).
---

diff --git a/skins/ckeditor/plugins/plinn_image/plugin.js b/skins/ckeditor/plugins/plinn_image/plugin.js
index 631f9fa..046b7ad 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('<span style="position:relative"/>');
 	container.append(rel);
@@ -57,26 +62,67 @@ PlinnCKDDUploader.prototype.createFileProxy = function(file) {
 
 	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('<span style="position:relative"/>');
+	container.append(rel);
+	var progressBar = CKEDITOR.dom.element.createFromHtml(
+		'<span style="display:block; position:absolute; background:#ef8e32; height:4px; border-radius:2px; width:0; left:0; top:1em"/>');
+	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');
+	var size = this.thumbnailSize;
+	
+	img.on('load', function(e) {
+		var img$ = img.$;
+		if (img$.width > img$.height) { // landscape
+			img$.height = Math.round(size * img$.height / img$.width);
+			img$.width = size;
+		}
+		else {
+			img$.width = Math.round(size * img$.width / img$.height);
+			img$.height = size;
+		}
+		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<files.length ; i++) {
 		file = files[i];
 		if (reImage.test(file.type)) {
-			// TODO
+			proxy = this.createImageProxy(file);
+			this.previewQueuePush(proxy);
 		}
 		else {
-			proxy = this.createFileProxy(file);
-			this.editor.insertElement(proxy.container);
-			this.editor.insertText(' ');
-			this.uploadQueuePush(proxy);
+			proxy = this.createLinkProxy(file);
 		}
+		this.editor.insertElement(proxy.container);
+		this.editor.insertText(' ');
+		this.uploadQueuePush(proxy);
 	}
 };
 
@@ -123,10 +169,22 @@ 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);
+			break;
+	}
 };
 
 PlinnCKDDUploader.prototype.uploadCompleteHandler = function(req) {
@@ -139,8 +197,17 @@ PlinnCKDDUploader.prototype.progressHandlerCB = function(progress) {
 	var size = this.progressBarMaxSize * progress;
 	size = Math.round(size);
 	this.progressBar.setStyle('width', String(size) + 'px');
-	var currentOpacity = this.uploadedItem.link.getStyle('opacity');
-	this.uploadedItem.link.setStyle('opacity', Math.max(currentOpacity, progress));
+	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) {
@@ -150,7 +217,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) {
@@ -173,6 +240,45 @@ 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);
+		// proxy.img.src = evt.target.result;
+		setTimeout(function(){self.previewQueueLoadNext();}, 500);
+	};
+	reader.readAsDataURL(proxy.file);
+};
+
+
+
 var reSize = /getResizedImage\?size=(\d+)_(\d+)$/;
 
 function updateImageSizeUrlParameters(img) {