Skip to content

Commit 911226e

Browse files
devvaannshdevvaannsh
committed
feat: change live preview effect when setting is changed
1 parent 071ced4 commit 911226e

4 files changed

Lines changed: 115 additions & 15 deletions

File tree

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 90 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1201,8 +1201,30 @@ function RemoteFunctions(config) {
12011201
window.document.removeEventListener("mousemove", onMouseMove);
12021202
}
12031203

1204+
// helper function to get the current elements highlight mode
1205+
// this is as per user settings (either click or hover)
1206+
function getHighlightMode() {
1207+
return config.elemHighlights ? config.elemHighlights.toLowerCase() : "hover";
1208+
}
1209+
1210+
// helper function to check if highlights should show on hover
1211+
function shouldShowHighlightOnHover() {
1212+
return getHighlightMode() !== "click";
1213+
}
1214+
1215+
// helper function to clear element background highlighting
1216+
function clearElementBackground(element) {
1217+
if (element._originalBackgroundColor !== undefined) {
1218+
element.style.backgroundColor = element._originalBackgroundColor;
1219+
} else {
1220+
element.style.backgroundColor = "";
1221+
}
1222+
delete element._originalBackgroundColor;
1223+
}
1224+
12041225
function onElementHover(event) {
1205-
if (_hoverHighlight && config.isLPEditFeaturesActive) {
1226+
// this is to check the user's settings, if they want to show the elements highlights on hover or click
1227+
if (_hoverHighlight && config.isLPEditFeaturesActive && shouldShowHighlightOnHover()) {
12061228
_hoverHighlight.clear();
12071229

12081230
// Skip highlighting for HTML and BODY tags and for DOM elements which doesn't have 'data-brackets-id'
@@ -1233,17 +1255,18 @@ function RemoteFunctions(config) {
12331255
}
12341256

12351257
function onElementHoverOut(event) {
1236-
if (_hoverHighlight && config.isLPEditFeaturesActive) {
1258+
// this is to check the user's settings, if they want to show the elements highlights on hover or click
1259+
if (_hoverHighlight && config.isLPEditFeaturesActive && shouldShowHighlightOnHover()) {
12371260
_hoverHighlight.clear();
12381261

12391262
// Restore original background color
1240-
if (event && event.target && event.target.nodeType === Node.ELEMENT_NODE && event.target.hasAttribute("data-brackets-id")) {
1241-
if (event.target._originalBackgroundColor !== undefined) {
1242-
event.target.style.backgroundColor = event.target._originalBackgroundColor;
1243-
} else {
1244-
event.target.style.backgroundColor = "";
1245-
}
1246-
delete event.target._originalBackgroundColor;
1263+
if (
1264+
event &&
1265+
event.target &&
1266+
event.target.nodeType === Node.ELEMENT_NODE &&
1267+
event.target.hasAttribute("data-brackets-id")
1268+
) {
1269+
clearElementBackground(event.target);
12471270
}
12481271

12491272
// Remove info box when mouse leaves the element
@@ -1284,6 +1307,11 @@ function RemoteFunctions(config) {
12841307
previouslyClickedElement.style.outline = "";
12851308
}
12861309
delete previouslyClickedElement._originalOutline;
1310+
1311+
// Remove highlighting from previously clicked element
1312+
if (getHighlightMode() === "click") {
1313+
clearElementBackground(previouslyClickedElement);
1314+
}
12871315
}
12881316

12891317
_nodeMoreOptionsBox = new NodeMoreOptionsBox(event.target);
@@ -1296,6 +1324,18 @@ function RemoteFunctions(config) {
12961324

12971325
event.target._originalOutline = event.target.style.outline;
12981326
event.target.style.outline = "1px solid #4285F4";
1327+
1328+
// Add highlight for click mode
1329+
if (getHighlightMode() === "click") {
1330+
event.target._originalBackgroundColor = event.target.style.backgroundColor;
1331+
event.target.style.backgroundColor = "rgba(0, 162, 255, 0.2)";
1332+
1333+
if (_hoverHighlight) {
1334+
_hoverHighlight.clear();
1335+
_hoverHighlight.add(event.target, true); // true for animation
1336+
}
1337+
}
1338+
12991339
previouslyClickedElement = event.target;
13001340
} else if ( // when user clicks on the HTML or the BODY tag, we want to remove the boxes
13011341
_nodeMoreOptionsBox &&
@@ -1724,6 +1764,37 @@ function RemoteFunctions(config) {
17241764
_nodeMoreOptionsBox = null;
17251765
}
17261766
}
1767+
1768+
// Handle element highlight mode changes for instant switching
1769+
const oldHighlightMode = oldConfig.elemHighlights ? oldConfig.elemHighlights.toLowerCase() : "hover";
1770+
const newHighlightMode = getHighlightMode();
1771+
1772+
if (oldHighlightMode !== newHighlightMode) {
1773+
// Clear any existing highlights when mode changes
1774+
if (_hoverHighlight) {
1775+
_hoverHighlight.clear();
1776+
}
1777+
1778+
// Clean up any previously highlighted elements
1779+
if (previouslyClickedElement) {
1780+
clearElementBackground(previouslyClickedElement);
1781+
}
1782+
1783+
// Remove info box when switching modes to avoid confusion
1784+
if (_nodeInfoBox && !_nodeMoreOptionsBox) {
1785+
_nodeInfoBox.remove();
1786+
_nodeInfoBox = null;
1787+
}
1788+
1789+
// Re-setup event listeners based on new mode to ensure proper behavior
1790+
if (config.highlight && config.isLPEditFeaturesActive) {
1791+
window.document.removeEventListener("mouseover", onElementHover);
1792+
window.document.removeEventListener("mouseout", onElementHoverOut);
1793+
window.document.addEventListener("mouseover", onElementHover);
1794+
window.document.addEventListener("mouseout", onElementHoverOut);
1795+
}
1796+
}
1797+
17271798
return JSON.stringify(config);
17281799
}
17291800

@@ -1762,6 +1833,16 @@ function RemoteFunctions(config) {
17621833
previouslyClickedElement.style.outline = "";
17631834
}
17641835
delete previouslyClickedElement._originalOutline;
1836+
1837+
// Clear click-mode highlighting
1838+
if (getHighlightMode() === "click") {
1839+
clearElementBackground(previouslyClickedElement);
1840+
1841+
if (_hoverHighlight) {
1842+
_hoverHighlight.clear();
1843+
}
1844+
}
1845+
17651846
previouslyClickedElement = null;
17661847
dismissed = true;
17671848
}

‎src/LiveDevelopment/main.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ define(function main(require, exports, module) {
5252
const EVENT_LIVE_HIGHLIGHT_PREF_CHANGED = "liveHighlightPrefChange";
5353

5454
const PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT = "livePreviewElementHighlights";
55-
const elemHighlightsPrefValue = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
5655

5756
var params = new UrlParams();
5857
var config = {
@@ -67,7 +66,7 @@ define(function main(require, exports, module) {
6766
showInfo: true
6867
},
6968
isLPEditFeaturesActive: isLPEditFeaturesActive,
70-
elemHighlights: elemHighlightsPrefValue
69+
elemHighlights: "hover" // default value, this will get updated when the extension loads
7170
};
7271
// Status labels/styles are ordered: error, not connected, progress1, progress2, connected.
7372
var _status,
@@ -301,7 +300,18 @@ define(function main(require, exports, module) {
301300
}
302301
});
303302

303+
// this function is responsible to update element highlight config
304+
function updateElementHighlightConfig() {
305+
const prefValue = PreferencesManager.get(PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT);
306+
config.elemHighlights = prefValue || "hover";
307+
}
308+
309+
PreferencesManager.on("change", PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT, function() {
310+
updateElementHighlightConfig();
311+
});
312+
304313
MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_OPEN_PREVIEW_URL, function (event, previewDetails) {
314+
updateElementHighlightConfig();
305315
exports.trigger(exports.EVENT_OPEN_PREVIEW_URL, previewDetails);
306316
});
307317
MultiBrowserLiveDev.on(MultiBrowserLiveDev.EVENT_CONNECTION_CLOSE, function (event, {clientId}) {

‎src/extensionsIntegrated/Phoenix-live-preview/LivePreviewSettings.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,14 @@ define(function (require, exports, module) {
135135
$hotReloadLabel = $template.find("#hotReloadLabel"),
136136
$frameworkLabel = $template.find("#frameworkLabel"),
137137
$frameworkSelect = $template.find("#frameworkSelect"),
138-
$elementHighlights = $template.find("#elementHighlightWrapper");
138+
$elementHighlights = $template.find("#elementHighlightWrapper"), // to show/hide this setting
139+
$elementHighlight = $template.find("#elementHighlight"); // dropdown for highlight mode selection
140+
141+
// Initialize form values from preferences
139142
$enableCustomServerChk.prop('checked', PreferencesManager.get(PREFERENCE_PROJECT_SERVER_ENABLED));
140143
$showLivePreviewAtStartup.prop('checked', PreferencesManager.get(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL));
141144
$hotReloadChk.prop('checked', !!PreferencesManager.get(PREFERENCE_PROJECT_SERVER_HOT_RELOAD_SUPPORTED));
142-
// figure out the framework
145+
$elementHighlight.val(PreferencesManager.get(LiveDevelopmentMain.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT));
143146

144147
if(PreferencesManager.get(PREFERENCE_PROJECT_PREVIEW_FRAMEWORK) === null) {
145148
detectFramework($frameworkSelect, $hotReloadChk);
@@ -187,6 +190,12 @@ define(function (require, exports, module) {
187190
PreferencesManager.set(PREFERENCE_SHOW_LIVE_PREVIEW_PANEL, $showLivePreviewAtStartup.is(":checked"));
188191
_saveProjectPreferences($enableCustomServerChk.is(":checked"), $livePreviewServerURL.val(),
189192
$serveRoot.val(), $hotReloadChk.is(":checked"), $frameworkSelect.val());
193+
194+
// Save element highlight preference
195+
PreferencesManager.set(
196+
LiveDevelopmentMain.PREFERENCE_PROJECT_ELEMENT_HIGHLIGHT,
197+
$elementHighlight.val()
198+
);
190199
}
191200
resolve();
192201
});

‎src/extensionsIntegrated/Phoenix-live-preview/livePreviewSettings.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ <h1 class="dialog-title">{{Strings.LIVE_DEV_SETTINGS_TITLE}}</h1>
3030
<hr>
3131
<label for="elementHighlight">Show Live Preview Element Highlights on: </label>
3232
<select name="elementHighlight" id="elementHighlight">
33-
<option value="hover">Hover</option>
34-
<option value="click">Click</option>
33+
<option value="hover">hover</option>
34+
<option value="click">click</option>
3535
</select>
3636
</div>
3737
</div>

0 commit comments

Comments
 (0)