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

Add possibility to watch states on select

pull/36/head
Artur Arseniev 10 years ago
parent
a56728f69e
commit
cbcb1ebf06
5 changed files with 212 additions and 54 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. 178
      src/demo.js
  2. 21
      src/dom_components/view/ComponentView.js
  3. 3
      src/style_manager/view/PropertyView.js
  4. 15
      src/style_manager/view/SectorsView.js
  5. 49
      test/specs/dom_components/view/componentView.js

178
src/demo.js
View File

@ -820,7 +820,10 @@ require(['src/config/require-config.js'], function() {
defaults: '',
list: [{ value : 'width', name : 'Width', },
{ value : 'height', name : 'Height', },
{ value : 'background-color', name : 'Background', }],
{ value : 'background-color', name : 'Background', },
{ value : 'transform', name : 'Transform', },
{ value : 'box-shadow', name : 'Box shadow', },
{ value : 'opacity', name : 'Opacity', }],
},{
name: 'Duration',
property: 'transition-duration',
@ -871,9 +874,180 @@ require(['src/config/require-config.js'], function() {
units: ['deg'],
defaults : '0',
functionName: 'rotateZ',
},{
name: 'Scale X',
property: 'transform-scale-x',
type: 'integer',
defaults : '1',
functionName: 'scaleX',
},{
name: 'Scale Y',
property: 'transform-scale-y',
type: 'integer',
defaults : '1',
functionName: 'scaleY',
},{
name: 'Scale Z',
property: 'transform-scale-z',
type: 'integer',
defaults : '1',
functionName: 'scaleZ',
}],
}]
}
},{
name: 'Flex',
open: false,
properties: [{
name : 'Flex Container',
property : 'display',
type : 'select',
defaults : 'block',
list : [{
value : 'block',
name : 'Disable',
},{
value : 'flex',
name : 'Enable',
}],
},{
name: 'Flex Parent',
property: 'label-parent-flex',
type: 'integer',
},{
name : 'Direction',
property : 'flex-direction',
type : 'radio',
defaults : 'row',
list : [{
value : 'row',
name : 'Row',
className : 'icons-flex icon-dir-row',
title : 'Row',
},{
value : 'row-reverse',
name : 'Row reverse',
className : 'icons-flex icon-dir-row-rev',
title : 'Row reverse',
},{
value : 'column',
name : 'Column',
title : 'Column',
className : 'icons-flex icon-dir-col',
},{
value : 'column-reverse',
name : 'Column reverse',
title : 'Column reverse',
className : 'icons-flex icon-dir-col-rev',
}],
},{
name : 'Justify',
property : 'justify-content',
type : 'radio',
defaults : 'flex-start',
list : [{
value : 'flex-start',
className : 'icons-flex icon-just-start',
title : 'Start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-just-end',
},{
value : 'space-between',
title : 'Space between',
className : 'icons-flex icon-just-sp-bet',
},{
value : 'space-around',
title : 'Space around',
className : 'icons-flex icon-just-sp-ar',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-just-sp-cent',
}],
},{
name : 'Align',
property : 'align-items',
type : 'radio',
defaults : 'center',
list : [{
value : 'flex-start',
title : 'Start',
className : 'icons-flex icon-al-start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-al-end',
},{
value : 'stretch',
title : 'Stretch',
className : 'icons-flex icon-al-str',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-al-center',
}],
},{
name: 'Flex Children',
property: 'label-parent-flex',
type: 'integer',
},{
name: 'Order',
property: 'order',
type: 'integer',
defaults : 0,
min: 0
},{
name : 'Flex',
property : 'flex',
type : 'composite',
properties : [{
name: 'Grow',
property: 'flex-grow',
type: 'integer',
defaults : 0,
min: 0
},{
name: 'Shrink',
property: 'flex-shrink',
type: 'integer',
defaults : 0,
min: 0
},{
name: 'Basis',
property: 'flex-basis',
type: 'integer',
units: ['px','%',''],
unit: '',
defaults : 'auto',
}],
},{
name : 'Align',
property : 'align-self',
type : 'radio',
defaults : 'auto',
list : [{
value : 'auto',
name : 'Auto',
},{
value : 'flex-start',
title : 'Start',
className : 'icons-flex icon-al-start',
},{
value : 'flex-end',
title : 'End',
className : 'icons-flex icon-al-end',
},{
value : 'stretch',
title : 'Stretch',
className : 'icons-flex icon-al-str',
},{
value : 'center',
title : 'Center',
className : 'icons-flex icon-al-center',
}],
}]
}
],
},

21
src/dom_components/view/ComponentView.js
View File

@ -23,6 +23,7 @@ define(['backbone', './ComponentsView'],
this.listenTo(this.model, 'change:style', this.updateStyle);
this.listenTo(this.model, 'change:attributes', this.updateAttributes);
this.listenTo(this.model, 'change:status', this.updateStatus);
this.listenTo(this.model, 'change:state', this.updateState);
this.listenTo(this.model.get('classes'), 'add remove change', this.updateClasses);
this.$el.data("model", this.model);
this.$el.data("model-comp", this.components);
@ -44,12 +45,26 @@ define(['backbone', './ComponentsView'],
}
},
/**
* Fires on state update. If the state is not empty will add a helper class
* @param {Event} e
* */
updateState: function(e){
var cl = 'hc-state';
var state = this.model.get('state');
if(state){
this.$el.addClass(cl);
}else{
this.$el.removeClass(cl);
}
},
/**
* Update item on status change
* @param Event
* @param {Event} e
* */
updateStatus: function(e)
{
updateStatus: function(e){
var s = this.model.get('status'),
pfx = this.pfx;
switch(s) {

3
src/style_manager/view/PropertyView.js
View File

@ -39,6 +39,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
* */
targetUpdated: function(){
this.selectedComponent = this.propTarget.model;
this.helperComponent = this.propTarget.helper;
if(this.selectedComponent){
if(!this.sameValue())
this.renderInputRequest();
@ -133,6 +134,8 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
var componentCss = _.clone( this.selectedComponent.get('style') );
componentCss[this.property] = value;
this.selectedComponent.set('style', componentCss, { avoidStore : avSt});
if(this.helperComponent)
this.helperComponent.set('style', componentCss, { avoidStore : avSt});
}
this.selectedValue = value;

15
src/style_manager/view/SectorsView.js
View File

@ -30,6 +30,7 @@ define(['backbone','./SectorView'],
var classes = el.get('classes');
var state = el.get('state');
var pt = this.propTarget;
pt.helper = null;
if(classes.length){
var cssC = this.target.get('CssComposer');
@ -50,6 +51,20 @@ define(['backbone','./SectorView'],
el.set('style', {});
}
// If the state is not empty, there is should be a helper rule in play
// The helper rule will get the same style of the iContainer
if(state){
var clm = this.target.get('ClassManager');
var helperClass = clm.addClass('hc-state');
var helperRule = cssC.getRule([helperClass],'','');
if(!helperRule){
helperRule = cssC.newRule([helperClass],'','');
cssC.addRule(helperRule);
}
helperRule.set('style', iContainer.get('style'));
pt.helper = helperRule;
}
pt.model = iContainer;
pt.trigger('update');
return;

49
test/specs/dom_components/view/componentView.js
View File

@ -1,49 +0,0 @@
define(['componentView','componentModel'],
function(componentView,componentModel) {
describe("ComponentView", function () {
before(function () {
this.$fixture = $("<div id='component-fixture'></div>");
});
beforeEach(function () {
this.view = new componentView({
model: new componentModel({}),
});
this.$fixture.empty().appendTo($("#fixtures"));
this.$fixture.html(this.view.render().el);
});
afterEach(function () {
this.view.model.destroy();
});
after(function () {
this.$fixture.remove();
});
it("Render componente vuoto", function (){
this.view.$el.html().should.be.empty;
});
it("Render dopo la modifica", function (done){
var view = this.view, spy = sinon.spy();
view.$el.html().should.be.empty;
view.$el.attr('style').should.be.empty;
view.$el.css('width').should.equal('0px');
view.model.on("change", spy);
spy.called.should.equal(false);
view.model.once("change",function(){
view.$el.attr('style').should.be.not.empty;
view.$el.css('width').should.equal('100px');
spy.called.should.equal(true);
done();
});
view.model.set({
css : { 'width':'100px' },
attributes: {'data-t':'read'},
});
});
});
});
Write Preview
Loading…
Cancel
Save