source: main/trunk/greenstone3/web/interfaces/oran/js/documentmaker/PhotoNotes-1.5.js@ 24771

Last change on this file since 24771 was 24771, checked in by papitha, 13 years ago

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