X-Git-Url: https://scm.cri.mines-paristech.fr/git/ckeditor.git/blobdiff_plain/b67a02e371649e700299602f4ccee716fa3903e2..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 0220127..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,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('<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"/>')
+	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 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('<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');
+	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<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.uploadQueuePush(proxy);
+			proxy = this.createLinkProxy(file);
 		}
+		this.editor.insertElement(proxy.container);
+		if (files.length > 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',
 	
 });
 
-})();
+}());