Localize deviceManager

src/device_manager/config/config.js

@@ -1,5 +1,3 @@
 export default {
-  devices: [],
-
-  deviceLabel: 'Device'
+  devices: []
 };

src/device_manager/index.js

@@ -58,7 +58,8 @@ export default () => {
         if (!(name in c)) c[name] = defaults[name];
       }
 
-      devices = new Devices(c.devices);
+      devices = new Devices();
+      (c.devices || []).forEach(dv => this.add(dv.id || dv.name, dv.width, dv));
       view = new DevicesView({
         collection: devices,
         config: c
@@ -68,21 +69,27 @@ export default () => {
 
     /**
      * Add new device to the collection. URLs are supposed to be unique
-     * @param {string} name Device name
-     * @param {string} width Width of the device
-     * @param {Object} opts Custom options
-     * @return {Device} Added device
+     * @param {String} id Device id
+     * @param {String} width Width of the device
+     * @param {Object} [opts] Custom options
+     * @returns {Device} Added device
      * @example
-     * deviceManager.add('Tablet', '900px');
-     * deviceManager.add('Tablet2', '900px', {
+     * deviceManager.add('tablet', '900px');
+     * deviceManager.add('tablet2', '900px', {
      *  height: '300px',
+     *  // At first, GrapesJS tries to localize the name by device id.
+     *  // In case is not found, the `name` property is used (or `id` if name is missing)
+     *  name: 'Tablet 2',
      *  widthMedia: '810px', // the width that will be used for the CSS media
      * });
      */
-    add(name, width, opts) {
-      var obj = opts || {};
-      obj.name = name;
-      obj.width = width;
+    add(id, width, opts = {}) {
+      const obj = {
+        ...opts,
+        id,
+        name: opts.name || id,
+        width: width
+      };
       return devices.add(obj);
     },
 

src/device_manager/view/DevicesView.js

@@ -67,25 +67,29 @@ export default Backbone.View.extend({
    * @private
    */
   getOptions() {
-    var result = '';
-    this.collection.each(device => {
-      var name = device.get('name');
-      result += '<option value="' + name + '">' + name + '</option>';
+    const { collection, em } = this;
+    let result = '';
+
+    collection.each(device => {
+      const { name, id } = device.attributes;
+      const label = em.t(`deviceManager.devices.${id}`) || name;
+      result += `<option value="${name}">${label}</option>`;
     });
+
     return result;
   },
 
   render() {
-    var pfx = this.ppfx;
-    this.$el.html(
+    const { em, ppfx, $el, el } = this;
+    $el.html(
       this.template({
-        ppfx: pfx,
-        deviceLabel: this.config.deviceLabel
+        ppfx,
+        deviceLabel: em.t('deviceManager.device')
       })
     );
-    this.devicesEl = this.$el.find('.' + pfx + 'devices');
+    this.devicesEl = $el.find(`.${ppfx}devices`);
     this.devicesEl.append(this.getOptions());
-    this.el.className = pfx + 'devices-c';
+    el.className = `${ppfx}devices-c`;
     return this;
   }
 });

src/editor/config/config.js

@@ -194,20 +194,24 @@ export default {
   deviceManager: {
     devices: [
       {
+        id: 'desktop',
         name: 'Desktop',
         width: ''
       },
       {
+        id: 'tablet',
         name: 'Tablet',
         width: '768px',
         widthMedia: '992px'
       },
       {
+        id: 'mobileLandscape',
         name: 'Mobile landscape',
         width: '568px',
         widthMedia: '768px'
       },
       {
+        id: 'mobilePortrait',
         name: 'Mobile portrait',
         width: '320px',
         widthMedia: '480px'

src/i18n/locale/en.js

@@ -6,7 +6,18 @@ export default {
     uploadTitle: 'Drop files here or click to upload'
   },
   blocks: {
-    labels: {},
+    labels: {
+      // 'block-id': 'Block Label',
+    },
     categories: {}
+  },
+  deviceManager: {
+    device: 'Device',
+    devices: {
+      desktop: 'Desktop',
+      tablet: 'Tablet',
+      mobileLandscape: 'Mobile Landscape',
+      mobilePortrait: 'Mobile Portrait'
+    }
   }
 };

src/i18n/locale/tr.js

@@ -6,10 +6,12 @@ export default {
   },
   deviceManager: {
     device: 'Cihaz',
-    desktop: 'Masaüstü',
-    tablet: 'Tablet',
-    mobileLandscape: 'Mobil Yatay',
-    mobilePortrait: 'Mobil Dikey'
+    devices: {
+      desktop: 'Masaüstü',
+      tablet: 'Tablet',
+      mobileLandscape: 'Mobil Yatay',
+      mobilePortrait: 'Mobil Dikey'
+    }
   },
   styleManager: {
     noEl: 'Stilini düzenlemek istediğiniz öğeyi seçiniz',