A simple floating panel example

Vyhľadať

Posledná aktualizácia dňa 21. 5. 2021

In this example, you create a Script Editor extension that creates a floating panel to display the JavaScript code that underlies a selected script marker in Design view. The Script Editor displays the JavaScript code in the textarea element of an HTML form that is defined in a floating panel called scriptlayer. If you make changes to the selected code in the floating panel, the extension calls the updateScript() function to save your changes. If you have not selected a script marker when you invoke the Script Editor, the extension displays (no script selected) in a floating panel called blanklayer.

You create this extension by creating floating panels, writing JavaScript code, and creating a menu item.

Create the floating panels

The beginning of the HTML file for this extension contains the standard document header information and a title tag that puts the words Script Editor in the title bar of the floating panels.

Create the HTML file header

Create a new blank document.

Enter the following:

 <!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Script Editor</title> 
<script language="JavaScript">

The extension defines two floating panels that display either (no script selected) if the user has not selected a script marker or the JavaScript code that underlies a selected script marker. The following code defines these two floating panels, or absolutely positioned (AP) elements, called blanklayer and scriptlayer:

Create the two floating panels

Add the following code after the header in the HTML file:

 <body> 
<div id="blanklayer" style="position:absolute; width:422px; ¬ 
height:181px; z-index:1; left: 8px; top: 11px; ¬ 
visibility: hidden"> 
<center> 
<br> 
<br> 
<br> 
<br> 
<br> 
(no script selected) 
</center> 
</div> 
 
<div id="scriptlayer" style="position:absolute; width:422px; ¬ 
height:181px; z-index:1; left: 8px; top: 11px; ¬ 
visibility: visible"> 
<form name="theForm"> 
<textarea name="scriptCode" cols="80" rows="20" wrap="VIRTUAL" ¬ 
onBlur="updateScript()"></textarea> 
</form> 
</div> 
 
</body> 
</html>

Save the file as scriptEditor.htm in the Configuration/Floaters folder.

Both div tags use the style attribute to specify the position (absolute), size (width:422px and height:181px), and default visibility setting (visible) of the floating panels. The blanklayer panel uses the center attribute and a series of break (br) tags to position the text in the center of the panel. The scriptlayer panel creates a form with a single textarea to display the selected JavaScript code. The textarea tag also specifies that when an onBlur event occurs, indicating that the selected code has changed, the updateScript() function is called to write the changed text back to the document.

Write the JavaScript code

The JavaScript code for the Script Editor consists of one floating panel function that Dreamweaver calls, selectionchanged(), and one user-defined function, updateScript().

selectionChanged(): is a script marker selected?

The selectionChanged() function determines whether a script marker has been selected in Design view. A script marker appears in Design view if there is a JavaScript routine in the body section of a document and if Scripts is selected on the Invisible Elements section of the Preferences dialog box. The following figure shows a script marker icon:

The selectionChanged() function first calls the dw.getDocumentDOM() function to get the Document Object Model (DOM) for the user’s document. It then calls the getSelectedNode() function to see if the selected node for that document is, first, an element and, second, a SCRIPT tag. If both these conditions are true, the selectionChanged() function makes the scripteditor floating panel visible and loads it with the underlying JavaScript code. It also sets the visibility property of the blanklayer floating panel to the value hidden. The following figure shows the scriptlayer floating panel with the selected JavaScript code:

If the selected node is not an element, or it is not a script tag, the selectionChanged() function makes the blanklayer floating panel visible and hides the scriptlayer panel. The blanklayer floating panel displays the text (no script selected), as shown in the following figure:

Add the selectionChanged() function

Open the file scriptEditor.htm that is in the Configuration/Floaters folder.

Enter the following code in the header section of the file.

 function selectionChanged(){ 
    /* get the selected node */ 
    var theDOM = dw.getDocumentDOM(); 
    var theNode = theDOM.getSelectedNode(); 
     
    /* check to see if the node is a script marker */ 
    if (theNode.nodeType == Node.ELEMENT_NODE && ¬ 
    theNode.tagName == "SCRIPT"){ 
        document.layers['scriptlayer'].visibility = 'visible'; 
        document.layers['scriptlayer'].document.theForm.¬ 
        scriptCode.value = theNode.innerHTML; 
        document.layers['blanklayer'].visibility = 'hidden'; 
    }else{ 
        document.layers['scriptlayer'].visibility = 'hidden'; 
        document.layers['blanklayer'].visibility = 'visible'; 
    } 
}

Save the file.

updateScript(): write back changes

The updateScript() function writes back the selected script when an onBlur event occurs in the textarea of the scriptlayer panel. The textarea form element contains the JavaScript code, and the onBlur event occurs when textarea loses input focus.

Open the scriptEditor.htm file that is in the Configuration/Floaters folder.

Enter the following code in the header section of the file.

 /* update the document with any changes made by 
    the user in the textarea */ 
 
    function updateScript(){ 
    var theDOM = dw.getDocumentDOM(); 
    var theNode = theDOM.getSelectedNode(); 
    theNode.innerHTML = document.layers['scriptlayer'].document.¬ 
    theForm.scriptCode.value; 
} 
 
</script> 
</head>

Save the file.

Create a menu item

It is not sufficient to save the Script Editor code in the Configuration/Floaters folder. You must also call either the dw.setFloaterVisibility('scriptEditor',true) function or the dw.toggleFloater('scriptEditor') function to load the floating panel and make it visible. The most obvious place from which to invoke the Script Editor is from the Window menu, which is defined in the menus.xml file. You need to create the menuitem tag that creates an entry for the Script Editor extension on the Window menu, as shown in the following figure:

An entry for the Script Editor extension

If you select a script marker in Design view for the current document and then select the Script Editor menu item, Dreamweaver invokes the Script Editor floating panel and displays the JavaScript code that underlies the script marker. If you select the menu item when a script marker has not been selected, Dreamweaver displays the blanklayer panel that contains the text (no script selected).

Open the menus.xml file in the Configuration/Menus folder.
locate the tag that begins <menuitem name="Tile _Vertically" and position the insertion point after the closing /> of the tag.

On a new line, insert the following:

 <menuitem name="Script Editor" enabled="true" ¬ 
command="dw.toggleFloater('scriptEditor')"¬ 
checked="dw.getFloaterVisibility('scriptEditor')" />

Save the file.

Adobe

Získajte pomoc rýchlejšie a ľahšie

Nový užívateľ?

Adobe MAX
Konferencia o kreativite

14. – 16. októbra Miami Beach a online

Zaregistrujte sa teraz

Adobe MAX

Konferencia o kreativite

14. – 16. októbra Miami Beach a online

Zaregistrujte sa teraz

Adobe MAX
Konferencia o kreativite

14. – 16. októbra Miami Beach a online

Zaregistrujte sa teraz

Adobe MAX

Konferencia o kreativite

14. – 16. októbra Miami Beach a online

Zaregistrujte sa teraz

A simple floating panel example

Create the floating panels

Write the JavaScript code

Create a menu item

Získajte pomoc rýchlejšie a ľahšie

Spýtajte sa komunity

Kontaktujte nás