X-Git-Url: https://scm.cri.minesparis.psl.eu/git/PlinnDocument.git/blobdiff_plain/57a4d385a1d2806d5877f53b1fdb0bd94efa2dbb..3b91dbcbb0b99d3d796a01813018db0e540bd0ec:/Products/PlinnDocument/skins/layout_controlers.js

diff --git a/Products/PlinnDocument/skins/layout_controlers.js b/Products/PlinnDocument/skins/layout_controlers.js
new file mode 100644
index 0000000..c0a383e
--- /dev/null
+++ b/Products/PlinnDocument/skins/layout_controlers.js
@@ -0,0 +1,365 @@
+// (c) Benoît PIN 2006-2007
+// http://plinn.org
+// Licence GPL
+
+// Global variables
+var CURRENT_LAYER;
+var LAYER_MANAGER;
+var XML_OUTPUT;
+var PLINN_DOCUMENT_URL;
+var GLOBAL_DD_CONTROLER;
+
+function initPlinn(root_container, xmlDataUrl) {
+	PLINN_DOCUMENT_URL = document.getElementById("PlinnDocumentUrl").innerHTML;
+	form_path = PLINN_DOCUMENT_URL+'/'; // for epoz
+	initElementsPool();
+	initWidgets();
+	var imp = new XMLImport(xmlDataUrl, root_container);
+	GLOBAL_DD_CONTROLER = new GlobalPlinnDDControler(root_container);
+}
+
+
+function initWidgets() {
+	// Global control widgets
+	XML_OUTPUT = document.getElementById("xml_output")
+}
+
+function initLayerManager(root_container) {
+	LAYER_MANAGER = new LayerManager(root_container, new ColorIterator(240, 80, 60, 83)); // todo : move in config file
+}
+
+function Point(x, y) {
+	this.x = x;
+	this.y = y;
+}
+Point.prototype.difference = function(point) { return new Point(this.x - point.x, this.y - point.y); };
+Point.prototype.addition = function(point) { return new Point(this.x + point.x, this.y + point.y); };
+Point.prototype.toString = function() { return "(" + String(this.x) + ", " + String(this.y) + ")"; };
+
+
+function GlobalPlinnDDControler(root_container) {
+	this.root_container = root_container;
+	this.dragInProgress = false;
+	
+	this.currentRect = null;
+	this.dragAllowed	= null;
+	this.resizeAllowed	= null;
+	this.scalable = null;
+	this.deleteAllowed = null;
+	
+
+	//Constants
+	this.DRAG_MODE = 0;
+	this.RESIZE_MODE = 1;
+	
+	this.mode = this.DRAG_MODE;
+	this.ddEventCaptureElmt = document;
+	
+	// event listeners
+	var thisControler = this;
+	with (this.root_container) {
+		onmouseover	= function(evt){thisControler.onmouseover(evt);};
+		onmouseout	= function(evt){thisControler.onmouseout(evt);};
+	}
+	with (this.ddEventCaptureElmt) {
+		onmousedown	= function(evt){thisControler.onmousedown(evt);};
+		onmousemove	= function(evt){thisControler.onmousemove(evt);};
+		onmouseup	= function(evt){thisControler.onmouseup(evt);};
+	}
+}
+
+GlobalPlinnDDControler.prototype.onmouseover = function(evt) {
+	if (this.dragInProgress) return;
+	var ob = getTargetedObject(evt);
+	var rect = ob.rectangle;
+	if (!rect) return;
+	rect.showHandles();
+};
+
+GlobalPlinnDDControler.prototype.onmouseout = function(evt) {
+	if (this.dragInProgress) return;
+	var ob = getTargetedObject(evt);
+	var rect = ob.rectangle;
+	if (!rect) return;
+	rect.hideHandles();
+};
+
+GlobalPlinnDDControler.prototype.onmousedown = function(evt) {
+	var ob = getTargetedObject(evt);
+	var rect = ob.rectangle;
+
+	if (!rect) return;
+
+	this.currentRect = rect;
+	this.setDDOptions(rect.ddOptions);
+	
+	var evt = getEventObject(evt);
+	if (this.deleteAllowed && (
+		(evt.shiftKey && evt.altKey) ||
+		(ob.tagName == "IMG" && ob.className=="rectangle_delimg")) ) {
+		if (confirm(PlinnLang["Do you realy want to delete ?"])) {
+			var hostDiv = rect.hostDiv;
+			hostDiv.parentNode.removeChild(hostDiv);
+		}
+		return;
+	}
+	
+	this.originalClickPoint = new Point(evt.screenX, evt.screenY);
+	this.originalSize = new Point(rect.width, rect.height);
+	this.offsetPoint = rect.upperLeftCorner.difference(this.originalClickPoint);
+
+	if (evt.shiftKey || (ob.tagName == "SPAN" && ob.className=="resize_handle")) {
+		this.mode = this.RESIZE_MODE;
+		this.startDrag(evt, rect);
+	}
+	else if(evt.altKey || (ob.tagName == "DIV" && ob.className=="rectangle_header")){
+		this.mode = this.DRAG_MODE;
+		this.startDrag(evt, rect);
+	}
+};
+
+GlobalPlinnDDControler.prototype.onmousemove = function(evt) {
+	var evt = getEventObject(evt);
+	if (this.dragInProgress) {
+		var rectangle = this.currentRect;
+		if (this.dragAllowed && (this.mode == this.DRAG_MODE)) {
+			var relativeEvtPoint = new Point(evt.screenX, evt.screenY).addition(this.offsetPoint);
+			rectangle.moveTo(relativeEvtPoint);
+		}
+		else if (this.resizeAllowed && (this.mode == this.RESIZE_MODE)) {
+			var delta = new Point(evt.screenX, evt.screenY).difference(this.originalClickPoint);
+			var size = this.originalSize.addition(delta);
+			if (this.scalable) {
+				size = new Point(size.x, Math.round(size.x * rectangle.ratio));
+			}
+
+			rectangle.resizeTo(size);
+		}
+		if (browser.isIE) {
+			try {document.selection.clear();}
+			catch (e){return;}
+		}
+	}
+};
+
+GlobalPlinnDDControler.prototype.onmouseup = function(evt) {
+	this.drop()
+	var rectangle = this.currentRect;
+	if (rectangle && rectangle.ondrop)
+		rectangle.ondrop();
+};
+
+
+GlobalPlinnDDControler.prototype.startDrag = function(evt, rect) {
+	disablePropagation(evt);
+	disableDefault(evt);
+	this.dragInProgress = true;
+};
+
+GlobalPlinnDDControler.prototype.drop = function() {this.dragInProgress = false;};
+
+GlobalPlinnDDControler.prototype.setDDOptions = function(options){
+	this.dragAllowed	= (options & 1) == 1;
+	this.resizeAllowed	= (options & 2) == 2;
+	this.scalable 		= (options & 4) == 4;
+	this.deleteAllowed 	= (options & 8) == 8;
+};
+
+
+
+function LayerManager(main_space, colorIterator) {
+	this.space = main_space;
+	this.layers = new Array();
+	this.defaultLayerWidth = 800;
+	this.defaultLayerHeight = 600;
+	this.colorIterator = colorIterator;
+	this.layerSelector = document.getElementById('layerSelector');
+	var thisManager = this;
+
+	// add layer selector commands
+	// separator between layers list and layer commandes
+	var sepOpt = document.createElement("option");
+	sepOpt.innerHTML = "--------";
+	sepOpt.disabled = "disabled";
+	sepOpt.style.color = "#888";
+	
+	// new layer command
+	var addLayerOpt = document.createElement("option");
+	addLayerOpt.value = "add";
+	addLayerOpt.innerHTML = PlinnLang["New layer"];
+	addLayerOpt.style.color = "#000";
+	
+	// remove layer command
+	var removeLayerOpt = document.createElement("option");
+	removeLayerOpt.value = "rm";
+	removeLayerOpt.innerHTML = PlinnLang["Remove layer"];
+	removeLayerOpt.disabled = "disabled";
+	
+	with (this.layerSelector) {
+		appendChild(sepOpt);
+		appendChild(addLayerOpt);
+		appendChild(removeLayerOpt);
+	}
+	addListener(this.layerSelector, 'change', function(){thisManager.activateLayer();});
+}
+
+LayerManager.prototype.addLayer = function(position) {
+	var color = this.colorIterator.next();
+	var mode = 6; // resize and delete
+	if (this.layers.length <= 1)
+		mode = 2; // resize only
+	var l = new Rectangle(new Point(0, 0), this.defaultLayerWidth, this.defaultLayerHeight, "DIV_ELEMENT", 2);
+	setBorderColor(l, color.toRGBString());
+	l.onresize = resizeOnMouseMove;
+	l.ondrop = resizeOnDrop;
+	l.style.overflow = "hidden";
+	l.draw(this.space, position);
+	var index = this.layers.push(l) - 1;
+	
+	var opt = document.createElement("option");
+	strId = String(index);
+	opt.value = strId;
+	opt.id = "layer_" + strId;
+	opt.innerHTML = PlinnLang["Layer "] + strId;
+	opt.style.color = color.toRGBString();
+	this.layerSelector.insertBefore(opt, this.layerSelector.childNodes[this.layers.length-1]);
+	
+	// If there's only one layer, the remove command is disabled.
+	if (this.layers.length > 1) {
+		var rmCommand = this.layerSelector.childNodes[this.layerSelector.length -1]
+		rmCommand.removeAttribute("disabled");
+		rmCommand.style.color="#000";
+	}
+	this.activateLayer(index);
+};
+	
+LayerManager.prototype.activateLayer = function(index) {
+	var layerSelector = this.layerSelector;
+	var index = (index != null) ? index : layerSelector.value;
+	// handle commands
+	index = ( Number(index) || Number(index ) == 0 ) ? Number(index) : index
+
+	if (typeof(index) == typeof('')) {
+		switch (index) {
+			case "add" :
+				this.addLayer();
+				break;
+			case "rm" :
+				this.removeCurrentLayer();
+				break;
+		};
+		return;
+	}
+	
+	CURRENT_LAYER = this.layers[index];
+	this._syncLayerStatusImage();
+	var opt = document.getElementById("layer_" + String(index));
+	layerSelector.selectedIndex = opt.index;
+	layerSelector.style.color = opt.style.color;
+	this.putCurrentLayerOnTop();
+};
+
+
+LayerManager.prototype.putCurrentLayerOnTop = function() {
+	for(var i = 0 ; i < this.layers.length ; i++) {
+		layer = this.layers[i];
+		if (layer == CURRENT_LAYER)
+			layer.style.zIndex = String(this.layers.length);
+		else
+			layer.style.zIndex = String(i);
+	}
+};
+	
+LayerManager.prototype.toggleLayerVisibility = function(){
+	var currentVisibility = CURRENT_LAYER.style.visibility;
+	if (currentVisibility == "hidden")
+		CURRENT_LAYER.style.visibility = "visible";
+	else
+		CURRENT_LAYER.style.visibility = "hidden";
+
+	this._syncLayerStatusImage();
+};
+
+LayerManager.prototype._syncLayerStatusImage = function() {
+	var layerStatusImage = document.getElementById("layer_status");
+	if (CURRENT_LAYER.style.visibility == "hidden") {
+		layerStatusImage.src = "plinn_icons/hidden_layer.gif";
+		layerStatusImage.title = PlinnLang["Show layer"];
+	}
+	else {
+		layerStatusImage.src = "plinn_icons/visible_layer.gif";
+		layerStatusImage.title = PlinnLang["Hide layer"];
+	}
+};
+	
+LayerManager.prototype.removeCurrentLayer = function() {
+	var layersLength = this.layers.length;
+	var layerSelector = this.layerSelector;
+	var layer, deletedLayerIndex;
+	for (var i = 0 ; i < layersLength ; i++) {
+		layer = this.layers[i];
+		if (layer == CURRENT_LAYER) {
+			if (confirm(PlinnLang["confirm_layer_delete"] + i + "\" ?")) {
+				this.space.removeChild(layer.hostDiv);
+				this.layers.splice(i, 1);
+				layerSelector.removeChild(layerSelector.childNodes[i]);
+				deletedLayerIndex = i;
+				break;
+			}
+			else {
+				this.activateLayer(i);
+				return;
+			}
+		}
+	}
+	
+	// update layer indexes
+	for (var i = 0 ; i < this.layers.length ; i++) {
+		layerSelector.childNodes[i].value = String(i);
+		layerSelector.childNodes[i].id = "layer_" + String(i);
+   		layerSelector.childNodes[i].innerHTML = PlinnLang["Layer "] + String(i);
+	}
+
+	if (this.layers.length == 1) {
+		var removeCmdOpt = layerSelector.childNodes[layerSelector.childNodes.length - 1];
+		removeCmdOpt.disabled = "disabled";
+		removeCmdOpt.style.color = "#888";
+	}
+
+	if (deletedLayerIndex == 0)
+		this.layers[0].style.position = "relative";
+
+	// activate previous layer
+	this.activateLayer((deletedLayerIndex > 0) ? --deletedLayerIndex : 0);
+	
+};
+
+function resizeOnMouseMove() {
+	if (LAYER_MANAGER.layers.length > 5)
+		return; // to expensive
+	else
+		_resizeAllLayers(this);
+}
+
+function resizeOnDrop() { _resizeAllLayers(this);}
+
+function _resizeAllLayers(layer) {
+	var layers = LAYER_MANAGER.layers;
+	var size = new Point(layer.width, layer.height);
+	var l;
+	for(var i = 0 ; i < layers.length ; i++) {
+		l = layers[i];
+		if (layer != l)
+			l.resizeTo(size, true);
+	}
+	LAYER_MANAGER.defaultLayerWidth = size.x;
+	LAYER_MANAGER.defaultLayerHeight = size.y;
+}
+
+function CreateAttachmentLink(data) {
+	// data like that : "title[attachment/a_file]
+	var title = data.split("\[", 1)[0];
+	var url =data.match(/\[(.*)\]/)[1];
+	var link ="<a href=\"" + url + "\">" + title + "</a>";
+	InsertHTML(link);
+}
\ No newline at end of file