Skip to content
This repository has been archived by the owner on Sep 6, 2021. It is now read-only.

Extract About dialog from main HTML file so that we can override it easily in Edge Code #2329

Merged
merged 3 commits into from Dec 12, 2012
Merged

Extract About dialog from main HTML file so that we can override it easily in Edge Code #2329

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ad9c1b9
Extract About dialog from main HTML file so that we can override it e…
njx Dec 11, 2012
5ffa518
Code review fixes. Extracted project settings and update dialogs as w…
njx Dec 11, 2012
46385c0
Use a template var for build info instead of injecting it directly
njx Dec 12, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 1 addition & 7 deletions src/brackets.js
View file
Open in desktop
Expand Up @@ -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);
Expand Down
17 changes: 12 additions & 5 deletions src/help/HelpCommandHandlers.js
View file
Open in desktop
Expand Up @@ -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";
Expand All @@ -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;

Expand All @@ -55,11 +56,17 @@ define(function (require, exports, module) {
}

function _handleAboutDialog() {
var templateVars = $.extend({
ABOUT_ICON : brackets.config.about_icon,
APP_NAME_ABOUT_BOX : brackets.config.app_name_about
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that VERSION no longer seems to be used in any of the dialogs directly (it's only used within other strings, and gets substituted into them in src/strings.js). So I took it out here.

}, Strings);

var $template = $(Mustache.render(AboutDialogTemplate, templateVars));
if (buildInfo) {
$("#about-build-number").text(" (" + buildInfo + ")");
$("#about-build-number", $template).text(" (" + buildInfo + ")");
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just realized we don't have to do this programmatically any more. Before this change, the template had to render early and couldn't wait for the buildInfo to resolve. Now that we build the template just-in-time, we can update the template to use a BUILD_INFO template var.

}
Dialogs.showModalDialog(Dialogs.DIALOG_ID_ABOUT);

Dialogs.showModalDialogUsingTemplate($template);
}

function _handleForum() {
Expand Down
18 changes: 18 additions & 0 deletions src/htmlContent/about-dialog.html
View file
Open in desktop
@@ -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"><!-- 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>
49 changes: 0 additions & 49 deletions src/htmlContent/main-view.html
View file
Open in desktop
Expand Up @@ -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>
Expand Down
14 changes: 14 additions & 0 deletions src/htmlContent/project-settings-dialog.html
View file
Open in desktop
@@ -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>
17 changes: 17 additions & 0 deletions src/htmlContent/update-dialog.html
View file
Open in desktop
@@ -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>
15 changes: 8 additions & 7 deletions src/preferences/PreferencesDialogs.js
View file
Open in desktop
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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();
Expand Down
15 changes: 8 additions & 7 deletions src/utils/UpdateNotification.js
View file
Open in desktop
Expand Up @@ -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]);
Expand Down Expand Up @@ -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
Expand Down
66 changes: 39 additions & 27 deletions src/widgets/Dialogs.js
View file
Open in desktop
Expand Up @@ -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);
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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).
Expand All @@ -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;
});