Updated Language

dipaksarkar · Apr 19, 2024 · d3947cf · d3947cf
1 parent 0938a52
commit d3947cf
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 113 deletions.
diff --git a/.npmignore b/.npmignore
@@ -6,4 +6,6 @@
 node_modules
 public
 src
-!src/styles/main.scss
+!src/styles/main.scss
+assets
+server
diff --git a/src/commands.js b/src/commands.js
@@ -1,4 +1,4 @@
-import { modalContent, noItems, loader, mapTemplates, fetchTemplates, storeProjects, removeProjects, PROJECTS, TEMPLATES } from './utils'
+import { mapTemplates, fetchTemplates, storeProjects, removeProjects, PROJECTS, TEMPLATES } from './utils'
 
 const el = document.createElement('div')
 
@@ -7,6 +7,45 @@ export default (editor, options = {}) => {
   const $el = $(el)
   editor.tab = TEMPLATES
 
+  const modalContent = `
+    <div class="manage-templates">
+      <div class="gjs-px-md">
+        <div class="gjs-tabs" role="tablist">
+          <div class="gjs-tab" data-tab="${PROJECTS}" role="tab" aria-selected="false">
+            <div class="gjs-tab__label">${editor.I18n.t('grapesjs-pages.projects')}</div>
+            <div class="gjs-tab__indicator absolute-bottom"></div>
+          </div>
+          <div class="gjs-tab" data-tab="${TEMPLATES}" role="tab" aria-selected="true">
+            <div class="gjs-tab__label">${editor.I18n.t('grapesjs-pages.templates')}</div>
+            <div class="gjs-tab__indicator absolute-bottom"></div>
+          </div>
+        </div>
+        <hr class="gjs-separator gjs-separator--horizontal gjs-separator--dark" aria-orientation="horizontal">
+      </div>
+      <div class="gjs-tab-panels">
+        <div id="${PROJECTS}" aria-selected="false" class="gjs-tab-panel" role="tabpanel"></div>
+        <div id="${TEMPLATES}" aria-selected="true" class="gjs-tab-panel" role="tabpanel"></div>
+      </div>
+    </div>
+  `
+
+  const noItems = `
+    <div class="gjs-no-project">
+      <i class="fa fa-newspaper-o"></i>
+      <div class="gjs-message">
+        ${editor.I18n.t('grapesjs-pages.no-records')}
+      </div>
+    </div>
+  `
+
+  const loader = `
+    <div class="gjs-no-project">
+      <div class="gjs-message">
+        ${editor.I18n.t('grapesjs-pages.loading')}
+      </div>
+    </div>
+  `
+
   const updateBtnEvent = () => {
     $el.find('.gjs-template-card .select').on('click', function () {
       const id = $(this).attr('data-template')
@@ -34,7 +73,7 @@ export default (editor, options = {}) => {
 
     editor[type] = templates
 
-    const html = mapTemplates(templates, type == PROJECTS)
+    const html = mapTemplates(editor, templates, type == PROJECTS)
     $el.find(id).html(templates.length ? html : noItems)
 
     setTimeout(() => {
@@ -52,7 +91,7 @@ export default (editor, options = {}) => {
 
   Commands.add('open-templates', {
     async run(editor, sender) {
-      Modal.setTitle('Templates')
+      Modal.setTitle(editor.I18n.t('grapesjs-pages.templates'))
       Modal.setContent(el)
       Modal.open()
 
@@ -82,7 +121,7 @@ export default (editor, options = {}) => {
 
   Commands.add('save-templates', {
     async run(editor) {
-      const name = prompt('Enter template name:')
+      const name = prompt(editor.I18n.t('grapesjs-pages.enter-template-name'))
       if (name) {
         const data = editor.getProjectData()
         const thumbnail = await editor.makeThumbnail(editor.getWrapper().getEl(), {

diff --git a/src/index.js b/src/index.js
@@ -31,6 +31,14 @@ export default (editor, opts = {}) => {
     ...opts
   }
 
+  // Load i18n files
+  if (editor.I18n) {
+    editor.I18n.addMessages({
+      en,
+      ...options.i18n
+    })
+  }
+
   editor.templates = templates
   editor.makeThumbnail = makeThumbnail
   editor.createPopper = createPopper
@@ -46,11 +54,4 @@ export default (editor, opts = {}) => {
 
   // Add panels
   loadPanels(editor, options)
-
-  // Load i18n files
-  editor.I18n &&
-    editor.I18n.addMessages({
-      en,
-      ...options.i18n
-    })
 }
diff --git a/src/locale/en.js b/src/locale/en.js
@@ -1,48 +1,13 @@
 export default {
   'grapesjs-pages': {
-    new: 'New Page +',
-    placeholder: 'Page name',
-    templates: {
-      all: 'All',
-      templates: 'Templates',
-      search: 'Search for sites by name or id',
-      open: 'Open',
-      new: 'Enter new page name',
-      create: 'Create',
-      help: 'Select a template, enter project name, then click create. If no template is selected a blank project will be created.',
-      info: 'Site Info',
-      updated: 'Last Updated',
-      pages: 'Pages',
-      created: 'Created At',
-      size: 'Size',
-      actions: 'Actions',
-      titles: {
-        open: 'Select to open site',
-        info: 'Click to sort by site name',
-        updated: 'Click to sort by last update date',
-        pages: 'Click to sort by number of pages',
-        created: 'Click to sort by site creation date',
-        size: 'Click to sort by site size',
-        actions: 'Click to sort by site name',
-        delete: 'Delete',
-        edit: 'Edit'
-      }
-    },
-    settings: {
-      save: 'Save',
-      generate: 'Generate',
-      help: 'Enter url, or generate thumbnail.',
-      labels: {
-        name: 'Name',
-        thumbnail: 'Thumbnail',
-        description: 'Description',
-        template: 'Template'
-      },
-      placeholders: {
-        name: 'Name...',
-        thumbnail: 'Thumbnail...',
-        description: 'Description...'
-      }
-    }
+    projects: 'My projects',
+    templates: 'Templates',
+    'save-template': 'Save template',
+    'load-template': 'Load templates',
+    'template-settings': 'Template settings',
+    loading: 'Loading...',
+    select: 'Select',
+    'enter-template-name': 'Enter template name:',
+    'no-records': 'No projects found. Projects will appear here once you add them.'
   }
 }
diff --git a/src/panels.js b/src/panels.js
@@ -1,13 +1,24 @@
-import { dropdownMenu } from './utils'
-
 export default (editor, opts = {}) => {
   const { Panels, $, createPopper } = editor
 
+  const dropdownMenu = `
+    <ul class="gjs-dropdown-menu">
+      <li data-command="save-templates" class="gjs-menu-item">
+        <i class="fa fa-save"></i>
+        <span class="gjs-menu-label">${editor.I18n.t('grapesjs-pages.save-template')}</span>
+      </li>
+      <li data-command="open-templates" class="gjs-menu-item">
+        <i class="fa fa-folder-o"></i>
+        <span class="gjs-menu-label">${editor.I18n.t('grapesjs-pages.load-template')}</span>
+      </li>
+    </ul>
+  `
+
   Panels.addButton('options', {
     id: 'open-templates',
     className: 'dropdown fa fa-cog',
     attributes: {
-      title: 'Template settings',
+      title: editor.I18n.t('grapesjs-pages.template-settings'),
       'data-dropdown': dropdownMenu,
       'data-offset': '-55,7'
     },

diff --git a/src/utils.js b/src/utils.js
@@ -6,67 +6,15 @@ export const TEMPLATES = 'templates'
 
 export const thumbnail = 'https://raw.githubusercontent.com/dipaksarkar/grapesjs-pages/main/assets/placeholder.png'
 
-export const dropdownMenu = `
-  <ul class="gjs-dropdown-menu">
-    <li data-command="save-templates" class="gjs-menu-item">
-      <i class="fa fa-save"></i>
-      <span class="gjs-menu-label">Save template</span>
-    </li>
-    <li data-command="open-templates" class="gjs-menu-item">
-      <i class="fa fa-folder-o"></i>
-      <span class="gjs-menu-label">Load templates</span>
-    </li>
-  </ul>
-`
-
-export const modalContent = `
-  <div class="manage-templates">
-    <div class="gjs-px-md">
-      <div class="gjs-tabs" role="tablist">
-        <div class="gjs-tab" data-tab="${PROJECTS}" role="tab" aria-selected="false">
-          <div class="gjs-tab__label">My projects</div>
-          <div class="gjs-tab__indicator absolute-bottom"></div>
-        </div>
-        <div class="gjs-tab" data-tab="${TEMPLATES}" role="tab" aria-selected="true">
-          <div class="gjs-tab__label">Templates</div>
-          <div class="gjs-tab__indicator absolute-bottom"></div>
-        </div>
-      </div>
-      <hr class="gjs-separator gjs-separator--horizontal gjs-separator--dark" aria-orientation="horizontal">
-    </div>
-    <div class="gjs-tab-panels">
-      <div id="${PROJECTS}" aria-selected="false" class="gjs-tab-panel" role="tabpanel"></div>
-      <div id="${TEMPLATES}" aria-selected="true" class="gjs-tab-panel" role="tabpanel"></div>
-    </div>
-  </div>
-`
-
-export const noItems = `
-  <div class="gjs-no-project">
-    <i class="fa fa-newspaper-o"></i>
-    <div class="gjs-message">
-      No projects found. Projects will appear here once you add them.
-    </div>
-  </div>
-`
-
-export const loader = `
-  <div class="gjs-no-project">
-    <div class="gjs-message">
-      Loading...
-    </div>
-  </div>
-`
-
-export const mapTemplates = (templates, removeable = false) => {
+export const mapTemplates = (editor, templates, removeable = false) => {
   const list = templates.map(
     (item) => `
       <div class="gjs-xs-12 gjs-sm-4">
         <div class="gjs-template-card">
           <div class="gjs-thumbnail gjs-img gjs-img--menu" role="img">
             <img src="${item?.thumbnail || thumbnail}">
             <div class="gjs-controller">
-              <button class="select" data-template="${item.id}">Select</button>
+              <button class="select" data-template="${item.id}">${editor.I18n.t('grapesjs-pages.select')}</button>
             </div>
           </div>
           <hr class="gjs-separator gjs-separator--horizontal" aria-orientation="horizontal">