Skip to content

Commit c8d7382

Browse files
aboseabose
committed
refactor: cut element into lp plugin
1 parent 202d432 commit c8d7382

File tree

4 files changed

+63
-46
lines changed

4 files changed

+63
-46
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 4 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -360,28 +360,6 @@ function RemoteFunctions(config = {}) {
360360
});
361361
}
362362

363-
/**
364-
* this is for cut button, when user clicks on cut button we copy the element's source code
365-
* into the clipboard and remove it from the src code. read `_cutElementToClipboard` in `LivePreviewEdit.js`
366-
* @param {Event} event
367-
* @param {DOMElement} element - the element we need to cut
368-
*/
369-
function _handleCutOptionClick(event, element) {
370-
if (LivePreviewView.isElementEditable(element)) {
371-
const tagId = element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
372-
373-
window._Brackets_MessageBroker.send({
374-
livePreviewEditEnabled: true,
375-
element: element,
376-
event: event,
377-
tagId: Number(tagId),
378-
cut: true
379-
});
380-
} else {
381-
console.error("The TagID might be unavailable or the element tag is directly body or html");
382-
}
383-
}
384-
385363
/**
386364
* this is for copy button, similar to cut just we don't remove the elements source code
387365
* @param {Event} event
@@ -434,8 +412,6 @@ function RemoteFunctions(config = {}) {
434412
function handleOptionClick(e, action, element) {
435413
if (action === "edit-text") {
436414
startEditing(element);
437-
} else if (action === "cut") {
438-
_handleCutOptionClick(e, element);
439415
} else if (action === "copy") {
440416
_handleCopyOptionClick(e, element);
441417
} else if (action === "paste") {
@@ -447,7 +423,7 @@ function RemoteFunctions(config = {}) {
447423
return true;
448424
} else if(LivePreviewView.getNodeMoreOptionsHandler(action)) {
449425
const handler = LivePreviewView.getNodeMoreOptionsHandler(action);
450-
return handler.handleClick(e, element);
426+
return handler && handler.handleClick && handler.handleClick(e, element);
451427
}
452428
}
453429

@@ -1055,10 +1031,6 @@ function RemoteFunctions(config = {}) {
10551031

10561032
let content = `
10571033
<div class="more-options-dropdown">
1058-
<div class="dropdown-item" data-action="cut">
1059-
<span class="item-icon">${icons.cut}</span>
1060-
<span class="item-label">${strings.cut}</span>
1061-
</div>
10621034
<div class="dropdown-item" data-action="copy">
10631035
<span class="item-icon">${icons.copy}</span>
10641036
<span class="item-label">${strings.copy}</span>
@@ -1067,7 +1039,6 @@ function RemoteFunctions(config = {}) {
10671039
<span class="item-icon">${icons.paste}</span>
10681040
<span class="item-label">${strings.paste}</span>
10691041
</div>
1070-
<div class="dropdown-separator"></div>
10711042
${handlerItems}
10721043
</div>
10731044
`;
@@ -1102,14 +1073,9 @@ function RemoteFunctions(config = {}) {
11021073

11031074
// Check if any handler wants to handle this dropdown action
11041075
let handlerHandledIt = false;
1105-
for (const handler of getAllNodeMoreOptionsHandlers()) {
1106-
if (handler.handleDropdownClick) {
1107-
const handled = handler.handleDropdownClick(action, this);
1108-
if (handled) {
1109-
handlerHandledIt = true;
1110-
break; // Handler handled it, keep dropdown open
1111-
}
1112-
}
1076+
const handler = LivePreviewView.getNodeMoreOptionsHandler(action);
1077+
if (handler && handler.handleDropdownClick) {
1078+
handlerHandledIt = handler.handleDropdownClick(event, this.targetElement, this);
11131079
}
11141080

11151081
if (!handlerHandledIt) {

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,3 +150,54 @@ LivePreviewView.registerNodeMoreOptionsHandler("selectParent", {
150150
renderToolBoxItem: _renderSelectParentIcon,
151151
handleClick: _handleSelectParentOptionClick
152152
});
153+
154+
// cut, copy , paste option
155+
156+
function _renderCutDropdown() {
157+
return {
158+
listOrder: proConstants.DROPDOWN_ORDERING.CUT_PASTE_SEPARATOR,
159+
htmlContent: `<div class="dropdown-item" data-action="cut">
160+
<span class="item-icon">${icons.cut}</span>
161+
<span class="item-label">${strings.cut}</span>
162+
</div>`
163+
};
164+
}
165+
166+
/**
167+
* this is for cut button, when user clicks on cut button we copy the element's source code
168+
* into the clipboard and remove it from the src code. read `_cutElementToClipboard` in `LivePreviewEdit.js`
169+
* @param {Event} event
170+
* @param {DOMElement} element - the element we need to cut
171+
* @param {DOMElement} _dropdown
172+
*/
173+
function _handleCutOptionClick(event, element, _dropdown) {
174+
if (LivePreviewView.isElementEditable(element)) {
175+
const tagId = element.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
176+
177+
window._Brackets_MessageBroker.send({
178+
livePreviewEditEnabled: true,
179+
element: element,
180+
event: event,
181+
tagId: Number(tagId),
182+
cut: true
183+
});
184+
} else {
185+
console.error("The TagID might be unavailable or the element tag is directly body or html");
186+
}
187+
return true;
188+
}
189+
190+
LivePreviewView.registerNodeMoreOptionsHandler("cut", {
191+
renderDropdownItems: _renderCutDropdown,
192+
handleDropdownClick: _handleCutOptionClick
193+
});
194+
195+
196+
LivePreviewView.registerNodeMoreOptionsHandler("cutPasteSeparator", {
197+
renderDropdownItems: ()=>{
198+
return {
199+
listOrder: proConstants.DROPDOWN_ORDERING.CUT_PASTE_SEPARATOR,
200+
htmlContent: `<div class="dropdown-separator"></div>`
201+
};
202+
}
203+
});

‎src/extensionsIntegrated/phoenix-pro/browser-context/ruler-lines.js‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ function handleRulerLinesConfigChange(oldConfig, newConfig) {
253253
function renderRulerLinesDropdownItems() {
254254
return {
255255
listOrder: proConstants.DROPDOWN_ORDERING.SHOW_MEASUREMENTS,
256-
htmlContent: `<div class="dropdown-item" data-action="toggle-ruler-lines">
256+
htmlContent: `<div class="dropdown-item" data-action="RulerLines">
257257
<span class="item-icon">${icons.ruler}</span>
258258
<span class="item-label show-ruler-label">${strings.showRulerLines}</span>
259259
<span class="item-checkmark" style="visibility: ${_rulerLinesConfig.enabled ? 'visible' : 'hidden'}">${icons.check}</span>
@@ -262,11 +262,7 @@ function renderRulerLinesDropdownItems() {
262262
}
263263

264264
// Dropdown handler: handle clicks on ruler lines dropdown item
265-
function handleRulerLinesDropdownClick(action, dropdown) {
266-
if (action !== 'toggle-ruler-lines') {
267-
return false; // Not our action
268-
}
269-
265+
function handleRulerLinesDropdownClick(_event, _targetElement, dropdown) {
270266
_rulerLinesConfig.enabled = !_rulerLinesConfig.enabled;
271267

272268
window._Brackets_MessageBroker.send({
@@ -276,7 +272,7 @@ function handleRulerLinesDropdownClick(action, dropdown) {
276272
});
277273

278274
// Update checkmark
279-
const checkmark = dropdown._shadow.querySelector('[data-action="toggle-ruler-lines"] .item-checkmark');
275+
const checkmark = dropdown._shadow.querySelector('[data-action="RulerLines"] .item-checkmark');
280276
if (checkmark) {
281277
checkmark.style.visibility = _rulerLinesConfig.enabled ? 'visible' : 'hidden';
282278
}
@@ -290,7 +286,7 @@ function handleRulerLinesDropdownClick(action, dropdown) {
290286
dismissRulerLines();
291287
}
292288

293-
return true; // We handled it, keep dropdown open
289+
return true; // We handled it
294290
}
295291

296292
// Register scroll listener

‎src/extensionsIntegrated/phoenix-pro/remote-constants.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ define(function (require, exports, module) {
5757

5858
// this determines the ordering in which the toolbox items appear in the live preview.
5959
const DROPDOWN_ORDERING = {
60+
CUT: 10,
61+
COPY: 20,
62+
PASTE: 30,
63+
CUT_PASTE_SEPARATOR: 40,
6064
SHOW_MEASUREMENTS: 100
6165
};
6266

0 commit comments

Comments
 (0)