Added DomUtils

Signed-off-by: Nagao Takeyuki <nagaotakeyuki@gmail.com>

diff --git a/src/js/include/jdisp/DomUtils.jsh b/src/js/include/jdisp/DomUtils.jsh
new file mode 100644 (file)
index 0000000..825d72f
--- /dev/null
+++ b/src/js/include/jdisp/DomUtils.jsh
@@ -0,0 +1,613 @@
+#ifndef _JDISP_DOMUTILS_JSH\r
+#define _JDISP_DOMUTILS_JSH\r
+\r
+#define DOMUTILS_BODY_PROPERTY(a) (document.body.a || document.documentElement.a)\r
+#define _STYLE_LENGTH(name) (this.parsePx(name) || 0)\r
+\r
+OOP_CLASS(DomUtils) = function() {};\r
+OOP_CLASS(DomUtils).useDOM2 = false;\r
+if (IS_OBJECT(document.implementation)) {\r
+  if (document.implementation.hasFeature('Events', '2.0')) {\r
+    OOP_CLASS(DomUtils).useDOM2 = true;\r
+  }\r
+}\r
+\r
+OOP_METHOD(DomUtils, getNode) = function (node)\r
+{\r
+  if (IS_OBJECT(node)) return node;\r
+  return document.getElementById(node);\r
+};\r
+\r
+OOP_METHOD(DomUtils, setHtml) = function (node, html)\r
+{\r
+  var n = this.getNode(node);\r
+  if (IS_NON_NULL_OBJECT(n)) {\r
+    n.innerHTML = html;\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, getEventObject) = function (ev)\r
+{\r
+  return (IS_NON_NULL_OBJECT(ev) ? ev : window.event);\r
+};\r
+\r
+OOP_METHOD(DomUtils, fixStaticPosition) = function (node)\r
+{\r
+  var n = this.getNode(node);\r
+  if (!IS_NON_NULL_OBJECT(n)) return;\r
+  var s = n.style;\r
+  if (!IS_NON_NULL_OBJECT(s)) return;\r
+  if (s.position === '') {\r
+    s.position = 'relative';\r
+    s.left = '0';\r
+    s.top = '0';\r
+  }\r
+};\r
+\r
+\r
+OOP_METHOD(DomUtils, parseEventObject) = function (ev)\r
+{\r
+  var ee = this.getEventObject(ev);\r
+  var src = this.getEventSource(ee);\r
+  var pos = this.getEventPagePosition(ee);\r
+  var off = this.getEventOffset(ee);\r
+  var ret = {event : ee, src : src, position: pos, offset: off};\r
+  return ret;\r
+};\r
+\r
+OOP_METHOD(DomUtils, getEventSource) = function (ev)\r
+{\r
+  var ee = this.getEventObject(ev);\r
+  return ((document.all) ? (ee.srcElement) : ee.target);\r
+};\r
+\r
+OOP_METHOD(DomUtils, getRelativePosition) = function (fromNode, toNode)\r
+{\r
+  var fn = this.getNode(fromNode);\r
+  var tn = this.getNode(toNode);\r
+  var pos = {x:0, y:0};\r
+\r
+  var n = tn;\r
+  var s, p;\r
+\r
+  while (!IS_NULL(n)) {\r
+    if (n === fn) return pos;\r
+    p = this.getElementPosition(n);\r
+    if (IS_NULL(p)) break;\r
+    pos.x += p.x;\r
+    pos.y += p.y;\r
+    s = n.style;\r
+    if (IS_NULL(s)) break;\r
+    pos.x += _STYLE_LENGTH(s.marginLeft) +\r
+             _STYLE_LENGTH(s.borderLeftWidth);\r
+    pos.y += _STYLE_LENGTH(s.marginTop) +\r
+             _STYLE_LENGTH(s.borderTopWidth);\r
+    n = n.parentNode;\r
+  }\r
+\r
+  return null;\r
+};\r
+\r
+OOP_METHOD(DomUtils, getEventOffset) = function (ev, fromNode)\r
+{\r
+  var fn = this.getNode(fromNode);\r
+  var ee = this.getEventObject(ev);\r
+  var src = this.getEventSource(ee);\r
+  var s = src.style;\r
+  var ret = null;\r
+  if (document.all) {\r
+    ret = { x : (ee.offsetX + _STYLE_LENGTH(s.borderLeftWidth)),\r
+            y : (ee.offsetY + _STYLE_LENGTH(s.borderTopWidth)) };\r
+    if (BROWSER_IS_OPERA()) {\r
+      ret.x += _STYLE_LENGTH(s.paddingLeft);\r
+      ret.y += _STYLE_LENGTH(s.paddingTop);\r
+    }\r
+  } else {\r
+    ret = { x : ee.layerX, y : ee.layerY };\r
+  }\r
+#if 0\r
+  var a = ['offsetX', 'offsetY', 'layerX', 'layerY', 'screenX', 'screenY', 'pageX', 'pageY', 'x', 'y', 'clientX', 'clientY'];\r
+  for (var i in a) {\r
+    ret['_' + a[i]] = ee[a[i]];\r
+  }\r
+#endif\r
+\r
+  if (IS_NON_NULL_OBJECT(fn)) {\r
+    var rel = this.getRelativePosition(fn, src);\r
+    if (IS_NON_NULL_OBJECT(rel)) {\r
+      ret.x += rel.x;\r
+      ret.y += rel.y;\r
+    }\r
+    ret.x -= _STYLE_LENGTH(s.borderLeftWidth);\r
+    ret.y -= _STYLE_LENGTH(s.borderTopWidth);\r
+  }\r
+\r
+  return ret;\r
+};\r
+\r
+OOP_METHOD(DomUtils, getEventPagePosition) = function (ev)\r
+{\r
+  var x, y;\r
+  var ee = this.getEventObject(ev);\r
+  if (IS_NUMBER(ee.pageX)) {\r
+    x = ee.pageX;\r
+    y = ee.pageY;\r
+  } else if (IS_NUMBER(ee.clientX)) {\r
+    var de = document.documentElement;\r
+    var b = document.body;\r
+    x = ee.clientX +\r
+        (de.scrollLeft || b.scrollLeft) -\r
+        (de.clientLeft || 0) ;\r
+    y = ee.clientY +\r
+        (de.scrollTop || b.scrollTop) -\r
+        (de.clientTop || 0) ;\r
+  } else {\r
+    return null;\r
+  }\r
+\r
+  return {x : x, y : y};\r
+};\r
+\r
+OOP_METHOD(DomUtils, getEventPagePosition2) = function (ev)\r
+{\r
+  var x = 0;\r
+  var y = 0;\r
+  var ee = this.getEventObject(ev);\r
+\r
+  if (ee.pageX || ee.pageY) {\r
+    x = ee.pageX;\r
+    y = ee.pageY;\r
+  } else if (ee.clientX || ee.clientY)  {\r
+    var b = document.body;\r
+    var de = document.documentElement;\r
+  x = ee.clientX + b.scrollLeft + de.scrollLeft;\r
+    y = ee.clientY + b.scrollTop + de.scrollTop;\r
+  }\r
+  return {x : x, y : y};\r
+};\r
+\r
+\r
+OOP_METHOD(DomUtils, parsePx) = function (s)\r
+{\r
+  if (IS_STRING(s)) {\r
+    if (s.match(/(-?\d\d*)px/)) {\r
+      return parseInt(RegExp.$1, 10);\r
+    } else if (s.match(/(-?[.0-9]*)pt/)) {\r
+      // FIXME: implement this\r
+      return Number(RegExp.$1);\r
+    } else {\r
+      return undefined;\r
+    }\r
+  } else {\r
+    return undefined;\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, getScrollPosition) = function ()\r
+{\r
+  var x = DOMUTILS_BODY_PROPERTY(scrollLeft);\r
+  var y = DOMUTILS_BODY_PROPERTY(scrollTop);\r
+  return {x:x, y:y};\r
+};\r
+\r
+OOP_METHOD(DomUtils, getElementPosition) = function (node)\r
+{\r
+  var n = this.getNode(node);\r
+  if (IS_NON_NULL_OBJECT(n)) {\r
+    var s = n.style;\r
+    if (IS_NON_NULL_OBJECT(s)) {\r
+      if (IS_NUMBER(s.posLeft)) {\r
+        return {x: s.posLeft, y: s.posTop};\r
+      } else {\r
+        var x = this.parsePx(s.left);\r
+        var y = this.parsePx(s.top);\r
+        return {x : x, y : y};\r
+      }\r
+    } else {\r
+      return null;\r
+    }\r
+  } else {\r
+    return null;\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, setElementPosition) = function (node, x, y)\r
+{\r
+  var n = this.getNode(node);\r
+  if (IS_NON_NULL_OBJECT(n)) {\r
+    var s = n.style;\r
+    if (IS_NON_NULL_OBJECT(s)) {\r
+      if (IS_NUMBER(s.posLeft)) {\r
+        s.posLeft = x;\r
+        s.posTop  = y;\r
+      } else {\r
+        s.left = x + "px";\r
+        s.top  = y + "px";\r
+      }\r
+    }\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, getPropertyValue) = function (node, name, defaultValue)\r
+{\r
+  var i, s;\r
+  var n = this.getNode(node);\r
+  if (!IS_NON_NULL_OBJECT(n)) { return undefined; }\r
+\r
+  s = n.currentStyle;\r
+  if (IS_NON_NULL_OBJECT(s)) {\r
+    name = jdisp.stringUtils.camelize(name);\r
+    return this.parsePx(s[name]) || defaultValue;\r
+  }\r
+\r
+  s = document.defaultView.getComputedStyle(n, null);\r
+  if (IS_NON_NULL_OBJECT(s)) {\r
+    return this.parsePx(s.getPropertyValue(name)) || defaultValue;\r
+  }\r
+\r
+  return undefined;\r
+};\r
+\r
+OOP_METHOD(DomUtils, getElementSize) = function (node)\r
+{\r
+  var s, w, h, ow, oh, mt, mb, ml, mr, bt, bb, bl, br, mw, mh, bw, bh;\r
+  var ret=null;\r
+  var n = this.getNode(node);\r
+  if (IS_NON_NULL_OBJECT(n)) {\r
+    w  = this.getPropertyValue(n, 'width', 0);\r
+    h  = this.getPropertyValue(n, 'height', 0);\r
+    ow = n.offsetWidth || 0;\r
+    oh = n.offsetHeight || 0;\r
+    mt = this.getPropertyValue(n, 'margin-top', 0);\r
+    mb = this.getPropertyValue(n, 'margin-bottom', 0);\r
+    ml = this.getPropertyValue(n, 'margin-left', 0);\r
+    mr = this.getPropertyValue(n, 'margin-right', 0);\r
+    bt = this.getPropertyValue(n, 'border-top-width', 0);\r
+    bb = this.getPropertyValue(n, 'border-bottom-width', 0);\r
+    bl = this.getPropertyValue(n, 'border-left-width', 0);\r
+    br = this.getPropertyValue(n, 'border-right-width', 0);\r
+    mw = ml + mr;\r
+    mh = mt + mb;\r
+    bw = bl + br;\r
+    bh = bt + bb;\r
+  }\r
+  ret = { width : w,\r
+          height : h,\r
+          offsetWidth: ow,\r
+          offsetHeight: oh,\r
+          outerWidth : (ow + mw),\r
+          outerHeight : (oh + mh),\r
+          marginTop: mt,\r
+          marginBottom: mb,\r
+          marginLeft: ml,\r
+          marginRight: mr,\r
+          marginWidth: mw,\r
+          marginHeight: mh,\r
+          borderWidth : bw,\r
+          borderHeight : bh,\r
+          borderTop: bt,\r
+          borderBottom: bb,\r
+          borderLeft: bl,\r
+          borderRight: br };\r
+  LOG_DEBUG(jdisp.global.dumpVar(ret));\r
+  return ret;\r
+};\r
+\r
+OOP_METHOD(DomUtils, getElementSize1) = function (node)\r
+{\r
+  var s, w, h, ow, oh, mt, mb, ml, mr, bt, bb, bl, br, mw, mh, bw, bh;\r
+  var ret=null;\r
+  var n = this.getNode(node);\r
+  if (IS_NON_NULL_OBJECT(n)) {\r
+    if (IS_NON_NULL_OBJECT(n.currentStyle)) {\r
+      // IE\r
+      s  = n.currentStyle;\r
+      w  = this.parsePx(s.width) || 0;\r
+      h  = this.parsePx(s.height) || 0;\r
+      ow = n.offsetWidth || 0;\r
+      oh = n.offsetHeight || 0;\r
+      mt = this.parsePx(s.marginTop) || 0;\r
+      mb = this.parsePx(s.marginBottom) || 0;\r
+      ml = this.parsePx(s.marginLeft) || 0;\r
+      mr = this.parsePx(s.marginRight) || 0;\r
+      bt = this.parsePx(s.borderTopWidth) || 0;\r
+      bb = this.parsePx(s.borderBottomWidth) || 0;\r
+      bl = this.parsePx(s.borderLeftWidth) || 0;\r
+      br = this.parsePx(s.borderRightWidth) || 0;\r
+      mw = ml + mr;\r
+      mh = mt + mb;\r
+      bw = bl + br;\r
+      bh = bt + bb;\r
+    } else if (IS_NON_NULL_OBJECT(document.defaultView.getComputedStyle(n, null))) {\r
+      s = document.defaultView.getComputedStyle(n, null);\r
+      w  = this.parsePx(s.getPropertyValue('width')) || 0;\r
+      h  = this.parsePx(s.getPropertyValue('height')) || 0;\r
+      ow  = n.offsetWidth || 0;\r
+      oh  = n.offsetHeight || 0;\r
+      mt = this.parsePx(s.getPropertyValue('margin-top')) || 0;\r
+      mb = this.parsePx(s.getPropertyValue('margin-bottom')) || 0;\r
+      ml = this.parsePx(s.getPropertyValue('margin-left')) || 0;\r
+      mr = this.parsePx(s.getPropertyValue('margin-right')) || 0;\r
+      bt = this.parsePx(s.getPropertyValue('border-top-width')) || 0;\r
+      bb = this.parsePx(s.getPropertyValue('border-bottom-width')) || 0;\r
+      bl = this.parsePx(s.getPropertyValue('border-left-width')) || 0;\r
+      br = this.parsePx(s.getPropertyValue('border-right-width')) || 0;\r
+      mw = ml + mr;\r
+      mh = mt + mb;\r
+      bw = bl + br;\r
+      bh = bt + bb;\r
+\r
+    }\r
+  }\r
+      ret = { width : w,\r
+              height : h,\r
+              offsetWidth: ow,\r
+              offsetHeight: oh,\r
+              fitWidth : ow,\r
+              fitHeight : oh,\r
+              outerWidth : (ow + mw),\r
+              outerHeight : (oh + mh),\r
+              marginTop: mt,\r
+              marginBottom: mb,\r
+              marginLeft: ml,\r
+              marginRight: mr,\r
+              marginWidth: mw,\r
+              marginHeight: mh,\r
+              borderWidth : bw,\r
+              borderHeight : bh,\r
+              borderTop: bt,\r
+              borderBottom: bb,\r
+              borderLeft: bl,\r
+              borderRight: br };\r
+  jdisp.logging.stdout.append(jdisp.global.dumpVar(ret));\r
+  return ret;\r
+};\r
+\r
+OOP_METHOD(DomUtils, getElementSizeOld) = function (node)\r
+{\r
+  var n = this.getNode(node);\r
+  if (IS_NON_NULL_OBJECT(n)) {\r
+    var s = n.style;\r
+    if (IS_NON_NULL_OBJECT(s)) {\r
+      var w  = this.parsePx(s.width) || 0;\r
+      var h  = this.parsePx(s.height) || 0;\r
+      var mt = this.parsePx(s.marginTop) || 0;\r
+      var mb = this.parsePx(s.marginBottom) || 0;\r
+      var ml = this.parsePx(s.marginLeft) || 0;\r
+      var mr = this.parsePx(s.marginRight) || 0;\r
+      var bt = this.parsePx(s.borderTopWidth) || 0;\r
+      var bb = this.parsePx(s.borderBottomWidth) || 0;\r
+      var bl = this.parsePx(s.borderLeftWidth) || 0;\r
+      var br = this.parsePx(s.borderRightWidth) || 0;\r
+      var mw = ml + mr;\r
+      var mh = mt + mb;\r
+      var bw = bl + br;\r
+      var bh = bt + bb;\r
+      jdisp.logging.stdout.append(jdisp.global.dumpVar({ width : w,\r
+               height : h,\r
+               fitWidth : (w + bw),\r
+               fitHeight : (h + bh),\r
+               outerWidth : (w + bw + mw),\r
+               outerHeight : (h + bh + mh),\r
+               marginTop: mt,\r
+               marginBottom: mb,\r
+               marginLeft: ml,\r
+               marginRight: mr,\r
+               marginWidth: mw,\r
+               marginHeight: mh,\r
+               borderWidth : bw,\r
+               borderHeight : bh,\r
+               borderTop: bt,\r
+               borderBottom: bb,\r
+               borderLeft: bl,\r
+               borderRight: br }));\r
+      return { width : w,\r
+               height : h,\r
+               fitWidth : (w + bw),\r
+               fitHeight : (h + bh),\r
+               outerWidth : (w + bw + mw),\r
+               outerHeight : (h + bh + mh),\r
+               marginTop: mt,\r
+               marginBottom: mb,\r
+               marginLeft: ml,\r
+               marginRight: mr,\r
+               marginWidth: mw,\r
+               marginHeight: mh,\r
+               borderWidth : bw,\r
+               borderHeight : bh,\r
+               borderTop: bt,\r
+               borderBottom: bb,\r
+               borderLeft: bl,\r
+               borderRight: br };\r
+    }\r
+  }\r
+  return null;\r
+};\r
+\r
+// OK: FF3, Opera9, Chrome1\r
+// NG: IE6\r
+OOP_METHOD(DomUtils, getInnerSize) = function ()\r
+{\r
+  var w = window.innerWidth;\r
+  var h = window.innerHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+// OK: FF3, Opera9, Chrome1\r
+// NG: IE6\r
+OOP_METHOD(DomUtils, getOuterSize) = function ()\r
+{\r
+  var w = window.outerWidth;\r
+  var h = window.outerHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+// IE6, FF3, Opera9, Chrome1 OK\r
+OOP_METHOD(DomUtils, getScreenSize) = function ()\r
+{\r
+  var w = screen.width;\r
+  var h = screen.height;\r
+  return {width:w, height:h};\r
+};\r
+\r
+// IE6, FF3, Opera9, Chrome1 OK\r
+OOP_METHOD(DomUtils, getAvailableSize) = function ()\r
+{\r
+  var w = screen.availWidth;\r
+  var h = screen.availHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+OOP_METHOD(DomUtils, getClientSizeByBody) = function ()\r
+{\r
+  var w = document.body.clientWidth;\r
+  var h = document.body.clientHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+OOP_METHOD(DomUtils, getClientSizeByDocument) = function ()\r
+{\r
+  var w = document.documentElement.clientWidth;\r
+  var h = document.documentElement.clientHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+OOP_METHOD(DomUtils, getClientSize) = function ()\r
+{\r
+  var w, h;\r
+  var de = document.documentElement;\r
+  var b  = document.body;\r
+  w = de.clientWidth || b.clientWidth;\r
+  h = de.clientHeight || b.clientHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+OOP_METHOD(DomUtils, getScrollSizeByBody) = function ()\r
+{\r
+  var w = document.body.scrollWidth;\r
+  var h = document.body.scrollHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+/*\r
+ * To compute the client size without scroll bars:\r
+ *  ff3 -> de.clientWidth\r
+ *  ie6 -> de.clientWidth\r
+ *  op9 -> b.clientWidth\r
+ *  ch1 -> de.clientWidth\r
+ *\r
+ * the client size including scroll bars:\r
+ *  ff3 -> screen.innerWidth\r
+ *  ie6 -> n/a\r
+ *  op9 -> screen.innerWidth\r
+ *  ch1 -> screen.innerWidth\r
+ */\r
+OOP_METHOD(DomUtils, getScrollSizeByDocument) = function ()\r
+{\r
+  var w = document.documentElement.scrollWidth;\r
+  var h = document.documentElement.scrollHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+OOP_METHOD(DomUtils, getScrollSize) = function ()\r
+{\r
+  var w = DOMUTILS_BODY_PROPERTY(scrollWidth) || window.innerWidth;\r
+  var h = DOMUTILS_BODY_PROPERTY(scrollHeight) || window.innerHeight;\r
+  return {width:w, height:h};\r
+};\r
+\r
+OOP_METHOD(DomUtils, preventDefault) = function (ev)\r
+{\r
+  var ee = this.getEventObject(ev);\r
+  if (IS_FUNCTION(ee.preventDefault)) {\r
+    ee.preventDefault();\r
+  } else {\r
+    ee.cancelBubble = true;\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, stopPropagation) = function (ev)\r
+{\r
+  var ee = this.getEventObject(ev);\r
+  if (IS_FUNCTION(ee.stopPropagation)) {\r
+    ee.stopPropagation();\r
+  } else {\r
+    ee.returnValue = false;\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, removeElementById) = function (node)\r
+{\r
+  var n = this.getNode(node);\r
+  if (IS_NON_NULL_OBJECT(n))\r
+    return n.parentNode.removeChild(n);\r
+  return null;\r
+};\r
+\r
+\r
+OOP_METHOD(DomUtils, addEventListener) = function (node, type, listener, useCapture)\r
+{\r
+  var n = this.getNode(node);\r
+\r
+  if (!IS_NON_NULL_OBJECT(n)) return;\r
+  n['on' + type.toLowerCase()] = listener;\r
+};\r
+\r
+OOP_METHOD(DomUtils, addEventListenerDOM) = function (node, type, listener, useCapture)\r
+{\r
+  var n = this.getNode(node);\r
+\r
+  if (!IS_NON_NULL_OBJECT(n)) return;\r
+\r
+  if (OOP_CLASS(DomUtils).useDOM2) {\r
+    n.addEventListener(type, listener, useCapture);\r
+  } else {\r
+    n['on' + type.toLowerCase()] = listener;\r
+    if (n.captureEvents) {\r
+      n.captureEvents('Event.' + type.toUpperCase());\r
+    }\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, setScrollHandler) = function (f)\r
+{\r
+  if (document.all) {\r
+    var de = document.documentElement;\r
+    if (de) {\r
+      de.onscroll = f;\r
+    } else {\r
+      document.body.onscroll = f;\r
+    }\r
+  } else {\r
+    window.onscroll = f;\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, getScrollHandler) = function ()\r
+{\r
+  if (document.all) {\r
+    var de = document.documentElement;\r
+    if (de) {\r
+      return de.onscroll;\r
+    } else {\r
+      return document.body.onscroll;\r
+    }\r
+  } else {\r
+    return window.onscroll;\r
+  }\r
+};\r
+\r
+OOP_METHOD(DomUtils, setResizeHandler) = function (f)\r
+{\r
+  window.onresize = f;\r
+};\r
+\r
+OOP_METHOD(DomUtils, getResizeHandler) = function ()\r
+{\r
+  return window.onresize;\r
+};\r
+\r
+\r
+#undef _STYLE_LENGTH\r
+\r
+#endif /* _JDISP_DOMUTILS_JSH */\r

diff --git a/src/js/include/jdisp/package.jsh b/src/js/include/jdisp/package.jsh
index c0995cf..617cc46 100644 (file)
--- a/src/js/include/jdisp/package.jsh
+++ b/src/js/include/jdisp/package.jsh
@@ -5,6 +5,7 @@
 OOP_DECLARE_NAMESPACE1(jdisp)
  
 #include "Global.jsh"
+#include "DomUtils.jsh"
  
 #undef OOP_NAMESPACE