Skip to content

Commit 90c043d

Browse files
devvaannshdevvaannsh
committed
refactor: move hot corner to its separate file
1 parent 3ab5b5c commit 90c043d

File tree

3 files changed

+110
-91
lines changed

3 files changed

+110
-91
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 4 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@
2929
* exported functions.
3030
*/
3131
function RemoteFunctions(config = {}) {
32-
// we load this file in unit test window and dont want it to do anything unexpected in the unit test runner context
33-
const isUnitTestWindow = window.Phoenix && window.Phoenix.isTestWindow;
3432
const GLOBALS = {
3533
// given to internal elements like info box, options box, image gallery and all other phcode internal elements
3634
// to distinguish between phoenix internal vs user created elements
@@ -49,7 +47,6 @@ function RemoteFunctions(config = {}) {
4947
let _nodeInfoBox;
5048
let _nodeMoreOptionsBox;
5149
let _moreOptionsDropdown;
52-
let _hotCorner;
5350
let _setup = false;
5451
let _hoverLockTimer = null;
5552

@@ -93,7 +90,8 @@ function RemoteFunctions(config = {}) {
9390
// interaction blocks acts as 'kill switch' to block all kinds of click handlers
9491
// this is done so that links or buttons doesn't perform their natural operation in edit mode
9592
"registerInteractionBlocker", // to block
96-
"unregisterInteractionBlocker" // to unblock
93+
"unregisterInteractionBlocker", // to unblock
94+
"udpateHotCornerState" // to update the hot corner button when state changes
9795
];
9896

9997
const _moreOptionsHandlers = new Map();
@@ -997,75 +995,6 @@ function RemoteFunctions(config = {}) {
997995
}
998996
};
999997

1000-
/**
1001-
* hot corner class,
1002-
* to switch to preview mode and back
1003-
*/
1004-
class HotCorner {
1005-
constructor() {
1006-
this.element = null;
1007-
this.button = null;
1008-
this.box = null;
1009-
this.wasPreviewMode = false;
1010-
this._setup();
1011-
}
1012-
1013-
_setup() {
1014-
const container = document.createElement("div");
1015-
container.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
1016-
1017-
const shadow = container.attachShadow({ mode: "open" });
1018-
1019-
const content = `
1020-
<div class="phoenix-hot-corner">
1021-
<button class="hot-corner-btn" title="${strings.togglePreviewMode}">
1022-
${icons.playButton}
1023-
</button>
1024-
</div>`;
1025-
1026-
shadow.innerHTML = `<style>${cssStyles.hotCorner}</style>${content}`;
1027-
1028-
this.element = container;
1029-
this.button = shadow.querySelector(".hot-corner-btn");
1030-
this.hotCorner = shadow.querySelector(".phoenix-hot-corner");
1031-
1032-
this.button.addEventListener("click", () => {
1033-
window._Brackets_MessageBroker.send({ livePreviewEditEnabled: true, type: "hotCornerPreviewToggle" });
1034-
});
1035-
document.body.appendChild(this.element);
1036-
}
1037-
1038-
updateState(isPreviewMode, showAnimation = false) {
1039-
1040-
if (isPreviewMode) {
1041-
this.button.classList.add("selected");
1042-
1043-
if (!this.wasPreviewMode && showAnimation && this.hotCorner) {
1044-
this.hotCorner.classList.add("peek-animation");
1045-
1046-
setTimeout(() => {
1047-
if (this.hotCorner) {
1048-
this.hotCorner.classList.remove("peek-animation");
1049-
}
1050-
}, 1200);
1051-
}
1052-
} else {
1053-
this.button.classList.remove("selected");
1054-
}
1055-
this.wasPreviewMode = isPreviewMode;
1056-
}
1057-
1058-
remove() {
1059-
if (this.element && this.element.parentNode) {
1060-
this.element.parentNode.removeChild(this.element);
1061-
}
1062-
this.element = null;
1063-
this.button = null;
1064-
this.hotCorner = null;
1065-
}
1066-
}
1067-
1068-
1069998
function Highlight(color, trigger) {
1070999
this.color = color;
10711000
this.trigger = !!trigger;
@@ -2097,8 +2026,8 @@ function RemoteFunctions(config = {}) {
20972026

20982027
// Update hot corner state when mode changes
20992028
// Show animation when mode changes to help users discover the feature
2100-
if (isModeChanged && _hotCorner) {
2101-
_hotCorner.updateState(config.mode === 'preview', true);
2029+
if (isModeChanged && SHARED_STATE._hotCorner) {
2030+
SHARED_STATE._hotCorner.updateState(config.mode === 'preview', true);
21022031
}
21032032

21042033
// Handle configuration changes
@@ -2346,22 +2275,6 @@ function RemoteFunctions(config = {}) {
23462275
});
23472276
}
23482277

2349-
// init the hot corner after the DOM is ready
2350-
if (document.readyState === 'loading') {
2351-
document.addEventListener('DOMContentLoaded', () => {
2352-
if (!_hotCorner && !isUnitTestWindow) {
2353-
_hotCorner = new HotCorner();
2354-
_hotCorner.updateState(config.mode === 'preview');
2355-
}
2356-
});
2357-
} else {
2358-
// or if the DOM is already ready then init directly
2359-
if (!_hotCorner && !isUnitTestWindow) {
2360-
_hotCorner = new HotCorner();
2361-
_hotCorner.updateState(config.mode === 'preview');
2362-
}
2363-
}
2364-
23652278
// we need to refresh the config once the load is completed
23662279
// this is important because messageBroker gets ready for use only when load fires
23672280
window.addEventListener('load', function() {

‎src/extensionsIntegrated/phoenix-pro/browser-context/hot-corners.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/*
2+
* Copyright (c) 2021 - present core.ai
3+
* SPDX-License-Identifier: LicenseRef-Proprietary
4+
*/
5+
/*global GLOBALS, strings, icons, cssStyles, config, LivePreviewView, SHARED_STATE*/
6+
7+
// we load this file in unit test window and dont want it to do anything unexpected in the unit test runner context
8+
const isUnitTestWindow = window.Phoenix && window.Phoenix.isTestWindow;
9+
10+
/**
11+
* hot corner class,
12+
* to switch to preview mode and back
13+
*/
14+
class HotCorner {
15+
constructor() {
16+
this.element = null;
17+
this.button = null;
18+
this.box = null;
19+
this.wasPreviewMode = false;
20+
this._setup();
21+
}
22+
23+
_setup() {
24+
const container = document.createElement("div");
25+
container.setAttribute(GLOBALS.PHCODE_INTERNAL_ATTR, "true");
26+
27+
const shadow = container.attachShadow({ mode: "open" });
28+
29+
const content = `
30+
<div class="phoenix-hot-corner">
31+
<button class="hot-corner-btn" title="${strings.togglePreviewMode}">
32+
${icons.playButton}
33+
</button>
34+
</div>`;
35+
36+
shadow.innerHTML = `<style>${cssStyles.hotCorner}</style>${content}`;
37+
38+
this.element = container;
39+
this.button = shadow.querySelector(".hot-corner-btn");
40+
this.hotCorner = shadow.querySelector(".phoenix-hot-corner");
41+
42+
this.button.addEventListener("click", () => {
43+
window._Brackets_MessageBroker.send({
44+
livePreviewEditEnabled: true,
45+
type: "hotCornerPreviewToggle"
46+
});
47+
});
48+
document.body.appendChild(this.element);
49+
}
50+
51+
updateState(isPreviewMode, showAnimation = false) {
52+
if (isPreviewMode) {
53+
this.button.classList.add("selected");
54+
55+
if (!this.wasPreviewMode && showAnimation && this.hotCorner) {
56+
this.hotCorner.classList.add("peek-animation");
57+
58+
setTimeout(() => {
59+
if (this.hotCorner) {
60+
this.hotCorner.classList.remove("peek-animation");
61+
}
62+
}, 1200);
63+
}
64+
} else {
65+
this.button.classList.remove("selected");
66+
}
67+
this.wasPreviewMode = isPreviewMode;
68+
}
69+
70+
remove() {
71+
if (this.element && this.element.parentNode) {
72+
this.element.parentNode.removeChild(this.element);
73+
}
74+
this.element = null;
75+
this.button = null;
76+
this.hotCorner = null;
77+
}
78+
}
79+
80+
// just a helper function so that its easier for us to export with LivePreviewView
81+
function udpateHotCornerState(isPreviewMode, showAnimation = false) {
82+
SHARED_STATE._hotCorner.updateState(config.mode === 'preview');
83+
}
84+
85+
// init the hot corner after the DOM is ready
86+
if (document.readyState === "loading") {
87+
document.addEventListener("DOMContentLoaded", () => {
88+
if (!SHARED_STATE._hotCorner && !isUnitTestWindow) {
89+
SHARED_STATE._hotCorner = new HotCorner();
90+
udpateHotCornerState(config.mode === "preview");
91+
}
92+
});
93+
} else {
94+
// or if the DOM is already ready then init directly
95+
if (!SHARED_STATE._hotCorner && !isUnitTestWindow) {
96+
SHARED_STATE._hotCorner = new HotCorner();
97+
udpateHotCornerState(config.mode === "preview");
98+
}
99+
}
100+
101+
// Register with LivePreviewView
102+
LivePreviewView.registerNodeMoreOptionsHandler("hot-corner", {
103+
udpateHotCornerState: udpateHotCornerState
104+
});

‎src/extensionsIntegrated/phoenix-pro/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ define(function (require, exports, module) {
2121
const AICode = require("text!./browser-context/ai-pro.js");
2222
const RulerLinesCode = require("text!./browser-context/ruler-lines.js");
2323
const DragAndDropCode = require("text!./browser-context/dragAndDrop.js");
24+
const HotCornersCode = require("text!./browser-context/hot-corners.js");
2425
const GenericToolsCode = require("text!./browser-context/generic-tools.js");
2526
const LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
2627

@@ -43,6 +44,7 @@ define(function (require, exports, module) {
4344
LiveDevProtocol.addRemoteFunctionScript("AICode", AICode);
4445
LiveDevProtocol.addRemoteFunctionScript("RulerLinesCode", RulerLinesCode);
4546
LiveDevProtocol.addRemoteFunctionScript("DragAndDrop", DragAndDropCode);
47+
LiveDevProtocol.addRemoteFunctionScript("HotCornersCode", HotCornersCode);
4648
LiveDevProtocol.addRemoteFunctionScript("GenericTools", GenericToolsCode);
4749
}
4850
_addRemoteScripts();

0 commit comments

Comments
 (0)