source: main/trunk/model-cols-dev/peijones/js/documentmaker/PhotoNotes-1.5.js@ 25075

Last change on this file since 25075 was 25075, checked in by papitha, 12 years ago

jQuery-File-Upload added
File size: 26.3 KB
Line 
1
2/*** Photo Notes Container *******************************/
3
4function PhotoNoteContainer(element, config)
5{
6 var props = {
7 element: element,
8 dragresize: null,
9 notes: new Array(),
10 editing: false
11 };
12
13 for (var p in props)
14 {
15 this[p] = (!config || typeof config[p] == 'undefined') ? props[p] : config[p];
16 }
17
18};
19
20PhotoNoteContainer.prototype.DeleteNote = function(note)
21{
22 note.UnSelect();
23
24 /* remove from the DOM */
25 this.element.removeChild(note.gui.ElementRect);
26 this.element.removeChild(note.gui.ElementNote);
27
28 /* remove from the array... */
29 this.notes.remove(note);
30}
31
32PhotoNoteContainer.prototype.AddNote = function(note)
33{
34 if(!this.editing)
35 {
36 /* add the note to the array of notes, and set its container */
37 this.notes[this.notes.length] = note;
38 note.container = this;
39
40 /* add the note to the DOM */
41 this.element.appendChild(note.gui.ElementRect);
42 this.element.appendChild(note.gui.ElementNote);
43 }
44};
45
46/* hide all of the "text" parts of the notes. Primarily called when hovering a note, at which
47 point we want to hide all of the other note texts */
48PhotoNoteContainer.prototype.HideAllNoteTexts = function()
49{
50 for (var i = 0;i<this.notes.length;i++)
51 this.notes[i].HideNoteText();
52};
53
54
55PhotoNoteContainer.prototype.DisableAllNotes = function()
56{
57 for (var i = 0;i<this.notes.length;i++)
58 this.notes[i].DisableNote();
59};
60
61PhotoNoteContainer.prototype.HideAllNotes = function()
62{
63 for (var i = 0;i<this.notes.length;i++)
64 this.notes[i].HideNote();
65};
66
67PhotoNoteContainer.prototype.ShowAllNotes = function()
68{
69 for (var i = 0;i<this.notes.length;i++)
70 this.notes[i].ShowNote();
71};
72
73PhotoNoteContainer.prototype.EnableAllNotes = function()
74{
75 for (var i = 0;i<this.notes.length;i++)
76 this.notes[i].EnableNote();
77};
78
79/*** Photo Note ******************************************/
80
81function PhotoNote(text,id,rect)
82{
83 var props = {
84 text: text,
85 id: id,
86 rect: rect,
87 selected: false,
88 container: null,
89 dragresize: null,
90 oldRect: null,
91 YOffset: 10,
92 XOffset: 0,
93 onsave: null,
94 ondelete: null,
95 gui: null
96
97 };
98
99 for (var p in props)
100 {
101 this[p] = props[p];
102 }
103
104 this.CreateElements();
105}
106
107PhotoNote.prototype.Select = function()
108{
109 //window.status = 'container: ' + this.container;
110 if(!this.container.editing)
111 {
112 this.ShowNoteText();
113 this.dragresize.select(this.gui.ElementRect);
114 this.selected = true;
115 this.SetEditable(true);
116 }
117}
118
119PhotoNote.prototype.UnSelect = function()
120{
121 this.dragresize.deselect(false);
122 this.selected = false;
123 this.SetEditable(false);
124 this.HideNoteText();
125}
126
127PhotoNote.prototype.Save = function()
128{
129 this.oldRect = null;
130 this.gui.TextTitle.innerHTML = this.gui.TextBox.value;
131 this.text = this.gui.TextBox.value
132 this.UnSelect();
133}
134
135PhotoNote.prototype.Cancel = function()
136{
137 //if the note is still new, then we actually want to delete it, not cancel it..
138 if(this.id < 0)
139 {
140 this.container.DeleteNote(this)
141 }
142 else
143 {
144 //reset the node to it's old position
145 if(this.oldRect != null)
146 {
147 this.rect = this.oldRect;
148 }
149 this.oldRect = null;
150 this.gui.TextBox.value = this.text;
151 this.PositionNote();
152 this.UnSelect();
153 }
154}
155
156PhotoNote.prototype.ShowNoteText = function()
157{
158 if(!this.container.editing)
159 {
160 this.container.HideAllNoteTexts();
161 this.container.DisableAllNotes();
162 this.EnableNote();
163
164 this.gui.ElementNote.style.display='block';
165 if(BrowserDetect.browser == 'Explorer')
166 {
167 this.gui.ElementRect.firstChild.filters.alpha.opacity = '85';
168 this.gui.ElementRect.firstChild.firstChild.filters.alpha.opacity = '85';
169 } else {
170 this.gui.ElementRect.firstChild.firstChild.style.opacity = '.85';
171 this.gui.ElementRect.firstChild.style.opacity = '.85';
172 }
173
174 }
175}
176
177PhotoNote.prototype.DisableNote = function ()
178{
179 this.dragresize.enabled=false;
180}
181
182PhotoNote.prototype.EnableNote = function ()
183{
184 this.dragresize.enabled=true;
185}
186
187PhotoNote.prototype.HideNoteText = function ()
188{
189 this.gui.ElementNote.style.display='none';
190 if(BrowserDetect.browser == 'Explorer')
191 {
192 this.gui.ElementRect.firstChild.firstChild.filters.alpha.opacity = '40';
193 this.gui.ElementRect.firstChild.filters.alpha.opacity = '40';
194 } else {
195 this.gui.ElementRect.firstChild.style.opacity = '0.4';
196 this.gui.ElementRect.firstChild.firstChild.style.opacity = '0.4';
197 }
198}
199
200PhotoNote.prototype.HideNote = function ()
201{
202 this.gui.ElementRect.style.display='none';
203 this.gui.ElementNote.style.display='none';
204}
205
206PhotoNote.prototype.ShowNote = function ()
207{
208 this.gui.ElementRect.style.display='block';
209 this.gui.ElementNote.style.display='none';
210}
211
212PhotoNote.prototype.SetEditable = function(editable)
213{
214 this.container.editing = editable;
215
216 if(editable)
217 {
218 //the first child of the note is the text
219 this.gui.TextTitle.style.display = 'none';
220
221 //the second child is the edit area...
222 this.gui.EditArea.style.display = 'block';
223
224 //if this is a "new" note, then hide the delete button
225 if(this.id <= 0)
226 this.gui.DeleteButton.style.display = 'none';
227 else
228 this.gui.DeleteButton.style.display = '';
229
230 // get the textarea and select the text...
231 this.HighlightTextbox();
232 }
233 else
234 {
235 //the first child of the note is the text
236 this.gui.TextTitle.style.display = 'block';
237
238 //the second child is the edit area...
239 this.gui.EditArea.style.display = 'none';
240 }
241}
242
243PhotoNote.prototype.HighlightTextbox = function ()
244{
245 // get the textarea and select the text...
246 if(this.gui.EditArea.style.display=='block')
247 {
248 var textfield = this.gui.TextBox;
249 setTimeout(function() {
250 try
251 {
252 textfield.focus();
253 //textfield.select();
254 }
255 catch(e) {}
256 }, 200);
257 }
258
259}
260
261PhotoNote.prototype.CreateElements = function()
262{
263 this.gui = new PhotoNoteGUI();
264
265 var newArea = document.createElement('div');
266 this.dragresize = new DragResize('dragresize', { allowBlur: false });
267 newArea.className = 'fn-area';
268 newArea.id = 'fn-area-new';
269
270 var newAreaBlack = document.createElement('div');
271 newAreaBlack.className = 'fn-area-blackborder';
272 var newAreaWhite = document.createElement('div');
273 newAreaWhite.className = 'fn-area-whiteborder';
274
275 var currentNote = this;
276
277 var newAreaInner = document.createElement('div');
278 newAreaInner.className = 'fn-area-inner';
279 newAreaWhite.appendChild(newAreaInner);
280
281 //attach mouse events to this element...
282 addEvent(newAreaInner, 'mouseover', function() {
283 currentNote.ShowNoteText();
284 });
285 addEvent(newAreaInner, 'mouseout', function() {
286
287 if(!currentNote.selected)
288 {
289 setTimeout(function () {
290 currentNote.HideNoteText();
291 }, 250);
292
293 }
294 });
295
296 addEvent(newAreaInner, 'mousedown', function() {
297 if(!currentNote.selected)
298 {
299 //window.status = 'mouseDown2!';
300 currentNote.Select();
301 }
302 });
303
304 newAreaBlack.appendChild(newAreaWhite);
305 newArea.appendChild(newAreaBlack);
306
307 // add the notes area
308 var noteArea = document.createElement('div');
309 noteArea.className = 'fn-note';
310 noteArea.onmouseover = function(){_zoomEnabled = false;};
311 noteArea.onmouseout = function(){_zoomEnabled = true;};
312 var titleArea = document.createElement('div');
313 titleArea.className = 'fn-note-text';
314 var t = document.createTextNode(this.text);
315 titleArea.appendChild(t);
316 noteArea.appendChild(titleArea);
317
318 var editArea = document.createElement('div');
319 editArea.className = 'fn-note-edit';
320
321 var editAreaText = document.createElement('div');
322 editAreaText.className = 'fn-note-edit-text';
323
324 var newTextbox = document.createElement('textarea');
325 newTextbox.value = this.text;
326 editAreaText.appendChild(newTextbox);
327 editArea.appendChild(editAreaText);
328
329 var buttonsDiv = document.createElement('div');
330 buttonsDiv.setAttribute("class", "annotator-editor");
331 var newButtonOK = document.createElement('a');
332 newButtonOK.setAttribute("class", "annotator-save");
333 newButtonOK.innerHTML='Save';
334 newButtonOK.onmouseover = function(){_zoomEnabled = false;};
335 newButtonOK.onmouseout = function(){_zoomEnabled = true;};
336 newButtonOK.onclick = function() {
337 if(currentNote.onsave)
338 {
339 currentNote.text = newTextbox.value;
340 var res = currentNote.onsave(currentNote);
341 if(res > 0)
342 {
343 //window.status = '';
344 currentNote.id = res;
345 currentNote.Save();
346 }
347 else
348 {
349 alert("error saving note");
350 currentNote.Cancel();
351 }
352 }
353 else
354 {
355 alert("onsave must be implemented in order to *actually* save");
356 currentNote.Cancel();
357 }
358 };
359 buttonsDiv.appendChild(newButtonOK);
360
361 var newButtonCancel = document.createElement('a');
362 newButtonCancel.setAttribute("class", "annotator-cancel");
363 newButtonCancel.innerHTML='Cancel';
364 newButtonCancel.onmouseover = function(){_zoomEnabled = false;};
365 newButtonCancel.onmouseout = function(){_zoomEnabled = true;};
366 newButtonCancel.onclick = function() {
367 currentNote.Cancel();
368 };
369 buttonsDiv.appendChild(newButtonCancel);
370
371 var newButtonDelete = document.createElement('a');
372 newButtonDelete.setAttribute("class", "annotator-cancel");
373 newButtonDelete.innerHTML='Delete';
374 newButtonDelete.onmouseover = function(){_zoomEnabled = false;};
375 newButtonDelete.onmouseout = function(){_zoomEnabled = true;};
376 newButtonDelete.onclick = function() {
377
378 if(currentNote.ondelete)
379 {
380 var res = currentNote.ondelete(currentNote);
381 if(res)
382 {
383 currentNote.container.DeleteNote(currentNote);
384 }
385 else
386 {
387 alert("error deleting note");
388 }
389 }
390 else
391 {
392 alert("ondelete must be implemented in order to *actually* delete");
393 }
394 setTimeout(function(){_zoomEnabled = true;}, 100);
395 };
396 buttonsDiv.appendChild(newButtonDelete);
397
398 editArea.appendChild(buttonsDiv);
399 noteArea.appendChild(editArea);
400
401 /********* DRAG & RESIZE EVENTS **********************/
402 this.dragresize.isElement = function(elm)
403 {
404 if(elm.className == 'fn-area')
405 {
406 this.maxRight = currentNote.container.element.offsetWidth;
407 this.maxBottom = currentNote.container.element.offsetHeight + $("#noZoom").position().top - 3;
408 return true;
409 }
410 };
411 this.dragresize.isHandle = function(elm)
412 {
413 if(elm.className == 'fn-area')
414 return true;
415 };
416 this.dragresize.ondragfocus = function()
417 {
418 currentNote.gui.ElementRect.style.cursor = 'move';
419 };
420 this.dragresize.ondragblur = function()
421 {
422 currentNote.gui.ElementRect.style.cursor = 'pointer';
423 };
424 this.dragresize.ondragstart = function()
425 {
426 if(currentNote.oldRect == null)
427 {
428 var r = currentNote.rect;
429 currentNote.oldRect = new PhotoNoteRect(r.left,r.top,r.width,r.height);
430 }
431 };
432 this.dragresize.ondragend = function()
433 {
434 //window.status = 'LKSFDLKJDFSLKJFDLKJ';
435 currentNote.HighlightTextbox();
436 };
437 this.dragresize.ondragmove = function()
438 {
439 currentNote.rect.left = parseInt(this.element.style.left);
440 currentNote.rect.top = parseInt(this.element.style.top) - $("#noZoom").position().top;
441 currentNote.rect.width = parseInt(this.element.style.width);
442 currentNote.rect.height = parseInt(this.element.style.height);
443 currentNote.PositionNote();
444 };
445
446 this.dragresize.apply(document);
447
448 /* setup the GUI object */
449 this.gui.ElementRect = newArea;
450 this.gui.ElementNote = noteArea;
451 this.gui.EditArea = editArea;
452 this.gui.TextBox = newTextbox;
453 this.gui.TextTitle = titleArea;
454 this.gui.DeleteButton = newButtonDelete;
455
456 /* position the note text below the note area */
457 this.PositionNote();
458}
459
460PhotoNote.prototype.PositionNote = function()
461{
462 /* outer most box */
463 this.gui.ElementRect.style.left = this.rect.left + 'px';
464 this.gui.ElementRect.style.top = this.rect.top + $("#noZoom").position().top + 'px';
465 this.gui.ElementRect.style.width = this.rect.width + 'px';
466 this.gui.ElementRect.style.height = this.rect.height + 'px';
467
468 // black border
469 this.gui.ElementRect.firstChild.style.width = parseInt(this.gui.ElementRect.style.width) - 2 + 'px';
470 this.gui.ElementRect.firstChild.style.height = parseInt(this.gui.ElementRect.style.height) - 2 + 'px';
471
472 // white border
473 this.gui.ElementRect.firstChild.firstChild.style.width = parseInt(this.gui.ElementRect.style.width) - 4 + 'px';
474 this.gui.ElementRect.firstChild.firstChild.style.height = parseInt(this.gui.ElementRect.style.height) - 4 + 'px';
475
476 // inner box
477 this.gui.ElementRect.firstChild.firstChild.firstChild.style.width = parseInt(this.gui.ElementRect.style.width) - 6 + 'px';
478 this.gui.ElementRect.firstChild.firstChild.firstChild.style.height = parseInt(this.gui.ElementRect.style.height) - 6 + 'px';
479
480 this.gui.ElementNote.style.left = this.rect.left + this.XOffset + 'px';
481 this.gui.ElementNote.style.top = this.rect.top + this.YOffset + this.rect.height + $("#noZoom").position().top + 'px';
482
483}
484
485/*********************************************************/
486/*** Photo Note GUI Object *******************************/
487/*********************************************************/
488function PhotoNoteGUI()
489{
490 this.ElementRect = null;
491
492 // the note text area...
493 this.ElementNote = null;
494 this.TextTitle = null;
495 this.EditArea = null;
496 this.TextBox = null;
497
498 // buttons
499 this.DeleteButton = null;
500}
501
502
503
504/*********************************************************/
505/*** Rectangle *******************************************/
506/*********************************************************/
507function PhotoNoteRect(left,top,width,height)
508{
509 this.left = left;
510 this.top = top;
511 this.width = width;
512 this.height = height;
513}
514
515/* for debugging purposes */
516PhotoNoteRect.prototype.toString = function()
517{
518 return 'left: ' + this.left + ', top: ' + this.top + ', width: ' + this.width + ', height: ' + this.height;
519}
520
521
522// *** Common API Code ***
523// (c) 2005 Angus Turnbull http://www.twinhelix.com
524
525var aeOL = [];
526function addEvent(o, n, f, l)
527{
528 var a = 'addEventListener', h = 'on'+n, b = '', s = '';
529 if (o[a] && !l) return o[a](n, f, false);
530 o._c |= 0;
531 if (o[h])
532 {
533 b = '_f' + o._c++;
534 o[b] = o[h];
535 }
536 s = '_f' + o._c++;
537 o[s] = f;
538 o[h] = function(e)
539 {
540 e = e || window.event;
541 var r = true;
542 if (b) r = o[b](e) != false && r;
543 r = o[s](e) != false && r;
544 return r;
545 };
546 aeOL[aeOL.length] = { o: o, h: h };
547};
548addEvent(window, 'unload', function() {
549 for (var i = 0; i < aeOL.length; i++) with (aeOL[i])
550 {
551 o[h] = null;
552 for (var c = 0; o['_f' + c]; c++) o['_f' + c] = null;
553 }
554});
555
556function cancelEvent(e, c)
557{
558 e.returnValue = false;
559 if (e.preventDefault) e.preventDefault();
560 if (c)
561 {
562 e.cancelBubble = true;
563 if (e.stopPropagation) e.stopPropagation();
564 }
565};
566
567function addLoadEvent(func) {
568 var oldonload = window.onload;
569 if (typeof window.onload != 'function') {
570 window.onload = func;
571 } else {
572 window.onload = function() {
573 oldonload();
574 func();
575 }
576 }
577}
578
579
580/* Extend the Array object with some useful features
581 http://www.ditchnet.org/wp/?p=8
582*/
583
584Array.prototype.clear = function () {
585 this.length = 0;
586};
587
588Array.prototype.remove = function (element) {
589 var result = false;
590 var array = [];
591 for (var i = 0; i < this.length; i++) {
592 if (this[i] == element) {
593 result = true;
594 } else {
595 array.push(this[i]);
596 }
597 }
598 this.clear();
599 for (var i = 0; i < array.length; i++) {
600 this.push(array[i]);
601 }
602 array = null;
603 return result;
604};
605
606
607// *** Drag and Resize Library Code ***
608// (c) 2005 Angus Turnbull http://www.twinhelix.come
609
610function DragResize(myName, config)
611{
612 var props = {
613 myName: myName, // Name of the object.
614 enabled: true, // Global toggle of drag/resize.
615 handles: ['tl', 'tm', 'tr',
616 'ml', 'mr', 'bl', 'bm', 'br'], // Array of drag handles: top/mid/.
617 isElement: null, // Function ref to test for an element.
618 isHandle: null, // Function ref to test for move handle.
619 element: null, // The currently selected element.
620 dragging: null, // Active handle reference of the element.
621 minWidth: 10, minHeight: 10, // Minimum pixel size of elements.
622 minLeft: 0, maxRight: 9999, // Bounding box area.
623 minTop: $("#noZoom").position().top, maxBottom: 9999,
624 zIndex: 1, // The highest Z-Index yet allocated.
625 mouseX: 0, mouseY: 0, // Current mouse position, recorded live.
626 lastMouseX: 0, lastMouseY: 0, // Last processed mouse positions.
627 mOffX: 0, mOffY: 0, // A known offset between position & mouse.
628 elmX: 0, elmY: 0, // Element position.
629 elmW: 0, elmH: 0, // Element size.
630 allowBlur: true, // Whether to allow automatic blur onclick.
631 ondragfocus: null, // Event handler functions.
632 ondragstart: null,
633 ondragmove: null,
634 ondragend: null,
635 ondragblur: null
636 };
637
638 for (var p in props)
639 {
640 this[p] = (typeof config[p] == 'undefined') ? props[p] : config[p];
641 }
642};
643
644DragResize.prototype.apply = function(node)
645{
646 // Adds object event handlers to the specified DOM node.
647
648 var obj = this;
649 addEvent(node, 'mousedown', function(e) { obj.mouseDown(e) } );
650 addEvent(node, 'mousemove', function(e) { obj.mouseMove(e) } );
651 addEvent(node, 'mouseup', function(e) { obj.mouseUp(e) } );
652};
653
654DragResize.prototype.handleSet = function(elm, show) { with (this)
655{
656 // Either creates, shows or hides the resize handles within an element.
657
658 // If we're showing them, and no handles have been created, create 4 new ones.
659 if (!elm._handle_tr)
660 {
661 for (var h = 0; h < handles.length; h++)
662 {
663 // Create 4 news divs, assign each a generic + specific class.
664 var hDiv = document.createElement('div');
665 hDiv.className = myName + ' ' + myName + '-' + handles[h];
666 elm['_handle_' + handles[h]] = elm.appendChild(hDiv);
667 }
668 }
669
670 // We now have handles. Find them all and show/hide.
671 for (var h = 0; h < handles.length; h++)
672 {
673 elm['_handle_' + handles[h]].style.visibility = show ? 'inherit' : 'hidden';
674 }
675}};
676
677
678DragResize.prototype.select = function(newElement) { with (this)
679{
680 // Selects an element for dragging.
681
682 if (!document.getElementById || !enabled) return;
683
684 // Activate and record our new dragging element.
685 if (newElement && (newElement != element) && enabled)
686 {
687 element = newElement;
688 // Elevate it and give it resize handles.
689 element.style.zIndex = ++zIndex;
690 handleSet(element, true);
691 // Record element attributes for mouseMove().
692 elmX = parseInt(element.style.left);
693 elmY = parseInt(element.style.top + $("#noZoom").position().top);
694 elmW = element.offsetWidth;
695 elmH = element.offsetHeight;
696 if (ondragfocus) this.ondragfocus();
697 //window.status = 'start elmX=' + element.className;
698
699 }
700}};
701
702
703DragResize.prototype.deselect = function(keepHandles) { with (this)
704{
705 // Immediately stops dragging an element. If 'keepHandles' is false, this
706 // remove the handles from the element and clears the element flag,
707 // completely resetting the .
708
709 if (!document.getElementById || !enabled) return;
710
711 if (!keepHandles)
712 {
713 if (ondragblur) this.ondragblur();
714 handleSet(element, false);
715 element = null;
716 }
717
718 dragging = null;
719 mOffX = 0;
720 mOffY = 0;
721}};
722
723
724DragResize.prototype.mouseDown = function(e) { with (this)
725{
726 //window.status = 'mouseDown!';
727 // Suitable elements are selected for drag/resize on mousedown.
728 // We also initialise the resize boxes, and drag parameters like mouse position etc.
729 if (!document.getElementById || !enabled) return true;
730
731 var elm = e.target || e.srcElement,
732 newElement = null,
733 newHandle = null,
734 hRE = new RegExp(myName + '-([trmbl]{2})', '');
735
736 while (elm)
737 {
738 // Loop up the DOM looking for matching elements. Remember one if found.
739 if (elm.className)
740 {
741 if (!newHandle && (hRE.test(elm.className) || isHandle(elm))) newHandle = elm;
742 if (isElement(elm)) { newElement = elm; break }
743 }
744 elm = elm.parentNode;
745 }
746
747 // If this isn't on the last dragged element, call deselect(false),
748 // which will hide its handles and clear element.
749 if (element && (element != newElement) && allowBlur) deselect(false);
750
751 // If we have a new matching element, call select().
752 if (newElement && (!element || (newElement == element)))
753 {
754 // Stop mouse selections.
755 cancelEvent(e);
756 select(newElement, newHandle);
757 dragging = newHandle;
758 if (dragging && ondragstart) this.ondragstart();
759 }
760}};
761
762
763DragResize.prototype.mouseMove = function(e) { with (this)
764{
765 // This continually offsets the dragged element by the difference between the
766 // last recorded mouse position (mouseX/Y) and the current mouse position.
767 if (!document.getElementById || !enabled) return true;
768
769 // We always record the current mouse position.
770 mouseX = e.pageX || e.clientX + document.documentElement.scrollLeft;
771 mouseY = e.pageY || e.clientY + document.documentElement.scrollTop;
772 // Record the relative mouse movement, in case we're dragging.
773 // Add any previously stored&ignored offset to the calculations.
774 var diffX = mouseX - lastMouseX + mOffX;
775 var diffY = mouseY - lastMouseY + mOffY;
776 mOffX = mOffY = 0;
777 // Update last processed mouse positions.
778 lastMouseX = mouseX;
779 lastMouseY = mouseY;
780
781 // That's all we do if we're not dragging anything.
782 if (!dragging) return true;
783
784 // Establish which handle is being dragged -- retrieve handle name from className.
785 var hClass = dragging && dragging.className &&
786 dragging.className.match(new RegExp(myName + '-([tmblr]{2})')) ? RegExp.$1 : '';
787
788 // If the hClass is one of the resize handles, resize one or two dimensions.
789 // Bounds checking is the hard bit -- basically for each edge, check that the
790 // element doesn't go under minimum size, and doesn't go beyond its boundary.
791 var rs = 0, dY = diffY, dX = diffX;
792 if (hClass.indexOf('t') >= 0)
793 {
794 rs = 1;
795 if (elmH - dY < minHeight) mOffY = (dY - (diffY = elmH - minHeight));
796 else if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
797 elmY += diffY;
798 elmH -= diffY;
799 }
800 if (hClass.indexOf('b') >= 0)
801 {
802 rs = 1;
803 if (elmH + dY < minHeight) mOffY = (dY - (diffY = minHeight - elmH));
804 else if (elmY + elmH + dY > maxBottom) mOffY = (dY - (diffY = maxBottom - elmY - elmH));
805 elmH += diffY;
806 }
807 if (hClass.indexOf('l') >= 0)
808 {
809 rs = 1;
810 if (elmW - dX < minWidth) mOffX = (dX - (diffX = elmW - minWidth));
811 else if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
812 elmX += diffX;
813 elmW -= diffX;
814 }
815 if (hClass.indexOf('r') >= 0)
816 {
817 rs = 1;
818 if (elmW + dX < minWidth) mOffX = (dX - (diffX = minWidth - elmW));
819 else if (elmX + elmW + dX > maxRight) mOffX = (dX - (diffX = maxRight - elmX - elmW));
820 elmW += diffX;
821 window.status = 'diffX:' + diffX;
822 }
823 // If 'rs' isn't set, we must be dragging the whole element, so move that.
824 if (dragging && !rs)
825 {
826 // Bounds check left-right...
827 if (elmX + dX < minLeft) mOffX = (dX - (diffX = minLeft - elmX));
828 else if (elmX + elmW + dX > maxRight) mOffX = (dX - (diffX = maxRight - elmX - elmW));
829 // ...and up-down.
830 if (elmY + dY < minTop) mOffY = (dY - (diffY = minTop - elmY));
831 else if (elmY + elmH + dY > maxBottom) mOffY = (dY - (diffY = maxBottom - elmY - elmH));
832 //window.status = 'diffX-' + diffX + ' , elmX-' + elmX;
833 elmX += diffX;
834 elmY += diffY;
835 }
836
837 //window.status = 'elmX=' + elmX;
838 // Assign new info back to the element, with minimum dimensions.
839 with (element.style)
840 {
841 left = elmX + 'px';
842 width = elmW + 'px';
843 top = elmY + 'px';
844 height = elmH + 'px';
845 }
846
847 // Evil, dirty, hackish Opera select-as-you-drag fix.
848 if (window.opera && document.documentElement)
849 {
850 var oDF = document.getElementById('op-drag-fix');
851 if (!oDF)
852 {
853 var oDF = document.createElement('input');
854 oDF.id = 'op-drag-fix';
855 oDF.style.display = 'none';
856 document.body.appendChild(oDF);
857 }
858 oDF.focus();
859 }
860
861 if (ondragmove) this.ondragmove();
862
863 // Stop a normal drag event.
864 cancelEvent(e);
865}};
866
867
868DragResize.prototype.mouseUp = function(e) { with (this)
869{
870 // On mouseup, stop dragging, but don't reset handler visibility.
871 if (!document.getElementById || !enabled) return;
872
873 if (ondragend) this.ondragend();
874 deselect(true);
875}};
876
877
878
Note: See TracBrowser for help on using the repository browser.