Merge pull request #2329 from adobe/nj/extract-about-dialog

Extract About dialog from main HTML file so that we can override it easily in Edge Code
adobe · Dec 12, 2012 · cc7e4c9 · cc7e4c9
2 parents d731d69 + 46385c0
commit cc7e4c9
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 104 deletions.
diff --git a/src/brackets.js b/src/brackets.js
@@ -313,13 +313,7 @@ define(function (require, exports, module) {
     });
 
     // Localize MainViewHTML and inject into <BODY> tag
-    var templateVars    = $.extend({
-        ABOUT_ICON          : brackets.config.about_icon,
-        APP_NAME_ABOUT_BOX  : brackets.config.app_name_about,
-        VERSION             : brackets.metadata.version
-    }, Strings);
-
-    $("body").html(Mustache.render(MainViewHTML, templateVars));
+    $("body").html(Mustache.render(MainViewHTML, Strings));
 
     // Update title
     $("title").text(brackets.config.app_title);

diff --git a/src/help/HelpCommandHandlers.js b/src/help/HelpCommandHandlers.js
@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $, brackets, window */
+/*global define, $, brackets, window, Mustache */
 
 define(function (require, exports, module) {
     "use strict";
@@ -37,7 +37,8 @@ define(function (require, exports, module) {
         UpdateNotification      = require("utils/UpdateNotification"),
         FileUtils               = require("file/FileUtils"),
         NativeApp               = require("utils/NativeApp"),
-        StringUtils             = require("utils/StringUtils");
+        StringUtils             = require("utils/StringUtils"),
+        AboutDialogTemplate     = require("text!htmlContent/about-dialog.html");
 
     var buildInfo;
 
@@ -55,11 +56,12 @@ define(function (require, exports, module) {
     }
 
     function _handleAboutDialog() {
-        if (buildInfo) {
-            $("#about-build-number").text(" (" + buildInfo + ")");
-        }
-
-        Dialogs.showModalDialog(Dialogs.DIALOG_ID_ABOUT);
+        var templateVars = $.extend({
+            ABOUT_ICON          : brackets.config.about_icon,
+            APP_NAME_ABOUT_BOX  : brackets.config.app_name_about,
+            BUILD_INFO          : buildInfo
+        }, Strings);
+        Dialogs.showModalDialogUsingTemplate(Mustache.render(AboutDialogTemplate, templateVars));
     }
 
     function _handleForum() {

diff --git a/src/htmlContent/about-dialog.html b/src/htmlContent/about-dialog.html
@@ -0,0 +1,18 @@
+<div class="about-dialog modal">
+    <div class="modal-header">
+        <h1 class="dialog-title">{{ABOUT}}</h1>
+    </div>
+    <div class="modal-body">
+        <img class="about-icon" src="{{ABOUT_ICON}}">
+        <div class="about-text">
+            <h2>{{APP_NAME_ABOUT_BOX}}</h2>
+            <p class="dialog-message">{{ABOUT_TEXT_LINE1}} <span id="about-build-number">({{BUILD_INFO}})</span></p>
+            <p class="dialog-message"><!-- $NON-NLS$ -->Copyright 2012 Adobe Systems Incorporated and its licensors. All rights reserved.</p>
+            <p class="dialog-message">{{{ABOUT_TEXT_LINE3}}}</p>
+            <p class="dialog-message">{{{ABOUT_TEXT_LINE4}}}</p>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="dialog-button btn primary" data-button-id="ok">{{CLOSE}}</a>
+    </div>
+</div>
diff --git a/src/htmlContent/main-view.html b/src/htmlContent/main-view.html
@@ -180,55 +180,6 @@ <h1 class="dialog-title">Title goes here</h1>
             <a href="#" class="dialog-button btn primary" data-button-id="ok">{{RELAUNCH_CHROME}}</a>
         </div>
     </div>
-    <div class="about-dialog template modal hide">
-        <div class="modal-header">
-            <h1 class="dialog-title">{{ABOUT}}</h1>
-        </div>
-        <div class="modal-body">
-            <img class="about-icon" src="{{ABOUT_ICON}}">
-            <div class="about-text">
-                <h2>{{APP_NAME_ABOUT_BOX}}</h2>
-                <p class="dialog-message">{{ABOUT_TEXT_LINE1}}<span id="about-build-number"><!-- populated programmatically --></span></p>
-                <p class="dialog-message"><!-- $NON-NLS$ -->Copyright 2012 Adobe Systems Incorporated and its licensors. All rights reserved.</p>
-                <p class="dialog-message">{{{ABOUT_TEXT_LINE3}}}</p>
-                <p class="dialog-message">{{{ABOUT_TEXT_LINE4}}}</p>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn primary" data-button-id="ok">{{CLOSE}}</a>
-        </div>
-    </div>
-    <div class="update-dialog template modal hide">
-        <div class="modal-header">
-            <h1 class="dialog-title">{{UPDATE_AVAILABLE_TITLE}}</h1>
-        </div>
-        <div class="modal-body">
-            <img class="update-icon" src="styles/images/update_large_icon.svg">
-            <div class="update-text">
-                <p class="dialog-message">{{UPDATE_MESSAGE}}</p>
-                <div class="update-info">
-                </div>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</a>
-            <a href="#" class="dialog-button btn primary" data-button-id="download">{{GET_IT_NOW}}</a>
-        </div>
-    </div>
-    <div class="project-settings-dialog template modal hide">
-        <div class="modal-header">
-            <h1 class="dialog-title"></h1>
-        </div>
-        <div class="modal-body">
-            <div class="settings-list">
-                <label>{{PROJECT_SETTING_BASE_URL}}: <input type="text" placeholder="{{PROJECT_SETTING_BASE_URL_HINT}}" class="base-url" /></label>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</a>
-            <a href="#" class="dialog-button btn primary" data-button-id="ok">{{OK}}</a>
-        </div>
-    </div>
     <div id="context-menu-bar">
         <ul data-dropdown="dropdown"></ul>
     </div>

diff --git a/src/htmlContent/project-settings-dialog.html b/src/htmlContent/project-settings-dialog.html
@@ -0,0 +1,14 @@
+<div class="project-settings-dialog modal">
+    <div class="modal-header">
+        <h1 class="dialog-title"></h1>
+    </div>
+    <div class="modal-body">
+        <div class="settings-list">
+            <label>{{PROJECT_SETTING_BASE_URL}}: <input type="text" placeholder="{{PROJECT_SETTING_BASE_URL_HINT}}" class="base-url" /></label>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</a>
+        <a href="#" class="dialog-button btn primary" data-button-id="ok">{{OK}}</a>
+    </div>
+</div>
diff --git a/src/htmlContent/update-dialog.html b/src/htmlContent/update-dialog.html
@@ -0,0 +1,17 @@
+<div class="update-dialog modal">
+    <div class="modal-header">
+        <h1 class="dialog-title">{{UPDATE_AVAILABLE_TITLE}}</h1>
+    </div>
+    <div class="modal-body">
+        <img class="update-icon" src="styles/images/update_large_icon.svg">
+        <div class="update-text">
+            <p class="dialog-message">{{UPDATE_MESSAGE}}</p>
+            <div class="update-info">
+            </div>
+        </div>
+    </div>
+    <div class="modal-footer">
+        <a href="#" class="dialog-button btn left" data-button-id="cancel">{{CANCEL}}</a>
+        <a href="#" class="dialog-button btn primary" data-button-id="download">{{GET_IT_NOW}}</a>
+    </div>
+</div>
diff --git a/src/preferences/PreferencesDialogs.js b/src/preferences/PreferencesDialogs.js
@@ -23,7 +23,7 @@
 
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/*global define, $, PathUtils */
+/*global define, $, PathUtils, Mustache */
 
 /**
  * PreferencesDialogs
@@ -34,11 +34,12 @@ define(function (require, exports, module) {
 
     require("thirdparty/path-utils/path-utils.min");
 
-    var Dialogs             = require("widgets/Dialogs"),
-        PreferencesManager  = require("preferences/PreferencesManager"),
-        ProjectManager      = require("project/ProjectManager"),
-        StringUtils         = require("utils/StringUtils"),
-        Strings             = require("strings");
+    var Dialogs                = require("widgets/Dialogs"),
+        PreferencesManager     = require("preferences/PreferencesManager"),
+        ProjectManager         = require("project/ProjectManager"),
+        StringUtils            = require("utils/StringUtils"),
+        Strings                = require("strings"),
+        SettingsDialogTemplate = require("text!htmlContent/project-settings-dialog.html");
 
     /**
      * Validate that text string is a valid base url which should map to a server folder
@@ -85,7 +86,7 @@ define(function (require, exports, module) {
             $baseUrlControl,
             promise;
 
-        promise = Dialogs.showModalDialog(Dialogs.DIALOG_ID_PROJECT_SETTINGS)
+        promise = Dialogs.showModalDialogUsingTemplate(Mustache.render(SettingsDialogTemplate, Strings))
             .done(function (id) {
                 if (id === Dialogs.DIALOG_BTN_OK) {
                     var baseUrlValue = $baseUrlControl.val();

diff --git a/src/utils/UpdateNotification.js b/src/utils/UpdateNotification.js
@@ -31,12 +31,13 @@
 define(function (require, exports, module) {
     "use strict";
 
-    var Dialogs             = require("widgets/Dialogs"),
-        NativeApp           = require("utils/NativeApp"),
-        PreferencesManager  = require("preferences/PreferencesManager"),
-        Strings             = require("strings"),
-        StringUtils         = require("utils/StringUtils"),
-        Global              = require("utils/Global");
+    var Dialogs              = require("widgets/Dialogs"),
+        NativeApp            = require("utils/NativeApp"),
+        PreferencesManager   = require("preferences/PreferencesManager"),
+        Strings              = require("strings"),
+        StringUtils          = require("utils/StringUtils"),
+        Global               = require("utils/Global"),
+        UpdateDialogTemplate = require("text!htmlContent/update-dialog.html");
 
     // Extract current build number from package.json version field 0.0.0-0
     var _buildNumber = Number(/-([0-9]+)/.exec(brackets.metadata.version)[1]);
@@ -186,7 +187,7 @@ define(function (require, exports, module) {
      * Show a dialog that shows the update 
      */
     function _showUpdateNotificationDialog(updates) {
-        Dialogs.showModalDialog(Dialogs.DIALOG_ID_UPDATE)
+        Dialogs.showModalDialogUsingTemplate(Mustache.render(UpdateDialogTemplate, Strings))
             .done(function (id) {
                 if (id === Dialogs.DIALOG_BTN_DOWNLOAD) {
                     // The first entry in the updates array has the latest download link

diff --git a/src/widgets/Dialogs.js b/src/widgets/Dialogs.js
@@ -50,10 +50,7 @@ define(function (require, exports, module) {
         DIALOG_ID_SAVE_CLOSE = "save-close-dialog",
         DIALOG_ID_EXT_CHANGED = "ext-changed-dialog",
         DIALOG_ID_EXT_DELETED = "ext-deleted-dialog",
-        DIALOG_ID_LIVE_DEVELOPMENT = "live-development-error-dialog",
-        DIALOG_ID_ABOUT = "about-dialog",
-        DIALOG_ID_UPDATE = "update-dialog",
-        DIALOG_ID_PROJECT_SETTINGS = "project-settings-dialog";
+        DIALOG_ID_LIVE_DEVELOPMENT = "live-development-error-dialog";
 
     function _dismissDialog(dlg, buttonId) {
         dlg.data("buttonId", buttonId);
@@ -114,38 +111,26 @@ define(function (require, exports, module) {
     };
 
     /**
-     * General purpose modal dialog. Assumes that:
-     * -- the root tag of the dialog is marked with a unique class name (passed as dlgClass), as well as the
-     *    classes "template modal hide".
-     * -- the HTML for the dialog contains elements with "title" and "message" classes, as well as a number 
-     *    of elements with "dialog-button" class, each of which has a "data-button-id".
+     * Like showModalDialog(), but takes a template as a parameter rather than assuming the template is embedded
+     * in the current DOM. The template can either be a string or a jQuery object representing a DOM node that is
+     * *not* in the current DOM.
      *
-     * @param {string} dlgClass The class of the dialog node in the HTML.
+     * @param {string} template A string template or jQuery object to use as the dialog HTML.
      * @param {string=} title The title of the error dialog. Can contain HTML markup. If unspecified, title in
      *      the HTML template is used unchanged.
      * @param {string=} message The message to display in the error dialog. Can contain HTML markup. If
      *      unspecified, body in the HTML template is used unchanged.
      * @return {$.Promise} a promise that will be resolved with the ID of the clicked button when the dialog
      *     is dismissed. Never rejected.
      */
-    function showModalDialog(dlgClass, title, message) {
+    function showModalDialogUsingTemplate(template, title, message) {
         var result = $.Deferred(),
             promise = result.promise();
 
-        // We clone the HTML rather than using it directly so that if two dialogs of the same
-        // type happen to show up, they can appear at the same time. (This is an edge case that
-        // shouldn't happen often, but we can't prevent it from happening since everything is
-        // asynchronous.)
-        var $dlg = $("." + dlgClass + ".template")
-            .clone()
-            .removeClass("template")
+        var $dlg = $(template)
             .addClass("instance")
             .appendTo(window.document.body);
 
-        if ($dlg.length === 0) {
-            throw new Error("Dialog id " + dlgClass + " does not exist");
-        }
-
         // Save the dialog promise for unit tests
         $dlg.data("promise", promise);
 
@@ -214,6 +199,35 @@ define(function (require, exports, module) {
         return promise;
     }
 
+    /**
+     * General purpose modal dialog. Assumes that:
+     * -- the root tag of the dialog is marked with a unique class name (passed as dlgClass), as well as the
+     *    classes "template modal hide".
+     * -- the HTML for the dialog contains elements with "title" and "message" classes, as well as a number 
+     *    of elements with "dialog-button" class, each of which has a "data-button-id".
+     *
+     * @param {string} dlgClass The class of the dialog node in the HTML.
+     * @param {string=} title The title of the error dialog. Can contain HTML markup. If unspecified, title in
+     *      the HTML template is used unchanged.
+     * @param {string=} message The message to display in the error dialog. Can contain HTML markup. If
+     *      unspecified, body in the HTML template is used unchanged.
+     * @return {$.Promise} a promise that will be resolved with the ID of the clicked button when the dialog
+     *     is dismissed. Never rejected.
+     */
+    function showModalDialog(dlgClass, title, message) {
+        // We clone the HTML rather than using it directly so that if two dialogs of the same
+        // type happen to show up, they can appear at the same time. (This is an edge case that
+        // shouldn't happen often, but we can't prevent it from happening since everything is
+        // asynchronous.)
+        var $template = $("." + dlgClass + ".template")
+            .clone()
+            .removeClass("template");
+        if ($template.length === 0) {
+            throw new Error("Dialog id " + dlgClass + " does not exist");
+        }
+        return showModalDialogUsingTemplate($template, title, message);
+    }
+
     /**
      * Immediately closes any dialog instances with the given class. The dialog callback for each instance will 
      * be called with the special buttonId DIALOG_CANCELED (note: callback is run asynchronously).
@@ -238,10 +252,8 @@ define(function (require, exports, module) {
     exports.DIALOG_ID_EXT_CHANGED       = DIALOG_ID_EXT_CHANGED;
     exports.DIALOG_ID_EXT_DELETED       = DIALOG_ID_EXT_DELETED;
     exports.DIALOG_ID_LIVE_DEVELOPMENT  = DIALOG_ID_LIVE_DEVELOPMENT;
-    exports.DIALOG_ID_ABOUT             = DIALOG_ID_ABOUT;
-    exports.DIALOG_ID_UPDATE            = DIALOG_ID_UPDATE;
-    exports.DIALOG_ID_PROJECT_SETTINGS  = DIALOG_ID_PROJECT_SETTINGS;
 
-    exports.showModalDialog             = showModalDialog;
-    exports.cancelModalDialogIfOpen     = cancelModalDialogIfOpen;
+    exports.showModalDialog              = showModalDialog;
+    exports.showModalDialogUsingTemplate = showModalDialogUsingTemplate;
+    exports.cancelModalDialogIfOpen      = cancelModalDialogIfOpen;
 });