Skip to content

Commit 202d432

Browse files
aboseabose
committed
refactor: select parent as lp plugin
1 parent 13059ea commit 202d432

File tree

3 files changed

+82
-67
lines changed

3 files changed

+82
-67
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 11 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,9 @@ function RemoteFunctions(config = {}) {
192192
getAllNodeMoreOptionsHandlers: getAllNodeMoreOptionsHandlers,
193193
isElementEditable: isElementEditable,
194194
isElementInspectable: isElementInspectable,
195-
screenOffset: screenOffset
195+
screenOffset: screenOffset,
196+
selectElement: selectElement,
197+
brieflyDisableHoverListeners: brieflyDisableHoverListeners
196198
};
197199

198200
/**
@@ -422,32 +424,6 @@ function RemoteFunctions(config = {}) {
422424
}
423425
}
424426

425-
/**
426-
* this is for select-parent button
427-
* When user clicks on this option for a particular element, we get its parent element and trigger a click on it
428-
* @param {Event} event
429-
* @param {DOMElement} element - the HTML DOM element that was clicked
430-
*/
431-
function _handleSelectParentOptionClick(event, element) {
432-
if (!LivePreviewView.isElementEditable(element)) {
433-
return;
434-
}
435-
436-
const parentElement = element.parentElement;
437-
if (LivePreviewView.isElementEditable(parentElement)) {
438-
// Check if parent element has .click() method (HTML elements)
439-
// SVG elements don't have .click() method, so we use _selectElement for them
440-
if (typeof parentElement.click === 'function') {
441-
parentElement.click();
442-
} else {
443-
activateHoverLock();
444-
_selectElement(parentElement);
445-
}
446-
} else {
447-
console.error("The TagID might be unavailable or the parent element tag is directly body or html");
448-
}
449-
}
450-
451427
/**
452428
* This function will get triggered when from the multiple advance DOM buttons, one is clicked
453429
* this function just checks which exact button was clicked and call the required function
@@ -456,9 +432,7 @@ function RemoteFunctions(config = {}) {
456432
* @param {DOMElement} element - the selected DOM element
457433
*/
458434
function handleOptionClick(e, action, element) {
459-
if (action === "select-parent") {
460-
_handleSelectParentOptionClick(e, element);
461-
} else if (action === "edit-text") {
435+
if (action === "edit-text") {
462436
startEditing(element);
463437
} else if (action === "cut") {
464438
_handleCutOptionClick(e, element);
@@ -533,25 +507,6 @@ function RemoteFunctions(config = {}) {
533507
return true;
534508
}
535509

536-
/**
537-
* this function is to check if an element should show the 'select-parent' option
538-
* because we don't want to show the select parent option when the parent is directly the body/html tag
539-
* or the parent doesn't have the 'data-brackets-id'
540-
* @param {Element} element - DOM element to check
541-
* @returns {boolean} - true if we should show the select parent option otherwise false
542-
*/
543-
function _shouldShowSelectParentOption(element) {
544-
if(!LivePreviewView.isElementEditable(element)) {
545-
return false;
546-
}
547-
548-
const parentElement = element.parentElement;
549-
if(!LivePreviewView.isElementEditable(parentElement)) {
550-
return false;
551-
}
552-
return true;
553-
}
554-
555510
/**
556511
* Check if two rectangles overlap
557512
* @param {Object} rect1 - First rectangle {left, top, right, bottom}
@@ -853,7 +808,6 @@ function RemoteFunctions(config = {}) {
853808

854809
// check which options should be shown to determine box width
855810
const showEditTextOption = _shouldShowEditTextOption(this.element);
856-
const showSelectParentOption = _shouldShowSelectParentOption(this.element);
857811

858812
let content = `<div class="node-options">`;
859813

@@ -863,13 +817,6 @@ function RemoteFunctions(config = {}) {
863817
// ${ICONS.ai}
864818
// </span>`;
865819

866-
// Only include select parent option if element supports it
867-
if (showSelectParentOption) {
868-
content += `<span data-action="select-parent" class="lp-opt-select-parent" title="${strings.selectParent}">
869-
${icons.arrowUp}
870-
</span>`;
871-
}
872-
873820
// Only include edit text option if element supports it
874821
if (showEditTextOption) {
875822
content += `<span data-action="edit-text" class="lp-opt-edit-text" title="${strings.editText}">
@@ -3076,7 +3023,7 @@ function RemoteFunctions(config = {}) {
30763023
* this function is responsible to select an element in the live preview
30773024
* @param {Element} element - The DOM element to select
30783025
*/
3079-
function _selectElement(element) {
3026+
function selectElement(element) {
30803027
dismissNodeMoreOptionsBox();
30813028
dismissMoreOptionsDropdown();
30823029
dismissAIPromptBox();
@@ -3166,10 +3113,10 @@ function RemoteFunctions(config = {}) {
31663113
}
31673114

31683115
/**
3169-
* this function activates hover lock to prevent hover events
3116+
* this function disables hover listeners for 800ms to prevent ui conclicts
31703117
* Used when user performs click actions to avoid UI box conflicts
31713118
*/
3172-
function activateHoverLock() {
3119+
function brieflyDisableHoverListeners() {
31733120
if (_hoverLockTimer) {
31743121
clearTimeout(_hoverLockTimer);
31753122
}
@@ -3213,8 +3160,8 @@ function RemoteFunctions(config = {}) {
32133160
}
32143161

32153162
// call the selectElement as selectElement handles all the highlighting/boxes and all UI related stuff
3216-
_selectElement(element);
3217-
activateHoverLock();
3163+
selectElement(element);
3164+
brieflyDisableHoverListeners();
32183165
}
32193166

32203167
/**
@@ -3340,9 +3287,9 @@ function RemoteFunctions(config = {}) {
33403287
var foundValidElement = false;
33413288
for (i = 0; i < nodes.length; i++) {
33423289
if(LivePreviewView.isElementInspectable(nodes[i], true) && nodes[i].tagName !== "BR") {
3343-
// only call _selectElement if it's a different element to avoid unnecessary box recreation
3290+
// only call selectElement if it's a different element to avoid unnecessary box recreation
33443291
if (previouslyClickedElement !== nodes[i]) {
3345-
_selectElement(nodes[i]);
3292+
selectElement(nodes[i]);
33463293
}
33473294
foundValidElement = true;
33483295
break;

‎src/extensionsIntegrated/phoenix-pro/browser-context/generic-tools.js‎

Lines changed: 70 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function _renderDuplicateIcon(element, shadow) {
3636
htmlContent: `<span data-action="duplicate" title="${strings.duplicate}">${icons.duplicate}</span>`
3737
};
3838
}
39-
return '';
39+
return null;
4040
}
4141

4242
// Register with LivePreviewView
@@ -75,10 +75,78 @@ function _renderDeleteIcon(element, shadow) {
7575
htmlContent: `<span data-action="delete" title="${strings.delete}">${icons.trash}</span>`
7676
};
7777
}
78-
return '';
78+
return null;
7979
}
8080

8181
LivePreviewView.registerNodeMoreOptionsHandler("delete", {
8282
renderToolBoxItem: _renderDeleteIcon,
8383
handleClick: _handleDeleteOptionClick
8484
});
85+
86+
// select parent option
87+
88+
/**
89+
* this is for select-parent button
90+
* When user clicks on this option for a particular element, we get its parent element and trigger a click on it
91+
* @param {Event} event
92+
* @param {DOMElement} element - the HTML DOM element that was clicked
93+
*/
94+
function _handleSelectParentOptionClick(event, element) {
95+
if (!LivePreviewView.isElementEditable(element)) {
96+
return;
97+
}
98+
99+
const parentElement = element.parentElement;
100+
if (LivePreviewView.isElementEditable(parentElement)) {
101+
// Check if parent element has .click() method (HTML elements)
102+
// SVG elements don't have .click() method, so we use selectElement for them
103+
if (typeof parentElement.click === 'function') {
104+
parentElement.click();
105+
} else {
106+
LivePreviewView.brieflyDisableHoverListeners();
107+
LivePreviewView.selectElement(parentElement);
108+
}
109+
} else {
110+
console.error("The TagID might be unavailable or the parent element tag is directly body or html");
111+
}
112+
}
113+
114+
/**
115+
* this function is to check if an element should show the 'select-parent' option
116+
* because we don't want to show the select parent option when the parent is directly the body/html tag
117+
* or the parent doesn't have the 'data-brackets-id'
118+
* @param {Element} element - DOM element to check
119+
* @returns {boolean} - true if we should show the select parent option otherwise false
120+
*/
121+
function _shouldShowSelectParentOption(element) {
122+
if(!LivePreviewView.isElementEditable(element)) {
123+
return false;
124+
}
125+
126+
const parentElement = element.parentElement;
127+
if(!LivePreviewView.isElementEditable(parentElement)) {
128+
return false;
129+
}
130+
return true;
131+
}
132+
133+
function _renderSelectParentIcon(element, shadow) {
134+
if (element) {
135+
const showSelectParentOption = _shouldShowSelectParentOption(element);
136+
if(showSelectParentOption){
137+
return {
138+
listOrder: proConstants.TOOLBOX_ORDERING.SELECT_PARENT,
139+
htmlContent: `
140+
<span data-action="selectParent" class="lp-opt-select-parent" title="${strings.selectParent}">
141+
${icons.arrowUp}
142+
</span>`
143+
};
144+
}
145+
}
146+
return null;
147+
}
148+
149+
LivePreviewView.registerNodeMoreOptionsHandler("selectParent", {
150+
renderToolBoxItem: _renderSelectParentIcon,
151+
handleClick: _handleSelectParentOptionClick
152+
});

‎src/extensionsIntegrated/phoenix-pro/browser-context/hyperlink-editor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ function renderHyperlinkOptions(element, shadow) {
150150
</span>`
151151
};
152152
}
153-
return '';
153+
return null;
154154
}
155155

156156
LivePreviewView.registerNodeMoreOptionsHandler("HyperlinkEditor", {

0 commit comments

Comments
 (0)