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

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

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