mirror of https://github.com/artf/grapesjs.git
Artur Arseniev
9 years ago
11 changed files with 248 additions and 61 deletions
File diff suppressed because one or more lines are too long
@ -1,5 +1,7 @@ |
|||
module.exports = { |
|||
|
|||
'blocks': [], |
|||
blocks: [], |
|||
|
|||
appendTo: '', |
|||
|
|||
}; |
|||
|
|||
@ -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, |
|||
}); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
}); |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
var Backbone = require('backbone'); |
|||
|
|||
module.exports = Backbone.Collection.extend({ |
|||
model: require('./Category'), |
|||
}); |
|||
@ -0,0 +1,12 @@ |
|||
var Backbone = require('backbone'); |
|||
|
|||
module.exports = Backbone.Model.extend({ |
|||
|
|||
defaults: { |
|||
id: '', |
|||
label: '', |
|||
open: true, |
|||
attributes: {}, |
|||
}, |
|||
|
|||
}); |
|||
@ -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; |
|||
}, |
|||
}); |
|||
@ -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; |
|||
} |
|||
Loading…
Reference in new issue