tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Added order to categories and the posibility to set Open true or false when a block is created.

pull/747/head
Juan Martín Pithod 8 years ago
parent
c68ccacfc4
commit
233ee202c8
6 changed files with 173 additions and 131 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 244
      index.html
  2. 29
      src/block_manager/model/Block.js
  3. 3
      src/block_manager/model/Category.js
  4. 18
      src/block_manager/view/BlocksView.js
  5. 5
      src/block_manager/view/CategoryView.js
  6. 5
      src/styles/scss/_gjs_blocks.scss

244
index.html
View File

@ -1,122 +1,150 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GrapesJS</title>
<link rel="stylesheet" href="dist/css/grapes.min.css">
<script src="dist/grapes.min.js"></script>
<head>
<meta charset="utf-8">
<title>GrapesJS</title>
<link rel="stylesheet" href="dist/css/grapes.min.css">
<script src="dist/grapes.min.js"></script>
<style>
body,
html {
height: 100%;
margin: 0;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden;">
<div class="panel">
<h1 class="welcome">Welcome to</h1>
<div class="big-title">
<svg class="logo" viewBox="0 0 100 100">
<path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"
/>
</svg>
<span>GrapesJS</span>
</div>
<div class="description">
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.
</div>
</div>
<style>
body,
html {
height: 100%;
margin: 0;
.panel {
width: 90%;
max-width: 700px;
border-radius: 3px;
padding: 30px 20px;
margin: 150px auto 0px;
background-color: #d983a6;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
color: rgba(255, 255, 255, 0.75);
font: caption;
font-weight: 100;
}
</style>
</head>
<body>
<div id="gjs" style="height:0px; overflow:hidden;">
<div class="panel">
<h1 class="welcome">Welcome to</h1>
<div class="big-title">
<svg class="logo" viewBox="0 0 100 100">
<path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
</svg>
<span>GrapesJS</span>
</div>
<div class="description">
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.
</div>
</div>
<style>
.panel {
width: 90%;
max-width: 700px;
border-radius: 3px;
padding: 30px 20px;
margin: 150px auto 0px;
background-color: #d983a6;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
color:rgba(255,255,255,0.75);
font: caption;
font-weight: 100;
}
.welcome {
text-align: center;
font-weight: 100;
margin: 0px;
}
.welcome {
text-align: center;
font-weight: 100;
margin: 0px;
}
.logo {
width: 70px;
height: 70px;
vertical-align: middle;
}
.logo {
width: 70px;
height: 70px;
vertical-align: middle;
}
.logo path {
pointer-events: none;
fill: none;
stroke-linecap: round;
stroke-width: 7;
stroke: #fff
}
.logo path {
pointer-events: none;
fill: none;
stroke-linecap: round;
stroke-width: 7;
stroke: #fff
}
.big-title {
text-align: center;
font-size: 3.5rem;
margin: 15px 0;
}
.big-title {
text-align: center;
font-size: 3.5rem;
margin: 15px 0;
}
.description {
text-align: justify;
font-size: 1rem;
line-height: 1.5rem;
}
</style>
</div>
.description {
text-align: justify;
font-size: 1rem;
line-height: 1.5rem;
<script type="text/javascript">
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: { autoload: 0 },
styleManager: {
sectors: [{
name: 'General',
open: false,
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
}, {
name: 'Dimension',
open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
}, {
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
}, {
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
}, {
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
}
],
},
});
</style>
</div>
editor.BlockManager.add('testBlock', {
label: 'Block',
category: {
label: 'General',
order: 1,
open: true,
},
attributes: { class: 'gjs-fonts gjs-f-b1' },
content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})
editor.BlockManager.add('testBlock2', {
label: 'Block2',
category: {
label: 'Otro',
order: 5,
open: true,
},
attributes: { class: 'gjs-fonts gjs-f-2' },
content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})
editor.BlockManager.add('testBlock3', {
label: 'Block3',
category: {
label: 'Otro',
},
attributes: { class: 'gjs-fonts gjs-f-2' },
content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})
<script type="text/javascript">
var editor = grapesjs.init({
showOffsets: 1,
noticeOnUnload: 0,
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: { autoload: 0 },
styleManager : {
sectors: [{
name: 'General',
open: false,
buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
},{
name: 'Dimension',
open: false,
buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
},{
name: 'Typography',
open: false,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
},{
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
}
],
},
});
</script>
</body>
editor.BlockManager.add('testBlock', {
label: 'Block',
attributes: { class:'gjs-fonts gjs-f-b1' },
content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
})
</script>
</body>
</html>
</html>

29
src/block_manager/model/Block.js
View File

@ -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,
// // });
// // }
// // }
// },
});

3
src/block_manager/model/Category.js
View File

@ -5,7 +5,8 @@ module.exports = Backbone.Model.extend({
defaults: {
id: '',
label: '',
open: true,
open: false,
order: '',
attributes: {},
},

18
src/block_manager/view/BlocksView.js
View File

@ -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);

5
src/block_manager/view/CategoryView.js
View File

@ -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;
},

5
src/styles/scss/_gjs_blocks.scss
View File

@ -4,6 +4,11 @@
justify-content: flex-start;
}
.#{$app-prefix}block-categories {
display: flex;
flex-direction: column;
}
.#{$app-prefix}block-category {
width: 100%;

Write Preview
Loading…
Cancel
Save