/[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.8 by wakaba, Sun Jan 4 01:07:46 2009 UTC revision 1.12 by wakaba, Sun Jan 4 06:43:03 2009 UTC
# Line 49  function update (form) { Line 49  function update (form) {
49      } else {      } else {
50        setHighlight (rect, position);        setHighlight (rect, position);
51      }      }
52    
53        if (NodeRectViewer.controller) NodeRectViewer.controller.setMaxZIndex ();
54    }    }
55  } // update  } // update
56    
# Line 91  NodeRectViewer.Box = function (rect, coo Line 93  NodeRectViewer.Box = function (rect, coo
93    this.element = marker;    this.element = marker;
94    
95    setCSSPosition (marker.style, coords == 'viewport' ? 'fixed' : 'absolute');    setCSSPosition (marker.style, coords == 'viewport' ? 'fixed' : 'absolute');
   marker.style.zIndex = '99999';  
96        
97    this.setPosition (this.initialLeft, this.initialTop);    this.setPosition (this.initialLeft, this.initialTop);
98      this.setMaxZIndex ();
99    
   var bw = 1;  
   var diff = 0;  
   if (document.all && document.compatMode == 'CSS1Compat') diff = bw * 2;  
   if (rect.width >= 0) {  
     if (rect.width - diff > 0) {  
       marker.style.width = (rect.width - diff) + 'px';  
     } else {  
       marker.style.height = rect.width + 'px';  
     }  
   }  
   if (rect.height >= 0) {  
     if (rect.height - diff > 0) {  
       marker.style.height = (rect.height - diff) + 'px';  
     } else {  
       marker.style.height = rect.height + 'px';  
     }  
   }  
   marker.style.MozBoxSizing = 'border-box';  
   marker.style.WebkitBoxSizing = 'border-box';  
   marker.style.boxSizing = 'border-box';  
   marker.style.border = bw + 'px solid red';  
100    if (rect instanceof NodeRect.Rect.Vector) {    if (rect instanceof NodeRect.Rect.Vector) {
101      marker.style[rect.leftward ? 'borderRightStyle' : 'borderLeftStyle']      this.setBorder (!rect.upward, !rect.leftward, rect.upward, rect.leftward);
102          = 'dotted';    } else {
103      marker.style[rect.upward ? 'borderTopStyle' : 'borderBottomStyle']      this.setBorder (true, true, true, true);
104          = 'dotted';    }
105    }  
106    var colors = ['#FFFFCC', '#FFCCCC', '#CC99FF', '#99CCFF'];    this.setDimension (rect.width, rect.height);
107    marker.style.backgroundColor = colors[rect.index % colors.length];  
108    marker.style.opacity = 0.3;    this.setColor (rect.index);
109    marker.style.filter = 'alpha(opacity=30)';    this.setOpacity (0.3);
110      this.setLabelColor ('black', 'transparent');
111    
112    marker.onmouseover = function () {    marker.onmouseover = function () {
113      this.style.opacity = 0.7;      self.setOpacity (0.7);
114      this.style.filter = 'alpha(opacity=70)';      self.setLabelColor ('black', 'white');
     this.firstChild.style.backgroundColor = 'white';  
115    };    };
116    marker.onmouseout = function () {    marker.onmouseout = function () {
117      this.style.opacity = 0.3;      self.setOpacity (0.3);
118      this.style.filter = 'alpha(opacity=30)';      self.setLabelColor ('black', 'transparent');
     this.firstChild.style.backgroundColor = 'transparent';  
119    };    };
120    marker.onmousedown = function (event) {    marker.onmousedown = function (event) {
     if (document.nrDragging) return;  
     document.nrDragging = true;  
121      event = event || window.event;      event = event || window.event;
122      this.style.cursor = 'move';      self.setMaxZIndex ();
123      self.dragStartLeft = self.left;      if (!self.isClickable (event.target || event.srcElement)) {
124      self.dragStartTop = self.top;        self.startDrag (event);
125      self.dragStartX = event.clientX;      }
     self.dragStartY = event.clientY;  
   };  
   marker.onmousemove = function (event) {  
     if (this.style.cursor != 'move') return;  
     event = event || window.event;  
     var diffX = event.clientX - self.dragStartX;  
     var diffY = event.clientY - self.dragStartY;  
     self.setPosition (self.dragStartLeft + diffX, self.dragStartTop + diffY);  
   };  
   marker.onmouseup = function (event) {  
     document.nrDragging = false;  
     this.style.cursor = 'default';  
126    };    };
127    marker.ondblclick = function () {    marker.ondblclick = function () {
128      self.setPosition (self.initialLeft, self.initialTop);      if (!self.isClickable (event.target || event.srcElement)) {
129          self.setPosition (self.initialLeft, self.initialTop);
130        }
131    };    };
132    
133    var label = rect.getFullLabel ? rect.getFullLabel () : '';    var label = rect.getFullLabel ? rect.getFullLabel () : '';
134    this.setDescription (label, rect.toString ());    this.setDescription (label, rect.toString ());
135  }; // Box  }; // Box
136    
137    if (!NodeRectViewer.maxBoxZIndex) NodeRectViewer.maxZIndex = 9999;
138    
139    NodeRectViewer.Box.prototype.setMaxZIndex = function () {
140      this.element.style.zIndex = ++NodeRectViewer.maxZIndex;
141    }; // setMaxZIndex
142    
143  NodeRectViewer.Box.prototype.setPosition = function (left, top) {  NodeRectViewer.Box.prototype.setPosition = function (left, top) {
144    if (!isNaN (top + 0)) {    if (!isNaN (top + 0)) {
145      this.element.style.top = top + 'px';      this.element.style.top = top + 'px';
# Line 176  NodeRectViewer.Box.prototype.setPosition Line 151  NodeRectViewer.Box.prototype.setPosition
151    }    }
152  }; // setPosition  }; // setPosition
153    
154  NodeRectViewer.Box.prototype.setDescription = function (label, desc) {  if (document.all && document.compatMode == 'CSS1Compat') {
155    this.element.innerHTML = '';    NodeRectViewer.Box.boxSizing = 'content-box';
156    } else {
157      NodeRectViewer.Box.boxSizing = 'border-box';
158    }
159    
160    NodeRectViewer.Box.prototype.setDimension = function (w, h) {
161      if (w < 0 || (w + 0) != w) w = 0;
162      if (h < 0 || (h + 0) != h) h = 0;
163    
164      var ww = w;
165      var hh = h;
166      if (ww < 20) ww = 20;
167      if (hh < 20) hh = 20;
168    
169      this.element.style.width = ww + 'px';
170      this.element.style.height = hh + 'px';
171    
172      var borderEl = this.borderElement;
173      if (borderEl) {
174        if (NodeRectViewer.Box.boxSizing === 'content-box') {
175          var mw = this.borderLeftWidth + this.borderRightWidth;
176          var mh = this.borderTopWidth + this.borderBottomWidth;
177          if (w < mw) w = mw; else w -= mw;
178          if (h < mh) h = mh; else h -= mh;
179        }
180    
181        borderEl.style.width = w + 'px';
182        borderEl.style.height = h + 'px';
183      }
184    }; // setDimension
185    
186    NodeRectViewer.Box.prototype.setBorder = function (t, r, b, l) {
187      var borderEl = this.borderElement;
188      if (!borderEl) {
189        borderEl = this.element.ownerDocument.createElement ('div');
190        borderEl.style.position = 'absolute';
191        borderEl.style.top = 0;
192        borderEl.style.left = 0;
193        borderEl.style.MozBoxSizing = 'border-box';
194        borderEl.style.WebkitBoxSizing = 'border-box';
195        borderEl.style.boxSizing = 'border-box';
196        this.borderElement = borderEl;
197        this.element.appendChild (borderEl);
198      }
199    
200      var bw = 1;
201      borderEl.style.border = bw + 'px red none';
202      if (t) {
203        borderEl.style.borderTopStyle = 'solid';
204        this.borderTopWidth = bw;
205      } else {
206        this.borderTopWidth = 0;
207      }
208      if (r) {
209        borderEl.style.borderRightStyle = 'solid';
210        this.borderRightWidth = bw;
211      } else {
212        this.borderRightWidth = 0;
213      }
214      if (b) {
215        borderEl.style.borderBottomStyle = 'solid';
216        this.borderBottomWidth = bw;
217      } else {
218        this.borderBottomWidth = 0;
219      }
220      if (l) {
221        borderEl.style.borderLeftStyle = 'solid';
222        this.borderLeftWidth = bw;
223      } else {
224        this.borderLeftWidth = 0;
225      }
226    }; // setBorder
227    
228    NodeRectViewer.Box.colors = ['#FFFFCC', '#FFCCCC', '#CC99FF', '#99CCFF'];
229    
230    NodeRectViewer.Box.prototype.setColor = function (index) {
231      var colors = NodeRectViewer.Box.colors;
232      this.element.style.backgroundColor = colors[index % colors.length];
233    }; // setColor
234    
235    NodeRectViewer.Box.prototype.setOpacity = function (opacity) {
236      this.element.style.opacity = opacity;
237      this.element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';
238    }; // setOpacity
239    
240    NodeRectViewer.Box.prototype.setLabelColor = function (fg, bg) {
241      var textEl = this.labelElement;
242      if (!textEl) return;
243      textEl.style.color = fg;
244      textEl.style.backgroundColor = bg;
245    }; // setLabelColor
246    
247    NodeRectViewer.Box.prototype.setDescription = function (label, desc) {
248    this.element.title = "*" + label + "* \n" + desc;    this.element.title = "*" + label + "* \n" + desc;
249    
250    var textEl = this.element.ownerDocument.createElement ('div');    var textEl = this.labelElement;
251      if (textEl) {
252        textEl.innerHTML = '';
253      } else {
254        textEl = this.element.ownerDocument.createElement ('div');
255        this.labelElement = textEl;
256      }
257    textEl.style.position = 'absolute';    textEl.style.position = 'absolute';
258    if (!isNaN (this.width)) textEl.style.left = (this.width / 2) + 'px';    if (!isNaN (this.width)) textEl.style.left = (this.width / 2) + 'px';
259    if (!isNaN (this.height)) textEl.style.top = (this.height / 2) + 'px';    if (!isNaN (this.height)) textEl.style.top = (this.height / 2) + 'px';
# Line 197  function setHighlight (rect, coords) { Line 269  function setHighlight (rect, coords) {
269    document.body.appendChild (marker.element);    document.body.appendChild (marker.element);
270    if (!document.highlightElements) document.highlightElements = [];    if (!document.highlightElements) document.highlightElements = [];
271    document.highlightElements.push (marker.element);    document.highlightElements.push (marker.element);
272  } // setHighlight  }; // setHighlight
273    
274    NodeRectViewer.Box.dragging = null;
275    
276    if (!NodeRectViewer.Box.activeHandlers) NodeRectViewer.Box.activeHandlers = {};
277    
278    NodeRectViewer.Box.mousemoveHandler = function (event) {
279      if (NodeRectViewer.Box.dragging) {
280        NodeRectViewer.Box.dragging.handleDrag (event || window.event);
281      }
282    }; // mousemoveHandler
283    
284    NodeRectViewer.Box.mouseupHandler = function (event) {
285      if (NodeRectViewer.Box.dragging) {
286        NodeRectViewer.Box.dragging.endDrag (event || window.event);
287      }
288    }; // mouseupHandler
289    
290    NodeRectViewer.Box.addDragHandlers = function () {
291      if (window.addEventListener) {
292        if (!NodeRectViewer.Box.activeHandlers.mousemove) {
293          window.addEventListener
294              ('mousemove', NodeRectViewer.Box.mousemoveHandler, false);
295          NodeRectViewer.Box.activeHandlers.mousemove
296              = NodeRectViewer.Box.mousemoveHandler;
297        }
298        if (!NodeRectViewer.Box.activeHandlers.mouseup) {
299          window.addEventListener
300              ('mouseup', NodeRectViewer.Box.mouseupHandler, false);
301          NodeRectViewer.Box.activeHandlers.mouseup
302              = NodeRectViewer.Box.mouseupHandler;
303        }
304      } else if (document.attachEvent) {
305        if (!NodeRectViewer.Box.activeHandlers.mousemove) {
306          document.attachEvent ('onmousemove', NodeRectViewer.Box.mousemoveHandler);
307          NodeRectViewer.Box.activeHandlers.mousemove
308              = NodeRectViewer.Box.mousemoveHandler;
309        }
310       if (!NodeRectViewer.Box.activeHandlers.mouseup) {
311          document.attachEvent ('onmouseup', NodeRectViewer.Box.mouseupHandler);
312          NodeRectViewer.Box.activeHandlers.mouseup
313              = NodeRectViewer.Box.mouseupHandler;
314        }
315      }
316    }; // addDragHandlers
317    
318    NodeRectViewer.Box.removeDragHandlers = function () {
319      if (window.removeEventListener) {
320        if (NodeRectViewer.Box.activeHandlers.mousemove) {
321          window.removeEventListener
322              ('mousemove', NodeRectViewer.Box.activeHandlers.mousemove, false);
323        }
324        if (NodeRectViewer.Box.activeHandlers.mouseup) {
325          window.removeEventListener
326              ('mouseup', NodeRectViewer.Box.activeHandlers.mouseup, false);
327        }
328      } else if (document.detachEvent) {
329        if (NodeRectViewer.Box.activeHandlers.mousemove) {
330          document.detachEvent ('onmousemove', NodeRectViewer.Box.mousemoveHandler);
331        }
332        if (NodeRectViewer.Box.activeHandlers.mouseup) {
333          document.detachEvent ('onmouseup', NodeRectViewer.Box.mouseupHandler);
334        }
335      }
336      NodeRectViewer.Box.activeHandlers.mousemove = null;
337      NodeRectViewer.Box.activeHandlers.mouseup = null;
338    }; // removeDragHandlers
339    
340    NodeRectViewer.Box.removeDragHandlers ();
341    
342    NodeRectViewer.Box.prototype.startDrag = function (event) {
343      if (NodeRectViewer.Box.dragging) return;
344      NodeRectViewer.Box.dragging = this;
345      NodeRectViewer.Box.addDragHandlers ();
346    
347      this.element.style.cursor = 'move';
348    
349      this.dragStartLeft = this.left;
350      this.dragStartTop = this.top;
351      this.dragStartX = event.clientX;
352      this.dragStartY = event.clientY;
353    
354      if (event.preventDefault) {
355        event.preventDefault ();
356      } else {
357        event.returnValue = false;
358      }
359    }; // startDrag
360    
361    NodeRectViewer.Box.prototype.handleDrag = function (event) {
362      if (NodeRectViewer.Box.dragging != this) return;
363    
364      var diffX = event.clientX - this.dragStartX;
365      var diffY = event.clientY - this.dragStartY;
366      this.setPosition (this.dragStartLeft + diffX, this.dragStartTop + diffY);
367    
368      if (event.preventDefault) {
369        event.preventDefault ();
370      } else {
371        event.returnValue = false;
372      }
373    }; // handleDrag
374    
375    NodeRectViewer.Box.prototype.endDrag = function (event) {
376      if (NodeRectViewer.Box.dragging != this) return;
377    
378      NodeRectViewer.Box.dragging = null;
379      NodeRectViewer.Box.removeDragHandlers ();
380    
381      this.element.style.cursor = 'default';
382    
383      if (event.preventDefault) {
384        event.preventDefault ();
385      } else {
386        event.defaultValue = false;
387      }
388    }; // endDrag
389    
390    NodeRectViewer.Box.prototype.isClickable = function (target) {
391      return false;
392    }; // isClickable
393    
394    NodeRectViewer.Box.prototype.remove = function () {
395      this.element.parentNode.removeChild (this.element);
396    }; // remove
397    
398  function clearHighlight () {  function clearHighlight () {
399    if (document.highlightElements) {    if (document.highlightElements) {
# Line 210  function clearHighlight () { Line 406  function clearHighlight () {
406  }  }
407    
408  function NodeRectOnLoad () {  function NodeRectOnLoad () {
409    var controller = document.createElement ('article');    if (NodeRectViewer.controller) {
410    controller.style.display = 'block';      NodeRectViewer.controller.remove ();
411    setCSSPosition (controller.style, 'fixed');    }
412    controller.style.right = 0;  
413    controller.style.bottom = 0;    var vpRects = NodeRect.getViewportRects ();
414    controller.style.backgroundColor = '#FFCCFF';    var icb = vpRects.icb;
415    controller.style.zIndex = '99999999';    var wh = NodeRect.Rect.whCSS (document.body, '20em', '11em');
416      var controllerRect
417          = new NodeRect.Rect
418              (null, icb.width, icb.height, null, wh.width, wh.height);
419      controllerRect.label = 'NodeRect viewer';
420      var controller = new NodeRectViewer.Box (controllerRect, 'viewport');
421      controller.element.style.backgroundColor = '#FFCCFF';
422      controller.element.style.whiteSpace = 'nowrap';
423      controller.isClickable = function (target) {
424        return target.form;
425      };
426      controller.setOpacity = function () {
427        this.constructor.prototype.setOpacity.apply (this, [1.0]);
428      };
429    
430    var cb = ' style="color: green" ';    var cb = ' style="color: green" ';
431    controller.innerHTML = '<form>\    controller.element.innerHTML = '<form>\
432    <textarea name=result style="width: 20em; height: 8em"></textarea><br>\  \
433    <input name=selector value="body" onchange=" update(form) " onkeyup=" update(form) " style="width: 15em">\    <textarea name=result style=width:95%;height:6em></textarea>\
434    <input name=selectorIndex value=0 onchange=update(form) onkeyup=update(form) style=width:3em>\    <br>\
435    <input type=checkbox name=trace title="Show chain" onclick=update(form)>\  \
436      <input name=selector title="Target element selector" value=body \
437          onchange=update(form) onkeyup=update(form) \
438          style=width:14em>\
439      <input name=selectorIndex title="Target element index" value=0 \
440          onchange=update(form) onkeyup=update(form) \
441          style=width:3em>\
442      <input type=checkbox name=trace title="Show box chain" onclick=update(form)>\
443    <br>\    <br>\
444    <button type=button onclick=update(form)>update</button>\  \
445    <select name=coords onchange=update(form)>\    <button type=button onclick=update(form)>Update</button>\
446      <select name=coords title="Layout box(es) with coordinate ..." \
447          onchange=update(form)>\
448    <option selected value=canvas>Canvas\    <option selected value=canvas>Canvas\
449    <option value=viewport>Viewport</select>\    <option value=viewport>Viewport\
450    <select name=prop onchange=update(form)>\    </select>\
451    \
452      <select name=prop title="Show box(es) of ..." onchange=update(form)\
453          style="width:10em">\
454  \  \
455    <optgroup label="Element coordinate">\    <optgroup label="Element coordinate">\
456    <option value="offset">offset</option>\    <option value=offset title="offset* attributes">offset\
457    <option value="client">client</option>\    <option value=client title="client* attributes">client\
458    <option value="scrollableArea">scroll (width, height)\    <option value=scrollableArea title="scroll* attributes">scroll (width/height)\
459    <option value="scrollState">scroll (top, left)\    <option value=scrollState title="scroll* attributes">scroll (top/left)\
460  \  \
461    <optgroup label="Viewport coordinate">\    <optgroup label="Viewport coordinate">\
462    <option value="boundingClient">getBoundingClientRect</option>\    <option value="boundingClient">getBoundingClientRect</option>\
# Line 245  function NodeRectOnLoad () { Line 467  function NodeRectOnLoad () {
467    <option value="cumulativeOffset">Cumulative offset</option>\    <option value="cumulativeOffset">Cumulative offset</option>\
468    <option value="paddingEdge">Padding edge</option>\    <option value="paddingEdge">Padding edge</option>\
469    <option value="cumulativeClient">Cumulative client</option>\    <option value="cumulativeClient">Cumulative client</option>\
   <option value="contentEdge">Content edge</option>\  
470    <option value=boxObject>getBoxObjectFor\    <option value=boxObject>getBoxObjectFor\
471  \  \
472    <optgroup label="Screen coordinate">\    <optgroup label="Screen coordinate">\
# Line 293  function NodeRectOnLoad () { Line 514  function NodeRectOnLoad () {
514    </select>\    </select>\
515    </form>';    </form>';
516        
517    document.body.appendChild (controller);    document.body.appendChild (controller.element);
518    update (controller.firstChild);    NodeRectViewer.controller = controller;
519    
520      update (controller.element.firstChild);
521  } // NodeRectOnLoad  } // NodeRectOnLoad
522    
523  var s = document.createElement ('script');  var s = document.createElement ('script');
Legend:
Removed from v.1.8  
changed lines
  Added in v.1.12
admin@suikawiki.org
 ViewVC Help
Powered by ViewVC 1.1.24