Update demo in docs with style manager

docs/.vuepress/components/DemoStyle.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="panel__top" id="panel__top5">
+        <div class="panel__basic-actions" id="panel__basic-actions5"></div>
+        <div class="panel__switcher" id="panel__switcher5"></div>
+    </div>
+
+    <div class="editor-row">
+      <div class="editor-canvas">
+        <div class="gjs" id="gjs5">
+          <h1>Hello World Component!</h1>
+        </div>
+      </div>
+      <div class="panel__right" id="panel__right5">
+        <div class="layers-container" id="layers-container5"></div>
+        <div class="styles-container" id="styles-container5"></div>
+      </div>
+    </div>
+
+    <div id="blocks5"></div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  mounted() {
+    const utils = require('./demos/utils.js');
+    const editor5 = grapesjs.init(utils.gjsConfigStyle);
+    editor5.Panels.addPanel(Object.assign({}, utils.panelTop, {
+      el: '#panel__top5'
+    }));
+    editor5.Panels.addPanel(Object.assign({}, utils.panelBasicActions, {
+      el: '#panel__basic-actions5'
+    }));
+    editor5.Panels.addPanel(Object.assign({}, utils.panelSidebar, {
+      el: '#panel__right5'
+    }));
+    editor5.Panels.addPanel(Object.assign({}, utils.panelSwitcher, {
+      el: '#panel__switcher5'
+    }));
+    window.editor5 = editor5;
+  }
+}
+</script>
+
+<style>
+.panel__switcher {
+  position: initial;
+}
+</style>

docs/.vuepress/components/demos/utils.js

@@ -29,6 +29,47 @@ var blockManager = {
   ]
 };
 
+var styleManager = {
+  sectors: [{
+      name: 'Dimension',
+      open: false,
+      // Use built-in properties
+      buildProps: ['width', 'min-height', 'padding'],
+      // Use `properties` to define/override single property
+      properties: [
+        {
+          // Type of the input,
+          // options: integer | radio | select | color | slider | file | composite | stack
+          type: 'integer',
+          name: 'The width', // Label for the property
+          property: 'width', // CSS property (if buildProps contains it will be extended)
+          units: ['px', '%'], // Units, available only for 'integer' types
+          defaults: 'auto', // Default value
+          min: 0, // Min value, available only for 'integer' types
+        }
+      ]
+    },{
+      name: 'Extra',
+      open: false,
+      buildProps: ['background-color', 'box-shadow', 'custom-prop'],
+      properties: [
+        {
+          id: 'custom-prop',
+          name: 'Custom Label',
+          property: 'font-size',
+          type: 'select',
+          defaults: '32px',
+          // List of options, available only for 'select' and 'radio'  types
+          options: [
+            { value: '12px', name: 'Tiny' },
+            { value: '18px', name: 'Medium' },
+            { value: '32px', name: 'Big' },
+          ],
+       }
+      ]
+    }]
+};
+
 var panelTop = { id: 'panel-top' };
 var panelBasicActions = {
   id: 'panel-basic',
@@ -78,6 +119,54 @@ var panelSidebar = {
     keyWidth: 'flex-basis',
   },
 };
+var panelSwitcher = {
+  id: 'panel-switcher',
+  buttons: [
+    {
+      id: 'show-layers',
+      active: true,
+      label: 'Layers',
+      command: {
+        getRowEl(editor) { return editor.getContainer().parentNode.parentNode; },
+        getLayersEl(row) { return row.querySelector('.layers-container') },
+        getStyleEl(row) { return row.querySelector('.styles-container') },
+
+        run(editor, sender) {
+          const row = this.getRowEl(editor);
+          const lmEl = this.getLayersEl(row);
+          lmEl.style.display = '';
+        },
+        stop(editor, sender) {
+          const row = this.getRowEl(editor);
+          const lmEl = this.getLayersEl(row);
+          lmEl.style.display = 'none';
+          sender && sender.set('active', false);
+        },
+      },
+    }, {
+      id: 'show-style',
+      label: 'Styles',
+      active: true,
+      command: {
+        getRowEl(editor) { return editor.getContainer().parentNode.parentNode; },
+        getLayersEl(row) { return row.querySelector('.layers-container') },
+        getStyleEl(row) { return row.querySelector('.styles-container') },
+
+        run(editor, sender) {
+          const row = this.getRowEl(editor);
+          const smEl = this.getStyleEl(row);
+          smEl.style.display = '';
+        },
+        stop(editor, sender) {
+          const row = this.getRowEl(editor);
+          const smEl = this.getStyleEl(row);
+          smEl.style.display = 'none';
+          sender && sender.set('active', false);
+        },
+      },
+    }
+  ],
+};
 
 var gjsConfigStart = {
   // Indicate where to init the editor. It's also possible to pass an HTMLElement
@@ -111,11 +200,21 @@ var gjsConfigLayers = Object.assign({}, gjsConfigBlocks, {
   panels: { defaults: [panelSidebar] }
 });
 
+var gjsConfigStyle = Object.assign({}, gjsConfigBlocks, {
+  container: '#gjs5',
+  blockManager: Object.assign({}, blockManager, { appendTo: '#blocks5' }),
+  layerManager: { appendTo: '#layers-container5', scrollLayers: 0 },
+  styleManager: Object.assign({}, styleManager, { appendTo: '#styles-container5' }),
+});
+
 module.exports = {
   gjsConfigStart,
   gjsConfigBlocks,
   gjsConfigPanels,
   gjsConfigLayers,
+  gjsConfigStyle,
   panelTop,
   panelBasicActions,
+  panelSidebar,
+  panelSwitcher,
 };

docs/.vuepress/config.js

@@ -84,6 +84,7 @@ module.exports = {
             ['/modules/Components', 'Component Manager'],
             ['/modules/Components-js', 'Components & JS'],
             ['/modules/Traits', 'Trait Manager'],
+            ['/modules/Style-manager', 'Style Manager'],
             ['/modules/Storage', 'Storag Manager'],
             ['/modules/Plugins', 'Plugins'],
           ]

docs/getting-started.md

@@ -274,15 +274,139 @@ const editor = grapesjs.init({
 </Demo>
 
 ## Style Manager
-An important step in any web project is the style definition and with the built-in style manager module you're able to do it easily and quickly.
+Once you have defined the structure of the template probably the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.
-The style manager is composed by style properties and are grouped by sectors, let's see how to define a basic set of them.
 
--- show how to render SM and show style for width, height, padding, Typography, shadows
+Let's start from adding one more panel inside the `panel__right` and another one in `panel__top` which will contain a Layer/Style Manager switcher
 
-Now any component could be defined with its own style, you can add any other CSS property to your sectors and configure it by your needs. To get more about style manager extension check out this guide.
+```html{3,11}
+<div class="panel__top">
+    <div class="panel__basic-actions"></div>
+    <div class="panel__switcher"></div>
+</div>
+<div class="editor-row">
+  <div class="editor-canvas">
+    <div id="gjs">...</div>
+  </div>
+  <div class="panel__right">
+    <div class="layers-container"></div>
+    <div class="styles-container"></div>
+  </div>
+</div>
+<div id="blocks"></div>
+```
+```css
+.panel__switcher {
+  position: initial;
+}
+```
+```js
+const editor = grapesjs.init({
+  // ...
+  panels: {
+    defaults: [
+      // ...
+      {
+        id: 'panel-switcher',
+        el: '.panel__switcher',
+        buttons: [{
+            id: 'show-layers',
+            active: true,
+            label: 'Layers',
+            command: 'commandShowLayers',
+          }, {
+            id: 'show-style',
+            active: true,
+            label: 'Styles',
+            command: 'commandShowStyle',
+        }],
+      }
+    ]
+  },
+  styleManager: {
+    appendTo: '.styles-container',
+    sectors: [{
+        name: 'Dimension',
+        open: false,
+        // Use built-in properties
+        buildProps: ['width', 'min-height', 'padding'],
+        // Use `properties` to define/override single property
+        properties: [
+          {
+            // Type of the input,
+            // options: integer | radio | select | color | slider | file | composite | stack
+            type: 'integer',
+            name: 'The width', // Label for the property
+            property: 'width', // CSS property (if buildProps contains it will be extended)
+            units: ['px', '%'], // Units, available only for 'integer' types
+            defaults: 'auto', // Default value
+            min: 0, // Min value, available only for 'integer' types
+          }
+        ]
+      },{
+        name: 'Extra',
+        open: false,
+        buildProps: ['background-color', 'box-shadow', 'custom-prop'],
+        properties: [
+          {
+            id: 'custom-prop',
+            name: 'Custom Label',
+            property: 'font-size',
+            type: 'select',
+            defaults: '32px',
+            // List of options, available only for 'select' and 'radio'  types
+            options: [
+              { value: '12px', name: 'Tiny' },
+              { value: '18px', name: 'Medium' },
+              { value: '32px', name: 'Big' },
+            ],
+         }
+        ]
+      }]
+  },
+});
+
+// Define commands
+editor.Commands.add('commandShowLayers', {
+  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
+  getLayersEl(row) { return row.querySelector('.layers-container') },
+
+  run(editor, sender) {
+    const lmEl = this.getLayersEl(this.getRowEl(editor));
+    lmEl.style.display = '';
+  },
+  stop(editor, sender) {
+    const lmEl = this.getLayersEl(this.getRowEl(editor));
+    lmEl.style.display = 'none';
+    sender && sender.set('active', false);
+  },
+});
+editor.Commands.add('commandShowStyle', {
+  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
+  getStyleEl(row) { return row.querySelector('.styles-container') },
+
+  run(editor, sender) {
+    const smEl = this.getStyleEl(this.getRowEl(editor));
+    smEl.style.display = '';
+  },
+  stop(editor, sender) {
+    const smEl = this.getStyleEl(this.getRowEl(editor));
+    smEl.style.display = 'none';
+    sender && sender.set('active', false);
+  },
+});
+```
+
+<Demo>
+  <DemoStyle/>
+</Demo>
+
+Now any component could be defined with its own style, you can add any other CSS property to your sectors and configure it by your needs.
+
+<!-- To get more about style manager extension check out this guide.
 Each component can also indicate what to style and what not.
 
 -- Example component with limit styles
+-->
 
 ## Traits
 Most of them time you would style your components and you would place them somewhere in the structure, but sometimes your components might need custom attributes or even behaviours

docs/modules/Style-manager.md

@@ -0,0 +1,31 @@
+---
+title: Style Manager
+---
+
+# Style Manager
+
+Coming soon
+
+[[toc]]
+
+
+## Built-in properties
+
+Here you can find all the available built-in properties that you can use inside Style Manager via `buildProps`:
+
+`float`, `position`, `text-align`, `display`, `font-family`, `font-weight`, `border`, `border-style`, `border-color`, `border-width`, `box-shadow`, `background-repeat`, `background-position`, `background-attachment`, `background-size`, `transition`, `transition-duration`, `transition-property`, `transition-timing-function`, `top`, `right`, `bottom`, `left`, `margin`, `margin-top`, `margin-right`, `margin-bottom`, `margin-left`, `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`, `width`, `heigth`, `min-width`, `min-heigth`, `max-width`, `max-heigth`, `font-size`, `letter-spacing`, `line-height`, `text-shadow`, `border-radius`, `border-top-left-radius`, `border-top-right-radius`, `border-bottom-left-radius`, `border-bottom-right-radius`, `perspective`, `transform`, `transform-rotate-x`, `transform-rotate-y`, `transform-rotate-z`, `transform-scale-x`, `transform-scale-y`, `transform-scale-z`, `color`, `background-color`, `background`, `background-image`, `cursor`
+
+Example usage:
+```js
+...
+  styleManager : {
+    sectors: [{
+      name: 'Dimension',
+      buildProps: ['width', 'min-height']
+    },{
+      name: 'Extra',
+      buildProps: ['background-color', 'box-shadow']
+    }]
+  }
+...
+```

src/panels/view/ButtonView.js

@@ -82,7 +82,7 @@ module.exports = Backbone.View.extend({
     } else if (cmdIsFunc) {
       command = commands.create({ run: commandName });
     } else if (commandName !== null && isObject(commandName)) {
-      command = commandName;
+      command = commands.create(commandName);
     }
 
     if (model.get('active')) {