diff --git a/src/device_manager/config/config.js b/src/device_manager/config/config.js
index 5ab669177..052386392 100644
--- a/src/device_manager/config/config.js
+++ b/src/device_manager/config/config.js
@@ -1,5 +1,3 @@
export default {
- devices: [],
-
- deviceLabel: 'Device'
+ devices: []
};
diff --git a/src/device_manager/index.js b/src/device_manager/index.js
index 70f51ecac..1e58a6366 100644
--- a/src/device_manager/index.js
+++ b/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);
},
diff --git a/src/device_manager/view/DevicesView.js b/src/device_manager/view/DevicesView.js
index 3f872a800..dde772cee 100644
--- a/src/device_manager/view/DevicesView.js
+++ b/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 += '';
+ const { collection, em } = this;
+ let result = '';
+
+ collection.each(device => {
+ const { name, id } = device.attributes;
+ const label = em.t(`deviceManager.devices.${id}`) || name;
+ result += ``;
});
+
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;
}
});
diff --git a/src/editor/config/config.js b/src/editor/config/config.js
index a8aa613e1..8f8a20c52 100644
--- a/src/editor/config/config.js
+++ b/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'
diff --git a/src/i18n/locale/en.js b/src/i18n/locale/en.js
index 4ce27f335..a56f8d3f3 100644
--- a/src/i18n/locale/en.js
+++ b/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'
+ }
}
};
diff --git a/src/i18n/locale/tr.js b/src/i18n/locale/tr.js
index 7c21334d7..f83a1ed2c 100644
--- a/src/i18n/locale/tr.js
+++ b/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',