Skip to content

Commit 497424e

Browse files
aboseabose
committed
refactor: remote strings as remote fn constants instead of config
1 parent 3cd9cbf commit 497424e

File tree

5 files changed

+70
-68
lines changed

5 files changed

+70
-68
lines changed

‎src/LiveDevelopment/BrowserScripts/RemoteFunctions.js‎

Lines changed: 30 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
*/
2121

2222
/*jslint forin: true */
23-
/*global Node, MessageEvent */
23+
/*global Node, MessageEvent, strings */
2424
/*theseus instrument: false */
2525

2626
/**
@@ -81,8 +81,6 @@ function RemoteFunctions(config = {}) {
8181

8282
// initialized from config, defaults to true if not set
8383
let imageGallerySelected = config.imageGalleryState !== undefined ? config.imageGalleryState : true;
84-
config.strings = config.strings || {};
85-
8684

8785
var req, timeout;
8886
var animateHighlight = function (time) {
@@ -1755,46 +1753,46 @@ function RemoteFunctions(config = {}) {
17551753

17561754
// @abose @devansh
17571755
// hiding it for now as AI is not yet ready
1758-
// content += `<span data-action="ai" title="${config.strings.ai}">
1756+
// content += `<span data-action="ai" title="${strings.ai}">
17591757
// ${ICONS.ai}
17601758
// </span>`;
17611759

17621760
// Only include select parent option if element supports it
17631761
if (showSelectParentOption) {
1764-
content += `<span data-action="select-parent" title="${config.strings.selectParent}">
1762+
content += `<span data-action="select-parent" title="${strings.selectParent}">
17651763
${config.icons.arrowUp}
17661764
</span>`;
17671765
}
17681766

17691767
// Only include edit text option if element supports it
17701768
if (showEditTextOption) {
1771-
content += `<span data-action="edit-text" title="${config.strings.editText}">
1769+
content += `<span data-action="edit-text" title="${strings.editText}">
17721770
${config.icons.edit}
17731771
</span>`;
17741772
}
17751773

17761774
// if its a link element, we show the edit hyperlink icon
17771775
if (this.element && this.element.tagName.toLowerCase() === 'a') {
1778-
content += `<span data-action="edit-hyperlink" title="${config.strings.editHyperlink}">
1776+
content += `<span data-action="edit-hyperlink" title="${strings.editHyperlink}">
17791777
${config.icons.link}
17801778
</span>`;
17811779
}
17821780

17831781
// if its an image element, we show the image gallery icon
17841782
if (this.element && this.element.tagName.toLowerCase() === 'img') {
1785-
content += `<span data-action="image-gallery" title="${config.strings.imageGallery}">
1783+
content += `<span data-action="image-gallery" title="${strings.imageGallery}">
17861784
${config.icons.imageGallery}
17871785
</span>`;
17881786
}
17891787

17901788
// Always include duplicate and delete options
1791-
content += `<span data-action="duplicate" title="${config.strings.duplicate}">
1789+
content += `<span data-action="duplicate" title="${strings.duplicate}">
17921790
${config.icons.duplicate}
17931791
</span>
1794-
<span data-action="delete" title="${config.strings.delete}">
1792+
<span data-action="delete" title="${strings.delete}">
17951793
${config.icons.trash}
17961794
</span>
1797-
<span data-action="more-options" title="${config.strings.moreOptions}">
1795+
<span data-action="more-options" title="${strings.moreOptions}">
17981796
${config.icons.verticalEllipsis}
17991797
</span>
18001798
</div>`;
@@ -1896,7 +1894,7 @@ function RemoteFunctions(config = {}) {
18961894
${config.styles.hyperlinkEditor}
18971895
</style>
18981896
<div class="hyperlink-input-box">
1899-
<div class="link-icon" title="${currentHref.trim() || config.strings.hyperlinkNoHref}">
1897+
<div class="link-icon" title="${currentHref.trim() || strings.hyperlinkNoHref}">
19001898
${config.icons.link}
19011899
</div>
19021900
<input type="text" value="${currentHref.trim()}" placeholder="https://example.com" spellcheck="false" />
@@ -2116,20 +2114,20 @@ function RemoteFunctions(config = {}) {
21162114
<div class="more-options-dropdown">
21172115
<div class="dropdown-item" data-action="cut">
21182116
<span class="item-icon">${config.icons.cut}</span>
2119-
<span class="item-label">${config.strings.cut}</span>
2117+
<span class="item-label">${strings.cut}</span>
21202118
</div>
21212119
<div class="dropdown-item" data-action="copy">
21222120
<span class="item-icon">${config.icons.copy}</span>
2123-
<span class="item-label">${config.strings.copy}</span>
2121+
<span class="item-label">${strings.copy}</span>
21242122
</div>
21252123
<div class="dropdown-item" data-action="paste">
21262124
<span class="item-icon">${config.icons.paste}</span>
2127-
<span class="item-label">${config.strings.paste}</span>
2125+
<span class="item-label">${strings.paste}</span>
21282126
</div>
21292127
<div class="dropdown-separator"></div>
21302128
<div class="dropdown-item" data-action="toggle-ruler-lines">
21312129
<span class="item-icon">${config.icons.ruler}</span>
2132-
<span class="item-label show-ruler-label">${config.strings.showRulerLines}</span>
2130+
<span class="item-label show-ruler-label">${strings.showRulerLines}</span>
21332131
<span class="item-checkmark" style="visibility: ${config.showRulerLines ? 'visible' : 'hidden'}">${config.icons.check}</span>
21342132
</div>
21352133
</div>
@@ -2372,7 +2370,7 @@ function RemoteFunctions(config = {}) {
23722370
<div class="phoenix-ai-prompt-input-container">
23732371
<textarea
23742372
class="phoenix-ai-prompt-textarea"
2375-
placeholder="${config.strings.aiPromptPlaceholder}"
2373+
placeholder="${strings.aiPromptPlaceholder}"
23762374
></textarea>
23772375
</div>
23782376
<div class="phoenix-ai-bottom-controls">
@@ -2619,31 +2617,31 @@ function RemoteFunctions(config = {}) {
26192617
${config.icons.imageGallery}
26202618
</div>
26212619
<div class='phoenix-image-gallery-header-text'>
2622-
${config.strings.imageGallery}
2620+
${strings.imageGallery}
26232621
</div>
26242622
</div>
26252623
26262624
<div class="phoenix-image-gallery-search-container">
26272625
<div class="search-wrapper">
2628-
<button class="search-icon" title="${config.strings.imageGallerySearchButton}">${config.icons.search}</button>
2626+
<button class="search-icon" title="${strings.imageGallerySearchButton}">${config.icons.search}</button>
26292627
<input
26302628
type="text"
2631-
placeholder="${config.strings.imageGallerySearchPlaceholder}"
2629+
placeholder="${strings.imageGallerySearchPlaceholder}"
26322630
/>
26332631
</div>
26342632
</div>
26352633
26362634
<div class='phoenix-image-gallery-upload-container'>
2637-
<button title="${config.strings.imageGallerySelectFromComputerTooltip}">${config.icons.selectImageFromComputer} ${config.strings.imageGallerySelectFromComputer}</button>
2635+
<button title="${strings.imageGallerySelectFromComputerTooltip}">${config.icons.selectImageFromComputer} ${strings.imageGallerySelectFromComputer}</button>
26382636
<input type="file" class="phoenix-file-input" accept="image/*" style="display: none !important;">
26392637
</div>
26402638
26412639
<div class='phoenix-image-gallery-right-buttons'>
2642-
<button class='phoenix-image-gallery-download-folder-button' title="${config.strings.imageGallerySelectDownloadFolder}">
2640+
<button class='phoenix-image-gallery-download-folder-button' title="${strings.imageGallerySelectDownloadFolder}">
26432641
${config.icons.folderSettings}
26442642
</button>
26452643
2646-
<button class='phoenix-image-gallery-close-button' title="${config.strings.imageGalleryClose}">
2644+
<button class='phoenix-image-gallery-close-button' title="${strings.imageGalleryClose}">
26472645
${config.icons.close}
26482646
</button>
26492647
</div>
@@ -2652,7 +2650,7 @@ function RemoteFunctions(config = {}) {
26522650
<div class="phoenix-image-gallery-nav left">&#8249;</div>
26532651
<div class="phoenix-image-gallery-strip">
26542652
<div class="phoenix-image-gallery-row phoenix-image-gallery-loading">
2655-
${config.strings.imageGalleryLoadingInitial}
2653+
${strings.imageGalleryLoadingInitial}
26562654
</div>
26572655
</div>
26582656
<div class="phoenix-image-gallery-nav right">&#8250;</div>
@@ -2725,7 +2723,7 @@ function RemoteFunctions(config = {}) {
27252723
this._updateSearchInput(searchQuery);
27262724
this._updateCache(searchQuery, data, append);
27272725
} else if (!append) {
2728-
this._showError(config.strings.imageGalleryNoImages);
2726+
this._showError(strings.imageGalleryNoImages);
27292727
}
27302728

27312729
if (append) {
@@ -2736,7 +2734,7 @@ function RemoteFunctions(config = {}) {
27362734
.catch(error => {
27372735
console.error('Failed to fetch images:', error);
27382736
if (!append) {
2739-
this._showError(config.strings.imageGalleryLoadError);
2737+
this._showError(strings.imageGalleryLoadError);
27402738
} else {
27412739
this._isLoadingMore = false;
27422740
this._hideLoadingMore();
@@ -2905,7 +2903,7 @@ function RemoteFunctions(config = {}) {
29052903
const rowElement = this._shadow.querySelector('.phoenix-image-gallery-row');
29062904
if (!rowElement) { return; }
29072905

2908-
rowElement.innerHTML = config.strings.imageGalleryLoadingInitial;
2906+
rowElement.innerHTML = strings.imageGalleryLoadingInitial;
29092907
rowElement.className = 'phoenix-image-gallery-row phoenix-image-gallery-loading';
29102908

29112909
this._handleNavButtonsDisplay('hidden');
@@ -2918,7 +2916,7 @@ function RemoteFunctions(config = {}) {
29182916
// when loading more images we need to show the message at the end of the image ribbon
29192917
const loadingIndicator = window.document.createElement('div');
29202918
loadingIndicator.className = 'phoenix-loading-more';
2921-
loadingIndicator.textContent = config.strings.imageGalleryLoadingMore;
2919+
loadingIndicator.textContent = strings.imageGalleryLoadingMore;
29222920
rowElement.appendChild(loadingIndicator);
29232921
},
29242922

@@ -3113,7 +3111,7 @@ function RemoteFunctions(config = {}) {
31133111
// download icon
31143112
const downloadIcon = window.document.createElement('div');
31153113
downloadIcon.className = 'phoenix-download-icon';
3116-
downloadIcon.title = config.strings.imageGalleryUseImage;
3114+
downloadIcon.title = strings.imageGalleryUseImage;
31173115
downloadIcon.innerHTML = config.icons.downloadImage;
31183116

31193117
// when the image is clicked we download the image
@@ -3871,7 +3869,7 @@ function RemoteFunctions(config = {}) {
38713869

38723870
const content = `
38733871
<div class="phoenix-dialog-overlay">
3874-
<div class="phoenix-dialog-message-bar">${config.strings.imageGalleryDialogOverlayMessage}</div>
3872+
<div class="phoenix-dialog-message-bar">${strings.imageGalleryDialogOverlayMessage}</div>
38753873
</div>
38763874
`;
38773875

@@ -4898,8 +4896,8 @@ function RemoteFunctions(config = {}) {
48984896
let _toastTimeout = null;
48994897

49004898
const TOAST_TYPE_MAPPING = {
4901-
notEditable: config.strings.toastNotEditable,
4902-
copyFirstTime: config.strings.toastCopyFirstTime
4899+
notEditable: strings.toastNotEditable,
4900+
copyFirstTime: strings.toastCopyFirstTime
49034901
};
49044902

49054903
/**

‎src/LiveDevelopment/RemoteHelper.js‎

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -34,40 +34,6 @@
3434
*/
3535

3636
define(function (require, exports, module) {
37-
const Strings = require("strings"); // todo move to code construction logic
38-
39-
// list of all the strings that are used in the remoteFunctions file
40-
const remoteStrings = {
41-
selectParent: Strings.LIVE_DEV_MORE_OPTIONS_SELECT_PARENT,
42-
editText: Strings.LIVE_DEV_MORE_OPTIONS_EDIT_TEXT,
43-
editHyperlink: Strings.LIVE_DEV_MORE_OPTIONS_EDIT_HYPERLINK,
44-
hyperlinkNoHref: Strings.LIVE_DEV_HYPERLINK_NO_HREF,
45-
duplicate: Strings.LIVE_DEV_MORE_OPTIONS_DUPLICATE,
46-
delete: Strings.LIVE_DEV_MORE_OPTIONS_DELETE,
47-
ai: Strings.LIVE_DEV_MORE_OPTIONS_AI,
48-
imageGallery: Strings.LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY,
49-
moreOptions: Strings.LIVE_DEV_MORE_OPTIONS_MORE,
50-
cut: Strings.LIVE_DEV_MORE_OPTIONS_CUT,
51-
copy: Strings.LIVE_DEV_MORE_OPTIONS_COPY,
52-
paste: Strings.LIVE_DEV_MORE_OPTIONS_PASTE,
53-
showRulerLines: Strings.LIVE_PREVIEW_SHOW_RULER_LINES,
54-
aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER,
55-
imageGalleryUseImage: Strings.LIVE_DEV_IMAGE_GALLERY_USE_IMAGE,
56-
imageGallerySelectDownloadFolder: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_DOWNLOAD_FOLDER,
57-
imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER,
58-
imageGallerySearchButton: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON,
59-
imageGalleryLoadingInitial: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL,
60-
imageGalleryLoadingMore: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_MORE,
61-
imageGalleryNoImages: Strings.LIVE_DEV_IMAGE_GALLERY_NO_IMAGES,
62-
imageGalleryLoadError: Strings.LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR,
63-
imageGalleryClose: Strings.LIVE_DEV_IMAGE_GALLERY_CLOSE,
64-
imageGallerySelectFromComputer: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER,
65-
imageGallerySelectFromComputerTooltip: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER_TOOLTIP,
66-
imageGalleryDialogOverlayMessage: Strings.LIVE_DEV_IMAGE_GALLERY_DIALOG_OVERLAY_MESSAGE,
67-
toastNotEditable: Strings.LIVE_DEV_TOAST_NOT_EDITABLE,
68-
toastCopyFirstTime: Strings.LIVE_DEV_COPY_TOAST_MESSAGE
69-
};
70-
7137
// these are all the icons that are used in the remote functions file
7238
const remoteIcons = {
7339
ai: `
@@ -1179,7 +1145,6 @@ define(function (require, exports, module) {
11791145
hotCorner: hotCornerStyles
11801146
};
11811147

1182-
exports.remoteStrings = remoteStrings;
11831148
exports.remoteIcons = remoteIcons;
11841149
exports.remoteStyles = remoteStyles;
11851150
});

‎src/LiveDevelopment/main.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@ define(function main(require, exports, module) {
9191
elemHighlights: "hover", // default value, this will get updated when the extension loads
9292
showRulerLines: false, // default value, this will get updated when the extension loads
9393
imageGalleryState: _getImageGalleryState(), // image gallery selected state
94-
strings: RemoteHelper.remoteStrings,
9594
icons: RemoteHelper.remoteIcons,
9695
styles: RemoteHelper.remoteStyles
9796
};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
define(function (require, exports, module) {
77
require("./LivePreviewEdit");
8+
require("./remote-constants");
89

910
const AppInit = require("utils/AppInit"),
1011
Strings = require("strings");

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
define(function (require, exports, module) {
2+
const Strings = require("strings");
3+
const LiveDevProtocol = require("LiveDevelopment/MultiBrowserImpl/protocol/LiveDevProtocol");
4+
5+
// list of all the strings that are used in the remoteFunctions file
6+
const remoteStrings = {
7+
selectParent: Strings.LIVE_DEV_MORE_OPTIONS_SELECT_PARENT,
8+
editText: Strings.LIVE_DEV_MORE_OPTIONS_EDIT_TEXT,
9+
editHyperlink: Strings.LIVE_DEV_MORE_OPTIONS_EDIT_HYPERLINK,
10+
hyperlinkNoHref: Strings.LIVE_DEV_HYPERLINK_NO_HREF,
11+
duplicate: Strings.LIVE_DEV_MORE_OPTIONS_DUPLICATE,
12+
delete: Strings.LIVE_DEV_MORE_OPTIONS_DELETE,
13+
ai: Strings.LIVE_DEV_MORE_OPTIONS_AI,
14+
imageGallery: Strings.LIVE_DEV_MORE_OPTIONS_IMAGE_GALLERY,
15+
moreOptions: Strings.LIVE_DEV_MORE_OPTIONS_MORE,
16+
cut: Strings.LIVE_DEV_MORE_OPTIONS_CUT,
17+
copy: Strings.LIVE_DEV_MORE_OPTIONS_COPY,
18+
paste: Strings.LIVE_DEV_MORE_OPTIONS_PASTE,
19+
showRulerLines: Strings.LIVE_PREVIEW_SHOW_RULER_LINES,
20+
aiPromptPlaceholder: Strings.LIVE_DEV_AI_PROMPT_PLACEHOLDER,
21+
imageGalleryUseImage: Strings.LIVE_DEV_IMAGE_GALLERY_USE_IMAGE,
22+
imageGallerySelectDownloadFolder: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_DOWNLOAD_FOLDER,
23+
imageGallerySearchPlaceholder: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_PLACEHOLDER,
24+
imageGallerySearchButton: Strings.LIVE_DEV_IMAGE_GALLERY_SEARCH_BUTTON,
25+
imageGalleryLoadingInitial: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_INITIAL,
26+
imageGalleryLoadingMore: Strings.LIVE_DEV_IMAGE_GALLERY_LOADING_MORE,
27+
imageGalleryNoImages: Strings.LIVE_DEV_IMAGE_GALLERY_NO_IMAGES,
28+
imageGalleryLoadError: Strings.LIVE_DEV_IMAGE_GALLERY_LOAD_ERROR,
29+
imageGalleryClose: Strings.LIVE_DEV_IMAGE_GALLERY_CLOSE,
30+
imageGallerySelectFromComputer: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER,
31+
imageGallerySelectFromComputerTooltip: Strings.LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER_TOOLTIP,
32+
imageGalleryDialogOverlayMessage: Strings.LIVE_DEV_IMAGE_GALLERY_DIALOG_OVERLAY_MESSAGE,
33+
toastNotEditable: Strings.LIVE_DEV_TOAST_NOT_EDITABLE,
34+
toastCopyFirstTime: Strings.LIVE_DEV_COPY_TOAST_MESSAGE
35+
};
36+
37+
LiveDevProtocol.addRemoteFunctionConstantsScript("strings",
38+
`const strings = ${JSON.stringify(remoteStrings)};`);
39+
});

0 commit comments

Comments
 (0)