Annotation of kupuMPIWG/common/kupuinspector.js, revision 1.1.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