Remove default blocks from configuration

9 years ago · 2c31c5575b
2 changed files with 169 additions and 203 deletions
--- a/index.html
+++ b/index.html
@ -774,6 +774,18 @@
          width: 500px;
        }

+        .row {
+          display: table;
+          padding: 10px;
+          width: 100%;
+        }
+
+        .cell {
+          width: 8%;
+          display: table-cell;
+          height: 75px;
+        }
+
        @media (max-width: 768px){
          .foot-form-cont{
            width:400px;
@ -781,6 +793,11 @@
          .foot-form-title{
            width: auto;
          }
+
+          .cell {
+            width: 100%;
+            display: block;
+          }
        }

        @media (max-width: 480px){
@ -792,6 +809,7 @@
    </div>

    <script type="text/javascript">
+    var blkStyle = '.blk-row::after{ content: ""; clear: both; display: block;} .blk-row{padding: 10px;}';
    var editor  = grapesjs.init(


@ -811,63 +829,6 @@
        storeStyles: 1,
      },

-      /*
-      components: [{
-        //script: 'var el = this; setInterval(function(){el.style.marginLeft = Math.random() * 50 +"px";}, 1000)',
-        script: 'loadScript = function(){console.log("loaded INSIDE", $);}',
-        style: {
-          background: 'red',
-          width:'500px',
-          height:'100px',
-          margin: '50px auto',
-        }
-      },{
-        script: 'this.innerHTML= "test1";',
-        style: {
-          background: 'blue',
-          width:'500px',
-          height:'100px',
-          margin: '50px auto',
-        }
-      },{
-        script: 'this.innerHTML= "test2";',
-        style: {
-          background: 'green',
-          width:'500px',
-          height:'100px',
-          margin: '50px auto',
-        }
-      },{
-        style: {
-          background: 'yellow',
-          width:'500px',
-          height:'100px',
-          margin: '50px auto',
-        }
-      },{
-        type: 'text',
-        style:{
-          width:'100px',
-          height:'100px',
-          margin: '50px auto',
-        },
-        traits: ['title'],
-        components: [{
-          type: 'textnode',
-          content: 'text node row',
-        },{
-          type: 'textnode',
-          content: ', another text node',
-        },{
-          type: 'link',
-          content: 'someLink',
-        },{
-          type: 'textnode',
-          content: " More text node  ---   ",
-        }],
-      }],
-*/
-
      commands:     {
          defaults: [{
            id:   'open-github',
@ -916,6 +877,156 @@
         ]
      },

+      blockManager: {
+        blocks: [{
+            id: 'b1',
+            label: '1 Block',
+            category: 'Basic',
+            attributes: {class:'gjs-fonts gjs-f-b1'},
+            content: `<div class="row" data-gjs-droppable=".cell" data-gjs-custom-name="Row">
+                <div class="cell" data-gjs-draggable=".row" data-gjs-custom-name="Cell"></div>
+              </div>`
+          },{
+            id: 'b2',
+            label: '2 Blocks',
+            category: 'Basic',
+            attributes: {class:'gjs-fonts gjs-f-b2'},
+            content: `<div class="row" data-gjs-droppable=".cell" data-gjs-custom-name="Row">
+                <div class="cell" data-gjs-draggable=".row" data-gjs-custom-name="Cell"></div>
+                <div class="cell" data-gjs-draggable=".row" data-gjs-custom-name="Cell"></div>
+              </div>`
+          },{
+            id: 'b3',
+            label: '3 Blocks',
+            category: 'Basic',
+            attributes: {class:'gjs-fonts gjs-f-b3'},
+            content: `<div class="row" data-gjs-droppable=".cell" data-gjs-custom-name="Row">
+                <div class="cell" data-gjs-draggable=".row" data-gjs-custom-name="Cell"></div>
+                <div class="cell" data-gjs-draggable=".row" data-gjs-custom-name="Cell"></div>
+                <div class="cell" data-gjs-draggable=".row" data-gjs-custom-name="Cell"></div>
+              </div>`
+          },{
+            id: 'b4',
+            label: '3/7 Block',
+            category: 'Basic',
+            attributes: {class:'gjs-fonts gjs-f-b37'},
+            content: `<div class="row" data-gjs-droppable=".cell" data-gjs-custom-name="Row">
+                <div class="cell" data-gjs-draggable=".row" style="width:30%" data-gjs-custom-name="Cell"></div>
+                <div class="cell" data-gjs-draggable=".row" style="width:70%" data-gjs-custom-name="Cell"></div>
+              </div>`,
+          },{
+            id: 'hero',
+            label: 'Hero section',
+            category: 'Section',
+            content: '<header class="header-banner"> <div class="container-width">'+
+                '<div class="logo-container"><div class="logo">GrapesJS</div></div>'+
+                '<nav class="navbar">'+
+                  '<div class="menu-item">BUILDER</div><div class="menu-item">TEMPLATE</div><div class="menu-item">WEB</div>'+
+                '</nav><div class="clearfix"></div>'+
+                '<div class="lead-title">Build your templates without coding</div>'+
+                '<div class="lead-btn">Try it now</div></div></header>',
+            attributes: {class:'gjs-fonts gjs-f-hero'}
+          },{
+            id: 'h1p',
+            label: 'Text section',
+            category: 'Typography',
+            content: `<div>
+              <h1 class="heading">Insert title here</h1>
+              <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
+              </div>`,
+            attributes: {class:'gjs-fonts gjs-f-h1p'}
+          },{
+            id: '3ba',
+            label: 'Badges',
+            category: 'Section',
+            content: '<div class="badges">'+
+              '<div class="badge">'+
+                '<div class="badge-header"></div>'+
+                '<img class="badge-avatar" src="img/team1.jpg">'+
+                '<div class="badge-body">'+
+                  '<div class="badge-name">Adam Smith</div><div class="badge-role">CEO</div><div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>'+
+                '</div>'+
+                '<div class="badge-foot"><span class="badge-link">f</span><span class="badge-link">t</span><span class="badge-link">ln</span></div>'+
+              '</div>'+
+              '<div class="badge">'+
+                '<div class="badge-header"></div>'+
+                '<img class="badge-avatar" src="img/team2.jpg">'+
+                '<div class="badge-body">'+
+                  '<div class="badge-name">John Black</div><div class="badge-role">Software Engineer</div><div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>'+
+                '</div>'+
+                '<div class="badge-foot"><span class="badge-link">f</span><span class="badge-link">t</span><span class="badge-link">ln</span></div>'+
+              '</div>'+
+              '<div class="badge">'+
+                '<div class="badge-header"></div>'+
+                '<img class="badge-avatar" src="img/team3.jpg">'+
+                '<div class="badge-body">'+
+                  '<div class="badge-name">Jessica White</div><div class="badge-role">Web Designer</div><div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>'+
+                '</div>'+
+                '<div class="badge-foot"><span class="badge-link">f</span><span class="badge-link">t</span><span class="badge-link">ln</span>'+
+                '</div>'+
+              '</div></div>',
+            attributes: {class:'gjs-fonts gjs-f-3ba'}
+          },{
+            id: 'text',
+            label: 'Text',
+            attributes: {class:'gjs-fonts gjs-f-text'},
+            category: 'Basic',
+            content: {
+              type:'text',
+              content:'Insert your text here',
+              style: {padding: '10px' },
+              activeOnRender: 1
+            },
+          },{
+            id: 'image',
+            label: 'Image',
+            category: 'Basic',
+            attributes: {class:'gjs-fonts gjs-f-image'},
+            content: {
+              style: {color: 'black'},
+              type:'image',
+              activeOnRender: 1
+            },
+          },{
+            id: 'quo',
+            label: 'Quote',
+            category: 'Typography',
+            content: '<blockquote class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</blockquote>',
+            attributes: {class:'fa fa-quote-right'}
+          },{
+            id: 'link',
+            label: 'Link',
+            category: 'Basic',
+            attributes: {class:'fa fa-link'},
+            content: {
+              type:'link',
+              content:'Link',
+              style:{color: '#d983a6'}
+            },
+          },{
+            id: 'map',
+            label: 'Map',
+            category: 'Extra',
+            attributes: {class:'fa fa-map-o'},
+            content: {
+              type: 'map',
+              style: {height: '350px'}
+            },
+          },{
+            id: 'video',
+            label: 'Video',
+            category: 'Basic',
+            attributes: {class:'fa fa-youtube-play'},
+            content: {
+              type: 'video',
+              src: 'img/video2.webm',
+              style: {
+                height: '350px',
+                width: '615px',
+              }
+            },
+          }],
+      },

      styleManager : {
        sectors: [{
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@ -1,4 +1,3 @@
-var blkStyle = '.blk-row::after{ content: ""; clear: both; display: block;} .blk-row{padding: 10px;}';
 module.exports = {
  // Style prefix
  stylePrefix: 'gjs-',
@ -163,150 +162,6 @@ module.exports = {
  },

  //Configurations for Block Manager
-  blockManager: {
-    blocks: [{
-        id: 'b1',
-        label: '1 Block',
-        category: 'Basic',
-        content: '<div class="blk-row"><div class="blk1"></div></div><style>'+ blkStyle +'.blk1{width: 100%;padding: 10px;min-height: 75px;}</style>',
-        attributes: {class:'gjs-fonts gjs-f-b1'}
-      },{
-        id: 'b2',
-        label: '2 Blocks',
-        category: 'Basic',
-        content: '<div class="blk-row"><div class="blk2"></div><div class="blk2"></div></div><style>'+ blkStyle +'.blk2{float: left;width: 50%;padding: 10px;min-height: 75px;}</style>',
-        attributes: {class:'gjs-fonts gjs-f-b2'}
-      },{
-        id: 'b3',
-        label: '3 Blocks',
-        category: 'Basic',
-        content: '<div class="blk-row"><div class="blk3"></div><div class="blk3"></div><div class="blk3"></div></div><style>'+ blkStyle +'.blk3{float: left;width: 33.3333%;padding: 10px;min-height: 75px;}</style>',
-        attributes: {class:'gjs-fonts gjs-f-b3'}
-      },{
-        id: 'b4',
-        label: '3/7 Block',
-        category: 'Basic',
-        content: '<div class="blk-row"><div class="blk37l"></div><div class="blk37r"></div></div></div><style>'+ blkStyle +'.blk37l{float: left;width: 30%;padding: 10px;min-height: 75px;}.blk37r{float: left;width: 70%;padding: 10px;min-height: 75px;}</style>',
-        attributes: {class:'gjs-fonts gjs-f-b37'}
-      },{
-        id: 'hero',
-        label: 'Hero section',
-        category: 'Section',
-        content: '<header class="header-banner"> <div class="container-width">'+
-            '<div class="logo-container"><div class="logo">GrapesJS</div></div>'+
-            '<nav class="navbar">'+
-              '<div class="menu-item">BUILDER</div><div class="menu-item">TEMPLATE</div><div class="menu-item">WEB</div>'+
-            '</nav><div class="clearfix"></div>'+
-            '<div class="lead-title">Build your templates without coding</div>'+
-            '<div class="lead-btn">Try it now</div></div></header>',
-        attributes: {class:'gjs-fonts gjs-f-hero'}
-      },{
-        id: 'h1p',
-        label: 'Text section',
-        category: 'Typography',
-        content: '<h1 class="heading">Insert title here</h1><p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>',
-        attributes: {class:'gjs-fonts gjs-f-h1p'}
-      },{
-        id: '3ba',
-        label: 'Badges',
-        category: 'Section',
-        content: '<div class="badges">'+
-          '<div class="badge">'+
-            '<div class="badge-header"></div>'+
-            '<img class="badge-avatar" src="img/team1.jpg">'+
-            '<div class="badge-body">'+
-              '<div class="badge-name">Adam Smith</div><div class="badge-role">CEO</div><div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>'+
-            '</div>'+
-            '<div class="badge-foot"><span class="badge-link">f</span><span class="badge-link">t</span><span class="badge-link">ln</span></div>'+
-          '</div>'+
-          '<div class="badge">'+
-            '<div class="badge-header"></div>'+
-            '<img class="badge-avatar" src="img/team2.jpg">'+
-            '<div class="badge-body">'+
-              '<div class="badge-name">John Black</div><div class="badge-role">Software Engineer</div><div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>'+
-            '</div>'+
-            '<div class="badge-foot"><span class="badge-link">f</span><span class="badge-link">t</span><span class="badge-link">ln</span></div>'+
-          '</div>'+
-          '<div class="badge">'+
-            '<div class="badge-header"></div>'+
-            '<img class="badge-avatar" src="img/team3.jpg">'+
-            '<div class="badge-body">'+
-              '<div class="badge-name">Jessica White</div><div class="badge-role">Web Designer</div><div class="badge-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</div>'+
-            '</div>'+
-            '<div class="badge-foot"><span class="badge-link">f</span><span class="badge-link">t</span><span class="badge-link">ln</span>'+
-            '</div>'+
-          '</div></div>',
-        attributes: {class:'gjs-fonts gjs-f-3ba'}
-      },{
-        id: 'text',
-        label: 'Text',
-        attributes: {class:'gjs-fonts gjs-f-text'},
-        category: 'Basic',
-        content: {
-          type:'text',
-          content:'Insert your text here',
-          style: {padding: '10px' },
-          activeOnRender: 1
-        },
-      },{
-        id: 'image',
-        label: 'Image',
-        category: 'Basic',
-        attributes: {class:'gjs-fonts gjs-f-image'},
-        content: {
-          style: {color: 'black'},
-          type:'image',
-          activeOnRender: 1
-        },
-      },{
-        id: 'quo',
-        label: 'Quote',
-        category: 'Typography',
-        content: '<blockquote class="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore ipsum dolor sit</blockquote>',
-        attributes: {class:'fa fa-quote-right'}
-      },{
-        id: 'link',
-        label: 'Link',
-        category: 'Basic',
-        attributes: {class:'fa fa-link'},
-        content: {
-          type:'link',
-          content:'Link',
-          style:{color: '#d983a6'}
-        },
-      },{
-        id: 'map',
-        label: 'Map',
-        category: 'Extra',
-        attributes: {class:'fa fa-map-o'},
-        content: {
-          type: 'map',
-          style: {height: '350px'}
-        },
-      },{
-        id: 'video',
-        label: 'Video',
-        category: 'Basic',
-        attributes: {class:'fa fa-youtube-play'},
-        content: {
-          type: 'video',
-          src: 'img/video2.webm',
-          style: {
-            height: '350px',
-            width: '615px',
-          }
-        },
-      }/*,{
-        id: 'table',
-        label: 'Table',
-        attributes: {class:'fa fa-table'},
-        content: {
-          type: 'table',
-          columns: 3,
-          rows: 5,
-          style: {height: '150px', width: '100%'}
-        },
-      }*/],
-  },
+  blockManager: {},

 };