Skip to content

Latest commit

 

History

History
169 lines (112 loc) · 3.79 KB

device_manager.md

File metadata and controls

169 lines (112 loc) · 3.79 KB

Devices

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
 deviceManager: {
   // options
 }
})

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

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 new device

Parameters

  • props Object Device properties
  • options Record<string, any> (optional, default {})

Examples

const device1 = deviceManager.add({
 // Without an explicit ID, the `name` will be taken. In case of missing `name`, a random ID will be created.
 id: 'tablet',
 name: 'Tablet',
 width: '900px', // This width will be applied on the canvas frame and for the CSS media
});
const device2 = deviceManager.add({
 id: 'tablet2',
 name: 'Tablet 2',
 width: '800px', // This width will be applied on the canvas frame
 widthMedia: '810px', // This width that will be used for the CSS media
 height: '600px', // Height will be applied on the canvas frame
});

Returns Device Added device

get

Return device by ID

Parameters

Examples

const device = deviceManager.get('Tablet');
console.log(JSON.stringify(device));
// {name: 'Tablet', width: '900px'}

Returns (Device | null)

remove

Remove device

Parameters

  • device (String | Device) Device or device id
  • opts (optional, default {})

Examples

const removed = deviceManager.remove('device-id');
// or by passing the Device
const device = deviceManager.get('device-id');
deviceManager.remove(device);

Returns Device Removed device

getDevices

Return all devices

Examples

const devices = deviceManager.getDevices();
console.log(JSON.stringify(devices));
// [{name: 'Desktop', width: ''}, ...]

Returns Array<Device>

select

Change the selected device. This will update the frame in the canvas

Parameters

  • device (String | Device) Device or device id
  • opts (optional, default {})

Examples

deviceManager.select('some-id');
// or by passing the page
const device = deviceManager.get('some-id');
deviceManager.select(device);

getSelected

Get the selected device

Examples

const selected = deviceManager.getSelected();

Returns Device