wok-6.x annotate sane-backends/stuff/tazpanel/crop.js @ rev 24271

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