Initial commit of language select dialog

src/document/Document.js

@@ -423,18 +423,25 @@ define(function (require, exports, module) {
     Document.prototype.getLanguage = function () {
         return this.language;
     };
-
+    
     /**
-     * Updates the language according to the file extension
+     * Sets the language of this document to the given language.
+     * @param {!Language} language The language to be set for this document
      */
-    Document.prototype._updateLanguage = function () {
+    Document.prototype.setLanguage = function (language) {
         var oldLanguage = this.language;
-        this.language = LanguageManager.getLanguageForPath(this.file.fullPath);
-
+        this.language = language;
         if (oldLanguage && oldLanguage !== this.language) {
             $(this).triggerHandler("languageChanged", [oldLanguage, this.language]);
         }
     };
+
+    /**
+     * Updates the language according to the file extension
+     */
+    Document.prototype._updateLanguage = function () {
+        this.setLanguage(LanguageManager.getLanguageForPath(this.file.fullPath));
+    };
 
     /** Called when Document.file has been modified (due to a rename) */
     Document.prototype._notifyFilePathChanged = function () {

src/editor/EditorStatusBar.js

@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $, window */
+/*global define, $, window, Mustache */
 
 /**
  * Manages parts of the status bar related to the current editor's state.
@@ -32,13 +32,18 @@ define(function (require, exports, module) {
     "use strict";
 
     // Load dependent modules
-    var AppInit             = require("utils/AppInit"),
-        EditorManager       = require("editor/EditorManager"),
-        Editor              = require("editor/Editor").Editor,
-        KeyEvent            = require("utils/KeyEvent"),
-        StatusBar           = require("widgets/StatusBar"),
-        Strings             = require("strings"),
-        StringUtils         = require("utils/StringUtils");
+    var AppInit                      = require("utils/AppInit"),
+        CollectionUtils              = require("utils/CollectionUtils"),
+        DefaultDialogs               = require("widgets/DefaultDialogs"),
+        Dialogs                      = require("widgets/Dialogs"),
+        EditorManager                = require("editor/EditorManager"),
+        Editor                       = require("editor/Editor").Editor,
+        KeyEvent                     = require("utils/KeyEvent"),
+        LanguageManager              = require("language/LanguageManager"),
+        StatusBar                    = require("widgets/StatusBar"),
+        Strings                      = require("strings"),
+        StringUtils                  = require("utils/StringUtils"),
+        SwitchLanguageDialogTemplate = require("text!htmlContent/switch-language-dialog.html");
 
     /* StatusBar indicators */
     var $languageInfo,
@@ -147,6 +152,48 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * Open a dialog allowing user to switch the language mode for the current
+     * document.
+     * Currently this is only triggered when the language name in the status
+     * bar is clicked, but it could easily become a menu option in the future.
+     * @param {!Editor} editor The editor for which to switch the language
+     */
+    function _handleSwitchLanguage(editor) {
+        var languages = [],
+            selectedLanguage = editor.document.getLanguage().getId(),
+            template;
+        // populate list of languages
+        CollectionUtils.forEach(LanguageManager.getLanguages(),
+            function (lang) {
+                languages.push({
+                    label: lang.getName(),
+                    language: lang.getId()
+                });
+            });
+        // sort list alphabetically (ignoring case)
+        languages = languages.sort(function (a, b) {
+            return a.label.toLowerCase().localeCompare(b.label.toLowerCase());
+        });
+        // render switch-language-dialog.html using the languages list
+        template = Mustache.render(SwitchLanguageDialogTemplate, // TODO: add file name to dialog title
+            $.extend({languages: languages}, Strings));
+        // show the dialog and set the handler for OK button
+        Dialogs.showModalDialogUsingTemplate(template)
+            .done(function (btnId) {
+                if (btnId === Dialogs.DIALOG_BTN_OK) {
+                    editor.document.setLanguage(
+                        LanguageManager.getLanguage(selectedLanguage)
+                    ); // TODO: persist the language setting?
+                }
+            });
+        // set initial value and change handler for select box
+        $(".switch-language-dialog select").val(selectedLanguage)
+            .on("change", function () {
+                selectedLanguage = $(this).val();
+            });
+    }
+
     function _init() {
         $languageInfo       = $("#status-language");
         $cursorInfo         = $("#status-cursor");
@@ -180,7 +227,12 @@ define(function (require, exports, module) {
             });
 
         $indentWidthInput.focus(function () { $indentWidthInput.select(); });
-
+
+        // when language name clicked, open switch language dialog
+        $languageInfo.on("click", function () {
+            _handleSwitchLanguage(EditorManager.getActiveEditor());
+        });
+
         _onActiveEditorChange(null, EditorManager.getActiveEditor(), null);
     }
 

src/htmlContent/switch-language-dialog.html

@@ -0,0 +1,20 @@
+<div class="switch-language-dialog modal">
+    <div class="modal-header">
+        <a href="#" class="close" data-dismiss="modal">&times;</a>
+        <h1 class="dialog-title">{{SWITCH_LANGUAGE_TITLE}}</h1>
+    </div>
+    <div class="modal-body">
+        <p class="dialog-message">
+            {{SWITCH_LANGUAGE_MESSAGE}}
+            <select>
+                {{#languages}}
+                <option value="{{language}}">{{label}}</option>
+                {{/languages}}
+            </select>
+        </p>
+    </div>
+    <div class="modal-footer">
+        <button class="dialog-button btn primary" data-button-id="ok">{{OK}}</button>
+        <button class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</button>
+    </div>
+</div>

src/language/LanguageManager.js

@@ -238,6 +238,15 @@ define(function (require, exports, module) {
         return language || _fallbackLanguage;
     }
 
+    /**
+     * Returns all of the languages currently defined in the LanguageManager.
+     * @return {Object.<string, Language>} A map containing all of the
+     * languages currently defined.
+     */
+    function getLanguages() {
+        return _languages;
+    }
+
     /**
      * Resolves a CodeMirror mode to a Language object.
      * @param {!string} mode CodeMirror mode
@@ -754,4 +763,5 @@ define(function (require, exports, module) {
     exports.defineLanguage          = defineLanguage;
     exports.getLanguage             = getLanguage;
     exports.getLanguageForPath      = getLanguageForPath;
+    exports.getLanguages            = getLanguages;
 });

src/nls/root/strings.js

@@ -393,6 +393,9 @@ define({
     "LANGUAGE_CANCEL"                           : "Cancel",
     "LANGUAGE_SYSTEM_DEFAULT"                   : "System Default",
 
+    "SWITCH_LANGUAGE_TITLE"                     : "Switch Language",
+    "SWITCH_LANGUAGE_MESSAGE"                   : "Language:",
+
     /**
      * Locales
      */

src/styles/brackets.less

@@ -165,6 +165,10 @@ a, img {
 
     #status-language {
         border-right: 1px solid rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        &:hover {
+            text-decoration: underline;
+        }
     }
 }