Skip to content

Commit 63d1a7b

Browse files
devvaannshdevvaannsh
committed
feat: move all strings to strings.js file
1 parent d4491e1 commit 63d1a7b

File tree

6 files changed

+103
-67
lines changed

6 files changed

+103
-67
lines changed

‎src/extensionsIntegrated/CustomSnippets/UIHelper.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
/* eslint-disable no-invalid-this */
2222
define(function (require, exports, module) {
2323
const Global = require("./global");
24+
const Strings = require("strings");
2425

2526
/**
2627
* this is a generic function to show error messages for input fields
@@ -187,7 +188,7 @@ define(function (require, exports, module) {
187188
const wrapperId = isEditForm ? "edit-abbr-box-wrapper" : "abbr-box-wrapper";
188189
const errorId = isEditForm ? "edit-abbreviation-duplicate-error" : "abbreviation-duplicate-error";
189190

190-
showError(inputId, wrapperId, `A snippet with abbreviation "${abbreviation}" already exists.`, errorId);
191+
showError(inputId, wrapperId, Strings.CUSTOM_SNIPPETS_DUPLICATE_ERROR.replace("{0}", abbreviation), errorId);
191192
}
192193

193194
/**

‎src/extensionsIntegrated/CustomSnippets/helper.js‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ define(function (require, exports, module) {
2222
const StringMatch = require("utils/StringMatch");
2323
const Global = require("./global");
2424
const UIHelper = require("./UIHelper");
25+
const Strings = require("strings");
2526

2627
// list of all the navigation and function keys that are allowed inside the input fields
2728
const ALLOWED_NAVIGATION_KEYS = [
@@ -389,7 +390,7 @@ define(function (require, exports, module) {
389390
}
390391

391392
// the codehints related style is written in brackets_patterns_override.less file
392-
let $icon = $(`<a href="#" class="custom-snippet-code-hint" style="text-decoration: none">Snippet</a>`);
393+
let $icon = $(`<a href="#" class="custom-snippet-code-hint" style="text-decoration: none">${Strings.CUSTOM_SNIPPETS_HINT_LABEL}</a>`);
393394
$hint.append($icon);
394395

395396
if (description && description.trim() !== "") {
@@ -620,7 +621,7 @@ define(function (require, exports, module) {
620621
const wrapperId = isEditForm ? "edit-abbr-box-wrapper" : "abbr-box-wrapper";
621622
const errorId = isEditForm ? "edit-abbreviation-space-error" : "abbreviation-space-error";
622623

623-
UIHelper.showError(inputId, wrapperId, "Space is not accepted as a valid abbreviation character.", errorId);
624+
UIHelper.showError(inputId, wrapperId, Strings.CUSTOM_SNIPPETS_SPACE_ERROR, errorId);
624625
return;
625626
}
626627

@@ -638,7 +639,7 @@ define(function (require, exports, module) {
638639
const wrapperId = isEditForm ? "edit-abbr-box-wrapper" : "abbr-box-wrapper";
639640
const errorId = isEditForm ? "edit-abbreviation-length-error" : "abbreviation-length-error";
640641

641-
UIHelper.showError(inputId, wrapperId, "Abbreviation cannot be more than 30 characters.", errorId);
642+
UIHelper.showError(inputId, wrapperId, Strings.CUSTOM_SNIPPETS_ABBR_LENGTH_ERROR, errorId);
642643
}
643644
}
644645

@@ -667,7 +668,7 @@ define(function (require, exports, module) {
667668
const wrapperId = isEditForm ? "edit-desc-box-wrapper" : "desc-box-wrapper";
668669
const errorId = isEditForm ? "edit-description-length-error" : "description-length-error";
669670

670-
UIHelper.showError(inputId, wrapperId, "Description cannot be more than 80 characters.", errorId);
671+
UIHelper.showError(inputId, wrapperId, Strings.CUSTOM_SNIPPETS_DESC_LENGTH_ERROR, errorId);
671672
}
672673
}
673674

@@ -730,15 +731,10 @@ define(function (require, exports, module) {
730731
// Prioritize length error over space error if both occurred
731732
if (wasTruncated) {
732733
const errorId = isEditForm ? "edit-abbreviation-paste-length-error" : "abbreviation-paste-length-error";
733-
UIHelper.showError(inputId, wrapperId, "Abbreviation cannot be more than 30 characters.", errorId);
734+
UIHelper.showError(inputId, wrapperId, Strings.CUSTOM_SNIPPETS_ABBR_LENGTH_ERROR, errorId);
734735
} else if (hadSpaces) {
735736
const errorId = isEditForm ? "edit-abbreviation-paste-space-error" : "abbreviation-paste-space-error";
736-
UIHelper.showError(
737-
inputId,
738-
wrapperId,
739-
"Space is not accepted as a valid abbreviation character.",
740-
errorId
741-
);
737+
UIHelper.showError(inputId, wrapperId, Strings.CUSTOM_SNIPPETS_SPACE_ERROR, errorId);
742738
}
743739
}
744740

@@ -806,7 +802,7 @@ define(function (require, exports, module) {
806802
const wrapperId = isEditForm ? "edit-desc-box-wrapper" : "desc-box-wrapper";
807803
const errorId = isEditForm ? "edit-description-paste-length-error" : "description-paste-length-error";
808804

809-
UIHelper.showError(inputId, wrapperId, "Description cannot be more than 80 characters.", errorId);
805+
UIHelper.showError(inputId, wrapperId, Strings.CUSTOM_SNIPPETS_DESC_LENGTH_ERROR, errorId);
810806
}
811807

812808
// Determine which save button to toggle based on input field

‎src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<div id="custom-snippets-panel" class="custom-snippets-panel bottom-panel vert-resizable top-resizer no-focus">
22
<div id="custom-snippets-toolbar" class="toolbar simple-toolbar-layout">
33
<div class="title-wrapper">
4-
<span class="title toolbar-title">Custom Snippets <span id="snippets-count" class="snippets-count"></span></span>
4+
<span class="title toolbar-title">{{Strings.CUSTOM_SNIPPETS_PANEL_TITLE}} <span id="snippets-count" class="snippets-count"></span></span>
55
<div id="add-new-snippet-btn" class="custom-snippet-btn">
6-
<button title="Add new snippet">
6+
<button title="{{Strings.CUSTOM_SNIPPETS_ADD_NEW_TITLE}}">
77
<i class="fas fa-plus"></i>
88
</button>
99
</div>
1010
<div id="back-to-list-menu-btn" class="custom-snippet-btn hidden">
11-
<button title="Back to snippets list">
11+
<button title="{{Strings.CUSTOM_SNIPPETS_BACK_TO_LIST_TITLE}}">
1212
<i class="back-btn-left-icon fas fa-chevron-left"></i>
13-
<span class="back-btn-text">Back</span>
13+
<span class="back-btn-text">{{Strings.CUSTOM_SNIPPETS_BACK}}</span>
1414
</button>
1515
</div>
1616
</div>
1717
<div class="buttons">
1818
<div id="filter-snippets-panel" class="filter-snippets-panel">
19-
<input id="filter-snippets-input" type="text" placeholder="Filter..." autocomplete="off" />
19+
<input id="filter-snippets-input" type="text" placeholder="{{Strings.CUSTOM_SNIPPETS_FILTER_PLACEHOLDER}}" autocomplete="off" />
2020
</div>
2121
<a href="#" class="close" id="close-custom-snippets-panel-btn">&times;</a>
2222
</div>
@@ -26,17 +26,17 @@
2626
<!--this will display the list of all the already existing snippets-->
2727
<div id="custom-snippets-list" class="custom-snippes-list">
2828
<div id="no-snippets-wrapper" class="no-snippets-wrapper">
29-
<div id="no-snippets-message">No custom snippets added yet!</div>
29+
<div id="no-snippets-message">{{Strings.CUSTOM_SNIPPETS_NO_SNIPPETS_MESSAGE}}</div>
3030
<div id="add-snippet-btn">
31-
<button>Add Snippet</button>
31+
<button>{{Strings.CUSTOM_SNIPPETS_ADD_SNIPPET_BTN}}</button>
3232
</div>
3333
</div>
3434

3535
<div id="snippets-list-header" class="snippets-list-header">
36-
<div id="snippet-abbr-header">Abbreviation</div>
37-
<div id="snippet-template-header">Template Text</div>
38-
<div id="snippet-description-header">Description</div>
39-
<div id="snippet-file-extension-header">File Extension</div>
36+
<div id="snippet-abbr-header">{{Strings.CUSTOM_SNIPPETS_HEADER_ABBREVIATION}}</div>
37+
<div id="snippet-template-header">{{Strings.CUSTOM_SNIPPETS_HEADER_TEMPLATE}}</div>
38+
<div id="snippet-description-header">{{Strings.CUSTOM_SNIPPETS_HEADER_DESCRIPTION}}</div>
39+
<div id="snippet-file-extension-header">{{Strings.CUSTOM_SNIPPETS_HEADER_FILE_EXTENSION}}</div>
4040
<div id="snippet-actions-header"></div>
4141
</div>
4242

@@ -69,9 +69,9 @@
6969
<div id="abbr-box-wrapper" class="field-wrapper">
7070
<div class="field-row">
7171
<label for="abbr-box"
72-
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
72+
title="{{Strings.CUSTOM_SNIPPETS_ABBR_INPUT_TOOLTIP}}"
7373
data-placement="top">
74-
Abbreviation:
74+
{{Strings.CUSTOM_SNIPPETS_ABBREVIATION_LABEL}}
7575
</label>
7676
<input id="abbr-box" type="text" placeholder="clg" autocomplete="off" />
7777
</div>
@@ -80,39 +80,39 @@
8080
<div id="desc-box-wrapper" class="field-wrapper">
8181
<div class="field-row">
8282
<label for="desc-box"
83-
title="Brief description of what this snippet does. Leave empty if no description needed."
83+
title="{{Strings.CUSTOM_SNIPPETS_DESC_INPUT_TOOLTIP}}"
8484
data-placement="top">
85-
Description:
85+
{{Strings.CUSTOM_SNIPPETS_DESCRIPTION_LABEL}}
8686
</label>
87-
<input id="desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
87+
<input id="desc-box" type="text" placeholder="{{Strings.CUSTOM_SNIPPETS_DESC_PLACEHOLDER}}" autocomplete="off" />
8888
</div>
8989
</div>
9090

9191
<div id="file-extn-box-wrapper" class="field-wrapper">
9292
<div class="field-row">
9393
<label for="file-extn-box"
94-
title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
94+
title="{{Strings.CUSTOM_SNIPPETS_FILE_EXT_INPUT_TOOLTIP}}"
9595
data-placement="top">
96-
File Extension:
96+
{{Strings.CUSTOM_SNIPPETS_FILE_EXTENSION_LABEL}}
9797
</label>
98-
<input id="file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
98+
<input id="file-extn-box" type="text" placeholder="{{Strings.CUSTOM_SNIPPETS_FILE_EXT_PLACEHOLDER}}" autocomplete="off" />
9999
</div>
100100
</div>
101101

102102
<div id="template-text-box-wrapper" class="field-wrapper">
103103
<div class="field-row">
104104
<label for="template-text-box"
105-
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
105+
title="{{Strings.CUSTOM_SNIPPETS_TEMPLATE_INPUT_TOOLTIP}}"
106106
data-placement="top">
107-
Template Text:
107+
{{Strings.CUSTOM_SNIPPETS_TEMPLATE_TEXT_LABEL}}
108108
</label>
109-
<textarea id="template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
109+
<textarea id="template-text-box" placeholder="{{Strings.CUSTOM_SNIPPETS_TEMPLATE_PLACEHOLDER}}" autocomplete="off"></textarea>
110110
</div>
111111
</div>
112112

113113
<div id="add-custom-snippet-panel-buttons">
114-
<button id="cancel-custom-snippet-btn" class="dialog-button btn">Cancel</button>
115-
<button id="save-custom-snippet-btn" class="dialog-button btn primary" disabled>Save</button>
114+
<button id="cancel-custom-snippet-btn" class="dialog-button btn">{{Strings.CUSTOM_SNIPPETS_CANCEL}}</button>
115+
<button id="save-custom-snippet-btn" class="dialog-button btn primary" disabled>{{Strings.CUSTOM_SNIPPETS_SAVE}}</button>
116116
</div>
117117
</div>
118118

@@ -121,9 +121,9 @@
121121
<div id="edit-abbr-box-wrapper" class="field-wrapper">
122122
<div class="field-row">
123123
<label for="edit-abbr-box"
124-
title="Enter a short abbreviation (e.g., 'clg', 'fn', 'div'). This is what you'll type to trigger the snippet."
124+
title="{{Strings.CUSTOM_SNIPPETS_ABBR_INPUT_TOOLTIP}}"
125125
data-placement="top">
126-
Abbreviation:
126+
{{Strings.CUSTOM_SNIPPETS_ABBREVIATION_LABEL}}
127127
</label>
128128
<input id="edit-abbr-box" type="text" placeholder="clg" autocomplete="off" />
129129
</div>
@@ -132,39 +132,39 @@
132132
<div id="edit-desc-box-wrapper" class="field-wrapper">
133133
<div class="field-row">
134134
<label for="edit-desc-box"
135-
title="Brief description of what this snippet does. Leave empty if no description needed."
135+
title="{{Strings.CUSTOM_SNIPPETS_DESC_INPUT_TOOLTIP}}"
136136
data-placement="top">
137-
Description:
137+
{{Strings.CUSTOM_SNIPPETS_DESCRIPTION_LABEL}}
138138
</label>
139-
<input id="edit-desc-box" type="text" placeholder="console log shortcut (optional)" autocomplete="off" />
139+
<input id="edit-desc-box" type="text" placeholder="{{Strings.CUSTOM_SNIPPETS_DESC_PLACEHOLDER}}" autocomplete="off" />
140140
</div>
141141
</div>
142142

143143
<div id="edit-file-extn-box-wrapper" class="field-wrapper">
144144
<div class="field-row">
145145
<label for="edit-file-extn-box"
146-
title="Specify file types where this snippet should be available (e.g., '.js', '.html', '.css'). Leave empty to make it available for all files."
146+
title="{{Strings.CUSTOM_SNIPPETS_FILE_EXT_INPUT_TOOLTIP}}"
147147
data-placement="top">
148-
File Extension:
148+
{{Strings.CUSTOM_SNIPPETS_FILE_EXTENSION_LABEL}}
149149
</label>
150-
<input id="edit-file-extn-box" type="text" placeholder="Leave empty for all files, or specify like .js, .html" autocomplete="off" />
150+
<input id="edit-file-extn-box" type="text" placeholder="{{Strings.CUSTOM_SNIPPETS_FILE_EXT_PLACEHOLDER}}" autocomplete="off" />
151151
</div>
152152
</div>
153153

154154
<div id="edit-template-text-box-wrapper" class="field-wrapper">
155155
<div class="field-row">
156156
<label for="edit-template-text-box"
157-
title="The actual code that will be inserted. Use ${1}, ${2}, ${3}, etc. for cursor positions. ${1} is the initial position, tab moves to ${2}, ${3}, etc. ${0} is the final position."
157+
title="{{Strings.CUSTOM_SNIPPETS_TEMPLATE_INPUT_TOOLTIP}}"
158158
data-placement="top">
159-
Template Text:
159+
{{Strings.CUSTOM_SNIPPETS_TEMPLATE_TEXT_LABEL}}
160160
</label>
161-
<textarea id="edit-template-text-box" placeholder="console.log(${1});" autocomplete="off"></textarea>
161+
<textarea id="edit-template-text-box" placeholder="{{Strings.CUSTOM_SNIPPETS_TEMPLATE_PLACEHOLDER}}" autocomplete="off" />
162162
</div>
163163
</div>
164164

165165
<div id="edit-snippet-buttons">
166-
<button id="cancel-edit-snippet-btn" class="dialog-button btn">Cancel</button>
167-
<button id="save-edit-snippet-btn" class="dialog-button btn primary" disabled>Save</button>
166+
<button id="cancel-edit-snippet-btn" class="dialog-button btn">{{Strings.CUSTOM_SNIPPETS_CANCEL}}</button>
167+
<button id="save-edit-snippet-btn" class="dialog-button btn primary" disabled>{{Strings.CUSTOM_SNIPPETS_SAVE}}</button>
168168
</div>
169169
</div>
170170
</div>

‎src/extensionsIntegrated/CustomSnippets/main.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ define(function (require, exports, module) {
2626
const Menus = require("command/Menus");
2727
const Commands = require("command/Commands");
2828
const WorkspaceManager = require("view/WorkspaceManager");
29+
const Strings = require("strings");
30+
const Mustache = require("thirdparty/mustache/mustache");
2931

3032
const Driver = require("./driver");
3133
const SnippetsList = require("./snippetsList");
@@ -41,7 +43,7 @@ define(function (require, exports, module) {
4143

4244
const MY_COMMAND_ID = "custom_snippets";
4345
const PANEL_ID = "customSnippets.panel";
44-
const MENU_ITEM_NAME = "Custom Snippets\u2026"; // this name will appear as the menu item
46+
const MENU_ITEM_NAME = Strings.CUSTOM_SNIPPETS_MENU_ITEM_NAME; // this name will appear as the menu item
4547
const PANEL_MIN_SIZE = 340; // the minimum size more than which its height cannot be decreased
4648

4749
// this is to store the panel reference,
@@ -256,7 +258,9 @@ define(function (require, exports, module) {
256258

257259
AppInit.appReady(function () {
258260
CommandManager.register(MENU_ITEM_NAME, MY_COMMAND_ID, showCustomSnippetsPanel);
259-
$snippetsPanel = $(snippetsPanelTpl);
261+
// Render template with localized strings
262+
const renderedHtml = Mustache.render(snippetsPanelTpl);
263+
$snippetsPanel = $(renderedHtml);
260264
_addToMenu();
261265
CodeHintIntegration.init();
262266

0 commit comments

Comments
 (0)