tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add device ref and improve api generation script

pull/3725/head
Artur Arseniev 5 years ago
parent
865e946e2d
commit
65e3a3e823
8 changed files with 227 additions and 147 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      docs/.vuepress/config.js
  2. 82
      docs/api.js
  3. 9
      docs/api/device.md
  4. 26
      docs/api/device_manager.md
  5. 166
      docs/api/editor.md
  6. 44
      src/device_manager/index.js
  7. 44
      src/device_manager/model/Device.js
  8. 2
      src/editor/index.js

1
docs/.vuepress/config.js
View File

@ -71,6 +71,7 @@ module.exports = {
['/api/style_manager', 'Style Manager'],
['/api/storage_manager', 'Storage Manager'],
['/api/device_manager', 'Device Manager'],
['/api/device', `${subDivider}Device`],
['/api/selector_manager', 'Selector Manager'],
['/api/css_composer', 'CSS Composer'],
['/api/css_rule', `${subDivider}CssRule`],

82
docs/api.js
View File

@ -1,46 +1,50 @@
// This script uses documentation to generate API Reference files
const path = require('path');
const exec = require('child_process').exec;
const documentation = require('documentation');
const fs = require('fs');
const docRoot = __dirname;
const srcRoot = path.join(docRoot, '../src/');
const binRoot = path.join(docRoot, '../node_modules/.bin/');
const cmds = [
['editor/index.js', 'editor.md'],
['asset_manager/index.js', 'assets.md'],
['block_manager/index.js', 'block_manager.md'],
['commands/index.js', 'commands.md'],
['dom_components/index.js', 'components.md'],
['dom_components/model/Component.js', 'component.md'],
['panels/index.js', 'panels.md'],
['style_manager/index.js', 'style_manager.md'],
['storage_manager/index.js', 'storage_manager.md'],
['device_manager/index.js', 'device_manager.md'],
['selector_manager/index.js', 'selector_manager.md'],
['css_composer/index.js', 'css_composer.md'],
['css_composer/model/CssRule.js', 'css_rule.md'],
['modal_dialog/index.js', 'modal_dialog.md'],
['rich_text_editor/index.js', 'rich_text_editor.md'],
['keymaps/index.js', 'keymaps.md'],
['undo_manager/index.js', 'undo_manager.md'],
['canvas/index.js', 'canvas.md'],
['i18n/index.js', 'i18n.md'],
['pages/index.js', 'pages.md'],
['pages/model/Page.js', 'page.md'],
['parser/index.js', 'parser.md'],
].map(entry =>
`${binRoot}documentation build ${srcRoot}/${entry[0]} -o ${docRoot}/api/${entry[1]} -f md --shallow --markdown-toc false`)
.join(' && ');
console.log('Start API Reference generation...');
exec(cmds, (error, stdout, stderr) => {
if (error) {
console.error( 'Failed to update API Reference: ', error);
return;
}
const log = (...args) => console.log(...args);
stdout.trim().split('\n').forEach(function (line) {
console.info(line);
});
async function generateDocs () {
log('Start API Reference generation...');
console.log('API Reference generation done!');
});
await Promise.all([
// ['editor/index.js', 'editor.md'],
// ['asset_manager/index.js', 'assets.md'],
// ['block_manager/index.js', 'block_manager.md'],
// ['commands/index.js', 'commands.md'],
// ['dom_components/index.js', 'components.md'],
// ['dom_components/model/Component.js', 'component.md'],
// ['panels/index.js', 'panels.md'],
// ['style_manager/index.js', 'style_manager.md'],
// ['storage_manager/index.js', 'storage_manager.md'],
['device_manager/index.js', 'device_manager.md'],
['device_manager/model/Device.js', 'device.md'],
// ['selector_manager/index.js', 'selector_manager.md'],
// ['css_composer/index.js', 'css_composer.md'],
// ['css_composer/model/CssRule.js', 'css_rule.md'],
// ['modal_dialog/index.js', 'modal_dialog.md'],
// ['rich_text_editor/index.js', 'rich_text_editor.md'],
// ['keymaps/index.js', 'keymaps.md'],
// ['undo_manager/index.js', 'undo_manager.md'],
// ['canvas/index.js', 'canvas.md'],
// ['i18n/index.js', 'i18n.md'],
// ['pages/index.js', 'pages.md'],
// ['pages/model/Page.js', 'page.md'],
// ['parser/index.js', 'parser.md'],
].map(async (file) =>
documentation.build([`${srcRoot}/${file[0]}`], { shallow: true })
.then(documentation.formats.md)
.then(output => {
const res = output.replace(/\*\*\\\[/g, '**[');
fs.writeFileSync(`${docRoot}/api/${file[1]}`, res);
log('Created', file[1]);
})
));
log('API Reference generation done!');
};
generateDocs();

9
docs/api/device.md
View File

@ -0,0 +1,9 @@
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
## getWidth
Get device width.
Returns **[String][1]**
[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

26
docs/api/device_manager.md
View File

@ -1,6 +1,6 @@
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
## DeviceManager
## Devices
You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
@ -15,22 +15,34 @@ const editor = grapesjs.init({
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
```js
const deviceManager = editor.DeviceManager;
const deviceManager = editor.Devices;
```
## Available Events
* `device:add` - Added new device. The [Device] is passed as an argument to the callback
* `device:remove` - Device removed. The [Device] is passed as an argument to the callback
* `device:select` - New device selected. The newly selected [Device] and the previous one, are passed as arguments to the callback
* `device:update` - Device updated. The updated [Device] and the object containing changes are passed as arguments to the callback
* `device` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
## Methods
* [add][2]
* [get][3]
* [getAll][4]
[Device]: device.html
## add
Add new device to the collection. URLs are supposed to be unique
Add new device.
### Parameters
* `id` **[String][5]** Device id
* `width` **[String][5]** Width of the device
* `opts` **[Object][6]?** Custom options (optional, default `{}`)
* `options` **[Object][6]?** Custom options (optional, default `{}`)
### Examples
@ -45,7 +57,7 @@ deviceManager.add('tablet2', '900px', {
});
```
Returns **Device** Added device
Returns **[Device]** Added device
## get
@ -53,7 +65,7 @@ Return device by name
### Parameters
* `name` **[string][5]** Name of the device
* `name` **[String][5]** Name of the device
### Examples
@ -63,6 +75,8 @@ console.log(JSON.stringify(device));
// {name: 'Tablet', width: '900px'}
```
Returns **[Device]**
## getAll
Return all devices

166
docs/api/editor.md
View File

@ -123,13 +123,17 @@ By changing `result.content` you're able to customize what is dropped
* `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
* `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
### Devices
Check the [Devices][2] module.
### Parser
Check the [Parser][2] module.
Check the [Parser][3] module.
### Pages
Check the [Pages][3] module.
Check the [Pages][4] module.
### General
@ -145,7 +149,7 @@ Returns configuration object
### Parameters
* `prop` **[string][4]?** Property name
* `prop` **[string][5]?** Property name
Returns **any** Returns the configuration object or
the value of the specified property
@ -156,12 +160,12 @@ Returns HTML built inside canvas
### Parameters
* `opts` **[Object][5]** Options (optional, default `{}`)
* `opts` **[Object][6]** Options (optional, default `{}`)
* `opts.component` **Component?** Return the HTML of a specific Component
* `opts.cleanId` **[Boolean][6]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
* `opts.cleanId` **[Boolean][7]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
Returns **[string][4]** HTML string
Returns **[string][5]** HTML string
## getCss
@ -169,13 +173,13 @@ Returns CSS built inside canvas
### Parameters
* `opts` **[Object][5]** Options (optional, default `{}`)
* `opts` **[Object][6]** Options (optional, default `{}`)
* `opts.component` **Component?** Return the CSS of a specific Component
* `opts.json` **[Boolean][6]** Return an array of CssRules instead of the CSS string (optional, default `false`)
* `opts.avoidProtected` **[Boolean][6]** Don't include protected CSS (optional, default `false`)
* `opts.json` **[Boolean][7]** Return an array of CssRules instead of the CSS string (optional, default `false`)
* `opts.avoidProtected` **[Boolean][7]** Don't include protected CSS (optional, default `false`)
Returns **([String][4] | [Array][7]\<CssRule>)** CSS string or array of CssRules
Returns **([String][5] | [Array][8]\<CssRule>)** CSS string or array of CssRules
## getJs
@ -183,11 +187,11 @@ Returns JS of all components
### Parameters
* `opts` **[Object][5]** Options (optional, default `{}`)
* `opts` **[Object][6]** Options (optional, default `{}`)
* `opts.component` **Component?** Get the JS of a specific component
Returns **[String][4]** JS string
Returns **[String][5]** JS string
## getComponents
@ -207,8 +211,8 @@ Set components inside editor's canvas. This method overrides actual components
### Parameters
* `components` **([Array][7]<[Object][5]> | [Object][5] | [string][4])** HTML string or components model
* `opt` **[Object][5]** the options object to be used by the \[setComponents][em#setComponents][8] method (optional, default `{}`)
* `components` **([Array][8]<[Object][6]> | [Object][6] | [string][5])** HTML string or components model
* `opt` **[Object][6]** the options object to be used by the \[setComponents][em#setComponents][9] method (optional, default `{}`)
### Examples
@ -230,10 +234,10 @@ Add components
### Parameters
* `components` **([Array][7]<[Object][5]> | [Object][5] | [string][4])** HTML string or components model
* `opts` **[Object][5]** Options
* `components` **([Array][8]<[Object][6]> | [Object][6] | [string][5])** HTML string or components model
* `opts` **[Object][6]** Options
* `opts.avoidUpdateStyle` **[Boolean][6]** If the HTML string contains styles,
* `opts.avoidUpdateStyle` **[Boolean][7]** If the HTML string contains styles,
by default, they will be created and, if already exist, updated. When this option
is true, styles already created will not be updated. (optional, default `false`)
@ -249,13 +253,13 @@ editor.addComponents({
});
```
Returns **[Array][7]\<Component>**
Returns **[Array][8]\<Component>**
## getStyle
Returns style in JSON format object
Returns **[Object][5]**
Returns **[Object][6]**
## setStyle
@ -263,7 +267,7 @@ Set style inside editor's canvas. This method overrides actual style
### Parameters
* `style` **([Array][7]<[Object][5]> | [Object][5] | [string][4])** CSS string or style model
* `style` **([Array][8]<[Object][6]> | [Object][6] | [string][5])** CSS string or style model
* `opt` (optional, default `{}`)
### Examples
@ -285,7 +289,7 @@ Add styles to the editor
### Parameters
* `style` **([Array][7]<[Object][5]> | [Object][5] | [string][4])** CSS string or style model
* `style` **([Array][8]<[Object][6]> | [Object][6] | [string][5])** CSS string or style model
* `opts` (optional, default `{}`)
### Examples
@ -294,7 +298,7 @@ Add styles to the editor
editor.addStyle('.cls{color: red}');
```
Returns **[Array][7]\<CssRule>** Array of created CssRule instances
Returns **[Array][8]\<CssRule>** Array of created CssRule instances
## getSelected
@ -306,7 +310,7 @@ Returns **Model**
Returns an array of all selected components
Returns **[Array][7]**
Returns **[Array][8]**
## getSelectedToStyle
@ -324,10 +328,10 @@ Select a component
### Parameters
* `el` **(Component | [HTMLElement][9])** Component to select
* `opts` **[Object][5]?** Options
* `el` **(Component | [HTMLElement][10])** Component to select
* `opts` **[Object][6]?** Options
* `opts.scroll` **[Boolean][6]?** Scroll canvas to the selected element
* `opts.scroll` **[Boolean][7]?** Scroll canvas to the selected element
### Examples
@ -346,7 +350,7 @@ Add component to selection
### Parameters
* `el` **(Component | [HTMLElement][9] | [Array][7])** Component to select
* `el` **(Component | [HTMLElement][10] | [Array][8])** Component to select
### Examples
@ -362,7 +366,7 @@ Remove component from selection
### Parameters
* `el` **(Component | [HTMLElement][9] | [Array][7])** Component to select
* `el` **(Component | [HTMLElement][10] | [Array][8])** Component to select
### Examples
@ -378,7 +382,7 @@ Toggle component selection
### Parameters
* `el` **(Component | [HTMLElement][9] | [Array][7])** Component to select
* `el` **(Component | [HTMLElement][10] | [Array][8])** Component to select
### Examples
@ -410,7 +414,7 @@ change the canvas to the proper width
### Parameters
* `name` **[string][4]** Name of the device
* `name` **[string][5]** Name of the device
### Examples
@ -432,7 +436,7 @@ console.log(device);
// 'Tablet'
```
Returns **[string][4]** Device name
Returns **[string][5]** Device name
## runCommand
@ -440,8 +444,8 @@ Execute command
### Parameters
* `id` **[string][4]** Command ID
* `options` **[Object][5]** Custom options (optional, default `{}`)
* `id` **[string][5]** Command ID
* `options` **[Object][6]** Custom options (optional, default `{}`)
### Examples
@ -457,8 +461,8 @@ Stop the command if stop method was provided
### Parameters
* `id` **[string][4]** Command ID
* `options` **[Object][5]** Custom options (optional, default `{}`)
* `id` **[string][5]** Command ID
* `options` **[Object][6]** Custom options (optional, default `{}`)
### Examples
@ -474,9 +478,9 @@ Store data to the current storage
### Parameters
* `clb` **[Function][10]** Callback function
* `clb` **[Function][11]** Callback function
Returns **[Object][5]** Stored data
Returns **[Object][6]** Stored data
## storeData
@ -489,7 +493,7 @@ console.log(editor.storeData());
// { pages: [...], styles: [...], ... }
```
Returns **[Object][5]**
Returns **[Object][6]**
## load
@ -497,9 +501,9 @@ Load data from the current storage
### Parameters
* `clb` **[Function][10]** Callback function
* `clb` **[Function][11]** Callback function
Returns **[Object][5]** Stored data
Returns **[Object][6]** Stored data
## loadData
@ -507,7 +511,7 @@ Load data from the JSON data object
### Parameters
* `data` **[Object][5]** Data to load
* `data` **[Object][6]** Data to load
### Examples
@ -515,21 +519,21 @@ Load data from the JSON data object
editor.loadData({ pages: [...], styles: [...], ... })
```
Returns **[Object][5]** Loaded object
Returns **[Object][6]** Loaded object
## getContainer
Returns container element. The one which was indicated as 'container'
on init method
Returns **[HTMLElement][9]**
Returns **[HTMLElement][10]**
## getDirtyCount
Return the count of changes made to the content and not yet stored.
This count resets at any `store()`
Returns **[number][11]**
Returns **[number][12]**
## refresh
@ -542,9 +546,9 @@ refresh you'll get misleading position of tools
### Parameters
* `opts`
* `options` **[Object][5]?** Options
* `options` **[Object][6]?** Options
* `options.tools` **[Boolean][6]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
* `options.tools` **[Boolean][7]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
## setCustomRte
@ -552,7 +556,7 @@ Replace the built-in Rich Text Editor with a custom one.
### Parameters
* `obj` **[Object][5]** Custom RTE Interface
* `obj` **[Object][6]** Custom RTE Interface
### Examples
@ -592,7 +596,7 @@ custom parser, pass `null` as the argument
### Parameters
* `parser` **([Function][10] | null)** Parser function
* `parser` **([Function][11] | null)** Parser function
### Examples
@ -614,11 +618,11 @@ Returns **this**
## setDragMode
Change the global drag mode of components.
To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][12]
To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][13]
### Parameters
* `value` **[String][4]** Drag mode, options: 'absolute' | 'translate'
* `value` **[String][5]** Drag mode, options: 'absolute' | 'translate'
Returns **this**
@ -629,10 +633,10 @@ Trigger event log message
### Parameters
* `msg` **any** Message to log
* `opts` **[Object][5]** Custom options (optional, default `{}`)
* `opts` **[Object][6]** Custom options (optional, default `{}`)
* `opts.ns` **[String][4]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
* `opts.level` **[String][4]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
* `opts.ns` **[String][5]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
* `opts.level` **[String][5]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
### Examples
@ -654,11 +658,11 @@ Translate label
### Parameters
* `args` **...any**
* `key` **[String][4]** Label to translate
* `opts` **[Object][5]?** Options for the translation
* `key` **[String][5]** Label to translate
* `opts` **[Object][6]?** Options for the translation
* `opts.params` **[Object][5]?** Params for the translation
* `opts.noWarn` **[Boolean][6]?** Avoid warnings in case of missing resources
* `opts.params` **[Object][6]?** Params for the translation
* `opts.noWarn` **[Boolean][7]?** Avoid warnings in case of missing resources
### Examples
@ -670,7 +674,7 @@ editor.t('msg2', { params: { test: 'hello' } });
editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
```
Returns **[String][4]**
Returns **[String][5]**
## on
@ -678,8 +682,8 @@ Attach event
### Parameters
* `event` **[string][4]** Event name
* `callback` **[Function][10]** Callback function
* `event` **[string][5]** Event name
* `callback` **[Function][11]** Callback function
Returns **this**
@ -689,8 +693,8 @@ Attach event and detach it after the first run
### Parameters
* `event` **[string][4]** Event name
* `callback` **[Function][10]** Callback function
* `event` **[string][5]** Event name
* `callback` **[Function][11]** Callback function
Returns **this**
@ -700,8 +704,8 @@ Detach event
### Parameters
* `event` **[string][4]** Event name
* `callback` **[Function][10]** Callback function
* `event` **[string][5]** Event name
* `callback` **[Function][11]** Callback function
Returns **this**
@ -711,7 +715,7 @@ Trigger event
### Parameters
* `event` **[string][4]** Event to trigger
* `event` **[string][5]** Event to trigger
Returns **this**
@ -723,7 +727,7 @@ Destroy the editor
Render editor
Returns **[HTMLElement][9]**
Returns **[HTMLElement][10]**
## html
@ -731,8 +735,8 @@ Print safe HTML by using ES6 tagged template strings.
### Parameters
* `literals` **[Array][7]<[String][4]>**
* `substs` **[Array][7]<[String][4]>**
* `literals` **[Array][8]<[String][5]>**
* `substs` **[Array][8]<[String][5]>**
### Examples
@ -743,28 +747,30 @@ const safeStr = '<b>Hello</b>';
const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
```
Returns **[String][4]**
Returns **[String][5]**
[1]: https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js
[2]: /api/parser.html
[2]: /api/devices.html
[3]: /api/parser.html
[3]: /api/pages.html
[4]: /api/pages.html
[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[8]: em#setComponents
[9]: em#setComponents
[9]: https://developer.mozilla.org/docs/Web/HTML/Element
[10]: https://developer.mozilla.org/docs/Web/HTML/Element
[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
[12]: https://github.com/artf/grapesjs/issues/1936
[13]: https://github.com/artf/grapesjs/issues/1936

44
src/device_manager/index.js
View File

@ -11,19 +11,39 @@
* Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
*
* ```js
* const deviceManager = editor.DeviceManager;
* const deviceManager = editor.Devices;
* ```
* ## Available Events
* * `device:add` - Added new device. The [Device] is passed as an argument to the callback
* * `device:remove` - Device removed. The [Device] is passed as an argument to the callback
* * `device:select` - New device selected. The newly selected [Device] and the previous one, are passed as arguments to the callback
* * `device:update` - Device updated. The updated [Device] and the object containing changes are passed as arguments to the callback
* * `device` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
*
* ## Methods
* * [add](#add)
* * [get](#get)
* * [getAll](#getAll)
*
* @module DeviceManager
* [Device]: device.html
*
* @module Devices
*/
import defaults from './config/config';
import Device from './model/Device';
import Devices from './model/Devices';
import DevicesView from './view/DevicesView';
export const evAll = 'device';
export const evPfx = `${evAll}:`;
export const evSelect = `${evPfx}select`;
export const evSelectBefore = `${evSelect}:before`;
export const evUpdate = `${evPfx}update`;
export const evAdd = `${evPfx}add`;
export const evAddBefore = `${evAdd}:before`;
export const evRemove = `${evPfx}remove`;
export const evRemoveBefore = `${evRemove}:before`;
export default () => {
let c = {};
let devices;
@ -32,6 +52,21 @@ export default () => {
return {
name: 'DeviceManager',
Device,
Devices,
events: {
all: evAll,
select: evSelect,
selectBefore: evSelectBefore,
update: evUpdate,
add: evAdd,
addBefore: evAddBefore,
remove: evRemove,
removeBefore: evRemoveBefore
},
init(config = {}) {
c = { ...defaults, ...config };
@ -46,7 +81,7 @@ export default () => {
* @param {String} id Device id
* @param {String} width Width of the device
* @param {Object} [options] Custom options
* @returns {Device} Added device
* @returns {[Device]} Added device
* @example
* deviceManager.add('tablet', '900px');
* deviceManager.add('tablet2', '900px', {
@ -69,7 +104,8 @@ export default () => {
/**
* Return device by name
* @param {string} name Name of the device
* @param {String} name Name of the device
* @returns {[Device]}
* @example
* var device = deviceManager.get('Tablet');
* console.log(JSON.stringify(device));

44
src/device_manager/model/Device.js
View File

@ -1,24 +1,24 @@
import Backbone from 'backbone';
import { Model } from 'backbone';
export default Backbone.Model.extend({
idAttribute: 'name',
export default class Device extends Model {
defaults() {
return {
name: '',
defaults: {
name: '',
// Width to set for the editor iframe
width: null,
// Width to set for the editor iframe
width: null,
// Height to set for the editor iframe
height: '',
// Height to set for the editor iframe
height: '',
// The width which will be used in media queries,
// If empty the width will be used
widthMedia: null,
// The width which will be used in media queries,
// If empty the width will be used
widthMedia: null,
// Setup the order of media queries
priority: null
},
// Setup the order of media queries
priority: null
};
}
initialize() {
this.get('widthMedia') === null &&
@ -28,11 +28,19 @@ export default Backbone.Model.extend({
this.set('priority', parseFloat(this.get('widthMedia')) || 0);
const toCheck = ['width', 'height', 'widthMedia'];
toCheck.forEach(prop => this.checkUnit(prop));
},
}
/**
* Get device width.
* @returns {String}
*/
getWidth() {
return this.get('width');
}
checkUnit(prop) {
const pr = this.get(prop) || '';
const noUnit = (parseFloat(pr) || 0).toString() === pr.toString();
noUnit && this.set(prop, `${pr}px`);
}
});
}

2
src/editor/index.js
View File

@ -96,6 +96,8 @@
* * `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)
* * `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
* * `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
* ### Devices
* Check the [Devices](/api/devices.html) module.
* ### Parser
* Check the [Parser](/api/parser.html) module.
* ### Pages

Write Preview
Loading…
Cancel
Save