Make blocks categorizable

src/block_manager/config/config.js

@@ -1,5 +1,7 @@
 module.exports = {
 
-  'blocks': [],
+  blocks: [],
+
+  appendTo: '',
 
 };

src/block_manager/index.js

@@ -29,6 +29,7 @@ module.exports = () => {
   var c = {},
   defaults = require('./config/config'),
   Blocks = require('./model/Blocks'),
+  BlockCategories = require('./model/Categories'),
   BlocksView = require('./view/BlocksView');
   var blocks, view;
 
@@ -54,7 +55,10 @@ module.exports = () => {
             c[name] = defaults[name];
         }
         blocks = new Blocks(c.blocks);
-        view = new BlocksView({ collection: blocks }, c);
+        view = new BlocksView({
+          collection: blocks,
+          categories: new BlockCategories(),
+        }, c);
         return this;
       },
 

src/block_manager/model/Block.js

@@ -1,11 +1,26 @@
 var Backbone = require('backbone');
+var Category = require('./Category');
 
 module.exports = Backbone.Model.extend({
 
-  defaults :{
+  defaults: {
     label: '',
     content: '',
+    category: '',
     attributes: {},
   },
 
+  initialize(opts = {}) {
+    let category = this.get('category');
+
+    if (category) {
+      if (typeof category == 'string') {
+        var catObj = new Category({
+          id: category,
+          label: category,
+        });
+      }
+    }
+  },
+
 });

src/block_manager/model/Categories.js

@@ -0,0 +1,5 @@
+var Backbone = require('backbone');
+
+module.exports = Backbone.Collection.extend({
+  model: require('./Category'),
+});

src/block_manager/model/Category.js

@@ -0,0 +1,12 @@
+var Backbone = require('backbone');
+
+module.exports = Backbone.Model.extend({
+
+  defaults: {
+    id: '',
+    label: '',
+    open: true,
+    attributes: {},
+  },
+
+});

src/block_manager/view/BlocksView.js

@@ -1,11 +1,14 @@
 var Backbone = require('backbone');
 var BlockView = require('./BlockView');
+var CategoryView = require('./CategoryView');
 
 module.exports = Backbone.View.extend({
 
   initialize(opts, config) {
     _.bindAll(this, 'getSorter', 'onDrag', 'onDrop');
     this.config = config || {};
+    this.categories = opts.categories || '';
+    this.renderedCategories = [];
     this.ppfx = this.config.pStylePrefix || '';
     this.listenTo(this.collection, 'add', this.addTo);
     this.em = this.config.em;
@@ -95,6 +98,36 @@ module.exports = Backbone.View.extend({
       attributes: model.get('attributes'),
     }, this.config);
     var rendered = view.render().el;
+    var category = model.get('category');
+
+    // Check for categories
+    if (category && this.categories) {
+      if (typeof category == 'string') {
+        category = {
+          id: category,
+          label: category
+        };
+      }
+
+      var catModel = this.categories.add(category);
+      var catId = catModel.get('id');
+      var catView = this.renderedCategories[catId];
+
+      if (!catView) {
+        catView = new CategoryView({
+          model: catModel
+        }, this.config).render();
+        this.renderedCategories[catId] = catView;
+
+        if(frag)
+          frag.appendChild(catView.el);
+        else
+          this.$el.append(catView.el);
+      }
+
+      catView.append(rendered);
+      return;
+    }
 
     if(frag)
       frag.appendChild(rendered);

src/block_manager/view/CategoryView.js

@@ -0,0 +1,82 @@
+var Backbone = require('backbone');
+
+module.exports = Backbone.View.extend({
+
+  template: _.template(`
+  <div class="<%= pfx %>title">
+    <i class="<%= pfx %>caret-icon"></i>
+    <%= label %>
+  </div>
+  <div class="<%= pfx %>blocks-c"></div>
+  `),
+
+  events: {},
+
+  initialize(o = {}, config = {}) {
+    this.config = config;
+    const pfx = this.config.pStylePrefix || '';
+    this.pfx = pfx;
+    this.caretR = 'fa fa-caret-right';
+    this.caretD = 'fa fa-caret-down';
+    this.iconClass = `${pfx}caret-icon`;
+    this.activeClass = `${pfx}open`;
+    this.className = `${pfx}block-category`;
+    this.events[`click .${pfx}title`]  = 'toggle';
+    this.listenTo(this.model, 'change:open', this.updateVisibility);
+    this.delegateEvents();
+  },
+
+  updateVisibility() {
+    if(this.model.get('open'))
+      this.open();
+    else
+      this.close();
+  },
+
+  open() {
+    this.el.className = `${this.className} ${this.activeClass}`;
+    this.getIconEl().className = `${this.iconClass} ${this.caretD}`;
+    this.getBlocksEl().style.display = '';
+  },
+
+  close() {
+    this.el.className = this.className;
+    this.getIconEl().className = `${this.iconClass} ${this.caretR}`;
+    this.getBlocksEl().style.display = 'none';
+  },
+
+  toggle() {
+    var model = this.model;
+    model.set('open', !model.get('open'));
+  },
+
+  getIconEl() {
+    if (!this.iconEl) {
+      this.iconEl = this.el.querySelector('.' + this.iconClass);
+    }
+
+    return this.iconEl;
+  },
+
+  getBlocksEl() {
+    if (!this.blocksEl) {
+      this.blocksEl = this.el.querySelector('.' + this.pfx + 'blocks-c');
+    }
+
+    return this.blocksEl;
+  },
+
+  append(el) {
+    this.getBlocksEl().appendChild(el);
+  },
+
+  render() {
+    this.el.innerHTML = this.template({
+      pfx: this.pfx,
+      label: this.model.get('label'),
+    });
+    this.el.className = this.className;
+    this.updateVisibility();
+    return this;
+  },
+});

src/editor/config/config.js

@@ -157,19 +157,22 @@ module.exports = {
 
   //Configurations for Block Manager
   blockManager: {
-    'blocks': [{
+    blocks: [{
         id: 'b1',
         label: '1 Block',
+        category: 'Standard',
         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: 'Standard',
         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: 'Standard',
         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'}
       },{
@@ -180,6 +183,7 @@ module.exports = {
       },{
         id: 'hero',
         label: 'Hero section',
+        category: 'Extra',
         content: '<header class="header-banner"> <div class="container-width">'+
             '<div class="logo-container"><div class="logo">GrapesJS</div></div>'+
             '<nav class="navbar">'+
@@ -191,11 +195,13 @@ module.exports = {
       },{
         id: 'h1p',
         label: 'Text section',
+        category: 'Extra',
         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: 'Extra',
         content: '<div class="badges">'+
           '<div class="badge">'+
             '<div class="badge-header"></div>'+
@@ -236,6 +242,7 @@ module.exports = {
       },{
         id: 'image',
         label: 'Image',
+        category: 'Media',
         attributes: {class:'gjs-fonts gjs-f-image'},
         content: {
           style: {color: 'black'},
@@ -250,6 +257,7 @@ module.exports = {
       },{
         id: 'link',
         label: 'Link',
+        category: 'Basic',
         attributes: {class:'fa fa-link'},
         content: {
           type:'link',
@@ -259,6 +267,7 @@ module.exports = {
       },{
         id: 'map',
         label: 'Map',
+        category: 'Extra',
         attributes: {class:'fa fa-map-o'},
         content: {
           type: 'map',
@@ -267,6 +276,7 @@ module.exports = {
       },{
         id: 'video',
         label: 'Video',
+        category: 'Media',
         attributes: {class:'fa fa-youtube-play'},
         content: {
           type: 'video',

src/styles/scss/_gjs_blocks.scss

@@ -0,0 +1,62 @@
+.#{$app-prefix}blocks-c {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.#{$app-prefix}block-category {
+  width: 100%;
+
+  .#{$app-prefix}title {
+    @extend .#{$app-prefix}category-title;
+  }
+
+  .#{$app-prefix}caret-icon {
+    margin-right: 5px;
+  }
+}
+
+.#{$app-prefix}block {
+  @include user-select(none);
+
+  @extend .#{$app-prefix}bg-main;
+
+  width: 45%;
+  padding: 1em;
+  box-sizing: border-box;
+  height: 90px;
+  cursor: all-scroll;
+  font-size: 11px;
+  font-weight: lighter;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  margin: 10px 2.5% 5px;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
+  transition: all 0.2s ease 0s;
+  transition-property: box-shadow, color;
+
+  &:hover {
+    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
+  }
+}
+
+.#{$app-prefix}block.fa {
+  font-size: 2em;
+  line-height: 2em;
+  padding: 11px;
+}
+
+.#{$app-prefix}block-label {
+  line-height: normal;
+  font-size: 0.65rem;
+  font-weight: normal;
+  font-family: Helvetica, sans-serif;
+}
+
+.#{$app-prefix}block.#{$app-prefix}bdrag {
+  width: auto;
+  padding: 0;
+}

src/styles/scss/main.scss

@@ -712,6 +712,22 @@ $lightBorder: rgba(255, 255, 255, 0.05);
 /********* END Device Manager **********/
 
 
+/********* General **********/
+
+.#{$app-prefix}category-title {
+  @extend .no-select;
+
+  font-weight: lighter;
+  background-color: $mainDklColor;
+  font-size: 13px;
+  letter-spacing: 1px;
+  padding: 12px 10px 12px 20px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+  text-align: left;
+  position: relative;
+  cursor: pointer;
+}
+
 /********* Style Manager **********/
 
 .#{$sm-prefix}close-btn{
@@ -747,7 +763,7 @@ $lightBorder: rgba(255, 255, 255, 0.05);
 	  letter-spacing: 1px;
 	  padding: 12px 10px 12px 20px;
 	  border-top: 1px solid $mainLhColor;
-	  cursor:pointer;
+	  cursor: pointer;
 	}
 
 	.#{$sm-prefix}label {
@@ -1056,61 +1072,7 @@ $lightBorder: rgba(255, 255, 255, 0.05);
 }
 /********* END Style Manager **********/
 
-
+@import "gjs_blocks";
-
-/********* Block manager **********/
-
-.#{$app-prefix}blocks-c {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-.#{$app-prefix}block {
-  @include user-select(none);
-  @extend .#{$app-prefix}bg-main;
-
-  width: 45%;
-  padding: 1em;
-  box-sizing: border-box;
-  height: 90px;
-  cursor:all-scroll;
-  font-size: 11px;
-  font-weight: lighter;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
-  margin: 10px 2.5% 5px;
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
-  transition: all 0.2s ease 0s;
-  transition-property: box-shadow, color;
-
-  &:hover {
-    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.15);
-  }
-}
-
-.#{$app-prefix}block.fa {
-  font-size: 2em;
-  line-height: 2em;
-  padding: 11px;
-}
-
-.#{$app-prefix}block-label {
-  line-height: normal;
-  font-size: 0.65rem;
-  font-weight: normal;
-  font-family: Helvetica, sans-serif;
-}
-
-.#{$app-prefix}block.#{$app-prefix}bdrag{
- width: auto;
- padding: 0;
-}
-
-/********* END Block manager **********/