diff --git a/index.html b/index.html index 805835a1f..44b340b02 100755 --- a/index.html +++ b/index.html @@ -1,122 +1,150 @@ - - - GrapesJS - - + + + + GrapesJS + + + + + + +
+
+

Welcome to

+
+ + GrapesJS +
+
+ This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can copy and rename + it to _index.html, on next server start the new file will be served, and it will be ignored by git. +
+
- - -
-
-

Welcome to

-
- - GrapesJS -
-
- This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can - copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git. -
-
- +
- .description { - text-align: justify; - font-size: 1rem; - line-height: 1.5rem; + + - editor.BlockManager.add('testBlock', { - label: 'Block', - attributes: { class:'gjs-fonts gjs-f-b1' }, - content: `
Test block
` - }) - - - + \ No newline at end of file diff --git a/src/block_manager/model/Block.js b/src/block_manager/model/Block.js index 3e8b7d7ed..ae6968bee 100644 --- a/src/block_manager/model/Block.js +++ b/src/block_manager/model/Block.js @@ -6,21 +6,26 @@ module.exports = Backbone.Model.extend({ defaults: { label: '', content: '', - category: '', + category: { + label: '', + order: '', + }, attributes: {}, }, - initialize(opts = {}) { - let category = this.get('category'); + // initialize(opts = {}) { + // let category = this.get('category'); + // let catLabel = category.label; - if (category) { - if (typeof category == 'string') { - var catObj = new Category({ - id: category, - label: category, - }); - } - } - }, + // // if (catLable) { + // // if (typeof catLabel == 'string') { + // // var catObj = new Category({ + // // id: catLabel, + // // label: catLabel, + // // order: category.order, + // // }); + // // } + // // } + // }, }); diff --git a/src/block_manager/model/Category.js b/src/block_manager/model/Category.js index e969636e0..5603583a6 100644 --- a/src/block_manager/model/Category.js +++ b/src/block_manager/model/Category.js @@ -5,7 +5,8 @@ module.exports = Backbone.Model.extend({ defaults: { id: '', label: '', - open: true, + open: false, + order: '', attributes: {}, }, diff --git a/src/block_manager/view/BlocksView.js b/src/block_manager/view/BlocksView.js index e14663450..ac616a50c 100644 --- a/src/block_manager/view/BlocksView.js +++ b/src/block_manager/view/BlocksView.js @@ -21,7 +21,7 @@ module.exports = Backbone.View.extend({ this.tac = 'test-tac'; this.grabbingCls = this.ppfx + 'grabbing'; - if(this.em){ + if (this.em) { this.config.getSorter = this.getSorter; this.canvas = this.em.get('Canvas'); } @@ -32,9 +32,9 @@ module.exports = Backbone.View.extend({ * @private */ getSorter() { - if(!this.em) + if (!this.em) return; - if(!this.sorter){ + if (!this.sorter) { var utils = this.em.get('Utils'); var canvas = this.canvas; this.sorter = new utils.Sorter({ @@ -79,7 +79,7 @@ module.exports = Backbone.View.extend({ em.runDefault(); if (model && model.get) { - if(model.get('activeOnRender')) { + if (model.get('activeOnRender')) { model.trigger('active'); model.set('activeOnRender', 0); } @@ -114,10 +114,12 @@ module.exports = Backbone.View.extend({ // Check for categories if (category && this.categories) { - if (typeof category == 'string') { + if (typeof category.label == 'string') { category = { - id: category, - label: category + id: category.label, + label: category.label, + order: category.order, + open: category.open, }; } @@ -139,7 +141,7 @@ module.exports = Backbone.View.extend({ return; } - if(frag) + if (frag) frag.appendChild(rendered); else this.append(rendered); diff --git a/src/block_manager/view/CategoryView.js b/src/block_manager/view/CategoryView.js index fa6c811f0..87421d2db 100644 --- a/src/block_manager/view/CategoryView.js +++ b/src/block_manager/view/CategoryView.js @@ -21,13 +21,13 @@ module.exports = Backbone.View.extend({ this.iconClass = `${pfx}caret-icon`; this.activeClass = `${pfx}open`; this.className = `${pfx}block-category`; - this.events[`click .${pfx}title`] = 'toggle'; + this.events[`click .${pfx}title`] = 'toggle'; this.listenTo(this.model, 'change:open', this.updateVisibility); this.delegateEvents(); }, updateVisibility() { - if(this.model.get('open')) + if (this.model.get('open')) this.open(); else this.close(); @@ -76,6 +76,7 @@ module.exports = Backbone.View.extend({ label: this.model.get('label'), }); this.el.className = this.className; + this.$el.css({ 'order': this.model.get('order') }); this.updateVisibility(); return this; }, diff --git a/src/styles/scss/_gjs_blocks.scss b/src/styles/scss/_gjs_blocks.scss index aa82c0381..e16d642f9 100644 --- a/src/styles/scss/_gjs_blocks.scss +++ b/src/styles/scss/_gjs_blocks.scss @@ -4,6 +4,11 @@ justify-content: flex-start; } +.#{$app-prefix}block-categories { + display: flex; + flex-direction: column; +} + .#{$app-prefix}block-category { width: 100%;