Update locale for assets and file uploader

src/asset_manager/config/config.js

@@ -49,12 +49,6 @@ export default {
   // }
   autoAdd: 1,
 
-  // Text on upload input
-  uploadText: 'Drop files here or click to upload',
-
-  // Label for the add button
-  addBtnText: 'Add image',
-
   // To upload your assets, the module uses Fetch API, with this option you
   // overwrite it with something else.
   // It should return a Promise
@@ -96,12 +90,6 @@ export default {
   // Any dropzone content to append inside dropzone element
   dropzoneContent: '',
 
-  // Default title for the asset manager modal
-  modalTitle: 'Select Image',
-
-  //Default placeholder for input
-  inputPlaceholder: 'http://path/to/the/image.jpg',
-
   //method called before upload, on return false upload is canceled.
   // @example
   // beforeUpload: (files) => {

src/asset_manager/view/AssetsView.js

@@ -5,17 +5,15 @@ export default Backbone.View.extend({
     submit: 'handleSubmit'
   },
 
-  template(view) {
+  template({ pfx, ppfx, em, ...view }) {
-    const pfx = view.pfx;
-    const ppfx = view.ppfx;
     return `
     <div class="${pfx}assets-cont">
       <div class="${pfx}assets-header">
         <form class="${pfx}add-asset">
           <div class="${ppfx}field ${pfx}add-field">
-            <input placeholder="${view.config.inputPlaceholder}"/>
+            <input placeholder="${em.t('assets.inputPlh')}"/>
           </div>
-          <button class="${ppfx}btn-prim">${view.config.addBtnText}</button>
+          <button class="${ppfx}btn-prim">${em.t('assets.addButton')}</button>
           <div style="clear:both"></div>
         </form>
       </div>
@@ -30,6 +28,7 @@ export default Backbone.View.extend({
     this.config = o.config;
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
+    this.em = this.config.em;
     const coll = this.collection;
     this.listenTo(coll, 'reset', this.renderAssets);
     this.listenTo(coll, 'add', this.addToAsset);

src/asset_manager/view/FileUploader.js

@@ -18,6 +18,7 @@ export default Backbone.View.extend(
       this.options = opts;
       const c = opts.config || {};
       this.config = c;
+      this.em = this.config.em;
       this.pfx = c.stylePrefix || '';
       this.ppfx = c.pStylePrefix || '';
       this.target = this.options.globalCollection || {};
@@ -247,7 +248,7 @@ export default Backbone.View.extend(
     render() {
       this.$el.html(
         this.template({
-          title: this.config.uploadText,
+          title: this.em.t('assets.uploadTitle'),
           uploadId: this.uploadId,
           disabled: this.disabled,
           multiUpload: this.multiUpload,

src/commands/view/OpenAssets.js

@@ -4,7 +4,7 @@ export default {
     const am = editor.AssetManager;
     const config = am.getConfig();
     const amContainer = am.getContainer();
-    const title = opts.modalTitle || config.modalTitle || '';
+    const title = opts.modalTitle || editor.t('assets.modalTitle') || '';
     const types = opts.types;
     const accept = opts.accept;
 

src/editor/index.js

@@ -649,6 +649,24 @@ export default (config = {}) => {
       return this;
     },
 
+    /**
+     * Translate label
+     * @param {String} key Label to translate
+     * @param {Object} [opts] Options for the translation
+     * @param {Object} [opts.params] Params for the translation
+     * @param {Boolean} [opts.noWarn] Avoid warnings in case of missing resources
+     * @returns {String}
+     * @example
+     * editor.t('msg');
+     * // use params
+     * editor.t('msg2', { params: { test: 'hello' } });
+     * // custom local
+     * editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
+     */
+    t(...args) {
+      return em.t(...args);
+    },
+
     /**
      * Attach event
      * @param  {string} event Event name

src/editor/model/Editor.js

@@ -630,6 +630,10 @@ export default Backbone.Model.extend({
     return this.set('dmode', value);
   },
 
+  t(...args) {
+    return this.get('I18n').t(...args);
+  },
+
   /**
    * Returns true if the editor is in absolute mode
    * @returns {Boolean}

src/i18n/index.js

@@ -104,7 +104,7 @@ export default () => {
       const { messages } = this.config;
       lang &&
         !messages[lang] &&
-        this._warn(`'${lang}' i18n lang set not found`, opts);
+        this._warn(`'${lang}' i18n lang not found`, opts);
       return lang ? messages[lang] : messages;
     },
 

src/i18n/locale/en.js

@@ -1,3 +1,8 @@
 export default {
-  hello: 'Hello'
+  assets: {
+    addButton: 'Add image',
+    inputPlh: 'http://path/to/the/image.jpg',
+    modalTitle: 'Select Image',
+    uploadTitle: 'Drop files here or click to upload'
+  }
 };

src/i18n/locale/tr.js

@@ -1,4 +1,9 @@
 export default {
+  assets: {
+    addButton: 'Görsel Ekle',
+    modalTitle: 'Görsel Seçin',
+    uploadTitle: 'Dosya yüklemek için buraya sürükleyin veya tıklayın'
+  },
   deviceManager: {
     device: 'Cihaz',
     desktop: 'Masaüstü',
@@ -171,11 +176,6 @@ export default {
     quote: 'Alıntı',
     'text-basic': 'Basit Metin'
   },
-  assets: {
-    addButton: 'Görsel Ekle',
-    modalTitle: 'Görsel Seçin',
-    fileUploadTitle: 'Dosya yüklemek için buraya sürükleyin veya tıklayın'
-  },
   utils: {
     colorPicker: {
       cancel: 'İptal',