Mercurial Hosting > nabble

comparison src/nabble/view/web/util/image-crop.js @ 0:7ecd1a4ef557

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add content
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 21 Mar 2019 19:15:52 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:7ecd1a4ef557
1 /*
2 (C) www.dhtmlgoodies.com, April 2006
3 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
4 Terms of use:
5 You are free to use this script as long as the copyright message is kept intact. However, you may not
6 redistribute, sell or repost it without our permission.
7 Thank you!
8 www.dhtmlgoodies.com
9 Alf Magne Kalleland
10 */
11 var crop_script_alwaysPreserveAspectRatio = true;
12 var crop_script_fixedRatio = false;
13 var crop_script_browserIsOpera = navigator.userAgent.indexOf('Opera') >= 0 ? true : false;
14 var cropDiv_left = false;
15 var cropDiv_top = false;
16 var cropDiv_right = false;
17 var cropDiv_bottom = false;
18 var cropDiv_dotted = false;
19 var crop_currentResizeType = false;
20 var cropEvent_posX;
21 var cropEvent_posY;
22 var cropEvent_eventX;
23 var cropEvent_eventY;
24 var crop_resizeCounter = -1;
25 var crop_moveCounter = -1;
26 var crop_imageDiv = false;
27 var imageDiv_currentWidth = false;
28 var imageDiv_currentHeight = false;
29 var imageDiv_currentLeft = false;
30 var imageDiv_currentTop = false;
31 var smallSquare_tl;
32 var smallSquare_tc;
33 var smallSquare_tr;
34 var smallSquare_lc;
35 var smallSquare_rc;
36 var smallSquare_bl;
37 var smallSquare_bc;
38 var smallSquare_br;
39
40 var offsetSmallSquares = Math.floor(smallSquareWidth / 2);
41
42 var cropScriptAjaxObjects = new Array();
43 var preserveAspectRatio = false;
44
45 var cropWidthRatio = false;
46 // width of cropping area relative to height
47 function crop_createDivElements(basedir) {
48 crop_imageDiv = document.getElementById('imageContainer');
49
50 cropDiv_left = document.createElement('DIV');
51 cropDiv_left.className = 'crop_transparentDiv';
52 cropDiv_left.style.visibility = 'visible';
53 cropDiv_left.style.left = '0px';
54 cropDiv_left.style.top = '0px';
55 cropDiv_left.style.height = crop_imageHeight + 'px';
56 cropDiv_left.style.width = '0px';
57 cropDiv_left.innerHTML = '<span></span>';
58 crop_imageDiv.appendChild(cropDiv_left);
59
60 cropDiv_top = document.createElement('DIV');
61 cropDiv_top.className = 'crop_transparentDiv';
62 cropDiv_top.style.visibility = 'visible';
63 cropDiv_top.style.left = '0px';
64 cropDiv_top.style.top = '0px';
65 cropDiv_top.style.height = '0px';
66 cropDiv_top.style.width = crop_imageWidth + 'px';
67 cropDiv_top.innerHTML = '<span></span>';
68 crop_imageDiv.appendChild(cropDiv_top);
69
70 cropDiv_right = document.createElement('DIV');
71 cropDiv_right.className = 'crop_transparentDiv';
72 cropDiv_right.style.visibility = 'visible';
73 cropDiv_right.style.left = (crop_imageWidth) + 'px';
74 cropDiv_right.style.top = '0px';
75 cropDiv_right.style.height = crop_imageHeight + 'px';
76 cropDiv_right.style.width = '0px';
77 cropDiv_right.innerHTML = '<span></span>';
78 crop_imageDiv.appendChild(cropDiv_right);
79
80 cropDiv_bottom = document.createElement('DIV');
81 cropDiv_bottom.className = 'crop_transparentDiv';
82 cropDiv_bottom.style.visibility = 'visible';
83 cropDiv_bottom.style.left = '0px';
84 cropDiv_bottom.style.top = (crop_imageHeight) + 'px';
85 cropDiv_bottom.style.height = '0px';
86 cropDiv_bottom.style.width = crop_imageWidth + 'px';
87 cropDiv_bottom.innerHTML = '<span></span>';
88 crop_imageDiv.appendChild(cropDiv_bottom);
89
90 cropDiv_dotted = document.createElement('DIV');
91 cropDiv_dotted.className = 'crop_dottedDiv';
92 cropDiv_dotted.style.left = '0px';
93 cropDiv_dotted.style.top = '0px';
94 cropDiv_dotted.style.width = (crop_imageWidth - (cropToolBorderWidth * 2)) + 'px';
95 cropDiv_dotted.style.height = (crop_imageHeight - (cropToolBorderWidth * 2)) + 'px';
96 cropDiv_dotted.innerHTML = '<div></div>';
97 cropDiv_dotted.style.cursor = 'move';
98
99 if (crop_script_browserIsOpera) {
100 var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
101 div.style.backgroundColor = 'transparent';
102 cropDiv_bottom.style.backgroundColor = 'transparent';
103 cropDiv_right.style.backgroundColor = 'transparent';
104 cropDiv_top.style.backgroundColor = 'transparent';
105 cropDiv_left.style.backgroundColor = 'transparent';
106 }
107
108 cropDiv_dotted.onmousedown = cropScript_initMove;
109
110 smallSquare_tl = document.createElement('IMG');
111 smallSquare_tl.src = basedir + '/images/small_square.gif';
112 smallSquare_tl.style.position = 'absolute';
113 smallSquare_tl.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
114 smallSquare_tl.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
115 smallSquare_tl.style.cursor = 'nw-resize';
116 smallSquare_tl.id = 'nw-resize';
117 smallSquare_tl.onmousedown = cropScript_initResize;
118 cropDiv_dotted.appendChild(smallSquare_tl);
119
120 smallSquare_tr = document.createElement('IMG');
121 smallSquare_tr.src = basedir + '/images/small_square.gif';
122 smallSquare_tr.style.position = 'absolute';
123 smallSquare_tr.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
124 smallSquare_tr.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
125 smallSquare_tr.style.cursor = 'ne-resize';
126 smallSquare_tr.id = 'ne-resize';
127 smallSquare_tr.onmousedown = cropScript_initResize;
128 cropDiv_dotted.appendChild(smallSquare_tr);
129
130 smallSquare_bl = document.createElement('IMG');
131 smallSquare_bl.src = basedir + '/images/small_square.gif';
132 smallSquare_bl.style.position = 'absolute';
133 smallSquare_bl.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
134 smallSquare_bl.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
135 smallSquare_bl.style.cursor = 'sw-resize';
136 smallSquare_bl.id = 'sw-resize';
137 smallSquare_bl.onmousedown = cropScript_initResize;
138 cropDiv_dotted.appendChild(smallSquare_bl);
139
140 smallSquare_br = document.createElement('IMG');
141 smallSquare_br.src = basedir + '/images/small_square.gif';
142 smallSquare_br.style.position = 'absolute';
143 smallSquare_br.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
144 smallSquare_br.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
145 smallSquare_br.style.cursor = 'se-resize';
146 smallSquare_br.id = 'se-resize';
147 smallSquare_br.onmousedown = cropScript_initResize;
148 cropDiv_dotted.appendChild(smallSquare_br);
149
150 smallSquare_tc = document.createElement('IMG');
151 smallSquare_tc.src = basedir + '/images/small_square.gif';
152 smallSquare_tc.style.position = 'absolute';
153 smallSquare_tc.style.left = (Math.floor(crop_imageWidth / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
154 smallSquare_tc.style.top = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
155 smallSquare_tc.style.cursor = 's-resize';
156 smallSquare_tc.id = 'n-resize';
157 smallSquare_tc.onmousedown = cropScript_initResize;
158 cropDiv_dotted.appendChild(smallSquare_tc);
159
160 smallSquare_bc = document.createElement('IMG');
161 smallSquare_bc.src = basedir + '/images/small_square.gif';
162 smallSquare_bc.style.position = 'absolute';
163 smallSquare_bc.style.left = (Math.floor(crop_imageWidth / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
164 smallSquare_bc.style.top = (crop_imageHeight - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
165 smallSquare_bc.style.cursor = 's-resize';
166 smallSquare_bc.id = 's-resize';
167 smallSquare_bc.onmousedown = cropScript_initResize;
168 cropDiv_dotted.appendChild(smallSquare_bc);
169
170 smallSquare_lc = document.createElement('IMG');
171 smallSquare_lc.src = basedir + '/images/small_square.gif';
172 smallSquare_lc.style.position = 'absolute';
173 smallSquare_lc.style.left = (-offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
174 smallSquare_lc.style.top = (Math.floor(crop_imageHeight / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
175 smallSquare_lc.style.cursor = 'e-resize';
176 smallSquare_lc.id = 'w-resize';
177 smallSquare_lc.onmousedown = cropScript_initResize;
178 cropDiv_dotted.appendChild(smallSquare_lc);
179
180 smallSquare_rc = document.createElement('IMG');
181 smallSquare_rc.src = basedir + '/images/small_square.gif';
182 smallSquare_rc.style.position = 'absolute';
183 smallSquare_rc.style.left = (crop_imageWidth - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
184 smallSquare_rc.style.top = (Math.floor(crop_imageHeight / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
185 smallSquare_rc.style.cursor = 'e-resize';
186 smallSquare_rc.id = 'e-resize';
187 smallSquare_rc.onmousedown = cropScript_initResize;
188 cropDiv_dotted.appendChild(smallSquare_rc);
189
190 crop_imageDiv.appendChild(cropDiv_dotted);
191 };
192
193 function cropScript_initMove(e) {
194 if (document.all)e = event;
195
196 if (e.target) source = e.target;
197 else if (e.srcElement) source = e.srcElement;
198 if (source.nodeType == 3) // defeat Safari bug
199 source = source.parentNode;
200
201 if (source.id && source.id.indexOf('resize') >= 0)return;
202
203 imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px', '') / 1;
204 imageDiv_currentTop = cropDiv_dotted.style.top.replace('px', '') / 1;
205 imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px', '') / 1;
206 imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px', '') / 1;
207 cropEvent_eventX = e.clientX;
208 cropEvent_eventY = e.clientY;
209
210 crop_moveCounter = 0;
211 cropScript_timerMove();
212 return false;
213 };
214
215 function cropScript_timerMove() {
216 if (crop_moveCounter >= 0 && crop_moveCounter < 10) {
217 crop_moveCounter++;
218 setTimeout('cropScript_timerMove()', 1);
219 return;
220 }
221 };
222
223 function cropScript_initResize(e) {
224 if (document.all)e = event;
225
226 cropDiv_dotted.style.cursor = 'default';
227 crop_currentResizeType = this.id;
228
229 cropEvent_eventX = e.clientX;
230 cropEvent_eventY = e.clientY;
231 crop_resizeCounter = 0;
232 imageDiv_currentWidth = cropDiv_dotted.style.width.replace('px', '') / 1;
233 imageDiv_currentHeight = cropDiv_dotted.style.height.replace('px', '') / 1;
234 imageDiv_currentLeft = cropDiv_dotted.style.left.replace('px', '') / 1;
235 imageDiv_currentTop = cropDiv_dotted.style.top.replace('px', '') / 1;
236
237 cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;
238 if (crop_script_fixedRatio)cropWidthRatio = crop_script_fixedRatio;
239
240 if (document.all) {
241 var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
242 div.style.display = 'none';
243 }
244
245 cropScript_timerResize();
246 return false;
247 };
248
249 function cropScript_timerResize()
250 {
251 if (crop_resizeCounter >= 0 && crop_resizeCounter < 10) {
252 crop_resizeCounter = crop_resizeCounter + 1;
253 setTimeout('cropScript_timerResize()', 1);
254 return;
255 }
256 };
257
258 function cropScript_executeCrop(buttonObj)
259 {
260 buttonObj.style.visibility = 'hidden';
261 var ajaxIndex = cropScriptAjaxObjects.length;
262 cropScriptAjaxObjects[ajaxIndex] = new sack();
263 var url = crop_script_server_file + '?image_ref=' + document.getElementById('input_image_ref').value
264 + '&x=' + document.getElementById('input_crop_x').value
265 + '&y=' + document.getElementById('input_crop_y').value
266 + '&width=' + document.getElementById('input_crop_width').value
267 + '&height=' + document.getElementById('input_crop_height').value
268 + '&percentSize=' + document.getElementById('crop_percent_size').value
269 + '&convertTo=' + document.getElementById('input_convert_to').options[document.getElementById('input_convert_to').selectedIndex].value;
270
271 cropScriptAjaxObjects[ajaxIndex].requestFile = url;
272 // Specifying which file to get
273 cropScriptAjaxObjects[ajaxIndex].onCompletion = function() {
274 cropScript_cropCompleted(ajaxIndex, buttonObj);
275 };
276 cropScriptAjaxObjects[ajaxIndex].runAJAX();
277 };
278
279 function cropScript_cropCompleted(ajaxIndex, buttonObj)
280 {
281 buttonObj.style.visibility = '';
282 eval(cropScriptAjaxObjects[ajaxIndex].response);
283 cropScriptAjaxObjects[ajaxIndex] = false;
284 };
285
286 function crop_cancelEvent(e)
287 {
288 if (document.all)e = event;
289 if (e.target) source = e.target;
290 else if (e.srcElement) source = e.srcElement;
291 if (source.nodeType == 3) // defeat Safari bug
292 source = source.parentNode;
293
294 if (source.tagName && source.tagName.toLowerCase() == 'input')return true;
295 return false;
296 };
297
298 var mouseMoveEventInProgress = false;
299 function cropScript_mouseMove(e)
300 {
301 if (mouseMoveEventInProgress)return;
302 if (crop_moveCounter < 10 && crop_resizeCounter < 10)return;
303 if (document.all)mouseMoveEventInProgress = true;
304 if (document.all)e = event;
305
306 if (crop_resizeCounter == 10) {
307 if (crop_currentResizeType == 'e-resize' || crop_currentResizeType == 'ne-resize' || crop_currentResizeType == 'se-resize') {
308 cropDiv_dotted.style.width = Math.max(crop_minimumWidthHeight, (imageDiv_currentWidth + e.clientX - cropEvent_eventX)) + 'px';
309 }
310 if (crop_currentResizeType == 's-resize' || crop_currentResizeType == 'sw-resize' || crop_currentResizeType == 'se-resize') {
311 cropDiv_dotted.style.height = Math.max(crop_minimumWidthHeight, (imageDiv_currentHeight + e.clientY - cropEvent_eventY)) + 'px';
312 }
313
314 if (crop_currentResizeType == 'w-resize' || crop_currentResizeType == 'sw-resize' || crop_currentResizeType == 'nw-resize') {
315 var tmpTop = cropDiv_dotted.style.left.replace('px', '') / 1;
316 var newTop = Math.max(0, (imageDiv_currentLeft + e.clientX - cropEvent_eventX));
317 if ((newTop + crop_minimumWidthHeight) > (cropDiv_dotted.style.left.replace('px', '') / 1 + cropDiv_dotted.style.width.replace('px', '') / 1)) {
318 newTop = (cropDiv_dotted.style.left.replace('px', '') / 1 + cropDiv_dotted.style.width.replace('px', '') / 1) - crop_minimumWidthHeight;
319 }
320 cropDiv_dotted.style.left = newTop + 'px';
321 cropDiv_dotted.style.width = (cropDiv_dotted.style.width.replace('px', '') / 1 + tmpTop - cropDiv_dotted.style.left.replace('px', '') / 1) + 'px';
322 }
323
324 if (crop_currentResizeType == 'n-resize' || crop_currentResizeType == 'nw-resize' || crop_currentResizeType == 'ne-resize') {
325 var tmpTop = cropDiv_dotted.style.top.replace('px', '') / 1;
326 var newTop = Math.max(0, (imageDiv_currentTop + e.clientY - cropEvent_eventY));
327 if ((newTop + crop_minimumWidthHeight) > (cropDiv_dotted.style.top.replace('px', '') / 1 + cropDiv_dotted.style.height.replace('px', '') / 1)) {
328 newTop = (cropDiv_dotted.style.top.replace('px', '') / 1 + cropDiv_dotted.style.height.replace('px', '') / 1) - crop_minimumWidthHeight;
329 }
330 cropDiv_dotted.style.top = newTop + 'px';
331 cropDiv_dotted.style.height = (cropDiv_dotted.style.height.replace('px', '') / 1 + tmpTop - cropDiv_dotted.style.top.replace('px', '') / 1) + 'px';
332 }
333
334 if ((cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) > crop_imageHeight)
335 cropDiv_dotted.style.height = (crop_imageHeight - cropDiv_dotted.style.top.replace('px', '') / 1 - (cropToolBorderWidth * 2)) + 'px';
336
337 if ((cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) > crop_imageWidth)
338 cropDiv_dotted.style.width = (crop_imageWidth - cropDiv_dotted.style.left.replace('px', '') / 1 - (cropToolBorderWidth * 2)) + 'px';
339
340 if (e.ctrlKey || crop_script_alwaysPreserveAspectRatio)preserveAspectRatio = true; else preserveAspectRatio = false;
341
342 if (preserveAspectRatio) {
343 var tmpRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;
344 if (tmpRatio < cropWidthRatio) {
345 cropDiv_dotted.style.width = (cropDiv_dotted.style.height.replace('px', '') / 1 * cropWidthRatio) + 'px';
346 } else {
347 cropDiv_dotted.style.height = (cropDiv_dotted.style.width.replace('px', '') / 1 / cropWidthRatio) + 'px';
348 }
349
350 if ((cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) > crop_imageHeight) {
351 var ratioToAdjust = (crop_imageHeight - cropDiv_dotted.style.top.replace('px', '') / 1) / (cropDiv_dotted.offsetHeight + (cropToolBorderWidth * 2));
352 if (Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) >= crop_minimumWidthHeight) {
353 cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px';
354 cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px';
355 } else {
356 cropDiv_dotted.style.top = (crop_imageHeight - cropDiv_dotted.style.height.replace('px', '')) + 'px';
357 }
358 }
359
360 if ((cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) > crop_imageWidth) {
361 var ratioToAdjust = (crop_imageWidth - cropDiv_dotted.style.left.replace('px', '') / 1) / (cropDiv_dotted.offsetWidth + (cropToolBorderWidth * 2));
362 if (Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) >= crop_minimumWidthHeight) {
363 cropDiv_dotted.style.height = Math.round((cropDiv_dotted.style.height.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px';
364 cropDiv_dotted.style.width = Math.round((cropDiv_dotted.style.width.replace('px', '') * ratioToAdjust) + cropToolBorderWidth) + 'px';
365 } else {
366 cropDiv_dotted.style.left = (crop_imageWidth - cropDiv_dotted.style.width.replace('px', '')) + 'px';
367 }
368 }
369 }
370 if (!crop_script_fixedRatio && !e.ctrlKey)cropWidthRatio = cropDiv_dotted.offsetWidth / cropDiv_dotted.offsetHeight;
371 }
372
373 if (crop_moveCounter == 10) {
374 var tmpLeft = imageDiv_currentLeft + e.clientX - cropEvent_eventX;
375 if (tmpLeft < 0)tmpLeft = 0;
376 if ((tmpLeft + imageDiv_currentWidth + (cropToolBorderWidth * 2)) > crop_imageWidth)tmpLeft = crop_imageWidth - imageDiv_currentWidth - (cropToolBorderWidth * 2);
377 cropDiv_dotted.style.left = tmpLeft + 'px';
378 var tmpTop = imageDiv_currentTop + e.clientY - cropEvent_eventY;
379 if (tmpTop < 0)tmpTop = 0;
380 if ((tmpTop + imageDiv_currentHeight + (cropToolBorderWidth * 2)) > crop_imageHeight)tmpTop = crop_imageHeight - imageDiv_currentHeight - (cropToolBorderWidth * 2);
381 cropDiv_dotted.style.top = tmpTop + 'px';
382 }
383
384 var w = cropDiv_dotted.style.width.replace('px', '') / 1;
385 var h = cropDiv_dotted.style.height.replace('px', '') / 1;
386 if (w < 100) {
387 cropDiv_dotted.style.width = '100px';
388 cropDiv_dotted.style.left = '0px';
389 }
390 if (h < 100) {
391 cropDiv_dotted.style.height = '100px';
392 cropDiv_dotted.style.top = '0px';
393 }
394
395 repositionSmallSquares();
396 resizeTransparentSquares();
397 if (updateFormValuesAsYouDrag)cropScript_updateFormValues();
398 mouseMoveEventInProgress = false;
399 };
400
401 function repositionSmallSquares()
402 {
403 var w = cropDiv_dotted.style.width.replace('px', '') / 1;
404 var h = cropDiv_dotted.style.height.replace('px', '') / 1;
405 smallSquare_tc.style.left = (Math.floor((w + (cropToolBorderWidth * 2)) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
406 smallSquare_bc.style.left = (Math.floor((w + (cropToolBorderWidth * 2)) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
407 smallSquare_tr.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
408 smallSquare_rc.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
409 smallSquare_br.style.left = (w + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
410
411 smallSquare_br.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
412 smallSquare_bc.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
413 smallSquare_bl.style.top = (h + (cropToolBorderWidth * 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
414 smallSquare_lc.style.top = (Math.floor((h + cropToolBorderWidth) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
415 smallSquare_rc.style.top = (Math.floor((h + cropToolBorderWidth) / 2) - offsetSmallSquares - (cropToolBorderWidth * 2)) + 'px';
416 };
417
418 function resizeTransparentSquares()
419 {
420 var w = cropDiv_dotted.style.width.replace('px', '') / 1;
421 cropDiv_left.style.width = cropDiv_dotted.style.left;
422 cropDiv_right.style.width = Math.max(0, crop_imageWidth - (cropToolBorderWidth * 2) - (w + cropDiv_dotted.style.left.replace('px', '') / 1)) + 'px';
423 cropDiv_right.style.left = (w + (cropToolBorderWidth * 2) + cropDiv_dotted.style.left.replace('px', '') / 1) + 'px';
424 cropDiv_bottom.style.height = Math.max(0, crop_imageHeight - (cropToolBorderWidth * 2) - (cropDiv_dotted.style.height.replace('px', '') / 1 + cropDiv_dotted.style.top.replace('px', '') / 1)) + 'px';
425 cropDiv_bottom.style.top = (cropDiv_dotted.style.height.replace('px', '') / 1 + (cropToolBorderWidth * 2) + cropDiv_dotted.style.top.replace('px', '') / 1) + 'px';
426
427 cropDiv_top.style.height = cropDiv_dotted.style.top;
428
429 cropDiv_bottom.style.left = cropDiv_dotted.style.left;
430 cropDiv_bottom.style.width = (w + (cropToolBorderWidth * 2)) + 'px';
431 cropDiv_top.style.left = cropDiv_dotted.style.left;
432 cropDiv_top.style.width = (w + (cropToolBorderWidth * 2)) + 'px';
433
434 if (cropDiv_left.style.width == '0px')cropDiv_left.style.visibility = 'hidden'; else cropDiv_left.style.visibility = 'visible';
435 if (cropDiv_right.style.width == '0px')cropDiv_right.style.visibility = 'hidden'; else cropDiv_right.style.visibility = 'visible';
436 if (cropDiv_bottom.style.width == '0px')cropDiv_bottom.style.visibility = 'hidden'; else cropDiv_bottom.style.visibility = 'visible';
437 };
438
439 function cropScript_updateFormValues()
440 {
441 document.getElementById('input_crop_x').value = Math.round(cropDiv_dotted.style.left.replace('px', '') / 1 * (crop_originalImageWidth / crop_imageWidth));
442 document.getElementById('input_crop_y').value = Math.round(cropDiv_dotted.style.top.replace('px', '') / 1 * (crop_originalImageHeight / crop_imageHeight));
443 document.getElementById('input_crop_width').value = Math.round((cropDiv_dotted.style.width.replace('px', '') / 1 + (cropToolBorderWidth * 2)) * (crop_originalImageWidth / crop_imageWidth));
444 document.getElementById('input_crop_height').value = Math.round((cropDiv_dotted.style.height.replace('px', '') / 1 + (cropToolBorderWidth * 2)) * (crop_originalImageHeight / crop_imageHeight));
445 };
446
447 function cropScript_stopResizeMove()
448 {
449 crop_resizeCounter = -1;
450 crop_moveCounter = -1;
451 cropDiv_dotted.style.cursor = 'move';
452 cropScript_updateFormValues();
453 if (document.all) {
454 var div = cropDiv_dotted.getElementsByTagName('DIV')[0];
455 div.style.display = 'block';
456 }
457 };
458
459 function cropScript_setCropSizeByInput()
460 {
461 var obj_x = document.getElementById('input_crop_x');
462 var obj_y = document.getElementById('input_crop_y');
463 var obj_width = document.getElementById('input_crop_width');
464 var obj_height = document.getElementById('input_crop_height');
465
466 obj_x.value = obj_x.value.replace(/[^0-9]/gi, '');
467 obj_y.value = obj_y.value.replace(/[^0-9]/gi, '');
468 obj_width.value = obj_width.value.replace(/[^0-9]/gi, '');
469 obj_height.value = obj_height.value.replace(/[^0-9]/gi, '');
470
471 if (obj_x.value.length == 0)obj_x.value = 0;
472 if (obj_y.value.length == 0)obj_y.value = 0;
473 if (obj_width.value.length == 0)obj_width.value = crop_originalImageWidth;
474 if (obj_height.value.length == 0)obj_height.value = crop_originalImageHeight;
475
476 if (obj_x.value > (crop_originalImageWidth - crop_minimumWidthHeight))obj_x.value = crop_originalImageWidth - crop_minimumWidthHeight;
477 if (obj_y.value > (crop_originalImageHeight - crop_minimumWidthHeight))obj_y.value = crop_originalImageHeight - crop_minimumWidthHeight;
478
479 if (obj_width.value / 1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value / 1;
480 if (obj_height.value / 1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value / 1;
481
482 if (obj_x.value / 1 + obj_width.value / 1 > crop_originalImageWidth)obj_width.value = crop_originalImageWidth - obj_x.value;
483 if (obj_y.value / 1 + obj_height.value / 1 > crop_originalImageHeight)obj_height.value = crop_originalImageHeight - obj_y.value;
484
485 cropDiv_dotted.style.left = Math.round(obj_x.value / 1 * (crop_imageWidth / crop_originalImageWidth)) + 'px';
486 cropDiv_dotted.style.top = Math.round(obj_y.value / 1 * (crop_imageHeight / crop_originalImageHeight)) + 'px';
487 cropDiv_dotted.style.width = Math.round((obj_width.value / 1 - (cropToolBorderWidth * 2)) * (crop_imageWidth / crop_originalImageWidth)) + 'px';
488 cropDiv_dotted.style.height = Math.round((obj_height.value / 1 - (cropToolBorderWidth * 2)) * (crop_imageHeight / crop_originalImageHeight)) + 'px';
489
490 repositionSmallSquares();
491 resizeTransparentSquares();
492 };
493
494 function cropScript_setBasicEvents()
495 {
496 document.documentElement.ondragstart = crop_cancelEvent;
497 document.documentElement.onselectstart = crop_cancelEvent;
498 document.documentElement.onmousemove = cropScript_mouseMove;
499 document.documentElement.onmouseup = cropScript_stopResizeMove;
500
501 document.getElementById('input_crop_x').onblur = cropScript_setCropSizeByInput;
502 document.getElementById('input_crop_y').onblur = cropScript_setCropSizeByInput;
503 document.getElementById('input_crop_width').onblur = cropScript_setCropSizeByInput;
504 document.getElementById('input_crop_height').onblur = cropScript_setCropSizeByInput;
505 document.getElementById('crop_percent_size').onblur = cropScript_validatePercent;
506 };
507
508 function cropScript_validatePercent()
509 {
510 this.value = this.value.replace(/[^0-9]/gi, '');
511 if (this.value.length == 0)this.value = '1';
512 if (this.value / 1 > crop_maximumPercent)this.value = '100';
513 if (this.value / 1 < crop_minimumPercent)this.value = crop_minimumPercent
514 };
515
516 function crop_initFixedRatio()
517 {
518 crop_script_fixedRatio = 1;
519 document.getElementById('input_crop_width').value = Math.round(document.getElementById('input_crop_height').value) / crop_script_fixedRatio;
520 cropScript_setCropSizeByInput();
521 };
522
523 function init_imageCrop(basedir)
524 {
525 cropScript_setBasicEvents();
526 crop_createDivElements(basedir);
527 cropScript_updateFormValues();
528 crop_initFixedRatio();
529
530 cropDiv_dotted.style.left = '0px';
531 cropDiv_dotted.style.top = '0px';
532 cropDiv_dotted.style.width = '100px';
533 cropDiv_dotted.style.height = '100px';
534 repositionSmallSquares();
535 resizeTransparentSquares();
536 };
537