Create Property inspectors for locked content in Dreamweaver

After you create a translator, you need to create a Property inspector for the content so the user can change its properties (for example, the file to be included or one of the conditions in a conditional statement). Inspecting translated content is a unique problem for several reasons:

  • The user might want to change the properties of the translated content, and those changes must be reflected in the untranslated content.

  • The Document Object Model (DOM) contains the translated content (that is, the lock tags and the tags they surround are nodes in the DOM), but the outerHTML property of the documentElement object and the dreamweaver.getSelection() and dreamweaver.nodeToOffsets() functions act on the untranslated source.

  • The tags you inspect are different before and after translation.

    A Property inspector for the HAPPY tag might have a comment that looks similar to the following example:

     <!-- tag:HAPPY,priority:5,selection:exact,hline,vline, attrName:xxx,¬ attrValue:yyy -->

    The Property inspector for the translated HAPPY tag, however, would have a comment that looks similar to the following example:

     <!-- tag:*LOCKED*,priority:5,selection:within,hline,vline -->

    The canInspectSelection() function for the untranslated HAPPY Property inspector is simple. Because the selection type is exact, it can return a value of true without further analysis. For the translated HAPPY Property inspector, this function is more complicated; the keyword *LOCKED* indicates that the Property inspector is appropriate when the selection is within a locked region, but because a document can have several locked regions, further checks must be performed to determine whether the Property inspector matches this particular locked region.

    Another problem is inherent in inspecting translated content. When you call the dom.getSelection() function, the values that return by default are offsets into the untranslated source. To expand the selection properly so that the locked region (and only the locked region) is selected, use the following technique:

     var currentDOM = dw.getDocumentDOM(); var offsets = currentDOM.getSelection(); var theSelection = currentDOM.offsetsToNode(offsets[0],offsets[0]+1);

    Using offsets[0]+1 as the second argument ensures that you remain within the opening lock tag when you convert the offsets to a node. If you use offsets[1] as the second argument, you risk selecting the node above the lock.

    After you make the selection (after ensuring that its nodeType is node.ELEMENT_NODE), you can inspect the type attribute to see if the locked region matches this Property inspector, as shown in the following example:

     if (theSelection.nodeType == node.ELEMENT_NODE && ¬ theSelection.getAttribute('type') == 'happy'){ return true; }else{ return false }

    To populate the text boxes in the Property inspector for the translated tag, you must parse the value of the orig attribute. For example, if the untranslated code is <HAPPY TIME="22"> and the Property inspector has a Time text box, you must extract the value of the TIME attribute from the orig string:

     function inspectSelection() { var currentDOM = dw.getDocumentDOM(); var currSelection = currentDOM.getSelection(); var theObj = currentDOM.offsetsToNode(curSelection[0],curSelection[0]+1); if (theObj.nodeType != Node.ELEMENT_NODE) { return; } // To convert the encoded characters back to their // original values, use the unescape() method. var origAtt = unescape(theObj.getAttribute("ORIG")); // Convert the string to lowercase for processing var origAttLC = origAtt.toLowerCase(); var timeStart = origAttLC.indexOf('time="'); var timeEnd = origAttLC.indexOf('"',timeStart+6); var timeValue = origAtt.substring(timeStart+6,timeEnd); document.layers['timelayer'].document.timeForm.timefield.value = timeValue; }

    After you parse the orig attribute to populate the boxes in the Property inspector for the translated tag, the next step is probably to set the value of the orig attribute if the user changes the value in any of the text boxes. You might find restrictions against making changes in a locked region. You can avoid this problem by changing the original markup and retranslating.

    The Property inspector for translated server-side includes (the ssi_translated.js file in the Configuration/Inspectors folder) demonstrates this technique in its setComment() function. Rather than rewriting the orig attribute, the Property inspector assembles a new server-side include comment. It inserts that comment into the document, replacing the old one by rewriting the contents of the document, which generates a new orig attribute. The following code summarizes this technique:

     // Assemble the new include comment. radioStr and URL are // variables defined earlier in the code. newInc = "<!--#include " + radioStr + "=" + '"' + URL + '"' + " -->";  // Get the contents of the document. var entireDocObj = dreamweaver.getDocumentDOM(); var docSrc = entireDocObj.documentElement.outerHTML;  // Store everything up to the SSI comment and everything after // the SSI comment in the beforeSelStr and afterSelStr variables. var beforeSelStr = docSrc.substring(0, curSelection[0] ); var afterSelStr = docSrc.substring(curSelection[1]);  // Assemble the new contents of the document. docSrc = beforeSelStr + newInc + afterSelStr;  // Set the outerHTML of the HTML tag (represented by // the documentElement object) to the new contents, // and then set the selection back to the locked region // surrounding the SSI comment. entireDocObj.documentElement.outerHTML = docSrc; entireDocObj.setSelection(curSelection[0], curSelection[0]+1);