Merge from dev

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.12.23",
+  "version": "0.12.24",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.12.23",
+  "version": "0.12.24",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/asset_manager/config/config.js

@@ -1,4 +1,4 @@
-module.exports =  {
+module.exports = {
   // Default assets
   // eg. [
   //  'https://...image1.png',
@@ -76,4 +76,7 @@ module.exports =  {
 
   // Default title for the asset manager modal
   modalTitle: 'Select Image',
+
+  //Default placeholder for input
+  inputPlaceholder: 'http://path/to/the/image.jpg'
 };

src/asset_manager/view/AssetsView.js

@@ -16,7 +16,7 @@ module.exports = Backbone.View.extend({
       <div class="${pfx}assets-header">
         <form class="${pfx}add-asset">
           <div class="${ppfx}field ${pfx}add-field">
-            <input placeholder="http://path/to/the/image.jpg"/>
+            <input placeholder="${view.config.inputPlaceholder}"/>
           </div>
           <button class="${ppfx}btn-prim">${view.config.addBtnText}</button>
           <div style="clear:both"></div>

src/editor/index.js

@@ -542,7 +542,7 @@ module.exports = config => {
      * @return {this}
      */
     trigger(event) {
-      return em.trigger(event);
+      return em.trigger.apply(em, arguments);
     },
 
     /**

src/editor/view/EditorView.js

@@ -9,6 +9,7 @@ module.exports = Backbone.View.extend({
     this.pn = model.get('Panels');
     model.on('loaded', () => {
       this.pn.active();
+      this.pn.disableButtons();
       model.runDefault();
       setTimeout(() => model.trigger('load'), 0);
     });

src/panels/index.js

@@ -200,6 +200,19 @@ module.exports = () => {
           });
         });
     },
+    
+    /**
+     * Disable buttons flagged as disabled
+     * @private
+     */
+    disableButtons() {
+      this.getPanels().each(p => {
+          p.get('buttons').each(btn => {
+            if(btn.get('disable'))
+              btn.trigger('change:disable');
+          });
+        });
+    },
 
     Panel,
 

src/panels/model/Button.js

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

src/panels/model/Buttons.js

@@ -38,5 +38,39 @@ module.exports = Backbone.Collection.extend({
       }
     });
   },
+  
+  /**
+   * Disables all buttons
+   * @param  {String}  ctx Context string
+   *
+   * @return  void
+   * */
+  disableAllButtons(ctx) {
+    var context = ctx || '';
+    this.forEach((model, index) => {
+      if( model.get('context') == context ){
+        model.set('disable', true);
+        if(model.get('buttons').length)
+          model.get('buttons').disableAllButtons(context);
+      }
+    });
+  },
+
+  /**
+   * Disables all buttons, except one passed
+   * @param  {Object}  except  Model to ignore
+   * @param  {Boolean}  r     Recursive flag
+   *
+   * @return  void
+   * */
+  disableAllButtonsExceptOne(except, r) {
+    this.forEach((model, index) => {
+      if(model !== except){
+        model.set('disable', true);
+        if(r && model.get('buttons').length)
+          model.get('buttons').disableAllButtonsExceptOne(except,r);
+      }
+    });
+  },
 
 });

src/panels/view/ButtonView.js

@@ -13,6 +13,7 @@ module.exports = Backbone.View.extend({
     this.ppfx = this.config.pStylePrefix || '';
     this.id = this.pfx + this.model.get('id');
     this.activeCls = this.pfx + 'active';
+    this.disableCls = this.pfx + 'active';
     this.btnsVisCls = this.pfx + 'visible';
     this.parentM = o.parentM || null;
     this.className = this.pfx + 'btn' + (cls ? ' ' + cls : '');
@@ -21,6 +22,7 @@ module.exports = Backbone.View.extend({
     this.listenTo(this.model, 'change:bntsVis', this.updateBtnsVis);
     this.listenTo(this.model, 'change:attributes', this.updateAttributes);
     this.listenTo(this.model, 'change:className', this.updateClassName);
+    this.listenTo(this.model, 'change:disable', this.updateDisable);
 
     if(this.model.get('buttons').length){
       this.$el.on('mousedown', this.startTimer);
@@ -234,6 +236,15 @@ module.exports = Backbone.View.extend({
     }
   },
 
+  updateDisable() {
+    if(this.model.get('disable')) {
+      this.$el.addClass(this.disableCls);
+    } else {
+      this.$el.removeClass(this.disableCls);
+    }
+  
+  },
+
   /**
    * Update active style status
    *
@@ -255,9 +266,18 @@ module.exports = Backbone.View.extend({
   clicked(e) {
     if(this.model.get('bntsVis') )
       return;
+    
+    if(this.model.get('disable') )
+    return;
+
+    this.toogleActive();
+  },
+
+  toogleActive() {
 
     if(this.parentM)
       this.swapParent();
+
     var active = this.model.get('active');
     this.model.set('active', !active);
 

src/style_manager/model/PropertyFactory.js

@@ -291,17 +291,26 @@ module.exports = () => ({
           break;
         case 'font-family':
           var ss = ', sans-serif';
-          var s = ', serif';
-          var fonts = ['Arial, Helvetica' + ss, 'Arial Black, Gadget' + ss, 'Brush Script MT' + ss,
-            'Comic Sans MS, cursive' + ss, 'Courier New, Courier, monospace', 'Georgia, serif', 'Helvetica, serif',
-            'Impact, Charcoal' + ss, 'Lucida Sans Unicode, Lucida Grande' + ss, 'Tahoma, Geneva' + ss,
-            'Times New Roman, Times, serif', 'Trebuchet MS, Helvetica' + ss, 'Verdana, Geneva' + ss];
+          var fonts = [
+            'Arial, Helvetica' + ss,
+            'Arial Black, Gadget' + ss,
+            'Brush Script MT' + ss,
+            'Comic Sans MS, cursive' + ss,
+            'Courier New, Courier, monospace',
+            'Georgia, serif',
+            'Helvetica, serif',
+            'Impact, Charcoal' + ss,
+            'Lucida Sans Unicode, Lucida Grande' + ss,
+            'Tahoma, Geneva' + ss,
+            'Times New Roman, Times, serif',
+            'Trebuchet MS, Helvetica' + ss,
+            'Verdana, Geneva' + ss
+          ];
           obj.list = [];
           for(var j = 0, l = fonts.length; j < l; j++){
             var font = {};
             font.value = fonts[j];
             font.name = fonts[j].split(',')[0];
-            font.style = 'font-family: ' + fonts[j] + '; font-size:15px';
             obj.list.push(font);
           }
           break;

src/styles/scss/_gjs_inputs.scss

@@ -84,7 +84,8 @@
 .#{$clm-prefix}select option,
 .#{$sm-prefix}select option,
 .#{$sm-prefix}unit option {
-  @extend .#{$app-prefix}bg-main;
+  background-color: $mainColor;
+  color: $fontColor;
 }
 
 .#{$app-prefix}field {
@@ -101,10 +102,6 @@
     resize: vertical;
   }
 
-  option {
-    padding: 3px 0;
-  }
-
   .#{$app-prefix}sel-arrow {
     height: 100%;
     width: 9px;
@@ -275,10 +272,6 @@
 
 .#{$app-prefix}field-select {
   padding: 0;
-
-  option {
-    @extend .#{$app-prefix}bg-main;
-  }
 }
 
 .#{$app-prefix}field-range {

test/specs/panels/index.js

@@ -93,6 +93,15 @@ describe('Panels', () => {
       expect(spy.called).toEqual(true);
     });
 
+    it("Disable correctly buttons flagged as disabled", () => {
+      var spy = sinon.spy();
+      var panel = obj.addPanel({id: 'test'});
+      var btn = obj.addButton('test', {id:'btn', disable: true});
+      btn.on('change:disable', spy);
+      obj.disableButtons();
+      expect(spy.called).toEqual(true);
+    });
+
   });
 
   Models.run();

test/specs/panels/model/PanelModels.js

@@ -33,6 +33,10 @@ module.exports = {
         expect(obj.get('buttons').length).toEqual(1);
       });
 
+      it('Has a disable attribute with default value as false', () => {
+        expect(obj.get('disable')).toEqual(false);
+      });
+
     });
 
     describe('Buttons', () => {
@@ -69,6 +73,24 @@ module.exports = {
         obj.deactivateAllExceptOne(btn);
         expect(obj.at(0).get('active')).toEqual(true);
       });
+      
+      it('Disable all buttons', () => {
+        obj.add({ disable: false });
+        obj.disableAllButtons();
+        expect(obj.at(0).get('disable')).toEqual(true);
+      });
+
+      it('Disables buttons with context', () => {
+        obj.add({ disable: false, context: 'someContext' });
+        obj.disableAllButtons('someContext');
+        expect(obj.at(0).get('disable')).toEqual(true);
+      });
+
+      it('Disables except one', () => {
+        var btn = obj.add({ disable: false });
+        obj.disableAllButtonsExceptOne(btn);
+        expect(obj.at(0).get('disable')).toEqual(false);
+      });
 
     });
 

test/specs/panels/view/ButtonView.js

@@ -14,7 +14,7 @@ module.exports = {
         beforeEach(() => {
           model = new Button();
           view = new ButtonView({
-            model
+            model: model
           });
           document.body.innerHTML = '<div id="fixtures"></div>';
           fixtures = document.body.querySelector('#fixtures');
@@ -55,6 +55,35 @@ module.exports = {
           expect(view.el.getAttribute('class')).toEqual(btnClass);
         });
 
+        it('Disable the button', () => {
+          model.set('disable', true, {silent: true});
+          view.updateDisable();
+          expect(view.el.getAttribute('class')).toEqual(btnClass + ' active');
+        });
+        
+        it('Enable the disabled button', () => {
+          model.set('disable', true, {silent: true});
+          view.updateDisable();
+          expect(view.el.getAttribute('class')).toEqual(btnClass + ' active');
+          model.set('disable', false, {silent: true});
+          view.updateDisable();
+          expect(view.el.getAttribute('class')).toEqual(btnClass);
+        });
+
+        it('Cancels the click action when button is disabled', () => {
+          const stub = sinon.stub(view, 'toogleActive');
+          model.set('disable', true, {silent: true});
+          view.clicked();
+          expect(stub.called).toEqual(false);
+        });
+
+        it('Enable the click action when button is enable', () => {
+          const stub = sinon.stub(view, 'toogleActive');
+          model.set('disable', false, {silent: true});
+          view.clicked();
+          expect(stub.called).toEqual(true);
+        });
+
         it('Renders correctly', () => {
           expect(view.render()).toExist();
         });

test/specs/style_manager/model/Models.js

@@ -492,26 +492,24 @@ module.exports = {
       it('Build font-family', () => {
         var ss = ', sans-serif';
         var ms = ', monospace';
-        var ff = 'font-family: ';
-        var sty = '; font-size:15px';
         var res = {
           property: 'font-family',
           type: 'select',
           defaults: 'Arial, Helvetica' + ss,
           list:[
-            {name: 'Arial', value: 'Arial, Helvetica' + ss, style: ff + 'Arial, Helvetica' + ss + sty},
-            {name: 'Arial Black', value: 'Arial Black, Gadget' + ss,  style: ff + 'Arial Black, Gadget' + ss + sty},
-            {name: 'Brush Script MT', value: 'Brush Script MT' + ss,  style: ff + 'Brush Script MT' + ss + sty},
-            {name: 'Comic Sans MS', value: 'Comic Sans MS, cursive' + ss,  style: ff + 'Comic Sans MS, cursive' + ss + sty},
-            {name: 'Courier New', value: 'Courier New, Courier' + ms,  style: ff + 'Courier New, Courier' + ms + sty},
-            {name: 'Georgia', value: 'Georgia, serif',  style: ff + 'Georgia, serif' + sty},
-            {name: 'Helvetica', value: 'Helvetica, serif',  style: ff + 'Helvetica, serif' + sty},
-            {name: 'Impact', value: 'Impact, Charcoal' + ss,  style: ff + 'Impact, Charcoal' + ss + sty},
-            {name: 'Lucida Sans Unicode', value: 'Lucida Sans Unicode, Lucida Grande' + ss,  style: ff + 'Lucida Sans Unicode, Lucida Grande' + ss + sty},
-            {name: 'Tahoma', value: 'Tahoma, Geneva' + ss,  style: ff + 'Tahoma, Geneva' + ss + sty},
-            {name: 'Times New Roman', value: 'Times New Roman, Times, serif',  style: ff + 'Times New Roman, Times, serif' + sty},
-            {name: 'Trebuchet MS', value: 'Trebuchet MS, Helvetica' + ss,  style: ff + 'Trebuchet MS, Helvetica' + ss + sty},
-            {name: 'Verdana', value: 'Verdana, Geneva' + ss,  style: ff + 'Verdana, Geneva' + ss + sty},
+            {name: 'Arial', value: 'Arial, Helvetica' + ss},
+            {name: 'Arial Black', value: 'Arial Black, Gadget' + ss},
+            {name: 'Brush Script MT', value: 'Brush Script MT' + ss},
+            {name: 'Comic Sans MS', value: 'Comic Sans MS, cursive' + ss},
+            {name: 'Courier New', value: 'Courier New, Courier' + ms},
+            {name: 'Georgia', value: 'Georgia, serif'},
+            {name: 'Helvetica', value: 'Helvetica, serif'},
+            {name: 'Impact', value: 'Impact, Charcoal' + ss},
+            {name: 'Lucida Sans Unicode', value: 'Lucida Sans Unicode, Lucida Grande' + ss},
+            {name: 'Tahoma', value: 'Tahoma, Geneva' + ss},
+            {name: 'Times New Roman', value: 'Times New Roman, Times, serif'},
+            {name: 'Trebuchet MS', value: 'Trebuchet MS, Helvetica' + ss},
+            {name: 'Verdana', value: 'Verdana, Geneva' + ss},
           ],
         };
         expect(obj.build('font-family')).toEqual([res]);