wok view sane-backends/stuff/tazpanel/crop.js @ rev 25616
Add emu2
author | Pascal Bellard <pascal.bellard@slitaz.org> |
---|---|
date | Sat Aug 26 15:51:29 2023 +0000 (14 months ago) |
parents | 140c18f428f0 |
children |
line source
1 var cropOrgWidth, cropOrgHeight, cropX, cropY, cropWidth, cropHeight;
2 var cropBaseX, cropBaseY, cropDot2value, cropMinSize, cropDragOfs;
4 var cropEventX, cropEventY;
5 var cropResizeId, cropEventTop, cropEventLeft, cropEventWidth, cropEventHeight;
6 var cropResizeCounter = -1, cropMoveCounter = -1;
8 var cropDivW, cropDivN, cropDivE, cropDivS, cropDivFrame;
9 var cropNW, cropN, cropNE, cropW, cropE, cropSW, cropS, cropSE;
11 function cropOpacity(div,degree)
12 {
13 div.style.backgroundColor = '#FFF';
14 if (div.style.opacity) div.style.opacity = degree / 100;
15 if (div.style.MozOpacity) div.style.MozOpacity = degree / 101;
16 if (div.style.KhtmlOpacity) div.style.KhtmlOpacity = degree / 100;
17 }
19 function cropCreateDiv(e)
20 {
21 var div = document.createElement('DIV');
22 div.style.position = 'absolute';
23 div.style.visibility = 'visible';
24 cropOpacity(div,60);
25 div.style.left= div.style.top= div.style.height= div.style.width= '0px';
26 div.innerHTML = '<span></span>';
27 e.appendChild(div);
28 return div;
29 }
31 function cropCreateDragImg(id)
32 {
33 var div = document.createElement('IMG');
34 div.src = 'styles/default/images/drag.gif';
35 div.width = 12;
36 div.style.position = 'absolute';
37 div.style.cursor = div.id = id;
38 div.onmousedown = cropInitResize;
39 cropDivFrame.appendChild(div);
40 return div;
41 }
43 function cropSetFrame()
44 {
45 var top = cropDivFrame.style.top.replace('px','');
46 var left = cropDivFrame.style.left.replace('px','');
47 var width = cropDivFrame.style.width.replace('px','');
48 var height = cropDivFrame.style.height.replace('px','');
49 var totalTop = top/1 + height/1;
50 var totalWidth = left/1 + width/1;
52 cropN.style.left =
53 cropS.style.left = (Math.floor(width/2) - cropDragOfs) + 'px';
54 cropE.style.left =
55 cropNE.style.left =
56 cropSE.style.left = (width - cropDragOfs) + 'px';
57 cropW.style.top =
58 cropE.style.top = (Math.floor(height/2) - cropDragOfs) + 'px';
59 cropS.style.top =
60 cropSE.style.top =
61 cropSW.style.top = (height - cropDragOfs) + 'px';
63 cropDivS.style.height = Math.max(0,cropOrgHeight - totalTop) + 'px';
64 cropDivN.style.height = cropDivFrame.style.top;
65 cropDivS.style.width =
66 cropDivN.style.width = width + 'px' ;
67 cropDivE.style.width = Math.max(0,cropOrgWidth - totalWidth) + 'px';
68 cropDivW.style.width =
69 cropDivS.style.left =
70 cropDivN.style.left = cropDivFrame.style.left;
71 cropDivE.style.left = totalWidth + 'px';
72 cropDivS.style.top = totalTop + 'px';
73 }
75 function cropSaveEvent(e)
76 {
77 cropEventX = e.clientX;
78 cropEventY = e.clientY;
79 cropEventTop = cropDivFrame.style.top.replace('px','');
80 cropEventLeft = cropDivFrame.style.left.replace('px','');
81 cropEventWidth = cropDivFrame.style.width.replace('px','');
82 cropEventHeight = cropDivFrame.style.height.replace('px','');
83 }
85 function cropTimerMove()
86 {
87 if (cropMoveCounter >= 0 && cropMoveCounter < 10) {
88 cropMoveCounter++;
89 setTimeout('cropTimerMove()',1);
90 }
91 }
93 function cropTimerResize()
94 {
95 if (cropResizeCounter >= 0 && cropResizeCounter < 10) {
96 cropResizeCounter++;
97 setTimeout('cropTimerResize()',1);
98 }
99 }
101 function cropCancelEvent(e)
102 {
103 if (document.all) e = event;
104 if (e.target) source = e.target;
105 else if (e.srcElement) source = e.srcElement;
106 if (source.tagName && source.tagName.toLowerCase() == 'input')
107 return true;
108 return false;
109 }
111 function cropInitMove(e)
112 {
113 if (document.all) e = event;
114 if (e.target) source = e.target;
115 else if (e.srcElement) source = e.srcElement;
116 if (source.id && source.id.indexOf('resize') >= 0) return;
117 cropSaveEvent(e);
118 cropMoveCounter = 0;
119 cropTimerMove();
120 return false;
121 }
123 var cropDiv0style;
124 function cropInitResize(e)
125 {
126 if (document.all) e = event;
127 cropDivFrame.style.cursor = 'default';
128 if (document.all) cropDiv0style.display = 'none';
129 cropResizeId = this.id;
130 cropResizeCounter = 0;
131 cropSaveEvent(e);
132 cropTimerResize();
133 return false;
134 }
136 var cropMouseMoveEventInProgress = false;
137 function cropMouseMove(e)
138 {
139 if (cropMouseMoveEventInProgress) return;
140 if (cropMoveCounter < 10 && cropResizeCounter < 10) return;
141 if (document.all) cropMouseMoveEventInProgress = true;
142 if (document.all) e = event;
143 var deltaX = e.clientX - cropEventX;
144 var deltaY = e.clientY - cropEventY;
145 if (cropResizeCounter == 10) {
146 var top = cropEventTop;
147 var left = cropEventLeft;
148 var width = cropEventWidth;
149 var height = cropEventHeight;
150 if (cropResizeId == 'e-resize'
151 || cropResizeId == 'ne-resize'
152 || cropResizeId == 'se-resize') {
153 width = Math.max(cropMinSize,
154 cropEventWidth/1 + deltaX/1);
155 }
156 if (cropResizeId == 's-resize'
157 || cropResizeId == 'sw-resize'
158 || cropResizeId == 'se-resize') {
159 height = Math.max(cropMinSize,
160 cropEventHeight/1 + deltaY/1);
161 }
162 if (cropResizeId == 'w-resize'
163 || cropResizeId == 'sw-resize'
164 || cropResizeId == 'nw-resize') {
165 var total = left/1 + width/1;
166 left = Math.min(left/1 + deltaX/1, total - cropMinSize);
167 width = total - left;
168 }
170 if (cropResizeId == 'n-resize'
171 || cropResizeId == 'nw-resize'
172 || cropResizeId == 'ne-resize') {
173 var total = top/1 + height/1;
174 top = Math.min(top/1 + deltaY/1, total - cropMinSize);
175 height = total - top;
176 }
178 if (top > cropOrgHeight) height = cropOrgHeight - top;
179 if (left > cropOrgWidth) width = cropOrgWidth - left;
181 cropDivFrame.style.top = top + 'px';
182 cropDivFrame.style.left = left + 'px';
183 cropDivFrame.style.width = width + 'px';
184 cropDivFrame.style.height = height + 'px';
185 }
187 if (cropMoveCounter == 10) {
188 var left = cropEventLeft/1 + deltaX/1;
189 var leftMax = cropOrgWidth - cropEventWidth;
190 if (left < 0) left = 0;
191 if (left > leftMax) left = leftMax;
192 cropDivFrame.style.left = left + 'px';
193 var top = cropEventTop/1 + deltaY/1;
194 var topMax = cropOrgHeight - cropEventHeight;
195 if (top < 0) top = 0;
196 if (top > topMax) top = topMax;
197 cropDivFrame.style.top = top + 'px';
198 }
199 cropSetFrame();
200 cropMouseMoveEventInProgress = false;
201 }
203 function cropUpdateFromValues()
204 {
205 cropX.value = Math.round(10 * cropDot2value
206 * cropDivFrame.style.left.replace('px','')) /10
207 + cropBaseX/1;
208 cropY.value = Math.round(10 * cropDot2value
209 * cropDivFrame.style.top.replace('px','')) /10
210 + cropBaseY/1;
211 cropWidth.value = Math.round(10 * cropDot2value
212 * cropDivFrame.style.width.replace('px','')) /10;
213 cropHeight.value = Math.round(10 * cropDot2value
214 * cropDivFrame.style.height.replace('px','')) /10;
215 }
217 function cropStopResizeMove()
218 {
219 cropMoveCounter = cropResizeCounter = -1;
220 cropDivFrame.style.cursor = 'move';
221 cropUpdateFromValues();
222 if (document.all) cropDiv0style.display = 'block';
223 }
225 function cropGetInput(obj,origin,ofs,min,max)
226 {
227 var t = origin;
228 if (obj.value.length)
229 t = (obj.value.replace(/[^0-9\.]/gi,'') - ofs) / cropDot2value;
230 if (t < min) t = min;
231 if (t > max) t = max;
232 obj.value = Math.round(t * cropDot2value * 10) /10;
233 return Math.round(t);
234 }
236 function cropSetFrameByInput()
237 {
238 var x, y;
239 x = cropGetInput(cropX, 0, cropBaseX, 0, cropOrgWidth - cropMinSize);
240 y = cropGetInput(cropY, 0, cropBaseY, 0, cropOrgHeight - cropMinSize);
241 cropDivFrame.style.top = y + 'px';
242 cropDivFrame.style.left = x + 'px';
243 cropDivFrame.style.width = cropGetInput(cropWidth, cropOrgWidth, 0,
244 cropMinSize, cropOrgWidth - x) + 'px';
245 cropDivFrame.style.height = cropGetInput(cropHeight, cropOrgHeight, 0,
246 cropMinSize, cropOrgHeight - y) + 'px';
247 cropSetFrame();
248 }
250 function cropInit(e,x,y,width,height)
251 {
252 var div = e.parentNode;
254 cropOrgWidth = e.width;
255 cropOrgHeight = e.height;
257 cropX = document.getElementById(x);
258 cropY = document.getElementById(y);
259 cropWidth = document.getElementById(width);
260 cropHeight = document.getElementById(height);
262 cropBaseX = cropX.value.replace(/[^0-9\.]/gi,'');
263 cropBaseY = cropY.value.replace(/[^0-9\.]/gi,'');
265 cropDot2value = cropWidth.value / e.width;
267 div.style.position = 'relative';
268 div.style.top = div.style.left = '0px';
269 div.style.width = div.style.height = '100%';
270 cropOpacity(div,0);
272 cropDivW = cropCreateDiv(div);
273 cropDivN = cropCreateDiv(div);
274 cropDivE = cropCreateDiv(div);
275 cropDivS = cropCreateDiv(div);
276 cropDivN.style.width = cropDivE.style.left =
277 cropDivS.style.width = cropOrgWidth + 'px';
278 cropDivW.style.height = cropDivE.style.height =
279 cropDivS.style.top = cropOrgHeight + 'px';
281 cropDivFrame = document.createElement('DIV');
282 cropDivFrame.style.border = '1px #000000 dashed';
283 cropDivFrame.style.zIndex = 1000;
284 cropDivFrame.style.position = 'absolute';
285 cropDivFrame.style.left = cropDivFrame.style.top = '0px';
286 cropDivFrame.style.width = cropOrgWidth + 'px';
287 cropDivFrame.style.height = cropOrgHeight + 'px';
288 cropDivFrame.innerHTML = '<div></div>';
289 cropDivFrame.style.cursor = 'move';
291 cropDiv0style = cropDivFrame.getElementsByTagName('DIV')[0].style;
292 if (navigator.userAgent.indexOf('Opera') >=0 ) {
293 cropDiv0style.backgroundColor =
294 cropDivS.style.backgroundColor =
295 cropDivE.style.backgroundColor =
296 cropDivN.style.backgroundColor =
297 cropDivW.style.backgroundColor = 'transparent';
298 }
300 cropNW = cropCreateDragImg('nw-resize');
301 cropNE = cropCreateDragImg('ne-resize');
302 cropSW = cropCreateDragImg('sw-resize');
303 cropSE = cropCreateDragImg('se-resize');
304 cropN = cropCreateDragImg('n-resize');
305 cropS = cropCreateDragImg('s-resize');
306 cropW = cropCreateDragImg('w-resize');
307 cropE = cropCreateDragImg('e-resize');
308 cropMinSize = cropE.width*2;
309 cropDragOfs = Math.floor(cropE.width/2)
311 cropN.style.left = cropS.style.left =
312 (Math.floor(cropOrgWidth/2) - cropDragOfs) + 'px';
313 cropSW.style.top = cropSE.style.top =
314 cropS.style.top = (cropOrgHeight - cropDragOfs) + 'px';
316 cropNW.style.top = cropNW.style.left =
317 cropNE.style.top = cropSW.style.left =
318 cropN.style.top = cropW.style.left = (-cropDragOfs) + 'px';
320 cropNE.style.left = cropSE.style.left =
321 cropE.style.left = (cropOrgWidth - cropDragOfs) + 'px';
322 cropW.style.top = cropE.style.top =
323 (Math.floor(cropOrgHeight/2) - cropDragOfs) + 'px';
325 div.appendChild(cropDivFrame);
327 div.onselectstart = div.ondragstart = cropCancelEvent;
328 div.onmousemove = cropMouseMove;
329 div.onmouseup = cropStopResizeMove;
330 cropDivFrame.onmousedown = cropInitMove;
331 cropX.onchange = cropY.onchange = cropWidth.onchange =
332 cropHeight.onchange = cropSetFrameByInput;
333 }