API Css Composer

Artur Arseniev edited this page Aug 30, 2016 · 1 revision

CssComposer

This module contains and manage CSS rules for the template inside the canvas Before using the methods you should get first the module from the editor instance, in this way:

var cssComposer = editor.CssComposer;

Parameters

  • config Object Configurations
    • config.rules (string|Array.<Object>)= CSS string or an array of rule objects (optional, default [])

Examples

...
CssComposer: {
   rules: '.myClass{ color: red}',
}

add

Add new rule to the collection, if not yet exists with the same selectors

Parameters

  • selectors Array.<Selector> Array of selectors
  • state String Css rule state
  • width String For which device this style is oriented

Examples

var sm = editor.SelectorManager;
var sel1 = sm.add('myClass1');
var sel2 = sm.add('myClass2');
var rule = cssComposer.add([sel1, sel2], 'hover');
rule.set('style', {
  width: '100px',
  color: '#fff',
});

Returns Model

get

Get the rule

Parameters

  • selectors Array.<Selector> Array of selectors
  • state String Css rule state
  • width String For which device this style is oriented

Examples

var sm = editor.SelectorManager;
var sel1 = sm.add('myClass1');
var sel2 = sm.add('myClass2');
var rule = cssComposer.get([sel1, sel2], 'hover');
// Update the style
rule.set('style', {
  width: '300px',
  color: '#000',
});

Returns (Model|null)

getAll

Get the collection of rules

Returns Collection

load

Load data from the passed object, if the object is empty will try to fetch them autonomously from the storage manager. The fetched data will be added to the collection

Parameters

  • data Object Object of data to load

Returns Object Loaded rules

store

Store data to the selected storage

Parameters

  • noStore Boolean If true, won't store

Returns Object Data to store