Use DomUtil instead of DomAgent

CHANGES.md

@@ -18,15 +18,12 @@
 * Offset and Rectangle are removed. Use Point and Rect of dart:html instead.
 * Offset3d is renamed to Point3D.
 * View.pageOffset is renamed to View.page
-* DomAgent.pageOffset is renamed to DomAgent.pageOffset.
-* DomAgent.offset is renamed to DomAgent.position.
 
 ##0.6.3
 
 * View event stream is supported. Use Steam.listen() instead. For example, view.on.click.listen((event){}).
 * Data event stream is supported. Use Stream.listen() instead. For example, model.on.select.listen((event){}).
 * UiError is renamed to UIError to follow Dart naming convention
-* DomAgent.computedStyle is removed. Use Element.getComputedStyle() instead.
 
 ##0.6.2
 
@@ -53,7 +50,6 @@ December 14, 2012
 * Overriding View.className is optional. It will return the class name correctly.
 * View.fellows returns a map instead of a collection, and View.getFellow is removed.
 * Browser.innerSize and innerOffset are removed since they are useless.
-* Follow Dart's new naming guidelines and rename to DomAgent, Css, XmlUtil, DomEvent
 
 **Features:**
 

example/custom-layout/CustomLayoutDemo.dart

@@ -20,7 +20,7 @@ class CustomLayoutDemo {
     mainView.on.click.listen((DomEvent event) {
       if (anchor == null)
         _createViews();
-      _move(event.page - new DomAgent(mainView.node).page);
+      _move(event.page - DomUtil.page(mainView.node));
     });
   }
   void _move(Point offset) {

example/effect/MiscEffectDemo.dart

@@ -366,7 +366,7 @@ class SwitchViewDemo {
         ..profile.location = "top right"
         ..on.click.listen((ViewEvent event) {
           replace(v1, v2, _eff = (Element n1, Element n2, void end()) {
-            final int width = new DomAgent(body).width;
+            final int width = body.offsetWidth;
             new EasingMotion((num x, MotionState state) {
               final int l = (width * x).toInt();
               n1.style.left = CssUtil.px(-l);
@@ -398,10 +398,10 @@ class SwitchViewDemo {
           replace(v1, v2, _eff = (Element n1, Element n2, void end()) {
             final List<MotionAction> actions = new List<MotionAction>();
             final List<Function> ends = new List<Function>();
-            
-            int h = new DomAgent(body).height;
+
+            int h = body.offsetHeight;
             final int height = h > 0 ? h : browser.size.height;
-            final int width = new DomAgent(body).width;
+            final int width = body.offsetWidth;
             final Point range = new Point(width / 2, height / 2);
 
             final Element vonode = n1;

example/effect/SwitchViewEffectDemo2.dart

@@ -114,7 +114,7 @@ void main() {
       ..profile.location = "top right"
       ..on.click.listen((ViewEvent event) {
     replace(v1, v2, _eff = (Element n1, Element n2, void end()) {
-      final int width = new DomAgent(body).width;
+      final int width = body.offsetWidth;
       new EasingMotion((num x, MotionState state) {
         final int l = (width * x).toInt();
         n1.style.left = CssUtil.px(-l);
@@ -146,10 +146,10 @@ void main() {
     replace(v1, v2, _eff = (Element n1, Element n2, void end()) {
       final List<MotionAction> actions = new List<MotionAction>();
       final List<Function> ends = new List<Function>();
-      
-      int h = new DomAgent(body).height;
+
+      int h = body.offsetHeight;
       final int height = h > 0 ? h : browser.size.height;
-      final int width = new DomAgent(body).width;
+      final int width = body.offsetWidth;
       final Point range = new Point(width / 2, height / 2);
 
       final Element vonode = n1;

example/gesture/AlbumDemo.dart

@@ -43,7 +43,7 @@ void previous() => select(_index - 1);
 void select(int index) {
   if (index < 0 || index >= photoCount) {
     final View photo = frameInner.children[_index];
-    final Point pos = new DomAgent(photo.node).position;
+    final Point pos = DomUtil.position(photo.node);
     new EasingMotion((num x, MotionState state) {
       photo.style.transform = "rotate(${rand()}deg)";
       photo.left = pos.x + rand();
@@ -162,7 +162,7 @@ void main() {
 
   // responsive sizing
   frame.on.preLayout.listen((LayoutEvent event) {
-    final Size msize = new DomAgent(mainView.node).innerSize;
+    final Size msize = DomUtil.clientSize(mainView.node);
     frameSize = min(msize.width, msize.height);
     final int photoSize = min(frameSize - 50, 500);
     final int photoOffset = (frameSize - photoSize) ~/ 2;

example/gesture/MapDemo.dart

@@ -8,11 +8,8 @@ import 'package:rikulo_ui/view.dart';
 import 'package:rikulo_ui/gesture.dart';
 import 'package:rikulo_ui/event.dart';
 
-Point center(View v) {
-  final dq = new DomAgent(v.node);
-  Size size = dq.size;
-  return dq.page + new Point(size.width / 2, size.height / 2);
-}
+Point center(View v)
+=> DomUtil.page(v.node) + new Point(v.node.offsetWidth / 2, v.node.offsetHeight / 2);
 
 void main() {
   final int imgw = 500, imgh = 395;
@@ -39,7 +36,7 @@ void main() {
 
   // sizing
   img.on.preLayout.listen((LayoutEvent event) {
-    Size psize = new DomAgent(panel.node).innerSize;
+    Size psize = DomUtil.clientSize(panel.node);
     if (psize.width / imgw < psize.height / imgh) {
       img.width = psize.width.toInt();
       img.height = psize.width * imgh ~/ imgw;

example/scroll-view/GridViewDemo.dart

@@ -9,7 +9,7 @@ import 'package:rikulo_commons/html.dart';
 void main() {
   final View mainView = new View()..addToDocument();
   final int barSize = 50, barInnerSize = 40;
-  final Size msize = new WindowAgent(window).innerSize;
+  final Size msize = new Size(window.innerWidth, window.innerHeight);
   bool compact = msize.width < 500 || msize.height < 500; // responsive
   final View container = new View();
   final String occupation = compact ? "100%" : "80%";
@@ -22,9 +22,8 @@ void main() {
   view.classes.add("list-view");
 
   view.on.preLayout.listen((LayoutEvent event) {
-    final cs = new DomAgent(container.node).innerSize;
-    view.width = cs.width - barSize;
-    view.height = cs.height - barSize;
+    view.width = container.node.clientWidth - barSize;
+    view.height = container.node.clientHeight - barSize;
   });
 
   final ScrollView hbar = new ScrollView(direction: Dir.HORIZONTAL);

example/viewport/Viewport.dart

@@ -78,9 +78,9 @@ class Viewport extends View {
     _adjustHeight();
   }
   //@override
-  int get innerWidth => new DomAgent(contentNode).innerWidth;
+  int get clientWidth => contentNode.clientWidth;
   //@override
-  int get innerHeight => new DomAgent(contentNode).innerHeight;
+  int get clientHeight => contentNode.clientHeight;
   //@override to adjust [contentNode]'s width accordingly
   void set width(int width) {
     super.width = width;
@@ -94,11 +94,11 @@ class Viewport extends View {
       _adjustHeight();
   }
   void _adjustWidth() {
-    int v = new DomAgent(node).innerWidth - _spacingLeft - _spacingRight;
+    int v = node.clientWidth - _spacingLeft - _spacingRight;
     contentNode.style.width = CssUtil.px(v > 0 ? v: 0);
   }
   void _adjustHeight() {
-    int v = new DomAgent(node).innerHeight - _spacingTop - _spacingBottom;
+    int v = node.clientHeight - _spacingTop - _spacingBottom;
     contentNode.style.height = CssUtil.px(v > 0 ? v: 0);
   }
 }

lib/src/effect/SlideEffect.dart

@@ -100,8 +100,8 @@ class SlideOutEffect extends HideEffect {
   static MotionAction createAction(Element element, bool fade, SlideDirection dir) {
     switch (dir) {
       case SlideDirection.EAST:
-        final int size = new DomAgent(element).width;
-        final int initLeft = new DomAgent(element).offsetLeft;
+        final int size = element.offsetWidth;
+        final int initLeft = element.offsetLeft;
         return (num x, MotionState state) {
           final int w = (x * size).toInt();
           element.style.left = CssUtil.px(initLeft + w);
@@ -110,15 +110,15 @@ class SlideOutEffect extends HideEffect {
             element.style.opacity = "${1-x}";
         };
       case SlideDirection.WEST:
-        final int size = new DomAgent(element).width;
+        final int size = element.offsetWidth;
         return (num x, MotionState state) {
           element.style.width = CssUtil.px(((1-x) * size).toInt());
           if (fade)
             element.style.opacity = "${1-x}";
         };
       case SlideDirection.SOUTH:
-        final int size = new DomAgent(element).height;
-        final int initTop = new DomAgent(element).offsetTop;
+        final int size = element.offsetHeight;
+        final int initTop = element.offsetTop;
         return (num x, MotionState state) {
           final int h = (x * size).toInt();
           element.style.top = CssUtil.px(initTop + h);
@@ -128,7 +128,7 @@ class SlideOutEffect extends HideEffect {
         };
       case SlideDirection.NORTH:
       default:
-        final int size = new DomAgent(element).height;
+        final int size = element.offsetHeight;
         return (num x, MotionState state) {
           element.style.height = CssUtil.px(((1-x) * size).toInt());
           if (fade)
@@ -142,18 +142,18 @@ class SlideOutEffect extends HideEffect {
 class _SlideEffectUtil {
 
   static int leftOf(Element element) => 
-      _valueOf(element, element.style.left, (DomAgent dq) => dq.offsetLeft);
+      _valueOf(element, element.style.left, (Element n) => n.offsetLeft);
 
   static int topOf(Element element) => 
-      _valueOf(element, element.style.top, (DomAgent dq) => dq.offsetTop);
+      _valueOf(element, element.style.top, (Element n) => n.offsetTop);
 
   static int widthOf(Element element) => 
-      _valueOf(element, element.style.width, (DomAgent dq) => dq.width);
+      _valueOf(element, element.style.width, (Element n) => n.offsetWidth);
 
   static int heightOf(Element element) => 
-      _valueOf(element, element.style.height, (DomAgent dq) => dq.height);
+      _valueOf(element, element.style.height, (Element n) => n.offsetHeight);
 
-  static int _valueOf(Element elem, String stxt, int f(DomAgent dq)) => 
-      stxt != null && stxt.endsWith("px") ? CssUtil.intOf(stxt) : f(new DomAgent(elem));
+  static int _valueOf(Element element, String stxt, int f(Element n)) => 
+      stxt != null && stxt.endsWith("px") ? CssUtil.intOf(stxt) : f(element);
 
 }

lib/src/event/ViewEvent.dart

@@ -280,7 +280,7 @@ class ActivateEvent extends ViewEvent {
       srcNode = source;
       popNode = popup is View ? popup.node: popup;
     }
-    return !new DomAgent(srcNode).isDescendantOf(popNode);
+    return !DomUtil.isDescendant(srcNode, popNode);
   }
 }
 

lib/src/gesture/DragGesture.dart

@@ -156,7 +156,7 @@ class _TouchDragGesture extends DragGesture {
         _touchEnd(); //ignore multiple fingers
       else {
         _touchStart(event.target, event.touches[0].page, event.timeStamp);
-        if (!new DomAgent(event.target).isInput)
+        if (!DomUtil.isInput(event.target))
           event.preventDefault();
       }
     });
@@ -217,7 +217,7 @@ class _MouseDragGesture extends DragGesture {
     _subStart = owner.onMouseDown.listen((MouseEvent event) {
       _touchStart(event.target, event.page, event.timeStamp);
       _capture();
-      if (!new DomAgent(event.target).isInput)
+      if (!DomUtil.isInput(event.target))
         event.preventDefault();
     });
   }

lib/src/gesture/Dragger.dart

@@ -175,7 +175,7 @@ class Dragger extends Gesture {
 
   Point getElementPosition_(Element target) {
     return _transform ? CssUtil.point3DOf(target.style.transform):
-    		new DomAgent(target).position;
+    		DomUtil.position(target);
   }
 
   void setElementPosition_(Element target, Point position) {

lib/src/gesture/Scroller.dart

@@ -65,7 +65,7 @@ class Scroller {
       _onMove(state.transition - _state.startPosition, state.time);
 
     }, end: (DragGestureState state) {
-      final Point pos = new DomAgent(owner).position;
+      final Point pos = DomUtil.position(owner);
       final Rect range = _state.dragRange;
       // always go through this motion
       _bim = new _BoundedInertialMotion(owner, state.velocity, range, 
@@ -127,7 +127,7 @@ class Scroller {
   /** Return the current scroll position.
    */
   Point get scrollPosition => 
-      _state != null ? _state.position : new DomAgent(owner).position * -1;
+      _state != null ? _state.position : DomUtil.position(owner) * -1;
 
   /** Set the scroll position. The current scrolling motion, if any, will be stopped.
    */
@@ -238,7 +238,7 @@ class ScrollerState extends GestureState {
   ScrollerState._(Scroller scroller, this.eventTarget, 
   this._fnViewPortSize, this._fnContentSize, this._time) :
   this.scroller = scroller,
-  startPosition = new DomAgent(scroller.owner).position * -1 {
+  startPosition = DomUtil.position(scroller.owner) * -1 {
     _pos = startPosition;
     Size cs = contentSize, vs = viewPortSize;
     _hor = scroller._hasHor && cs.width > vs.width;
@@ -422,7 +422,7 @@ class _BoundedInertialMotion extends Motion {
   this._hor, this._ver, void move(Point position, int time), void end(),
   {this.friction: 0.0005, this.bounce: 0.0002, this.snapSpeedThreshold: 0.05,
   ScrollerSnap snap}) : _move = move, _end = end, _snap = snap {
-    final Point pos = new DomAgent(element).position;
+    final Point pos = DomUtil.position(element);
     _posx = pos.x;
     _posy = pos.y;
     _velx = _hor ? velocity.x : 0;

lib/src/layout/AnchorRelation.dart

@@ -177,8 +177,8 @@ final List<_AnchorLocator> _anchorYLocators = [
 class _AnchorOfPoint { //mimic View API
   const _AnchorOfPoint();
   int get realWidth => 0;
-  int get innerWidth => 0;
+  int get clientWidth => 0;
   int get realHeight => 0;
-  int get innerHeight => 0;
+  int get clientHeight => 0;
 }
 const _anchorOfPoint = const _AnchorOfPoint();

lib/src/layout/Layout.dart

@@ -99,7 +99,7 @@ class FreeLayout extends AbstractLayout {
   int measureWidth(MeasureContext mctx, View view) {
     int wd = mctx.getWidthByApp(view);
     if (wd == null) {
-      wd = view.innerWidth;
+      wd = view.clientWidth;
       for (final View child in view.children) {
         if (view.shallLayout_(child) && child.profile.anchorView == null) {
           int subsz = child.measureWidth_(mctx);
@@ -117,7 +117,7 @@ class FreeLayout extends AbstractLayout {
   int measureHeight(MeasureContext mctx, View view) {
     int hgh = mctx.getHeightByApp(view);
     if (hgh == null) {
-      hgh = view.innerHeight;
+      hgh = view.clientHeight;
       for (final View child in view.children) {
         if (view.shallLayout_(child) && child.profile.anchorView == null) {
           int subsz = child.measureHeight_(mctx);
@@ -134,11 +134,11 @@ class FreeLayout extends AbstractLayout {
   }
   bool get isProfileInherited => false;
   void doLayout_(MeasureContext mctx, View view, List<View> children) {
-    final AsInt innerWidth = () => view.innerWidth,
-      innerHeight = () => view.innerHeight; //future: introduce cache
+    final AsInt clientWidth = () => view.clientWidth,
+      clientHeight = () => view.clientHeight; //future: introduce cache
     for (final View child in children) {
-      mctx.setWidthByProfile(child, innerWidth);
-      mctx.setHeightByProfile(child, innerHeight);
+      mctx.setWidthByProfile(child, clientWidth);
+      mctx.setHeightByProfile(child, clientHeight);
     }
   }
 }
@@ -151,7 +151,7 @@ void rootLayout(MeasureContext mctx, View root) {
   Element cave = dlgInfo != null ? dlgInfo.cave.parent: node.parent;
   if (cave == document.body)
     cave = null;
-  final size = cave == null ? browser.size: new DomAgent(cave).innerSize;
+  final size = cave == null ? browser.size: DomUtil.clientSize(cave);
 
   final anchor = root.profile.anchorView;
   mctx.setWidthByProfile(root,
@@ -171,7 +171,7 @@ void rootLayout(MeasureContext mctx, View root) {
         anchor.page - root.page + new Point(root.left, root.top):
         new Point(anchor.left, anchor.top):
       cave != null && node.offsetParent != node.parent ? //if parent is relative/absolute/fixed
-          new DomAgent(cave).position: new Point(0,0);
+          DomUtil.position(cave): new Point(0,0);
 
     final locators = _getLocators(loc);
     final mi = new SideInfo(root.profile.margin, 0);
@@ -192,17 +192,17 @@ void rootLayout(MeasureContext mctx, View root) {
 class _AnchorOfRoot { //mimic View API
   const _AnchorOfRoot();
   int get realWidth => browser.size.width;
-  int get innerWidth => browser.size.width;
+  int get clientWidth => browser.size.width;
   int get realHeight => browser.size.height;
-  int get innerHeight => browser.size.height;
+  int get clientHeight => browser.size.height;
 }
 const _anchorOfRoot = const _AnchorOfRoot();
 
 class _AnchorOfNode { //mimic View API
-  final DomAgent _q;
-  _AnchorOfNode(Element n): _q = new DomAgent(n);
-  int get realWidth => _q.width;
-  int get innerWidth => _q.innerWidth;
-  int get realHeight => _q.height;
-  int get innerHeight => _q.innerHeight;
+  final Element _n;
+  _AnchorOfNode(this._n);
+  int get realWidth => _n.offsetWidth;
+  int get clientWidth => _n.clientWidth;
+  int get realHeight => _n.offsetHeight;
+  int get clientHeight => _n.clientHeight;
 }