Annotation of kupuMPIWG/common/kupuinspector.js, revision 1.1
1.1 ! dwinter 1: /*****************************************************************************
! 2: *
! 3: * Copyright (c) 2003-2005 Kupu Contributors. All rights reserved.
! 4: *
! 5: * This software is distributed under the terms of the Kupu
! 6: * License. See LICENSE.txt for license text. For a list of Kupu
! 7: * Contributors see CREDITS.txt.
! 8: *
! 9: *****************************************************************************/
! 10:
! 11: // $Id: kupuinspector.js 9879 2005-03-18 12:04:00Z yuppie $
! 12:
! 13: /* The Kupu Inspector tool
! 14:
! 15: An Kupu Tool (plugin) that will can be used to show and set attributes
! 16: on elements. It will show a list of the current element and all of its
! 17: parents (starting with the body element and working to the current one)
! 18: with input fields for a default set of attributes and, if defined, a
! 19: set for that particular element type.
! 20: */
! 21:
! 22: //----------------------------------------------------------------------------
! 23: // Helper classes
! 24: //----------------------------------------------------------------------------
! 25:
! 26: function Panel() {
! 27: /* the container (user interface element) of the elements */
! 28: this.elements = new Array();
! 29:
! 30: this.element = document.createElement('table');
! 31: this.element.style.width = '100%';
! 32: this.tbody = document.createElement('tbody');
! 33: this.element.appendChild(this.tbody);
! 34:
! 35: this.addElement = function(element) {
! 36: this.elements.push(element);
! 37: for (var i=0; i < element.nodes.length; i++) {
! 38: this.tbody.appendChild(element.nodes[i]);
! 39: };
! 40: };
! 41: };
! 42:
! 43: function Element(node, panel, visibility) {
! 44: /* an element in the panel (reflecting an element in the document) */
! 45: this.panel = panel;
! 46: this.node = node;
! 47: this.nodes = new Array();
! 48: this.default_visibility = visibility;
! 49:
! 50: // create a header
! 51: var labelrow = document.createElement('tr');
! 52: var labelcell = document.createElement('th');
! 53: labelcell.style.textDecoration = 'underline';
! 54: labelcell.style.cursor = 'default';
! 55: labelcell.setAttribute('colSpan', '2');
! 56: labelrow.appendChild(labelcell);
! 57: var nodename = node.nodeName.toLowerCase();
! 58: var labeltext = document.createTextNode(nodename);
! 59: labelcell.appendChild(labeltext);
! 60:
! 61: this.nodes.push(labelrow);
! 62:
! 63: this._displayvar = _SARISSA_IS_IE ? 'block' : 'table-row';
! 64:
! 65: this.addAttribute = function(attr) {
! 66: /* add an attribute */
! 67:
! 68: function changeHandler() {
! 69: var name = this.getAttribute('name');
! 70: var value = this.value;
! 71: if (name == 'className') {
! 72: this.element.className = value;
! 73: } else {
! 74: this.element.setAttribute(name, value);
! 75: };
! 76: };
! 77:
! 78: var row = document.createElement('tr');
! 79: var style = this.default_visibility ? this._displayvar : 'none';
! 80: row.style.display = style;
! 81: var labelcell = document.createElement('td');
! 82: labelcell.style.fontSize = '10px';
! 83: row.appendChild(labelcell);
! 84: var text = document.createTextNode(attr + ': ');
! 85: labelcell.appendChild(text);
! 86: labelcell.style.color = 'blue';
! 87: var inputcell = document.createElement('td');
! 88: inputcell.setAttribute('width', '100%');
! 89: row.appendChild(inputcell);
! 90: var input = document.createElement('input');
! 91: input.setAttribute('type', 'text');
! 92: input.setAttribute('value', attr == 'className' ? node.className : node.getAttribute(attr));
! 93: input.setAttribute('name', attr);
! 94: input.style.width = "100%";
! 95: input.element = this.node;
! 96: addEventHandler(input, 'change', changeHandler, input);
! 97: inputcell.appendChild(input);
! 98: this.nodes.push(row);
! 99: };
! 100:
! 101: this.addStyle = function(stylename) {
! 102: var row = document.createElement('tr');
! 103: var style = this.default_visibility ? this._displayvar : 'none';
! 104: row.style.display = style;
! 105: var labelcell = document.createElement('td');
! 106: labelcell.style.fontSize = '10px';
! 107: row.appendChild(labelcell);
! 108: var text = document.createTextNode(stylename + ': ');
! 109: labelcell.appendChild(text);
! 110: labelcell.style.color = 'red';
! 111: var inputcell = document.createElement('td');
! 112: //inputcell.setAttribute('width', '100%');
! 113: row.appendChild(inputcell);
! 114: var input = document.createElement('input');
! 115: input.setAttribute('type', 'text');
! 116: input.setAttribute('value', node.style[stylename]);
! 117: input.setAttribute('name', stylename);
! 118: input.style.width = "100%";
! 119: input.element = this.node;
! 120: addEventHandler(input, 'change', function() {this.element.style[this.getAttribute('name')] = this.value}, input);
! 121: inputcell.appendChild(input);
! 122: this.nodes.push(row);
! 123: };
! 124:
! 125: this.setVisibility = function(visibility) {
! 126: for (var i=1; i < this.nodes.length; i++) {
! 127: this.nodes[i].style.display = visibility ? this._displayvar : 'none';
! 128: };
! 129: };
! 130:
! 131: this.setVisible = function() {
! 132: for (var i=0; i < this.panel.elements.length; i++) {
! 133: var el = this.panel.elements[i];
! 134: if (el != this) {
! 135: el.setVisibility(false);
! 136: };
! 137: this.setVisibility(true);
! 138: };
! 139: };
! 140:
! 141: addEventHandler(labelrow, 'click', this.setVisible, this);
! 142: };
! 143:
! 144: //----------------------------------------------------------------------------
! 145: // The inspector
! 146: //----------------------------------------------------------------------------
! 147:
! 148: function KupuInspector(inspectorelement) {
! 149: /* the Inspector tool, a tool to set attributes on elements */
! 150:
! 151: this.element = getFromSelector(inspectorelement);
! 152: this._lastnode = null;
! 153:
! 154: this.default_attrs = new Array('id', 'className');
! 155: this.special_attrs = {'a': new Array('href', 'name', 'target'),
! 156: 'img': new Array('url', 'width', 'height'),
! 157: 'ul': new Array('type'),
! 158: 'ol': new Array('type'),
! 159: 'table': new Array('border', 'cellPadding', 'cellSpacing'),
! 160: 'td': new Array('align')
! 161: };
! 162: this.styles = new Array('background', 'borderWidth', 'borderColor',
! 163: 'borderStyle', 'color', 'fontSize',
! 164: 'fontFamily', 'float', 'height',
! 165: 'lineHeight', 'margin', 'padding',
! 166: 'textAlign', 'verticalAlign', 'whiteApace',
! 167: 'width');
! 168:
! 169: this.updateState = function(selNode, event) {
! 170: /* repopulate the inspector (if required) */
! 171: if (selNode != this._lastnode) {
! 172: // we need to repopulate
! 173: this._lastnode = selNode
! 174: this._clear();
! 175: var panel = new Panel();
! 176: var currnode = selNode;
! 177: // walk up to the body, add the elements in an array so we can
! 178: // walk through it backwards later on
! 179: var els = new Array();
! 180: while (currnode.nodeName.toLowerCase() != 'html') {
! 181: // only use element nodes
! 182: if (currnode.nodeType == 1) {
! 183: els.push(currnode);
! 184: };
! 185: currnode = currnode.parentNode;
! 186: };
! 187:
! 188: for (var i=0; i < els.length; i++) {
! 189: // now build an element
! 190: var node = els[els.length - i - 1];
! 191: var nodename = node.nodeName.toLowerCase();
! 192: var visibility = (i == els.length - 1);
! 193: var element = new Element(node, panel, visibility);
! 194:
! 195: // walk through the default attrs
! 196: for (var j=0; j < this.default_attrs.length; j++) {
! 197: var attr = this.default_attrs[j];
! 198: element.addAttribute(attr);
! 199: };
! 200: // check if there are any special attrs for this type of element
! 201: if (nodename in this.special_attrs) {
! 202: var sattrs = this.special_attrs[nodename];
! 203: // add the attrs
! 204: for (var j=0; j < sattrs.length; j++) {
! 205: var attr = sattrs[j];
! 206: element.addAttribute(attr);
! 207: };
! 208: };
! 209: // and add all applicable styles
! 210: for (var j=0; j < this.styles.length; j++) {
! 211: var style = this.styles[j];
! 212: if (style in node.style) {
! 213: element.addStyle(style);
! 214: };
! 215: };
! 216: panel.addElement(element);
! 217: };
! 218: this.element.appendChild(panel.element);
! 219: };
! 220: };
! 221:
! 222: this._clear = function() {
! 223: while (this.element.childNodes.length) {
! 224: this.element.removeChild(this.element.childNodes[0]);
! 225: };
! 226: };
! 227: };
! 228:
! 229: KupuInspector.prototype = new KupuTool;
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>
![[BACK]](/cvs/cvsweb/icons/back.gif){kind=icon}
Return to kupuinspector.js CVS log ![[TXT]](/cvs/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/cvs/cvsweb/icons/dir.gif){kind=icon}
Up to [Repository] / kupuMPIWG / common