wok diff sane-backends/stuff/tazpanel/crop.js @ rev 18245

Add tazpanel-extra
author Pascal Bellard <pascal.bellard@slitaz.org>
date Fri Jul 31 23:33:17 2015 +0200 (2015-07-31)
parents
children caed28d90319
line diff
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/sane-backends/stuff/tazpanel/crop.js	Fri Jul 31 23:33:17 2015 +0200
     1.3 @@ -0,0 +1,333 @@
     1.4 +var cropOrgWidth, cropOrgHeight, cropX, cropY, cropWidth, cropHeight;
     1.5 +var cropBaseX, cropBaseY, cropDot2value, cropMinSize, cropDragOfs;
     1.6 +
     1.7 +var cropEventX, cropEventY;
     1.8 +var cropResizeId, cropEventTop, cropEventLeft, cropEventWidth, cropEventHeight;
     1.9 +var cropResizeCounter = -1, cropMoveCounter = -1;
    1.10 +
    1.11 +var cropDivW, cropDivN, cropDivE, cropDivS, cropDivFrame;
    1.12 +var cropNW, cropN, cropNE, cropW, cropE, cropSW, cropS, cropSE; 
    1.13 +
    1.14 +function cropOpacity(div,degree)
    1.15 +{
    1.16 +	div.style.backgroundColor = '#FFF';
    1.17 +	if (div.style.opacity) div.style.opacity = degree / 100;
    1.18 +	if (div.style.MozOpacity) div.style.MozOpacity = degree / 101;
    1.19 +	if (div.style.KhtmlOpacity) div.style.KhtmlOpacity = degree / 100;
    1.20 +}
    1.21 +
    1.22 +function cropCreateDiv(e)
    1.23 +{
    1.24 +	var div = document.createElement('DIV');
    1.25 +	div.style.position = 'absolute';
    1.26 +	div.style.visibility = 'visible';
    1.27 +	cropOpacity(div,60);
    1.28 +	div.style.left= div.style.top= div.style.height= div.style.width= '0px';
    1.29 +	div.innerHTML = '<span></span>';
    1.30 +	e.appendChild(div);
    1.31 +	return div;
    1.32 +}
    1.33 +
    1.34 +function cropCreateDragImg(id)
    1.35 +{
    1.36 +	var div = document.createElement('IMG');
    1.37 +	div.src = 'drag.gif';
    1.38 +	div.width = 12;
    1.39 +	div.style.position = 'absolute';
    1.40 +	div.style.cursor = div.id = id;
    1.41 +	div.onmousedown = cropInitResize;
    1.42 +	cropDivFrame.appendChild(div);
    1.43 +	return div;
    1.44 +}
    1.45 +
    1.46 +function cropSetFrame()
    1.47 +{
    1.48 +	var top = cropDivFrame.style.top.replace('px','');
    1.49 +	var left = cropDivFrame.style.left.replace('px','');
    1.50 +	var width = cropDivFrame.style.width.replace('px','');
    1.51 +	var height = cropDivFrame.style.height.replace('px','');
    1.52 +	var totalTop = top/1 + height/1;
    1.53 + 	var totalWidth = left/1 + width/1;
    1.54 +	
    1.55 +	cropN.style.left =
    1.56 +	cropS.style.left = (Math.floor(width/2) - cropDragOfs) + 'px';
    1.57 +	cropE.style.left =
    1.58 +	cropNE.style.left =
    1.59 +	cropSE.style.left = (width - cropDragOfs) + 'px';
    1.60 +	cropW.style.top = 
    1.61 +	cropE.style.top = (Math.floor(height/2) - cropDragOfs) + 'px';
    1.62 +	cropS.style.top =
    1.63 +	cropSE.style.top =
    1.64 +	cropSW.style.top = (height - cropDragOfs) + 'px';
    1.65 +	
    1.66 +	cropDivS.style.height = Math.max(0,cropOrgHeight - totalTop) + 'px';
    1.67 +	cropDivN.style.height = cropDivFrame.style.top;
    1.68 +	cropDivS.style.width = 
    1.69 +	cropDivN.style.width = width + 'px' ;
    1.70 +	cropDivE.style.width = Math.max(0,cropOrgWidth - totalWidth) + 'px';
    1.71 +	cropDivW.style.width =
    1.72 +	cropDivS.style.left = 
    1.73 +	cropDivN.style.left = cropDivFrame.style.left;
    1.74 +	cropDivE.style.left = totalWidth + 'px';
    1.75 +	cropDivS.style.top = totalTop + 'px';
    1.76 +}
    1.77 +
    1.78 +function cropSaveEvent(e)
    1.79 +{
    1.80 +	cropEventX = e.clientX;
    1.81 +	cropEventY = e.clientY;
    1.82 +	cropEventTop = cropDivFrame.style.top.replace('px','');
    1.83 +	cropEventLeft = cropDivFrame.style.left.replace('px','');
    1.84 +	cropEventWidth = cropDivFrame.style.width.replace('px','');
    1.85 +	cropEventHeight = cropDivFrame.style.height.replace('px','');
    1.86 +}
    1.87 +
    1.88 +function cropTimerMove()
    1.89 +{
    1.90 +	if (cropMoveCounter >= 0 && cropMoveCounter < 10) {
    1.91 +		cropMoveCounter++;
    1.92 +		setTimeout('cropTimerMove()',1);
    1.93 +	}		
    1.94 +}
    1.95 +
    1.96 +function cropTimerResize()
    1.97 +{
    1.98 +	if (cropResizeCounter >= 0 && cropResizeCounter < 10) {
    1.99 +		cropResizeCounter++;
   1.100 +		setTimeout('cropTimerResize()',1);
   1.101 +	}
   1.102 +}
   1.103 +
   1.104 +function cropCancelEvent(e)
   1.105 +{
   1.106 +	if (document.all) e = event;
   1.107 +	if (e.target) source = e.target;
   1.108 +	else if (e.srcElement) source = e.srcElement;
   1.109 +	if (source.tagName && source.tagName.toLowerCase() == 'input')
   1.110 +		return true;
   1.111 +	return false;
   1.112 +}
   1.113 +
   1.114 +function cropInitMove(e)
   1.115 +{
   1.116 +	if (document.all) e = event;
   1.117 +	if (e.target) source = e.target;
   1.118 +	else if (e.srcElement) source = e.srcElement;
   1.119 +	if (source.id && source.id.indexOf('resize') >= 0) return;	
   1.120 +	cropSaveEvent(e);
   1.121 +	cropMoveCounter = 0;
   1.122 +	cropTimerMove();
   1.123 +	return false;
   1.124 +}
   1.125 +
   1.126 +var cropDiv0style;
   1.127 +function cropInitResize(e)
   1.128 +{
   1.129 +	if (document.all) e = event;
   1.130 +	cropDivFrame.style.cursor = 'default';
   1.131 +	if (document.all) cropDiv0style.display = 'none';
   1.132 +	cropResizeId = this.id;
   1.133 +	cropResizeCounter = 0;
   1.134 +	cropSaveEvent(e);
   1.135 +	cropTimerResize();
   1.136 +	return false;
   1.137 +}
   1.138 +
   1.139 +var cropMouseMoveEventInProgress = false;
   1.140 +function cropMouseMove(e)
   1.141 +{
   1.142 +	if (cropMouseMoveEventInProgress) return;
   1.143 +	if (cropMoveCounter < 10 && cropResizeCounter < 10) return;
   1.144 +	if (document.all) cropMouseMoveEventInProgress = true;
   1.145 +	if (document.all) e = event;
   1.146 +	var deltaX = e.clientX - cropEventX;
   1.147 +	var deltaY = e.clientY - cropEventY;
   1.148 +	if (cropResizeCounter == 10) {
   1.149 +		var top = cropEventTop;
   1.150 +		var left = cropEventLeft;
   1.151 +		var width = cropEventWidth;
   1.152 +		var height = cropEventHeight;
   1.153 +		if (cropResizeId == 'e-resize'
   1.154 +		 || cropResizeId == 'ne-resize'
   1.155 +		 || cropResizeId == 'se-resize') {
   1.156 +			width = Math.max(cropMinSize,
   1.157 +				cropEventWidth/1 + deltaX/1);
   1.158 +		}
   1.159 +		if (cropResizeId == 's-resize'
   1.160 +		 || cropResizeId == 'sw-resize'
   1.161 +		 || cropResizeId == 'se-resize') {
   1.162 +			height = Math.max(cropMinSize,
   1.163 +				cropEventHeight/1 + deltaY/1);
   1.164 +		}
   1.165 +		if (cropResizeId == 'w-resize'
   1.166 +		 || cropResizeId == 'sw-resize'
   1.167 +		 || cropResizeId == 'nw-resize') {
   1.168 +		 	var total = left/1 + width/1;
   1.169 +			left = Math.min(left/1 + deltaX/1, total - cropMinSize);
   1.170 +			width = total - left;
   1.171 +		}
   1.172 +		
   1.173 +		if (cropResizeId == 'n-resize'
   1.174 +		 || cropResizeId == 'nw-resize'
   1.175 +		 || cropResizeId == 'ne-resize') {
   1.176 +			var total = top/1 + height/1;
   1.177 +			top = Math.min(top/1 + deltaY/1, total - cropMinSize);
   1.178 +			height = total - top;
   1.179 +		}
   1.180 +		
   1.181 +		if (top > cropOrgHeight) height = cropOrgHeight - top;
   1.182 +		if (left > cropOrgWidth) width  = cropOrgWidth - left;
   1.183 +		
   1.184 +		cropDivFrame.style.top = top + 'px';
   1.185 +		cropDivFrame.style.left = left + 'px';
   1.186 +		cropDivFrame.style.width = width + 'px';
   1.187 +		cropDivFrame.style.height = height + 'px';
   1.188 +	}
   1.189 +	
   1.190 +	if (cropMoveCounter == 10) {
   1.191 +		var left = cropEventLeft/1 + deltaX/1;
   1.192 +		var leftMax = cropOrgWidth - cropEventWidth;
   1.193 +		if (left < 0) left = 0;
   1.194 +		if (left > leftMax) left = leftMax;
   1.195 +		cropDivFrame.style.left = left + 'px';
   1.196 +		var top = cropEventTop/1 + deltaY/1;
   1.197 +		var topMax = cropOrgHeight - cropEventHeight;
   1.198 +		if (top < 0) top = 0;
   1.199 +		if (top > topMax) top = topMax;
   1.200 +		cropDivFrame.style.top = top + 'px';
   1.201 +	}
   1.202 +	cropSetFrame();		
   1.203 +	cropMouseMoveEventInProgress = false;
   1.204 +}
   1.205 +
   1.206 +function cropUpdateFromValues()
   1.207 +{
   1.208 +	cropX.value = Math.round(10 * cropDot2value 
   1.209 +		* cropDivFrame.style.left.replace('px','')) /10 
   1.210 +		+ cropBaseX/1;
   1.211 +	cropY.value = Math.round(10 * cropDot2value 
   1.212 +		* cropDivFrame.style.top.replace('px','')) /10 
   1.213 +		+ cropBaseY/1;
   1.214 +	cropWidth.value = Math.round(10 * cropDot2value 
   1.215 +		* cropDivFrame.style.width.replace('px','')) /10;
   1.216 +	cropHeight.value = Math.round(10 * cropDot2value 
   1.217 +		* cropDivFrame.style.height.replace('px','')) /10;
   1.218 +}
   1.219 +
   1.220 +function cropStopResizeMove()
   1.221 +{
   1.222 +	cropMoveCounter = cropResizeCounter = -1;
   1.223 +	cropDivFrame.style.cursor = 'move';
   1.224 +	cropUpdateFromValues();
   1.225 +	if (document.all) cropDiv0style.display = 'block';
   1.226 +}
   1.227 +
   1.228 +function cropGetInput(obj,origin,ofs,min,max)
   1.229 +{
   1.230 +	var t = origin;
   1.231 +	if (obj.value.length)
   1.232 +		t = (obj.value.replace(/[^0-9\.]/gi,'') - ofs) / cropDot2value;
   1.233 +	if (t < min) t = min;
   1.234 +	if (t > max) t = max;
   1.235 +	obj.value = Math.round(t * cropDot2value * 10) /10;
   1.236 +	return Math.round(t);
   1.237 +}
   1.238 +
   1.239 +function cropSetFrameByInput()
   1.240 +{
   1.241 +	var x, y;
   1.242 +	x = cropGetInput(cropX, 0, cropBaseX, 0, cropOrgWidth - cropMinSize);
   1.243 +	y = cropGetInput(cropY, 0, cropBaseY, 0, cropOrgHeight - cropMinSize);
   1.244 +	cropDivFrame.style.top = y + 'px';
   1.245 +	cropDivFrame.style.left = x + 'px';
   1.246 +	cropDivFrame.style.width = cropGetInput(cropWidth, cropOrgWidth, 0, 
   1.247 +					cropMinSize, cropOrgWidth - x) + 'px';
   1.248 +	cropDivFrame.style.height = cropGetInput(cropHeight, cropOrgHeight, 0, 
   1.249 +					cropMinSize, cropOrgHeight - y) + 'px';
   1.250 +	cropSetFrame();		
   1.251 +}
   1.252 +
   1.253 +function cropInit(e,x,y,width,height)
   1.254 +{
   1.255 +	var div = e.parentNode;
   1.256 +	
   1.257 +	cropOrgWidth = e.width;
   1.258 +	cropOrgHeight = e.height;
   1.259 +	
   1.260 +	cropX = document.getElementById(x);
   1.261 +	cropY = document.getElementById(y);
   1.262 +	cropWidth = document.getElementById(width);
   1.263 +	cropHeight = document.getElementById(height);
   1.264 +	
   1.265 +	cropBaseX = cropX.value.replace(/[^0-9\.]/gi,'');
   1.266 +	cropBaseY = cropY.value.replace(/[^0-9\.]/gi,'');
   1.267 +	
   1.268 +	cropDot2value = cropWidth.value / e.width;
   1.269 +	
   1.270 +	div.style.position = 'relative';
   1.271 +	div.style.top = div.style.left = '0px';
   1.272 +	div.style.width = div.style.height = '100%';
   1.273 +	cropOpacity(div,0);
   1.274 +
   1.275 +	cropDivW = cropCreateDiv(div);
   1.276 +	cropDivN = cropCreateDiv(div);
   1.277 +	cropDivE = cropCreateDiv(div);
   1.278 +	cropDivS = cropCreateDiv(div);
   1.279 +	cropDivN.style.width = cropDivE.style.left = 
   1.280 +	cropDivS.style.width = cropOrgWidth + 'px';
   1.281 +	cropDivW.style.height = cropDivE.style.height = 
   1.282 +	cropDivS.style.top = cropOrgHeight + 'px';
   1.283 +	
   1.284 +	cropDivFrame = document.createElement('DIV');
   1.285 +	cropDivFrame.style.border = '1px #000000 dashed';
   1.286 +	cropDivFrame.style.zIndex = 1000;
   1.287 +	cropDivFrame.style.position = 'absolute';
   1.288 +	cropDivFrame.style.left = cropDivFrame.style.top = '0px';
   1.289 +	cropDivFrame.style.width = cropOrgWidth + 'px';
   1.290 +	cropDivFrame.style.height = cropOrgHeight + 'px';
   1.291 +	cropDivFrame.innerHTML = '<div></div>'; 
   1.292 +	cropDivFrame.style.cursor = 'move';
   1.293 +
   1.294 +	cropDiv0style = cropDivFrame.getElementsByTagName('DIV')[0].style;
   1.295 +	if (navigator.userAgent.indexOf('Opera') >=0 ) {
   1.296 +		cropDiv0style.backgroundColor =
   1.297 +		cropDivS.style.backgroundColor =
   1.298 +		cropDivE.style.backgroundColor =
   1.299 +		cropDivN.style.backgroundColor =
   1.300 +		cropDivW.style.backgroundColor = 'transparent';
   1.301 +	}
   1.302 +	
   1.303 +	cropNW = cropCreateDragImg('nw-resize');
   1.304 +	cropNE = cropCreateDragImg('ne-resize');
   1.305 +	cropSW = cropCreateDragImg('sw-resize');
   1.306 +	cropSE = cropCreateDragImg('se-resize');
   1.307 +	cropN = cropCreateDragImg('n-resize');
   1.308 +	cropS = cropCreateDragImg('s-resize');
   1.309 +	cropW = cropCreateDragImg('w-resize');
   1.310 +	cropE = cropCreateDragImg('e-resize');
   1.311 +	cropMinSize = cropE.width*2;
   1.312 +	cropDragOfs = Math.floor(cropE.width/2) 
   1.313 +
   1.314 +	cropN.style.left = cropS.style.left = 
   1.315 +		(Math.floor(cropOrgWidth/2) - cropDragOfs) + 'px';
   1.316 +	cropSW.style.top = cropSE.style.top = 
   1.317 +	cropS.style.top = (cropOrgHeight - cropDragOfs) + 'px';
   1.318 +	
   1.319 +	cropNW.style.top = cropNW.style.left = 
   1.320 +	cropNE.style.top = cropSW.style.left = 
   1.321 +	cropN.style.top  = cropW.style.left = (-cropDragOfs) + 'px';
   1.322 +	
   1.323 +	cropNE.style.left = cropSE.style.left =
   1.324 +	cropE.style.left = (cropOrgWidth - cropDragOfs) + 'px';
   1.325 +	cropW.style.top = cropE.style.top = 
   1.326 +		(Math.floor(cropOrgHeight/2) - cropDragOfs) + 'px';
   1.327 +	
   1.328 +	div.appendChild(cropDivFrame); 
   1.329 +	
   1.330 +	div.onselectstart = div.ondragstart = cropCancelEvent;
   1.331 +	div.onmousemove = cropMouseMove;
   1.332 +	div.onmouseup = cropStopResizeMove;
   1.333 +	cropDivFrame.onmousedown = cropInitMove;
   1.334 +	cropX.onchange = cropY.onchange = cropWidth.onchange =
   1.335 +	cropHeight.onchange = cropSetFrameByInput;
   1.336 +}