JavaScript UI Specification

This specification defines visual features of "JavaScript Editor Support" module.

Module

Module Name: "JavaScript Editor Support"
Category: "Languages Support"
Description: "Support for editing JavaScript files."

Templates

There are three templates:

Scripting / Empty JavaScript File:

• Description: "Creates empty JavaScript file. You can edit the file in the IDE's Source Editor. And you can run it using the editor context menu. To change this template, choose Tools | Template Manager and open the template in the editor."
• Content: creates empty file

Scripting / JavaScript Method:

• Description: "Creates JavaScript file with one method declaration. You can edit the file in the IDE's Source Editor. And you can run it using the editor context menu. To change this template, choose Tools | Template Manager and open the template in the editor."
• Content:

/*
 * To change this template, choose Tools | Template Manager
 * and open the template in the editor.
 */

/*
 * Method foo.
 */
function foo (parameter) {
    return i;
}

Scripting / JavaScript Object:

• Description: "Creates JavaScript file with one object declaration. You can edit the file in the IDE's Source Editor. And you can run it using the editor context menu. To change this template, choose Tools | Template Manager and open the template in the editor."
• Content:

/*
 * To change this template, choose Tools | Template Manager
 * and open the template in the editor.
 */

/*
 * ClassName constructor.
 */
function ClassName (parameter) {
    this.parameter = parameter;
}


/*
 * Method ClassName.method1.
 */
ClassName.prototype.method1 = function () {
    return this.parameter;
}

Syntax Coloring

JavaScript module supports following tokens, semantic elements and colors:

Navigator

JavaScript Navigator shows tree of global variables, local variables, object literals and functions. Definition of navigator node's display name and tooltip:

Single click on navigator node scrolls editor to definition of statement (variable, function) and highlights it.
Double click on navigator node scrolls editor to definition of statement and moves focus to editor to the first character of statement.
There are no actions in navigator node's popup menu.

Code Folding

We are folding:

• function bodies (fold type name: "Methods")
• multi line comments (fold type name: "Comments")

In the case that JavaScript is embeded in PHP, we have one common fold type ("Methods") used for both languages.

Code Completion

JavaScript code completion shows list of all keywords, global variable names and function names for identifiers and keywords. List is sorted alphabetically.

Editor Popup Menu Actions

Code Folds submenu:

Indentation

Text between backets, curly brackets and parenthesis is indented. Text after "if ()", "while ()", "for ()" and "else" is indented. Some more complicated cases are not supported. For example:

if (a)
    while (b)
        e = i++;

Bracket Completion

Bracket completion is enabled for following separators: {} "" () So, it means:

• closing brackets are added automatically
• there is no second closing bracket added, if it is the next character after cursor
• closing bracket is removed automatically, if the opening one is deleted by Backspace key

JavaScript escape sequences

JavaScript escape sequences (\0 \b \t \n \v \f \r \" \'
\x11 \u2222) are bolded in strings.