A simple property inspector example

The following property inspector inspects a fictional tag called INTJ. The INTJ tag is empty (that is, it has no closing tag), so its selection type is exact. As long as the selection is exactly an INTJ tag, the inspector should show up—so the canInspectSelection() function returns TRUE every time. To have a different inspector appear depending on the value of the INTJ tag's TYPE attribute, for example, the canInspectSelection() function must check the value of the TYPE attribute to determine which inspector is the right one. (This is how the Keywords and Description inspectors work, because "keywords" and "description" are not tags but values of the META tag's NAME attribute.)

<!-- tag:INTJ,priority:5,selection:exact,vline,hline -->
<HTML>
<HEAD>
<TITLE>Interjection Inspector</TITLE>
<SCRIPT LANGUAGE="JavaScript">

function canInspectSelection(){
  return true;
}

function inspectSelection(){
  // Get the DOM of the current document
  var theDOM = dw.getDocumentDOM();
  // Get the selected node
  var theObj = theDOM.getSelectedNode();

  // Get the value of the TYPE attribute on the INTJ tag
  var theType = theObj.getAttribute('type');
  // Initialize a variable called typeIndex to -1. This will be
  // used to store the menu index that corresponds to
  // the value of the TYPE attribute
  var typeIndex = -1;
  
  // If there was a TYPE attribute
  if (theType){
    // If the value of TYPE is "jeepers", set typeIndex to 0
    if (theType.toLowerCase() == "jeepers"){
      typeIndex = 0;
    // If the value of TYPE is "jinkies", set typeIndex to 1
    }else if (theType.toLowerCase() == "jinkies"){
      typeIndex = 1;
    // If the value of TYPE is "zoinks", set typeIndex to 2
    }else if (theType.toLowerCase() == "zoinks"){
      typeIndex = 2;
    }
  }
  
  // If the value of the TYPE attribute was "jeepers",
  // "jinkies", or "zoinks", choose the corresponding
  // option from the pop-up menu in the interface
  if (typeIndex != -1){
    document.topLayer.document.topLayerForm.intType.selectedIndex = typeIndex;
  }
}

function setInterjectionTag(){
  // Get the DOM of the current document
  var theDOM = dw.getDocumentDOM();
  // Get the selected node
  var theObj = theDOM.getSelectedNode();
  
  // Get the index of the selected option in the pop-up menu
  // in the interface
  var typeIndex = document.topLayer.document.topLayerForm.intType.selectedIndex;
  // Get the value of the selected option in the pop-up menu
  // in the interface
  var theType = document.topLayer.document.topLayerForm.intType.options[typeIndex].value;

  // Set the value of the TYPE attribute to theType
  theObj.setAttribute('type',theType);
}

</SCRIPT>
</HEAD>

<BODY>
<SPAN ID="image" STYLE="position:absolute; width:23px; height:17px; 
z-index:16; left: 3px; top: 2px">
<IMG SRC="interjection.gif" WIDTH="36" HEIGHT="36" 
NAME="interjectionImage"></SPAN> 
<SPAN ID="label" STYLE="position:absolute; width:23px; height:17px; 
z-index:16; left: 44px; top: 5px">Interjection</SPAN>

<!-- If your form fields are in different layers, you must create a 
separate form inside each layer and reference it as shown in the 
inspectSelection() and setInterjectionTag() functions above. -->

<SPAN ID="topLayer" STYLE="position:absolute; z-index:1; left: 125px; 
top: 3px; width: 431px; height: 32px">
<FORM NAME="topLayerForm">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR> 
<TD VALIGN="baseline" ALIGN="right">Type:</TD>
<TD VALIGN="baseline" ALIGN="right"> 
<SELECT NAME="intType" STYLE="width:86" onChange="setInterjectionTag()">
<OPTION VALUE="jeepers">Jeepers</OPTION>
<OPTION VALUE="jinkies">Jinkies</OPTION>
<OPTION VALUE="zoinks">Zoinks</OPTION>
</SELECT>
</TR>
</TABLE>
</FORM>
</SPAN> 

</BODY>
</HTML>