From f2e323b3ae512fad0af42a345bbb434746b88188 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 13 Jul 2018 23:18:23 +0200
Subject: [PATCH] Add `togglable` option to Buttons, if it's `false` you can't
 turn off the button

---
 docs/.vuepress/components/demos/utils.js |  5 +++++
 docs/.vuepress/config.js                 |  2 +-
 docs/getting-started.md                  |  6 ++++++
 src/panels/model/Button.js               |  1 +
 src/panels/view/ButtonView.js            | 12 ++++++++----
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/docs/.vuepress/components/demos/utils.js b/docs/.vuepress/components/demos/utils.js
index 661aad0a0..24ba19f41 100644
--- a/docs/.vuepress/components/demos/utils.js
+++ b/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,
   }],
 };
 
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d69ffd60d..0e789a9bb 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -74,7 +74,7 @@ module.exports = {
       '/': [
         '',
         ['/getting-started', 'Getting Started'],
-        ['/faq', 'FAQ'],
+        // ['/faq', 'FAQ'],
         {
           title: 'Modules',
           collapsable: false,
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 16b6be7b5..b6152d3a4 100644
--- a/docs/getting-started.md
+++ b/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,
         }],
       }
     ]
diff --git a/src/panels/model/Button.js b/src/panels/model/Button.js
index 250ea6244..630c711d4 100644
--- a/src/panels/model/Button.js
+++ b/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
diff --git a/src/panels/view/ButtonView.js b/src/panels/view/ButtonView.js
index cdaf49488..875682d06 100644
--- a/src/panels/view/ButtonView.js
+++ b/src/panels/view/ButtonView.js
@@ -138,16 +138,20 @@ module.exports = Backbone.View.extend({
   },
 
   toogleActive() {
-    var active = this.model.get('active');
-    this.model.set('active', !active);
+    const { model } = this;
+    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();
     }
   },