Add `togglable` option to Buttons, if it's `false` you can't turn off the button

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

@@ -136,6 +136,7 @@ var panelSidebar = {
 var buttonShowLayers = {
   id: 'show-layers',
   active: true,
+  togglable: false,
   label: 'Layers',
   command: {
     getRowEl(editor) { return editor.getContainer().parentNode.parentNode; },
@@ -157,6 +158,7 @@ var buttonShowLayers = {
 var buttonShowStyle = {
   id: 'show-style',
   label: 'Styles',
+  togglable: false,
   active: true,
   command: {
     getRowEl(editor) { return editor.getContainer().parentNode.parentNode; },
@@ -178,6 +180,7 @@ var buttonShowStyle = {
 var buttonShowTraits = {
   id: 'show-traits',
   label: 'Traits',
+  togglable: false,
   active: true,
   command: {
     getTraitsEl(editor) {
@@ -217,10 +220,12 @@ var panelDevices = {
       label: 'D',
       command: { run: editor => editor.setDevice('Desktop') },
       active: true,
+      togglable: false,
     }, {
       id: 'device-mobile',
       label: 'M',
       command: { run: editor => editor.setDevice('Mobile') },
+      togglable: false,
   }],
 };
 

docs/.vuepress/config.js

@@ -74,7 +74,7 @@ module.exports = {
       '/': [
         '',
         ['/getting-started', 'Getting Started'],
-        ['/faq', 'FAQ'],
+        // ['/faq', 'FAQ'],
         {
           title: 'Modules',
           collapsable: false,

docs/getting-started.md

@@ -318,11 +318,14 @@ const editor = grapesjs.init({
             active: true,
             label: 'Layers',
             command: 'show-layers',
+            // Once activated disable the possibility to turn it off
+            togglable: false,
           }, {
             id: 'show-style',
             active: true,
             label: 'Styles',
             command: 'show-styles',
+            togglable: false,
         }],
       }
     ]
@@ -447,6 +450,7 @@ const editor = grapesjs.init({
             active: true,
             label: 'Traits',
             command: 'show-traits',
+            togglable: false,
         }],
       }
     ]
@@ -519,10 +523,12 @@ const editor = grapesjs.init({
             label: 'D',
             command: 'set-device-desktop',
             active: true,
+            togglable: false,
           }, {
             id: 'device-mobile',
             label: 'M',
             command: 'set-device-mobile',
+            togglable: false,
         }],
       }
     ]

src/panels/model/Button.js

@@ -12,6 +12,7 @@ module.exports = Backbone.Model.extend({
     options: {},
     active: false,
     dragDrop: false,
+    togglable: true,
     runDefaultCommand: true,
     stopDefaultCommand: false,
     disable: false

src/panels/view/ButtonView.js

@@ -138,16 +138,20 @@ module.exports = Backbone.View.extend({
   },
 
   toogleActive() {
-    var active = this.model.get('active');
+    const { model } = this;
-    this.model.set('active', !active);
+    const { active, togglable } = model.attributes;
+
+    if (active && !togglable) return;
+
+    model.set('active', !active);
 
     // If the stop is requested
     var command = this.em.get('Commands').get('select-comp');
 
     if (active) {
-      if (this.model.get('runDefaultCommand')) this.em.runDefault();
+      if (model.get('runDefaultCommand')) this.em.runDefault();
     } else {
-      if (this.model.get('stopDefaultCommand')) this.em.stopDefault();
+      if (model.get('stopDefaultCommand')) this.em.stopDefault();
     }
   },