[Sommaire] [Imprimer]

   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;