1 |
// ----------------------------------------------------------------------------- |
// -------------------------------------------------------------------------- |
2 |
// IWF - Interactive Website Framework. Javascript library for creating |
/// IWF - Interactive Website Framework. Javascript library for creating |
3 |
// responsive thin client interfaces. |
/// responsive thin client interfaces. |
4 |
// |
/// |
5 |
// Copyright (C) 2005 Brock Weaver brockweaver@gmail.com |
/// Copyright (C) 2005 Brock Weaver brockweaver@users.sourceforge.net |
6 |
// |
/// |
7 |
// This library is free software; you can redistribute it and/or modify |
/// This library is free software; you can redistribute it and/or modify |
8 |
// it under the terms of the GNU Lesser General Public License as published |
/// it under the terms of the GNU Lesser General Public License as published |
9 |
// by the Free Software Foundation; either version 2.1 of the License, or |
/// by the Free Software Foundation; either version 2.1 of the License, or |
10 |
// (at your option) any later version. |
/// (at your option) any later version. |
11 |
// |
/// |
12 |
// This library is distributed in the hope that it will be useful, but |
/// This library is distributed in the hope that it will be useful, but |
13 |
// WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY |
/// WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY |
14 |
// or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public |
/// or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public |
15 |
// License for more details. |
/// License for more details. |
16 |
|
/// |
17 |
|
/// You should have received a copy of the GNU Lesser General Public License |
18 |
|
/// along with this library; if not, write to the Free Software Foundation, |
19 |
|
/// Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA |
20 |
|
/// |
21 |
|
/// Brock Weaver |
22 |
|
/// brockweaver@users.sourceforge.net |
23 |
|
/// 1605 NW Maple Pl |
24 |
|
/// Ankeny, IA 50021 |
25 |
|
/// |
26 |
|
//! http://iwf.sourceforge.net/ |
27 |
|
// -------------------------------------------------------------------------- |
28 |
|
//! NOTE: To minimize file size, strip all fluffy comments (except the LGPL, of course!) |
29 |
|
//! using the following regex (global flag and multiline on): |
30 |
|
//! ^\t*//([^/!].*|$) |
31 |
// |
// |
32 |
// You should have received a copy of the GNU Lesser General Public License |
// This reduces file size by about 30%, give or take. |
|
// along with this library; if not, write to the Free Software Foundation, |
|
|
// Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA |
|
33 |
// |
// |
34 |
// Brock Weaver |
//! To rip out only logging statements (commented or uncommented): |
35 |
// brockweaver@gmail.com |
//! ^/{0,2}iwfLog.* |
36 |
// 1605 NW Maple Pl |
// -------------------------------------------------------------------------- |
|
// Ankeny, IA 50021 |
|
|
// ----------------------------------------------------------------------------- |
|
37 |
|
|
38 |
// -------------------------------------------------------------------------- |
// -------------------------------------------------------------------------- |
39 |
// iwfgui.js |
//! iwfgui.js |
40 |
// |
// |
41 |
// GUI inspection and manipulation functions |
// GUI inspection and manipulation functions |
42 |
// |
// |
43 |
// Dependencies: |
//! Dependencies: |
44 |
// iwfcore.js |
//! iwfcore.js |
45 |
// |
// |
46 |
// Brock Weaver - brockweaver@sourceforge.net - iwf.sourceforge.net |
//! Brock Weaver - brockweaver@users.sourceforge.net |
47 |
// v 0.1 - 2005-06-05 |
//! v 0.2 - 2005-11-14 |
48 |
// Initial release. |
//! core bug patch |
49 |
|
// -------------------------------------------------------------------------- |
50 |
|
//! v 0.1 - 2005-06-05 |
51 |
|
//! Initial release. |
52 |
// -------------------------------------------------------------------------- |
// -------------------------------------------------------------------------- |
53 |
// Issues: |
// Issues: |
54 |
// Timeouts have hiccups sometimes when they begin to overlap |
// Timeouts have hiccups sometimes when they begin to overlap |
55 |
// Not tested on Safari -- I need an iMac! |
// Not tested on Safari -- I need a Mac! |
56 |
// _iwfMoveTo() has some calculation problems with certain motionType values |
// _iwfMoveTo() has some calculation problems with certain motionType values |
57 |
// -------------------------------------------------------------------------- |
// -------------------------------------------------------------------------- |
58 |
|
|
59 |
// ----------------------------------- |
// ----------------------------------- |
60 |
// Dependency Check |
// Dependency Check |
61 |
if (!window.iwfGetById){ |
if (!window.iwfGetById){ |
62 |
alert("IWF Dependency Error: you must set a reference to the iwfcore.js file *before* iwfgui.js! I.E.:\n\n<script type='text/javascript' src='iwfcore.js'></script>\n<script type='text/javascript' src='iwfgui.js'></script>"); |
iwfLog("IWF Dependency Error: you must set a reference to the iwfcore.js file *before* iwfgui.js! I.E.:\n\n<script type='text/javascript' src='iwfcore.js'></script>\n<script type='text/javascript' src='iwfgui.js'></script>", true); |
63 |
} |
} |
64 |
// ----------------------------------- |
// ----------------------------------- |
65 |
|
|
353 |
|
|
354 |
} |
} |
355 |
|
|
|
// BROCK |
|
356 |
function iwfDelay(ms, fpOrString){ |
function iwfDelay(ms, fpOrString){ |
357 |
|
// note this inner function creates a closure... |
358 |
function _iwfDelayExpired(){ |
function _iwfDelayExpired(){ |
359 |
if (localIsString){ |
if (localIsString){ |
360 |
// passed a string. eval it. |
// passed a string. eval it. |
361 |
iwfLog("_iwfDelayExpired: calling string of:\n" + localFpOrString, true); |
//iwfLog("_iwfDelayExpired: calling string of:\n" + localFpOrString, true); |
362 |
eval(localFpOrString); |
eval(localFpOrString); |
363 |
} else { |
} else { |
364 |
// they passed a function pointer. |
// they passed a function pointer. |
540 |
|
|
541 |
function iwfZIndex(id, z){ |
function iwfZIndex(id, z){ |
542 |
var el = iwfGetById(id); |
var el = iwfGetById(id); |
543 |
|
if (!el) return 0; |
544 |
|
|
545 |
if (iwfExists(el)){ |
if (iwfExists(el)){ |
546 |
if (iwfExists(z)){ |
if (iwfExists(z)){ |
547 |
el.style.zIndex = z; |
el.style.zIndex = z; |
548 |
} |
} |
549 |
return parseInt(el.style.zIndex); |
return iwfToInt(el.style.zIndex, true); |
550 |
} |
} |
551 |
return 0; |
return 0; |
552 |
} |
} |
615 |
var elX = iwfX1(el); |
var elX = iwfX1(el); |
616 |
var elY = iwfY1(el); |
var elY = iwfY1(el); |
617 |
|
|
618 |
// hack for floating point anomolies -- stops animation when element is "close enough" |
//! hack for floating point anomolies -- stops animation when element is "close enough" |
619 |
var epsilon = 0.001; |
var epsilon = 0.001; |
620 |
|
|
621 |
var xDone = false; |
var xDone = false; |
641 |
} |
} |
642 |
|
|
643 |
if (ticksLeft <= 0 || (xDone && yDone)){ |
if (ticksLeft <= 0 || (xDone && yDone)){ |
644 |
// time is up. / motion is done |
//! time is up / motion is "close enough" |
645 |
//iwfLog("_iwfMoveTo time is up / motion is done."); |
//iwfLog("_iwfMoveTo time is up / motion is done."); |
646 |
iwfX1(el, xDest); |
iwfX1(el, xDest); |
647 |
iwfY1(el, yDest); |
iwfY1(el, yDest); |
887 |
// Begin: Size |
// Begin: Size |
888 |
// ----------------------------------- |
// ----------------------------------- |
889 |
|
|
890 |
|
function iwfClientHeight(){ |
891 |
|
var vHeight = 0; |
892 |
|
if(document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.clientHeight) { |
893 |
|
vHeight = document.documentElement.clientHeight; |
894 |
|
} else if(document.body && document.body.clientHeight) { |
895 |
|
vHeight = document.body.clientHeight; |
896 |
|
} else if(iwfExists(window.innerWidth,window.innerHeight,document.width)) { |
897 |
|
vHeight = window.innerHeight; |
898 |
|
if(document.width>window.innerWidth) { |
899 |
|
vHeight -= 16; |
900 |
|
} |
901 |
|
} |
902 |
|
return vHeight; |
903 |
|
} |
904 |
|
|
905 |
|
function iwfClientWidth(){ |
906 |
|
var vWidth = 0; |
907 |
|
if(document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.clientWidth) { |
908 |
|
vWidth = document.documentElement.clientWidth; |
909 |
|
} else if(document.body && document.body.clientWidth) { |
910 |
|
vWidth = document.body.clientWidth; |
911 |
|
} else if(iwfExists(window.innerWidth,window.innerHeight,document.height)) { |
912 |
|
vWidth = window.innerWidth; |
913 |
|
if(document.height>window.innerHeight) { |
914 |
|
vWidth -= 16; |
915 |
|
} |
916 |
|
} |
917 |
|
return vWidth; |
918 |
|
} |
919 |
|
|
920 |
function iwfWidth(id, neww){ |
function iwfWidth(id, neww){ |
921 |
|
|
922 |
|
|
950 |
|
|
951 |
|
|
952 |
|
|
|
// var el = iwfGetById(id); |
|
|
// var w = 0; |
|
|
// if (iwfExists(el)){ |
|
|
// if(iwfExists(el.style, el.offsetWidth) && iwfIsString(el.style.width)) { |
|
|
// if(neww) iwfDetermineWidth(el, neww); |
|
|
// w = el.offsetWidth; |
|
|
// } |
|
|
// else if(iwfExists(el.style) && iwfExists(el.style.pixelWidth)) { |
|
|
// if(neww) el.style.pixelWidth = neww; |
|
|
// w = el.style.pixelWidth; |
|
|
// } |
|
|
// else if(iwfExists(el.clip) && iwfExists(el.clip.right)) { |
|
|
// if(neww) e.clip.right = neww; |
|
|
// w = el.clip.right; |
|
|
// } |
|
|
// } |
|
|
// return w; |
|
953 |
} |
} |
954 |
|
|
955 |
function iwfHeight(id, newh){ |
function iwfHeight(id, newh){ |
982 |
if (iwfExists(el)) { |
if (iwfExists(el)) { |
983 |
var y1 = iwfY(el); |
var y1 = iwfY(el); |
984 |
if (iwfExists(y2)){ |
if (iwfExists(y2)){ |
985 |
var h = iwfHeight(el); |
iwfHeight(el, y2 - y1); |
|
iwfHeight(el, y1 + h); |
|
986 |
} |
} |
987 |
return y1 + iwfHeight(el); |
return y1 + iwfHeight(el); |
988 |
} |
} |
992 |
function iwfX2(id, x2){ |
function iwfX2(id, x2){ |
993 |
var el = iwfGetById(id); |
var el = iwfGetById(id); |
994 |
if (iwfExists(el)) { |
if (iwfExists(el)) { |
995 |
var x1 = iwfX(id); |
var x1 = iwfX(el); |
996 |
if (iwfExists(x2)){ |
if (iwfExists(x2)){ |
997 |
var w = iwfWidth(id); |
iwfWidth(el, x2 - x1); |
|
iwfWidth(id, x1 + h); |
|
998 |
} |
} |
999 |
return x1 + iwfWidth(el); |
return x1 + iwfWidth(el); |
1000 |
} |
} |
1014 |
|
|
1015 |
} else if(iwfExists(el.currentStyle,document.compatMode)){ |
} else if(iwfExists(el.currentStyle,document.compatMode)){ |
1016 |
if(document.compatMode=='CSS1Compat'){ |
if(document.compatMode=='CSS1Compat'){ |
1017 |
padl = parseInt(el.currentStyle.paddingLeft); |
padl = iwfToInt(el.currentStyle.paddingLeft, true); |
1018 |
padr = parseInt(el.currentStyle.paddingRight); |
padr = iwfToInt(el.currentStyle.paddingRight, true); |
1019 |
bdrl = parseInt(el.currentStyle.borderLeftWidth); |
bdrl = iwfToInt(el.currentStyle.borderLeftWidth, true); |
1020 |
bdrr = parseInt(el.currentStyle.borderRightWidth); |
bdrr = iwfToInt(el.currentStyle.borderRightWidth, true); |
1021 |
} |
} |
1022 |
} else if(iwfExists(el.offsetWidth,el.style.width)){ |
} else if(iwfExists(el.offsetWidth,el.style.width)){ |
1023 |
el.style.width = neww + 'px'; |
el.style.width = neww + 'px'; |
1043 |
badb = iwfDetermineStyle(el,'border-bottom-height'); |
badb = iwfDetermineStyle(el,'border-bottom-height'); |
1044 |
} else if(iwfExists(el.currentStyle,document.compatMode)){ |
} else if(iwfExists(el.currentStyle,document.compatMode)){ |
1045 |
if(document.compatMode=='CSS1Compat'){ |
if(document.compatMode=='CSS1Compat'){ |
1046 |
padt = parseInt(el.currentStyle.paddingTop); |
padt = iwfToInt(el.currentStyle.paddingTop, true); |
1047 |
padb = parseInt(el.currentStyle.paddingBottom); |
padb = iwfToInt(el.currentStyle.paddingBottom, true); |
1048 |
bdrt = parseInt(el.currentStyle.borderTopHeight); |
bdrt = iwfToInt(el.currentStyle.borderTopHeight, true); |
1049 |
bdrb = parseInt(el.currentStyle.borderBottomHeight); |
bdrb = iwfToInt(el.currentStyle.borderBottomHeight, true); |
1050 |
} |
} |
1051 |
} else if(iwfExists(el.offsetHeight, el.style.height)){ |
} else if(iwfExists(el.offsetHeight, el.style.height)){ |
1052 |
el.style.height = newh + 'px'; |
el.style.height = newh + 'px'; |
1064 |
else el.style.height = h2 + 'px'; |
else el.style.height = h2 + 'px'; |
1065 |
} |
} |
1066 |
|
|
1067 |
|
function iwfOverlaps(id1, id2) { |
1068 |
|
var el1 = iwfGetById(id1); |
1069 |
|
var el2 = iwfGetById(id2); |
1070 |
|
|
1071 |
|
if (!el1 || !el2) return false; |
1072 |
|
|
1073 |
|
var x1a = iwfX(el1); |
1074 |
|
var x1b = iwfX2(el1); |
1075 |
|
var y1a = iwfY(el1); |
1076 |
|
var y1b = iwfY2(el1); |
1077 |
|
|
1078 |
|
var x2a = iwfX(el2); |
1079 |
|
var x2b = iwfX2(el2); |
1080 |
|
var y2a = iwfY(el2); |
1081 |
|
var y2b = iwfY2(el2); |
1082 |
|
|
1083 |
|
if(x1a > x2b || x1b < x2a || y1a > y2b || y1b < y2a) { |
1084 |
|
return false; |
1085 |
|
} else { |
1086 |
|
return true; |
1087 |
|
} |
1088 |
|
|
1089 |
|
} |
1090 |
|
|
1091 |
|
function iwfXCenter(id) { |
1092 |
|
var el = iwfGetById(id); |
1093 |
|
if (!el) return 0; |
1094 |
|
return iwfX(el) + iwfWidth(el) / 2; |
1095 |
|
} |
1096 |
|
|
1097 |
|
function iwfYCenter(id) { |
1098 |
|
var el = iwfGetById(id); |
1099 |
|
if (!el) return 0; |
1100 |
|
return iwfY(el) + iwfHeight(el) / 2; |
1101 |
|
} |
1102 |
|
|
1103 |
// ----------------------------------- |
// ----------------------------------- |
1104 |
// End: Size |
// End: Size |
1108 |
// Begin: Event |
// Begin: Event |
1109 |
// ----------------------------------- |
// ----------------------------------- |
1110 |
|
|
1111 |
function iwfAddEvent(id,eventName,callback) { |
function iwfAddEvent(id, eventName,callback) { |
1112 |
var el = iwfGetById(id); |
var el = iwfGetById(id); |
1113 |
if (!el) return; |
if (!el) return; |
1114 |
if (el.attachEvent) { |
|
1115 |
|
var txt = callback; |
1116 |
|
if (iwfIsString(callback)){ |
1117 |
|
callback = function() { eval(txt);}; |
1118 |
|
} |
1119 |
|
|
1120 |
|
if (el.addEventListener) { |
1121 |
|
el.addEventListener(eventName.substr(2), callback, false); |
1122 |
|
} else if (el.attachEvent) { |
1123 |
|
//iwfLog('attaching event ' + eventName + ' to element ' + el.id + ' with the callback:\n' + callback, true); |
1124 |
el.attachEvent(eventName, callback); |
el.attachEvent(eventName, callback); |
1125 |
} else { |
} else { |
1126 |
el[eventName] = callback; |
iwfLog("Couldn't add event " + eventName + " to element " + el.id + " because neither addEventListener nor attachEvent are implemented.", true); |
1127 |
} |
} |
1128 |
} |
} |
1129 |
|
|
1130 |
function iwfRemoveEvent(id, eventName, callback){ |
function iwfRemoveEvent(id, eventName, callback){ |
1131 |
var el = iwfGetById(id); |
var el = iwfGetById(id); |
1132 |
if (!el) return; |
if (!el) return; |
1133 |
if (el.detachEvent) el.detachEvent(eventName, callback); |
if (el.removeEventListener) { |
1134 |
else eval('el.' + eventName + ' = null;'); |
el.removeEventListener(eventName.substr(2), callback, false); |
1135 |
|
} else if (el.detachEvent) { |
1136 |
|
el.detachEvent(eventName, callback); |
1137 |
|
} else { |
1138 |
|
iwfLog("Couldn't remove event " + eventName + " from element " + el.id + " because neither removeEventListener nor detachEvent are implemented.", true); |
1139 |
|
} |
1140 |
|
} |
1141 |
|
|
1142 |
|
function iwfCallAttribute(id, eventName, evt){ |
1143 |
|
var el = iwfGetById(id); |
1144 |
|
if (!el) return false; |
1145 |
|
|
1146 |
|
var val = iwfAttribute(el, eventName); |
1147 |
|
//iwfLog("calling attribute " + eventName + "=" + val, true); |
1148 |
|
if (val){ |
1149 |
|
eval(val); |
1150 |
|
} |
1151 |
|
|
1152 |
|
return; |
1153 |
|
|
1154 |
|
|
1155 |
|
|
1156 |
|
|
1157 |
|
if (el.fireEvent){ |
1158 |
|
iwfLog("firing event " + eventName + " on el " + el.id); |
1159 |
|
el.fireEvent(eventName, evt); |
1160 |
|
} else if (el.dispatchEvent){ |
1161 |
|
// chop off the "on" at the beginning... |
1162 |
|
// eventName = eventName.substr(2); |
1163 |
|
// iwfLog(eventName, true); |
1164 |
|
var newEvent = null; |
1165 |
|
if (document.createEvent){ |
1166 |
|
newEvent = document.createEvent("Events"); |
1167 |
|
} else { |
1168 |
|
newEvent = document.createEventObject(); |
1169 |
|
} |
1170 |
|
newEvent.initEvent(eventName, true, true); //, document.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null); |
1171 |
|
iwfLog("dispatching event " + eventName + " on el " + el.id); |
1172 |
|
if (!el.dispatchEvent(newEvent)){ |
1173 |
|
iwfLog("Could not el.dispatchEvent failed!", true); |
1174 |
|
} |
1175 |
|
} else { |
1176 |
|
iwfLog("Could not el.fireEvent or el.dispatchEvent!", true); |
1177 |
|
} |
1178 |
} |
} |
1179 |
|
|
1180 |
function iwfEvent(ev) { |
function iwfEvent(ev) { |
1190 |
if(evt.target) this.target = evt.target; |
if(evt.target) this.target = evt.target; |
1191 |
else if(evt.srcElement) this.target = evt.srcElement; |
else if(evt.srcElement) this.target = evt.srcElement; |
1192 |
|
|
1193 |
|
this.X = iwfX(evt.target); |
1194 |
|
this.Y = iwfY(evt.target); |
1195 |
|
|
1196 |
if(iwfExists(evt.clientX,evt.clientY)) { |
if(iwfExists(evt.clientX,evt.clientY)) { |
1197 |
this.X = evt.clientX + iwfXScroll(); |
this.X = evt.clientX + iwfXScroll(); |
1198 |
this.Y = evt.clientY + iwfYScroll(); |
this.Y = evt.clientY + iwfYScroll(); |
1275 |
// Begin: Drag-N-Drop |
// Begin: Drag-N-Drop |
1276 |
// ----------------------------------- |
// ----------------------------------- |
1277 |
|
|
1278 |
var iwfDragger = {el:null, inUse:false}; |
var iwfDragger = {el:null, curTarget:null, targets:new Array()}; |
1279 |
var iwfHiZ = 2; |
var iwfHiZ = 2; |
1280 |
|
|
1281 |
function iwfEnableDrag(id, startCallback, dragCallback, endCallback) { |
var iwfResizer = {elSrc:null, elTgt:null}; |
1282 |
|
|
1283 |
|
function iwfResize(resizeId, targetId){ |
1284 |
|
var resizer = iwfGetById(resizeId); |
1285 |
|
if (!resizer) return; |
1286 |
|
|
1287 |
|
var target = iwfGetById(targetId); |
1288 |
|
if (!target) return; |
1289 |
|
|
1290 |
|
iwfResizer.elSrc = resizer; |
1291 |
|
iwfResizer.elTgt = target; |
1292 |
|
|
1293 |
|
|
1294 |
|
// set the drag start / move / stop |
1295 |
|
iwfAttribute(resizer, 'iwfdragbegin', 'iwfResizeStart()'); |
1296 |
|
iwfAttribute(resizer, 'iwfdragmove', 'iwfResizeMove()'); |
1297 |
|
iwfAttribute(resizer, 'iwfdragend', 'iwfResizeEnd()'); |
1298 |
|
|
1299 |
|
iwfDrag(resizer); |
1300 |
|
|
1301 |
|
} |
1302 |
|
|
1303 |
|
function iwfResizeStart(){ |
1304 |
|
|
1305 |
|
} |
1306 |
|
|
1307 |
|
function iwfResizeMove(resizeId, targetId){ |
1308 |
|
// elSrc should have already been moved to its new location. |
1309 |
|
// make elTgt fit to it. |
1310 |
|
var tgtX = iwfX(iwfResizer.elTgt); |
1311 |
|
var tgtY = iwfY(iwfResizer.elTgt); |
1312 |
|
|
1313 |
|
var srcX2 = iwfX2(iwfResizer.elSrc); |
1314 |
|
if (srcX2 - 100 < tgtX){ |
1315 |
|
srcX2 = tgtX + 100; |
1316 |
|
} |
1317 |
|
|
1318 |
|
var srcY2 = iwfY2(iwfResizer.elSrc); |
1319 |
|
if (srcY2 - 50 < tgtY){ |
1320 |
|
srcY2 = tgtY + 50; |
1321 |
|
} |
1322 |
|
//iwfLog("srcX2:" + srcX2 + "\tsrcY2:" + srcY2); |
1323 |
|
// iwfX1(iwfResizer.elSrc, srcX2 - iwfWidth(iwfResizer.elSrc)); |
1324 |
|
// iwfY1(iwfResizer.elSrc, srcY2 - iwfHeight(iwfResizer.elSrc)); |
1325 |
|
|
1326 |
|
// iwfX2(iwfResizer.elTgt, srcX2); |
1327 |
|
// iwfY2(iwfResizer.elTgt, srcY2); |
1328 |
|
|
1329 |
|
// if container exists, make it occupy all but titlebar space... |
1330 |
|
if (iwfResizer.elTgt){ |
1331 |
|
var elContainer = iwfGetById(iwfResizer.elTgt.id + 'Container'); |
1332 |
|
if (elContainer){ |
1333 |
|
iwfHeight(elContainer, iwfHeight(iwfResizer.elTgt) - iwfHeight(iwfResizer.elTgt.id + 'TitleBar') - 2); |
1334 |
|
} |
1335 |
|
} |
1336 |
|
|
1337 |
|
|
1338 |
|
} |
1339 |
|
|
1340 |
|
function iwfResizeEnd(){ |
1341 |
|
|
1342 |
|
iwfLog(iwfElementToString(iwfResizer.elSrc), true); |
1343 |
|
|
1344 |
|
iwfResizer.elSrc = null; |
1345 |
|
iwfResizer.elTgt = null; |
1346 |
|
} |
1347 |
|
|
1348 |
|
function iwfDrag(id) { |
1349 |
|
|
1350 |
var el = iwfGetById(id); |
var el = iwfGetById(id); |
1351 |
if (!el) return; |
if (!el) return; |
1352 |
el.iwfDraggable = true; |
|
1353 |
el.iwfOnDragStart = startCallback; |
//iwfLog(iwfElementToString(el), true); |
1354 |
el.iwfOnDrag = dragCallback; |
if (!iwfDragger.el) { |
1355 |
el.iwfOnDragEnd = endCallback; |
el.iwfDragTarget = true; |
1356 |
iwfAddEvent(el, 'onmousedown', iwfDragMouseDown); |
iwfAddEvent(el, 'onmousedown', iwfDragMouseDown); |
1357 |
if (!iwfDragger.inUse) { |
// BROCK: sync issues here in IE when there is no container. |
1358 |
iwfDragger.inUse = true; |
// HACK: force a container always? hmmmm... |
1359 |
iwfAddEvent(document, 'onmousemove', iwfDragMouseMove); |
// iwfFireEvent(el, 'onmousedown'); |
1360 |
} |
} |
1361 |
} |
} |
1362 |
function iwfDragMouseDown(ev){ |
function iwfDragMouseDown(ev){ |
1363 |
|
|
1364 |
var evt = new iwfEvent(ev); |
var evt = new iwfEvent(ev); |
1365 |
var el = evt.target; |
var el = evt.target; |
1366 |
while(el && !el.iwfDraggable) { |
while(el && !el.iwfDragTarget) { |
1367 |
el = iwfParent(el); |
el = iwfGetParent(el); |
1368 |
} |
} |
1369 |
if (el) { |
if (el) { |
1370 |
|
|
1371 |
|
iwfDragger.el = el; |
1372 |
|
|
1373 |
|
iwfAddEvent(document, 'onmousemove', iwfDragMouseMove); |
1374 |
|
iwfAddEvent(document, 'onmouseup', iwfDragMouseUp); |
1375 |
|
|
1376 |
|
|
1377 |
|
|
1378 |
if (ev && ev.preventDefault) ev.preventDefault(); |
if (ev && ev.preventDefault) ev.preventDefault(); |
1379 |
else if (window.event) window.event.returnValue = false; |
else if (window.event) window.event.returnValue = false; |
1380 |
el.iwfDragX = evt.X; |
else if (iwfExists(ev.cancelBubble)) ev.cancelBubble = true; |
1381 |
el.iwfDragY = evt.Y; |
|
1382 |
|
el.iwfDragOrigX = iwfX(el); |
1383 |
|
el.iwfDragOrigY = iwfY(el); |
1384 |
|
el.iwfDragOffsetX = evt.X - iwfX(el); |
1385 |
|
el.iwfDragOffsetY = evt.Y - iwfY(el); |
1386 |
|
|
1387 |
|
|
1388 |
iwfZIndex(el, iwfHiZ++); |
iwfZIndex(el, iwfHiZ++); |
1389 |
|
|
1390 |
iwfDragger.el = el; |
iwfCallAttribute(el, 'iwfdragbegin'); |
|
iwfAddEvent(document, 'onmouseup', iwfDragMouseUp, false); |
|
|
if (el.iwfOnDragStart) { |
|
|
el.iwfOnDragStart(el, evt.X, evt.Y); |
|
|
} |
|
1391 |
} |
} |
1392 |
} |
} |
1393 |
|
|
1394 |
function iwfDragMouseMove(ev){ |
function iwfDragMouseMove(ev){ |
1395 |
var evt = new iwfEvent(ev); |
var evt = new iwfEvent(ev); |
1396 |
|
|
1397 |
if (iwfDragger.el) { |
if (iwfDragger.el) { |
1398 |
if (ev && ev.preventDefault) ev.preventDefault(); |
if (evt && evt.preventDefault) evt.preventDefault(); |
1399 |
else if (window.event) window.event.returnValue = false; |
else if (window.event) window.event.returnValue = false; |
1400 |
|
else if (iwfExists(ev.cancelBubble)) ev.cancelBubble = true; |
1401 |
|
|
1402 |
var el = iwfDragger.el; |
var el = iwfDragger.el; |
|
var dx = evt.X - el.iwfDragX; |
|
|
var dy = evt.Y - el.iwfDragY; |
|
|
el.iwfDragX = evt.X; |
|
|
el.iwfDragY = evt.Y; |
|
1403 |
|
|
1404 |
if (el.iwfOnDrag) { |
|
1405 |
el.iwfOnDrag(el, dx, dy); |
var newX = evt.X - el.iwfDragOffsetX; |
1406 |
} else { |
if (newX > iwfClientWidth() - iwfWidth(el)){ |
1407 |
iwfX(el, iwfX(el) + dx); |
newX = iwfClientWidth() - iwfWidth(el); |
1408 |
iwfY(el, iwfY(el) + dy); |
} |
1409 |
|
if (newX < 0) { |
1410 |
|
newX = 0; |
1411 |
|
} |
1412 |
|
|
1413 |
|
var newY = evt.Y - el.iwfDragOffsetY; |
1414 |
|
if (newY > iwfClientHeight() - iwfHeight(el)){ |
1415 |
|
newY = iwfClientHeight() - iwfHeight(el); |
1416 |
|
} |
1417 |
|
if (newY < 0) { |
1418 |
|
newY = 0; |
1419 |
} |
} |
1420 |
|
|
1421 |
|
|
1422 |
|
iwfX(el, newX); |
1423 |
|
iwfY(el, newY); |
1424 |
|
|
1425 |
|
// and hilite any drop targets... |
1426 |
|
for(var i=0;i<iwfDragger.targets.length;i++){ |
1427 |
|
if (!iwfDragger.curTarget && iwfOverlaps(iwfDragger.targets[i], iwfDragger.el)) { |
1428 |
|
iwfDragOver(iwfDragger.targets[i]); |
1429 |
|
break; |
1430 |
|
} |
1431 |
|
} |
1432 |
|
|
1433 |
|
iwfCallAttribute(el, 'iwfdragmove'); |
1434 |
|
|
1435 |
} |
} |
1436 |
} |
} |
1437 |
|
|
1438 |
function iwfDragMouseUp(ev) { |
function iwfDragMouseUp(ev) { |
1439 |
if (iwfDragger.el) { |
if (iwfDragger.el) { |
1440 |
if (ev && ev.preventDefault) ev.preventDefault(); |
if (ev && ev.preventDefault) ev.preventDefault(); |
1441 |
else if (window.event) window.event.returnValue = false; |
else if (window.event) window.event.returnValue = false; |
1442 |
iwfRemoveEvent(document, 'onmouseup', iwfDragMouseUp, false); |
else if (iwfExists(ev.cancelBubble)) ev.cancelBubble = true; |
1443 |
if (iwfDragger.el.iwfOnDragEnd) { |
|
1444 |
var evt = new iwfEvent(ev); |
var evt = new iwfEvent(ev); |
1445 |
iwfDragger.el.iwfOnDragEnd(iwfDragger.el, evt.X, evt.Y); |
iwfRemoveEvent(document, 'onmousedown', iwfDragMouseDown); |
1446 |
} |
iwfRemoveEvent(document, 'onmousemove', iwfDragMouseMove); |
1447 |
|
iwfRemoveEvent(document, 'onmouseup', iwfDragMouseUp); |
1448 |
|
|
1449 |
|
iwfCallAttribute(iwfDragger.el, 'iwfdragend'); |
1450 |
|
|
1451 |
|
iwfDragDrop(); |
1452 |
|
iwfDragger.el.iwfDragTarget = false; |
1453 |
iwfDragger.el = null; |
iwfDragger.el = null; |
1454 |
} |
} |
1455 |
} |
} |
1456 |
|
|
1457 |
|
function iwfDragOver(idTarget) { |
1458 |
|
var tgt = iwfGetById(idTarget); |
1459 |
|
if (!tgt) return; |
1460 |
|
|
1461 |
|
if (!iwfDragger.el) return; |
1462 |
|
|
1463 |
|
if (iwfDragger.curTarget) return; |
1464 |
|
|
1465 |
|
|
1466 |
|
iwfDragger.curTarget = tgt.id; |
1467 |
|
|
1468 |
|
|
1469 |
|
tgt.iwfBackgroundColor = tgt.style.backgroundColor; |
1470 |
|
tgt.style.backgroundColor = '#efefef'; |
1471 |
|
|
1472 |
|
iwfDragger.el.iwfBorder = iwfDragger.el.style.border; |
1473 |
|
iwfDragger.el.style.border = '3px solid blue'; |
1474 |
|
|
1475 |
|
} |
1476 |
|
|
1477 |
|
function iwfDragOut() { |
1478 |
|
|
1479 |
|
var tgt = iwfGetById(iwfDragger.curTarget); |
1480 |
|
if (!tgt) return; |
1481 |
|
|
1482 |
|
iwfDragger.curTarget = null; |
1483 |
|
|
1484 |
|
|
1485 |
|
if (!iwfDragger.el) return; |
1486 |
|
|
1487 |
|
|
1488 |
|
|
1489 |
|
iwfDragger.el.style.border = iwfDragger.el.iwfBorder; |
1490 |
|
tgt.style.backgroundColor = tgt.iwfBackgroundColor; |
1491 |
|
|
1492 |
|
|
1493 |
|
} |
1494 |
|
|
1495 |
|
function iwfDragDrop() { |
1496 |
|
|
1497 |
|
var tgt = iwfGetById(iwfDragger.curTarget); |
1498 |
|
|
1499 |
|
iwfDragOut(iwfDragger.curTarget); |
1500 |
|
|
1501 |
|
|
1502 |
|
|
1503 |
|
if (!iwfDragger.el) return; |
1504 |
|
|
1505 |
|
var src = iwfGetById(iwfDragger.el); |
1506 |
|
|
1507 |
|
if (src) { |
1508 |
|
if (!tgt) { |
1509 |
|
if (iwfDragger.targets.length > 0) { |
1510 |
|
// targets exist, but none were dropped on. return to original x/y |
1511 |
|
iwfMoveTo(tgt, iwfAttribute(iwfDragger.el, 'iwfDragOrigX'), iwfAttribute(iwfDragger.el, 'iwfDragOrigY'), 30); |
1512 |
|
} |
1513 |
|
} else { |
1514 |
|
// target found. dock to it. |
1515 |
|
iwfDockTo(tgt, src, "tl", "tl", 30); |
1516 |
|
} |
1517 |
|
} |
1518 |
|
} |
1519 |
|
|
1520 |
|
function iwfMapDropTargets(node) { |
1521 |
|
|
1522 |
|
if (!node || !node.childNodes) { |
1523 |
|
iwfLog('No childNodes found for ' + iwfElementToString(node), true); |
1524 |
|
return; |
1525 |
|
} |
1526 |
|
|
1527 |
|
for(var i=0; i<node.childNodes.length;i++){ |
1528 |
|
iwfLog('child=' + iwfElementToString(node.childNodes[i]), true); |
1529 |
|
if (iwfAttribute(node.childNodes[i], 'iwfDropTarget') == 'true'){ |
1530 |
|
iwfDragger.targets.push(iwfAttribute(node.childNodes[i], 'id')); |
1531 |
|
} |
1532 |
|
iwfMapDropTargets(node.childNodes[i]); |
1533 |
|
} |
1534 |
|
|
1535 |
|
|
1536 |
|
} |
1537 |
|
|
1538 |
|
function iwfMapDraggables(node){ |
1539 |
|
if (!node) { |
1540 |
|
iwfLog("when mapping windows, node not found"); |
1541 |
|
return; |
1542 |
|
} else if (!node.childNodes){ |
1543 |
|
iwfLog("No childNodes found for " + iwfElementToString(node.childNodes[i])); |
1544 |
|
return; |
1545 |
|
} |
1546 |
|
|
1547 |
|
for(var i=0; i<node.childNodes.length;i++){ |
1548 |
|
if (iwfAttribute(node.childNodes[i], 'iwfDraggable') == 'true'){ |
1549 |
|
iwfLog("Found draggable to map: " + iwfElementToString(node.childNodes[i])); |
1550 |
|
iwfMakeDraggable(node.childNodes[i]); |
1551 |
|
} |
1552 |
|
} |
1553 |
|
} |
1554 |
|
|
1555 |
|
function iwfMakeDraggable(id){ |
1556 |
|
var el = iwfGetById(id); |
1557 |
|
if (!el) return; |
1558 |
|
|
1559 |
|
if (iwfAttribute(el, 'iwfDraggableMapped') == 'true'){ |
1560 |
|
// element has already been mapped for dragging. escape. |
1561 |
|
return; |
1562 |
|
} |
1563 |
|
|
1564 |
|
// mark it as being mapped as a drag target |
1565 |
|
iwfAttribute(el, 'iwfDraggableMapped', 'true'); |
1566 |
|
iwfAttribute(el, 'iwfDragTarget', 'true'); |
1567 |
|
|
1568 |
|
// make sure window is absolutely positioned and overflow is okay |
1569 |
|
el.style.position = 'absolute'; |
1570 |
|
el.style.overflow = 'hidden'; |
1571 |
|
el.style.cursor = 'move'; |
1572 |
|
|
1573 |
|
iwfAddEvent(el, 'onmousedown', 'iwfDrag("' + el.id + '");'); |
1574 |
|
|
1575 |
|
} |
1576 |
|
|
1577 |
|
function iwfMapWindows(node){ |
1578 |
|
if (!node) { |
1579 |
|
iwfLog("when mapping windows, node not found"); |
1580 |
|
return; |
1581 |
|
} else if (!node.childNodes){ |
1582 |
|
iwfLog("No childNodes found for " + iwfElementToString(node.childNodes[i])); |
1583 |
|
return; |
1584 |
|
} |
1585 |
|
|
1586 |
|
for(var i=0; i<node.childNodes.length;i++){ |
1587 |
|
if (iwfAttribute(node.childNodes[i], 'iwfWindow') == 'true'){ |
1588 |
|
iwfLog("Found window to map: " + iwfElementToString(node.childNodes[i])); |
1589 |
|
iwfGetOrCreateWindow(node.childNodes[i]); |
1590 |
|
} |
1591 |
|
} |
1592 |
|
} |
1593 |
|
|
1594 |
|
function iwfGetOrCreateWindow(id){ |
1595 |
|
var el = iwfGetById(id); |
1596 |
|
if (!el) return null; |
1597 |
|
|
1598 |
|
if (iwfAttribute(el, 'iwfWindowCreated') == 'true'){ |
1599 |
|
// window has already been created. escape. |
1600 |
|
return; |
1601 |
|
} |
1602 |
|
|
1603 |
|
// make sure window is absolutely positioned and overflow is okay |
1604 |
|
el.style.position = 'absolute'; |
1605 |
|
el.style.overflow = 'hidden'; |
1606 |
|
|
1607 |
|
// create a title bar |
1608 |
|
var elTitle = iwfGetOrCreateById(el.id + 'TitleBar', 'div'); |
1609 |
|
if (!elTitle) return; |
1610 |
|
|
1611 |
|
elTitle.style.backgroundColor = 'navy'; |
1612 |
|
elTitle.style.color = 'white'; |
1613 |
|
elTitle.style.cursor = 'move'; |
1614 |
|
elTitle.innerHTML = " " + iwfAttribute(el, 'iwfWindowTitle'); |
1615 |
|
|
1616 |
|
// dragging title bar should move the window |
1617 |
|
iwfAddEvent(elTitle, 'onmousedown', 'iwfDrag("' + el.id + '");'); |
1618 |
|
|
1619 |
|
|
1620 |
|
// create the container which will contain all other html specified in the div |
1621 |
|
var elContainer = iwfGetOrCreateById(el.id + 'Container', 'div'); |
1622 |
|
if (!elContainer) return; |
1623 |
|
|
1624 |
|
elContainer.style.width='100%'; |
1625 |
|
elContainer.style.height='90%'; |
1626 |
|
elContainer.style.overflow='scroll'; |
1627 |
|
|
1628 |
|
// transfer window contents into the new container |
1629 |
|
elContainer.innerHTML = el.innerHTML; |
1630 |
|
// clear the window |
1631 |
|
el.innerHTML = ''; |
1632 |
|
|
1633 |
|
|
1634 |
|
// create the resizer which will handle resizing |
1635 |
|
var elResizer = iwfGetOrCreateById(el.id + 'Resizer', 'div'); |
1636 |
|
if (!elResizer) return; |
1637 |
|
|
1638 |
|
|
1639 |
|
elResizer.innerHTML = "<table border='0' cellspacing='0' cellpadding='0' width='100%' height='3px' ><tr ><td width='95%' style='cursor:s-resize'> </td><td style='cursor:se-resize'> </td></tr></table>"; |
1640 |
|
// elResizer.innerHTML = '<span style="width:90%;background-color:red;color:white;cursor:s-resize;padding-right:30px;">blah</span><span style="width:20px;color:black;background-color:gray;cursor:se-resize">*</span>'; |
1641 |
|
|
1642 |
|
|
1643 |
|
|
1644 |
|
// set style properties on resizer |
1645 |
|
// iwfX(elResizer, iwfX(el) + 20); |
1646 |
|
// iwfY(elResizer, iwfY(el) + 20); |
1647 |
|
// iwfZIndex(elResizer, 9999999); |
1648 |
|
// iwfHeight(elResizer, 15); |
1649 |
|
// iwfWidth(elResizer, 15); |
1650 |
|
// elTitle.style.cursor = 'move'; |
1651 |
|
// elResizer.style.position = 'absolute'; |
1652 |
|
// elResizer.style.borderStyle = 'solid'; |
1653 |
|
// elResizer.style.borderColor = 'black'; |
1654 |
|
// elResizer.style.borderWidth = '1px'; |
1655 |
|
// elResizer.backgroundColor = 'white'; |
1656 |
|
// elResizer.style.overflow = 'hidden'; |
1657 |
|
// elResizer.style.textAlign = 'center'; |
1658 |
|
// elResizer.style.cursor = 'se-resize'; |
1659 |
|
// elResizer.innerHTML = '-'; |
1660 |
|
|
1661 |
|
// dragging the resizer should resize the window |
1662 |
|
iwfAddEvent(elResizer, 'onmousedown', 'iwfResize("' + elResizer.id + '","' + el.id + '");'); |
1663 |
|
|
1664 |
|
|
1665 |
|
// add title bar to window |
1666 |
|
iwfAddChild(el, elTitle, true); |
1667 |
|
|
1668 |
|
// add container to window |
1669 |
|
iwfAddChild(el, elContainer); |
1670 |
|
|
1671 |
|
// add resizer to window |
1672 |
|
iwfAddChild(el, elResizer); |
1673 |
|
|
1674 |
|
// iwfX(elResizer, iwfX2(el) - 15); |
1675 |
|
// iwfY(elResizer, iwfY2(el) - 15); |
1676 |
|
|
1677 |
|
iwfLog(iwfElementToString(elResizer),true); |
1678 |
|
|
1679 |
|
// align resizer to bottom right of window |
1680 |
|
iwfResize(elResizer, el); |
1681 |
|
|
1682 |
|
|
1683 |
|
|
1684 |
|
// add the flag saying we've created the window |
1685 |
|
iwfAttribute(el, 'iwfWindowCreated', 'true'); |
1686 |
|
|
1687 |
|
|
1688 |
|
} |
1689 |
|
|
1690 |
// ----------------------------------- |
// ----------------------------------- |
1691 |
// End: Drag-N-Drop |
// End: Drag-N-Drop |
1692 |
// ----------------------------------- |
// ----------------------------------- |
1693 |
|
|
|
// ----------------------------------- |
|
|
// Begin: Initializers |
|
|
// ----------------------------------- |
|
|
iwfMapRollovers(); |
|
|
// ----------------------------------- |
|
|
// End: Initializers |
|
|
// ----------------------------------- |
|