i18n support again (part 1)

src/public/app/services/i18n.js

@@ -10,7 +10,7 @@ await i18next
         debug: true,
         backend: {
             loadPath: `/${window.glob.assetPath}/translations/{{lng}}/{{ns}}.json`
-        }        
+        }
     });
 
-export const t = i18next.t;
+export const t = i18next.t;

src/public/app/widgets/attribute_widgets/attribute_editor.js

@@ -1,3 +1,4 @@
+import { t } from "../../services/i18n.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import noteAutocompleteService from "../../services/note_autocomplete.js";
 import server from "../../services/server.js";
@@ -11,11 +12,11 @@ import attributeService from "../../services/attributes.js";
 import linkService from "../../services/link.js";
 
 const HELP_TEXT = `
-<p>To add label, just type e.g. <code>#rock</code> or if you want to add also value then e.g. <code>#year = 2020</code></p> 
+<p>${t("attribute_editor.help_text_body1")}</p>
 
-<p>For relation, type <code>~author = @</code> which should bring up an autocomplete where you can look up the desired note.</p>
+<p>${t("attribute_editor.help_text_body2")}</p>
 
-<p>Alternatively you can add label and relation using the <code>+</code> button on the right side.</p>`;
+<p>${t("attribute_editor.help_text_body3")}</p>`;
 
 const TPL = `
 <div style="position: relative; padding-top: 10px; padding-bottom: 10px">
@@ -71,8 +72,8 @@ const TPL = `
 
     <div class="attribute-list-editor" tabindex="200"></div>
 
-    <div class="bx bx-save save-attributes-button" title="Save attributes <enter>"></div>
-    <div class="bx bx-plus add-new-attribute-button" title="Add a new attribute"></div>
+    <div class="bx bx-save save-attributes-button" title="${t("attribute_editor.save_attributes")}"></div>
+    <div class="bx bx-plus add-new-attribute-button" title="${t("attribute_editor.add_a_new_attribute")}"></div>
 
     <div class="attribute-errors" style="display: none;"></div>
 </div>
@@ -217,13 +218,13 @@ export default class AttributeEditorWidget extends NoteContextAwareWidget {
             y: e.pageY,
             orientation: 'left',
             items: [
-                {title: `Add new label <kbd data-command="addNewLabel"></kbd>`, command: "addNewLabel", uiIcon: "bx bx-hash"},
-                {title: `Add new relation <kbd data-command="addNewRelation"></kbd>`, command: "addNewRelation", uiIcon: "bx bx-transfer"},
-                {title: "----"},
-                {title: "Add new label definition", command: "addNewLabelDefinition", uiIcon: "bx bx-empty"},
-                {title: "Add new relation definition", command: "addNewRelationDefinition", uiIcon: "bx bx-empty"},
+                { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" },
+                { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" },
+                { title: "----" },
+                { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" },
+                { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" },
             ],
-            selectMenuItemHandler: ({command}) => this.handleAddNewAttributeCommand(command)
+            selectMenuItemHandler: ({ command }) => this.handleAddNewAttributeCommand(command)
         });
     }
 

src/public/app/widgets/bulk_actions/abstract_bulk_action.js

@@ -1,3 +1,4 @@
+import { t } from "../../services/i18n.js";
 import server from "../../services/server.js";
 import ws from "../../services/ws.js";
 import utils from "../../services/utils.js";
@@ -14,7 +15,7 @@ export default class AbstractBulkAction {
 
             $rendered.find('.action-conf-del')
                 .on('click', () => this.deleteAction())
-                .attr('title', 'Remove this search action');
+                .attr('title', t('abstract_bulk_action.remove_this_search_action'));
 
             utils.initHelpDropdown($rendered);
 

src/public/app/widgets/bulk_actions/execute_script.js

@@ -1,10 +1,11 @@
+import { t } from "../../services/i18n.js";
 import SpacedUpdate from "../../services/spaced_update.js";
 import AbstractBulkAction from "./abstract_bulk_action.js";
 
 const TPL = `
 <tr>
     <td>
-        Execute script:
+        ${t('execute_script.execute_script')}
     </td>
     <td>
         <input type="text" 
@@ -16,13 +17,13 @@ const TPL = `
             <div class="dropdown help-dropdown">
               <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
               <div class="dropdown-menu dropdown-menu-right p-4">
-                You can execute simple scripts on the matched notes.
+                ${t('execute_script.help_text')}
 
-                For example to append a string to a note's title, use this small script:
+                ${t('execute_script.example_1')}
 
                 <pre>note.title = note.title + ' - suffix';</pre>
 
-                More complex example would be deleting all matched note's attributes:
+                ${t('execute_script.example_2')}
 
                 <pre>for (const attr of note.getOwnedAttributes) { attr.markAsDeleted(); }</pre>
               </div>
@@ -35,7 +36,7 @@ const TPL = `
 
 export default class ExecuteScriptBulkAction extends AbstractBulkAction {
     static get actionName() { return "executeScript"; }
-    static get actionTitle() { return "Execute script"; }
+    static get actionTitle() { return t("execute_script.execute_script"); }
 
     doRender() {
         const $action = $(TPL);

src/public/app/widgets/bulk_actions/label/add_label.js

@@ -1,35 +1,36 @@
+import { t } from "../../../services/i18n.js";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import AbstractBulkAction from "../abstract_bulk_action.js";
 
 const TPL = `
 <tr>
     <td colspan="2">
         <div style="display: flex; align-items: center">
-            <div style="margin-right: 10px;" class="text-nowrap">Add label</div> 
+            <div style="margin-right: 10px;" class="text-nowrap">${t("add_label.add_label")}</div> 
 
             <input type="text" 
                 class="form-control label-name" 
-                placeholder="label name"
+                placeholder="${t("add_label.label_name_placeholder")}"
                 pattern="[\\p{L}\\p{N}_:]+"
-                title="Alphanumeric characters, underscore and colon are allowed characters."/>
+                title="${t("add_label.label_name_title")}"/>
 
-            <div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">to value</div>
+            <div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">${t("add_label.to_value")}</div>
 
-            <input type="text" class="form-control label-value" placeholder="new value"/>
+            <input type="text" class="form-control label-value" placeholder="${t("add_label.new_value_placeholder")}"/>
         </div>
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
             <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
-                <p>On all matched notes:</p>
+                <p>${t("add_label.help_text")}</p>
 
                 <ul>
-                    <li>create given label if note doesn't have one yet</li>
-                    <li>or change value of the existing label</li>
+                    <li>${t("add_label.help_text_item1")}</li>
+                    <li>${t("add_label.help_text_item2")}</li>
                 </ul>
 
-                <p>You can also call this method without value, in such case label will be assigned to the note without value.</p>
+                <p>${t("add_label.help_text_note")}</p>
             </div> 
         </div>
 
@@ -39,7 +40,7 @@ const TPL = `
 
 export default class AddLabelBulkAction extends AbstractBulkAction {
     static get actionName() { return "addLabel"; }
-    static get actionTitle() { return "Add label"; }
+    static get actionTitle() { return t("add_label.add_label"); }
 
     doRender() {
         const $action = $(TPL);

src/public/app/widgets/bulk_actions/label/delete_label.js

@@ -1,17 +1,18 @@
+import { t } from "../../../services/i18n.js";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import AbstractBulkAction from "../abstract_bulk_action.js";
 
 const TPL = `
 <tr>
     <td>
-        Delete label:
+        ${t("delete_label.delete_label")}
     </td>
     <td>
         <input type="text" 
            class="form-control label-name"
            pattern="[\\p{L}\\p{N}_:]+"
-           title="Alphanumeric characters, underscore and colon are allowed characters."
-           placeholder="label name"/>
+           title="${t("delete_label.label_name_title")}"
+           placeholder="${t("delete_label.label_name_placeholder")}"/>
     </td>
     <td class="button-column">
         <span class="bx bx-x icon-action action-conf-del"></span>
@@ -20,7 +21,7 @@ const TPL = `
 
 export default class DeleteLabelBulkAction extends AbstractBulkAction {
     static get actionName() { return "deleteLabel"; }
-    static get actionTitle() { return "Delete label"; }
+    static get actionTitle() { return t("delete_label.delete_label"); }
 
     doRender() {
         const $action = $(TPL);

src/public/app/widgets/bulk_actions/label/rename_label.js

@@ -1,25 +1,26 @@
+import { t } from "../../../services/i18n.js";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import AbstractBulkAction from "../abstract_bulk_action.js";
 
 const TPL = `
 <tr>
     <td colspan="2">
         <div style="display: flex; align-items: center">
-            <div style="margin-right: 10px; flex-shrink: 0;">Rename label from:</div> 
+            <div style="margin-right: 10px; flex-shrink: 0;">${t("rename_label.rename_label_from")}</div> 
 
             <input type="text" 
                 class="form-control old-label-name" 
-                placeholder="old name" 
+                placeholder="${t("rename_label.old_name_placeholder")}" 
                 pattern="[\\p{L}\\p{N}_:]+"
-                title="Alphanumeric characters, underscore and colon are allowed characters."/>
+                title="${t("rename_label.name_title")}"/>
 
-            <div style="margin-right: 10px; margin-left: 10px;">To:</div> 
+            <div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">${t("rename_label.to")}</div> 
 
             <input type="text" 
                 class="form-control new-label-name" 
-                placeholder="new name"
+                placeholder="${t("rename_label.new_name_placeholder")}"
                 pattern="[\\p{L}\\p{N}_:]+"
-                title="Alphanumeric characters, underscore and colon are allowed characters."/>
+                title="${t("rename_label.name_title")}"/>
         </div>
     </td>
     <td class="button-column">
@@ -29,7 +30,7 @@ const TPL = `
 
 export default class RenameLabelBulkAction extends AbstractBulkAction {
     static get actionName() { return "renameLabel"; }
-    static get actionTitle() { return "Rename label"; }
+    static get actionTitle() { return t("rename_label.rename_label"); }
 
     doRender() {
         const $action = $(TPL);

src/public/app/widgets/bulk_actions/label/update_label_value.js

@@ -1,30 +1,31 @@
+import { t } from "../../../services/i18n.js";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import AbstractBulkAction from "../abstract_bulk_action.js";
 
 const TPL = `
 <tr>
     <td colspan="2">
         <div style="display: flex; align-items: center">
-            <div style="margin-right: 10px;" class="text-nowrap">Update label value</div> 
+            <div style="margin-right: 10px;" class="text-nowrap">${t("update_label_value.update_label_value")}</div> 
 
             <input type="text" 
                 class="form-control label-name" 
-                placeholder="label name"
+                placeholder="${t("update_label_value.label_name_placeholder")}"
                 pattern="[\\p{L}\\p{N}_:]+"
-                title="Alphanumeric characters, underscore and colon are allowed characters."/>
+                title="${t("update_label_value.label_name_title")}"/>
 
-            <div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">to value</div>
+            <div style="margin-right: 10px; margin-left: 10px;" class="text-nowrap">${t("update_label_value.to_value")}</div>
 
-            <input type="text" class="form-control label-value" placeholder="new value"/>
+            <input type="text" class="form-control label-value" placeholder="${t("update_label_value.new_value_placeholder")}"/>
         </div>
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
             <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
-                <p>On all matched notes, change value of the existing label.</p>
+                <p>${t("update_label_value.help_text")}</p>
 
-                <p>You can also call this method without value, in such case label will be assigned to the note without value.</p>
+                <p>${t("update_label_value.help_text_note")}</p>
             </div> 
         </div>
 
@@ -34,7 +35,7 @@ const TPL = `
 
 export default class UpdateLabelValueBulkAction extends AbstractBulkAction {
     static get actionName() { return "updateLabelValue"; }
-    static get actionTitle() { return "Update label value"; }
+    static get actionTitle() { return t("update_label_value.update_label_value"); }
 
     doRender() {
         const $action = $(TPL);

src/public/app/widgets/bulk_actions/note/delete_note.js

@@ -1,21 +1,22 @@
+import { t } from "../../../services/i18n.js";
 import AbstractBulkAction from "../abstract_bulk_action.js";
 
 const TPL = `
 <tr>
     <td colspan="2">
         <span class="bx bx-trash"></span>
 
-        Delete matched notes
+        ${t("delete_note.delete_matched_notes")}
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
             <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
-                <p>This will delete matched notes.</p>
+                <p>${t("delete_note.delete_matched_notes_description")}</p>
 
-                <p>After the deletion, it's possible to undelete them from <span class="bx bx-history"></span> Recent Notes dialog.</p>
+                <p>${t("delete_note.undelete_notes_instruction")}</p>
 
-                <p>To erase notes permanently, you can go after the deletion to the Option -> Other and click the "Erase deleted notes now" button.</p>
+                <p>${t("delete_note.erase_notes_instruction")}</p>
             </div>
         </div>
 
@@ -25,7 +26,7 @@ const TPL = `
 
 export default class DeleteNoteBulkAction extends AbstractBulkAction {
     static get actionName() { return "deleteNote"; }
-    static get actionTitle() { return "Delete note"; }
+    static get actionTitle() { return t("delete_note.delete_note"); }
 
     doRender() {
         return $(TPL);

src/public/app/widgets/bulk_actions/note/delete_revisions.js

@@ -1,27 +1,26 @@
+import { t } from "../../../services/i18n.js";
 import AbstractBulkAction from "../abstract_bulk_action.js";
 
 const TPL = `
 <tr>
     <td colspan="2">
         <span class="bx bx-trash"></span>
-
-        Delete note revisions
+        ${t('delete_revisions.delete_note_revisions')}
     </td>
     <td class="button-column">
         <div class="dropdown help-dropdown">
             <span class="bx bx-help-circle icon-action" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
             <div class="dropdown-menu dropdown-menu-right p-4">
-                All past note revisions of matched notes will be deleted. Note itself will be fully preserved. In other terms, note's history will be removed.
+                ${t('delete_revisions.all_past_note_revisions')}
             </div>
         </div>
-
         <span class="bx bx-x icon-action action-conf-del"></span>
     </td>
 </tr>`;
 
 export default class DeleteRevisionsBulkAction extends AbstractBulkAction {
     static get actionName() { return "deleteRevisions"; }
-    static get actionTitle() { return "Delete note revisions"; }
+    static get actionTitle() { return t('delete_revisions.delete_note_revisions'); }
 
     doRender() {
         return $(TPL);