main integrates LiveDevelopment into Brackets
This module creates two menu items:
"Go Live": open or close a Live Development session and visualize the status "Highlight": toggle source highlighting
Toggles LiveDevelopment and synchronizes the state of UI elements that reports LiveDevelopment status
Stop Live Dev when in an active state (ACTIVE, OUT_OF_SYNC, SYNC_ERROR). Start Live Dev when in an inactive state (ERROR, INACTIVE). Do nothing when in a connecting state (CONNECTING, LOADING_AGENTS).
function _handleGoLiveCommand() {
if (LiveDevImpl.status >= LiveDevImpl.STATUS_ACTIVE) {
LiveDevImpl.close();
} else if (LiveDevImpl.status <= LiveDevImpl.STATUS_INACTIVE) {
if (!params.get("skipLiveDevelopmentInfo") && !PreferencesManager.getViewState("livedev.afterFirstLaunch")) {
PreferencesManager.setViewState("livedev.afterFirstLaunch", "true");
Dialogs.showModalDialog(
DefaultDialogs.DIALOG_ID_INFO,
Strings.LIVE_DEVELOPMENT_INFO_TITLE,
Strings.LIVE_DEVELOPMENT_INFO_MESSAGE
).done(function (id) {
LiveDevImpl.open();
});
} else {
LiveDevImpl.open();
}
}
}
force reload the live preview
function _handleReloadLivePreviewCommand() {
if (LiveDevelopment.status >= LiveDevelopment.STATUS_ACTIVE) {
LiveDevelopment.reload();
}
}
Load Live Development LESS Style
function _loadStyles() {
var lessText = require("text!LiveDevelopment/main.less");
less.render(lessText, function onParse(err, tree) {
console.assert(!err, err);
ExtensionUtils.addEmbeddedStyleSheet(tree.css);
});
}
Sets the MultiBrowserLiveDev implementation if multibrowser is truthy, keeps default LiveDevelopment implementation based on CDT otherwise. It also resets the listeners and UI elements.
function _setImplementation(multibrowser) {
if (multibrowser) {
// set implemenation
LiveDevImpl = MultiBrowserLiveDev;
// update styles for UI status
_status = [
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED, style: "warning" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED, style: "" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_PROGRESS1, style: "info" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_CONNECTED, style: "success" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC, style: "out-of-sync" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR, style: "sync-error" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_PROGRESS1, style: "info" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_PROGRESS1, style: "info" }
];
} else {
LiveDevImpl = LiveDevelopment;
_status = [
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED, style: "warning" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_NOT_CONNECTED, style: "" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_PROGRESS1, style: "info" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_PROGRESS2, style: "info" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_CONNECTED, style: "success" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC, style: "out-of-sync" },
{ tooltip: Strings.LIVE_DEV_STATUS_TIP_SYNC_ERROR, style: "sync-error" }
];
}
// setup status changes listeners for new implementation
_setupGoLiveButton();
_setupGoLiveMenu();
// toggle the menu
_toggleLivePreviewMultiBrowser(multibrowser);
}
Change the appearance of a button. Omit text to remove any extra text; omit style to return to default styling; omit tooltip to leave tooltip unchanged.
function _setLabel($btn, text, style, tooltip) {
// Clear text/styles from previous status
$("span", $btn).remove();
$btn.removeClass(_allStatusStyles);
// Set text/styles for new status
if (text && text.length > 0) {
$("<span class=\"label\">")
.addClass(style)
.text(text)
.appendTo($btn);
} else {
$btn.addClass(style);
}
if (tooltip) {
$btn.attr("title", tooltip);
}
}
Setup window references to useful LiveDevelopment modules
function _setupDebugHelpers() {
window.ld = LiveDevelopment;
window.i = Inspector;
window.report = function report(params) { window.params = params; console.info(params); };
}
Create the menu item "Go Live"
function _setupGoLiveButton() {
if (!_$btnGoLive) {
_$btnGoLive = $("#toolbar-go-live");
_$btnGoLive.click(function onGoLive() {
_handleGoLiveCommand();
});
}
LiveDevImpl.on("statusChange", function statusChange(event, status, reason) {
// status starts at -1 (error), so add one when looking up name and style
// See the comments at the top of LiveDevelopment.js for details on the
// various status codes.
_setLabel(_$btnGoLive, null, _status[status + 1].style, _status[status + 1].tooltip);
_showStatusChangeReason(reason);
if (config.autoconnect) {
window.sessionStorage.setItem("live.enabled", status === 3);
}
});
// Initialize tooltip for 'not connected' state
_setLabel(_$btnGoLive, null, _status[1].style, _status[1].tooltip);
}
Maintains state of the Live Preview menu item
function _setupGoLiveMenu() {
LiveDevImpl.on("statusChange", function statusChange(event, status) {
// Update the checkmark next to 'Live Preview' menu item
// Add checkmark when status is STATUS_ACTIVE; otherwise remove it
CommandManager.get(Commands.FILE_LIVE_FILE_PREVIEW).setChecked(status === LiveDevImpl.STATUS_ACTIVE);
CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).setEnabled(status === LiveDevImpl.STATUS_ACTIVE);
});
}
function _updateHighlightCheckmark() {
CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).setChecked(config.highlight);
}
function _handlePreviewHighlightCommand() {
config.highlight = !config.highlight;
_updateHighlightCheckmark();
if (config.highlight) {
LiveDevImpl.showHighlight();
} else {
LiveDevImpl.hideHighlight();
}
PreferencesManager.setViewState("livedev.highlight", config.highlight);
}
Called on status change
function _showStatusChangeReason(reason) {
// Destroy the previous twipsy (options are not updated otherwise)
_$btnGoLive.twipsy("hide").removeData("twipsy");
// If there was no reason or the action was an explicit request by the user, don't show a twipsy
if (!reason || reason === "explicit_close") {
return;
}
// Translate the reason
var translatedReason = Strings["LIVE_DEV_" + reason.toUpperCase()];
if (!translatedReason) {
translatedReason = StringUtils.format(Strings.LIVE_DEV_CLOSED_UNKNOWN_REASON, reason);
}
// Configure the twipsy
var options = {
placement: "left",
trigger: "manual",
autoHideDelay: 5000,
title: function () {
return translatedReason;
}
};
// Show the twipsy with the explanation
_$btnGoLive.twipsy(options).twipsy("show");
}
Toggles or sets the "livedev.multibrowser" preference
function _toggleLivePreviewMultiBrowser(value) {
var val = _togglePref(PREF_MULTIBROWSER, value);
CommandManager.get(Commands.TOGGLE_LIVE_PREVIEW_MB_MODE).setChecked(val);
// Issue #10217: multi-browser does not support user server, so disable
// the setting if it is enabled.
CommandManager.get(Commands.FILE_PROJECT_SETTINGS).setEnabled(!val);
}