/[suikacvs]/webroot/www/css/noderect/NodeRectViewer.js
Suika

Diff of /webroot/www/css/noderect/NodeRectViewer.js

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 1.12 by wakaba, Sun Jan 4 06:43:03 2009 UTC revision 1.19 by wakaba, Sun Jan 4 12:31:35 2009 UTC
# Line 1  Line 1 
1  if (!window.NodeRectViewer) window.NodeRectViewer = {};  if (!window.NodeRectViewer) window.NodeRectViewer = {};
2    
3  function setCSSPosition (style, value) {  NodeRectViewer.Box = function (rect, coords, refBox) {
   if (value == 'fixed') {  
     if (!window.opera &&  
         /MSIE/.test (navigator.userAgent) &&  
         document.compatMode != 'CSS1Compat') {  
       style.position = 'absolute';  
     } else {  
       style.position = value;  
     }  
   } else {  
     style.position = value;  
   }  
 } // setCSSPosition  
   
 function update (form) {  
   clearHighlight ();  
   form.result.value = '';  
   var el = uu.css (form.selector.value)[parseInt (form.selectorIndex.value) || 0];  
   if (el) {  
     NodeRect.Rect.resetIndex ();  
     var rect;  
     var position = form.coords.value;  
     var type = form.prop.value;  
     var rectClass = form.trace.checked ? NodeRect.Rect.Trace : null;  
     if (type == '') {  
       return;  
     } else if (type == 'cumulativeOffset') {  
       rect = NodeRect.getCumulativeOffsetRect (el, rectClass);  
     } else if (type == 'cumulativeClient') {  
       rect = NodeRect.getCumulativeClientRect (el, rectClass);  
     } else if (type.substring (0, 3) === 'vp.') {  
       var rects = NodeRect.getViewportRects (window);  
       rect = rects[type.substring (3)];  
     } else if (type.substring (0, 4) === 'win.') {  
       var rects = NodeRect.getWindowRects (window);  
       rect = rects[type.substring (4)];  
     } else if (type.substring (0, 7) === 'screen.') {  
       var rects = NodeRect.getScreenRects (window);  
       rect = rects[type.substring (7)];  
     } else {  
       var rects = NodeRect.getElementRects (el);  
       rect = rects[type];  
     }  
     form.result.value = rect.toString ();  
     if (form.trace.checked) {  
       showTrace (rect, position);  
     } else {  
       setHighlight (rect, position);  
     }  
   
     if (NodeRectViewer.controller) NodeRectViewer.controller.setMaxZIndex ();  
   }  
 } // update  
   
 function showTrace (rect, position) {  
   if (rect.prevOp === 'add-offset') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'sub-offset') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'add-vector') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'sub-vector') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'in-edge') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'out-edge') {  
     showTrace (rect.prev1, position);  
     showTrace (rect.prev2, position);  
   } else if (rect.prevOp === 'topleft') {  
     showTrace (rect.prev1, position);  
   } else if (rect.prevOp === 'topleft-negated') {  
     showTrace (rect.prev1, position);  
   }  
   setHighlight (rect, position);  
 } // showTrace  
   
 NodeRectViewer.Box = function (rect, coords /* viewport or canvas */) {  
4    var self = this;    var self = this;
5    
   this.initialLeft = rect.getRenderedLeft ();  
   this.initialTop = rect.getRenderedTop ();  
   this.width = rect.width;  
   this.height = rect.height;  
   
6    var marker = document.createElement ('div');    var marker = document.createElement ('div');
7    this.element = marker;    this.element = marker;
8    
9    setCSSPosition (marker.style, coords == 'viewport' ? 'fixed' : 'absolute');    var left = rect.getRenderedLeft ();
10        var top = rect.getRenderedTop ();
11    this.setPosition (this.initialLeft, this.initialTop);  
12      if (refBox) {
13        left += refBox.getSourceLeft ();
14        top += refBox.getSourceTop ();
15      }
16    
17      this.setPositionProperty (coords == 'viewport' ? 'fixed' : 'absolute');
18      this.setInitialPosition (left, top);
19    this.setMaxZIndex ();    this.setMaxZIndex ();
20    
21    if (rect instanceof NodeRect.Rect.Vector) {    if (rect instanceof NodeRect.Rect.Vector) {
# Line 124  NodeRectViewer.Box = function (rect, coo Line 45  NodeRectViewer.Box = function (rect, coo
45        self.startDrag (event);        self.startDrag (event);
46      }      }
47    };    };
48    marker.ondblclick = function () {    marker.ondblclick = function (event) {
49        event = event || window.event;
50      if (!self.isClickable (event.target || event.srcElement)) {      if (!self.isClickable (event.target || event.srcElement)) {
51        self.setPosition (self.initialLeft, self.initialTop);        self.setPosition (self.initialLeft, self.initialTop);
52      }      }
# Line 140  NodeRectViewer.Box.prototype.setMaxZInde Line 62  NodeRectViewer.Box.prototype.setMaxZInde
62    this.element.style.zIndex = ++NodeRectViewer.maxZIndex;    this.element.style.zIndex = ++NodeRectViewer.maxZIndex;
63  }; // setMaxZIndex  }; // setMaxZIndex
64    
65    NodeRectViewer.Box.prototype.setPositionProperty = function (value) {
66      var style = this.element.style;
67      if (value == 'fixed') {
68        if (document.all && document.compatMode != 'CSS1Compat') {
69          style.position = 'absolute';
70        } else {
71          style.position = value;
72        }
73      } else {
74        style.position = value;
75      }
76    }; // setPositionProperty
77    
78    NodeRectViewer.Box.prototype.setInitialPosition = function (left, top) {
79      this.initialLeft = left;
80      this.initialTop = top;
81      this.setPosition (this.initialLeft, this.initialTop);
82    }; // setInitialPosition
83    
84    NodeRectViewer.Box.prototype.getSourceLeft = function () {
85      return this.left;
86    }; // getSourceLeft
87    
88    NodeRectViewer.Box.prototype.getSourceTop = function () {
89      return this.top;
90    }; // getSourceTop
91    
92    NodeRectViewer.Box.prototype.getDestinationLeft = function () {
93      return this.left + this.width;
94    }; // getDestinationLeft
95    
96    NodeRectViewer.Box.prototype.getDestinationTop = function () {
97      return this.top + this.height;
98    }; // getDestinationTop
99    
100  NodeRectViewer.Box.prototype.setPosition = function (left, top) {  NodeRectViewer.Box.prototype.setPosition = function (left, top) {
101    if (!isNaN (top + 0)) {    if (!isNaN (top + 0)) {
102      this.element.style.top = top + 'px';      this.element.style.top = top + 'px';
# Line 161  NodeRectViewer.Box.prototype.setDimensio Line 118  NodeRectViewer.Box.prototype.setDimensio
118    if (w < 0 || (w + 0) != w) w = 0;    if (w < 0 || (w + 0) != w) w = 0;
119    if (h < 0 || (h + 0) != h) h = 0;    if (h < 0 || (h + 0) != h) h = 0;
120    
121      this.width = w;
122      this.height = h;
123    
124    var ww = w;    var ww = w;
125    var hh = h;    var hh = h;
126    if (ww < 20) ww = 20;    if (ww < 20) ww = 20;
# Line 263  NodeRectViewer.Box.prototype.setDescript Line 223  NodeRectViewer.Box.prototype.setDescript
223    this.element.appendChild (textEl);    this.element.appendChild (textEl);
224  }; // setDescription  }; // setDescription
225    
 function setHighlight (rect, coords) {  
   var marker = new NodeRectViewer.Box (rect, coords);  
   
   document.body.appendChild (marker.element);  
   if (!document.highlightElements) document.highlightElements = [];  
   document.highlightElements.push (marker.element);  
 }; // setHighlight  
   
226  NodeRectViewer.Box.dragging = null;  NodeRectViewer.Box.dragging = null;
227    
228  if (!NodeRectViewer.Box.activeHandlers) NodeRectViewer.Box.activeHandlers = {};  if (!NodeRectViewer.Box.activeHandlers) NodeRectViewer.Box.activeHandlers = {};
# Line 395  NodeRectViewer.Box.prototype.remove = fu Line 347  NodeRectViewer.Box.prototype.remove = fu
347    this.element.parentNode.removeChild (this.element);    this.element.parentNode.removeChild (this.element);
348  }; // remove  }; // remove
349    
 function clearHighlight () {  
   if (document.highlightElements) {  
     for (var i in document.highlightElements) {  
       var el = document.highlightElements[i];  
       if (el.parentNode) el.parentNode.removeChild (el);  
     }  
     document.highlightElements = [];  
   }  
 }  
350    
 function NodeRectOnLoad () {  
   if (NodeRectViewer.controller) {  
     NodeRectViewer.controller.remove ();  
   }  
351    
352    NodeRectViewer.Controller = function () {
353    var vpRects = NodeRect.getViewportRects ();    var vpRects = NodeRect.getViewportRects ();
354    var icb = vpRects.icb;    var icb = vpRects.icb;
355    
356    var wh = NodeRect.Rect.whCSS (document.body, '20em', '11em');    var wh = NodeRect.Rect.whCSS (document.body, '20em', '11em');
357    var controllerRect    var controllerRect
358        = new NodeRect.Rect        = new NodeRect.Rect
359            (null, icb.width, icb.height, null, wh.width, wh.height);            (0, icb.width, null, null, wh.width, wh.height);
360    controllerRect.label = 'NodeRect viewer';    controllerRect.label = 'NodeRect viewer';
361    
362    var controller = new NodeRectViewer.Box (controllerRect, 'viewport');    var controller = new NodeRectViewer.Box (controllerRect, 'viewport');
363      this.box = controller;
364    controller.element.style.backgroundColor = '#FFCCFF';    controller.element.style.backgroundColor = '#FFCCFF';
365    controller.element.style.whiteSpace = 'nowrap';    controller.element.style.whiteSpace = 'nowrap';
366    controller.isClickable = function (target) {    controller.isClickable = function (target) {
# Line 428  function NodeRectOnLoad () { Line 371  function NodeRectOnLoad () {
371    };    };
372    
373    var cb = ' style="color: green" ';    var cb = ' style="color: green" ';
374    controller.element.innerHTML = '<form>\    controller.element.innerHTML = '<form><div \
375          style="width:98%;height:8em; overflow: auto;\
376          border: groove 2px gray;\
377          background-color:white;color:black;\
378          line-height: 1.1;\
379          white-space: pre;\
380          white-space: -moz-pre-wrap;\
381          white-space: pre-wrap"></div>\
382  \  \
   <textarea name=result style=width:95%;height:6em></textarea>\  
   <br>\  
383  \  \
384    <input name=selector title="Target element selector" value=body \    <input name=selector title="Target element selector" value=body \
385        onchange=update(form) onkeyup=update(form) \        onkeypress=commandInputChanged(event) \
386        style=width:14em>\        style=width:70%>\
387    <input name=selectorIndex title="Target element index" value=0 \    <input name=selectorIndex title="Target element index" value=0 \
388        onchange=update(form) onkeyup=update(form) \        onchange=update(form) onkeyup=update(form) \
389        style=width:3em>\        style=width:3em>\
# Line 449  function NodeRectOnLoad () { Line 397  function NodeRectOnLoad () {
397    <option value=viewport>Viewport\    <option value=viewport>Viewport\
398    </select>\    </select>\
399  \  \
400    <select name=prop title="Show box(es) of ..." onchange=update(form)\    <select name=prop title="Show box(es) of ..." onchange=update(form)>\
       style="width:10em">\  
401  \  \
402    <optgroup label="Element coordinate">\    <optgroup label="Element coordinate">\
403    <option value=offset title="offset* attributes">offset\    <option value=offset title="offset* attributes">offset\
# Line 514  function NodeRectOnLoad () { Line 461  function NodeRectOnLoad () {
461    </select>\    </select>\
462    </form>';    </form>';
463        
464      controller.element.style.width = 'auto';
465      controller.element.style.height = 'auto';
466    document.body.appendChild (controller.element);    document.body.appendChild (controller.element);
   NodeRectViewer.controller = controller;  
467    
468    update (controller.element.firstChild);    controller.setDimension
469          (controller.element.offsetWidth, controller.element.offsetHeight);
470      controller.setInitialPosition
471          (icb.width - controller.width, icb.height - controller.height);
472    
473      var form = controller.element.firstChild;
474      this.logElement = form.firstChild;
475      this.logElement.form = true; // dummy for isClickable
476    
477      var self = this;
478      form.update = function (form) {
479        self.update (form);
480      };
481      form.commandInputChanged = function (event) {
482        if (event.keyCode == 13 || event.keyCode == 10) {
483          self.invokeCommand (this);
484          event.preventDefault ();
485          event.returnValue = false;
486        }
487      };
488      this.invokeCommand (form);
489    }; // Controller
490    
491    NodeRectViewer.Controller.prototype.remove = function () {
492      this.clearHighlight ();
493      this.box.remove ();
494    }; // remove
495    
496    NodeRectViewer.Controller.prototype.update = function (form) {
497      this.clearHighlight ();
498    
499      var el = uu.css (this.selector)[parseInt (form.selectorIndex.value) || 0];
500      if (el) {
501        NodeRect.Rect.resetIndex ();
502        var rect;
503        var position = form.coords.value;
504        var type = form.prop.value;
505        var rectClass = form.trace.checked ? NodeRect.Rect.Trace : null;
506        if (type == '') {
507          return;
508        } else if (type == 'cumulativeOffset') {
509          rect = NodeRect.getCumulativeOffsetRect (el, rectClass);
510        } else if (type == 'cumulativeClient') {
511          rect = NodeRect.getCumulativeClientRect (el, rectClass);
512        } else if (type.substring (0, 3) === 'vp.') {
513          var rects = NodeRect.getViewportRects (window);
514          rect = rects[type.substring (3)];
515        } else if (type.substring (0, 4) === 'win.') {
516          var rects = NodeRect.getWindowRects (window);
517          rect = rects[type.substring (4)];
518        } else if (type.substring (0, 7) === 'screen.') {
519          var rects = NodeRect.getScreenRects (window);
520          rect = rects[type.substring (7)];
521        } else {
522          var rects = NodeRect.getElementRects (el);
523          rect = rects[type];
524        }
525        this.addOutputLog (rect.toString ());
526        if (form.trace.checked) {
527          this.showTrace (rect, position);
528        } else {
529          this.setHighlight (rect, position);
530        }
531    
532        this.box.setMaxZIndex ();
533      }
534    }; // update
535    
536    NodeRectViewer.Controller.prototype.invokeCommand = function (form) {
537      var command = form.selector.value;
538        this.addInputLog ('selector = ' + command);
539        this.selector = command;
540        this.update (form);
541      form.selector.value = '';
542    }; // invokeCommand
543    
544    NodeRectViewer.Controller.prototype.addInputLog = function (s) {
545      var doc = this.logElement.ownerDocument;
546      var entryEl = doc.createElement ('div');
547      entryEl.style.color = 'blue';
548      entryEl.appendChild (doc.createTextNode ('> ' + s));
549      entryEl.form = true; // dummy for isClickable
550      this.logElement.appendChild (entryEl);
551      this.logElement.scrollTop = this.logElement.scrollHeight;
552    }; // addInputLog
553    
554    NodeRectViewer.Controller.prototype.addOutputLog = function (s) {
555      var doc = this.logElement.ownerDocument;
556      var entryEl = doc.createElement ('div');
557      var lines = s.split (/\r?\n/); // to avoid IE bug
558      for (var i = 0; i < lines.length; i++) {
559        entryEl.appendChild (doc.createTextNode (lines[i]));
560        entryEl.appendChild (doc.createElement ('br'));
561      }
562      entryEl.form = true; // dummy for isClickable
563      this.logElement.appendChild (entryEl);
564      this.logElement.scrollTop = this.logElement.scrollHeight;
565    }; // addOutputLog
566    
567    NodeRectViewer.Controller.prototype.showTrace =
568    function (rect, position, refBox) {
569      if (rect.prevOp === 'add-offset') {
570        var b1 = this.showTrace (rect.prev1, position);
571        this.showTrace (rect.prev2, position, b1);
572      } else if (rect.prevOp === 'sub-offset') {
573        var b1 = this.showTrace (rect.prev1, position);
574        this.showTrace (rect.prev2, position, b1);
575      } else if (rect.prevOp === 'add-vector') {
576        var b1 = this.showTrace (rect.prev1, position);
577        this.showTrace (rect.prev2, position, b1);
578      } else if (rect.prevOp === 'sub-vector') {
579        var b1 = this.showTrace (rect.prev1, position);
580        this.showTrace (rect.prev2, position, b1);
581      } else if (rect.prevOp === 'in-edge') {
582        var b1 = this.showTrace (rect.prev1, position);
583        this.showTrace (rect.prev2, position, b1);
584      } else if (rect.prevOp === 'out-edge') {
585        var b1 = this.showTrace (rect.prev1, position);
586        this.showTrace (rect.prev2, position, b1);
587      } else if (rect.prevOp === 'topleft') {
588        this.showTrace (rect.prev1, position);
589      } else if (rect.prevOp === 'topleft-negated') {
590        this.showTrace (rect.prev1, position);
591      }
592    
593      return this.setHighlight (rect, position, refBox);
594    }; // showTrace
595    
596    NodeRectViewer.Controller.prototype.setHighlight =
597    function (rect, coords, refBox) {
598      var marker = new NodeRectViewer.Box (rect, coords, refBox);
599    
600      document.body.appendChild (marker.element);
601      if (!this.highlightElements) this.highlightElements = [];
602      this.highlightElements.push (marker.element);
603    
604      return marker;
605    }; // setHighlight
606    
607    NodeRectViewer.Controller.prototype.clearHighlight = function () {
608      if (this.highlightElements) {
609        for (var i in this.highlightElements) {
610          var el = this.highlightElements[i];
611          if (el.parentNode) el.parentNode.removeChild (el);
612        }
613        this.highlightElements = [];
614      }
615    }; // clearHighlight
616    
617    function NodeRectOnLoad () {
618      if (NodeRectViewer.controller) {
619        NodeRectViewer.controller.remove ();
620      }
621    
622      NodeRectViewer.controller = new NodeRectViewer.Controller ();
623  } // NodeRectOnLoad  } // NodeRectOnLoad
624    
625  var s = document.createElement ('script');  var s = document.createElement ('script');
Legend:
Removed from v.1.12  
changed lines
  Added in v.1.19
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24