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

Add default properties for Extra sector

pull/36/head
Artur Arseniev 10 years ago
parent
deb3d47144
commit
031c70d284
6 changed files with 183 additions and 104 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. 93
      src/demo.js
  2. 79
      src/style_manager/model/PropertyFactory.js
  3. 12
      test/specs/class_manager/e2e/ClassManager.js
  4. 14
      test/specs/css_composer/e2e/CssComposer.js
  5. 2
      test/specs/panels/main.js
  6. 87
      test/specs/style_manager/model/Models.js

93
src/demo.js
View File

@ -161,6 +161,10 @@ require(['config/require-config'], function() {
name: 'Decorations',
open: false,
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},{
name: 'Extra',
open: false,
buildProps: ['transition', 'perspective', 'transform'],
},/*{
name: 'Dimension',
open: false,
@ -178,95 +182,6 @@ require(['config/require-config'], function() {
}],
}],
}*/{
name: 'Extra',
open: false,
properties: [{
name: 'Transition',
property: 'transition',
type: 'stack',
preview: false,
properties:[{
name: 'Property',
property: 'transition-property',
type: 'select',
defaults: '',
list: [{ value : 'width', name : 'Width', },
{ value : 'height', name : 'Height', },
{ value : 'background-color', name : 'Background', },
{ value : 'transform', name : 'Transform', },
{ value : 'box-shadow', name : 'Box shadow', },
{ value : 'opacity', name : 'Opacity', }],
},{
name: 'Duration',
property: 'transition-duration',
type: 'integer',
units: ['s'],
defaults : '2',
min: 0,
},{
name: 'Easing',
property: 'transition-timing-function',
type: 'select',
defaults: 'ease',
list: [{ value : 'linear', name : 'Linear', },
{ value : 'ease', name : 'Ease', },
{ value : 'ease-in', name : 'Ease-in', },
{ value : 'ease-out', name : 'Ease-out', },
{ value : 'ease-in-out', name : 'Ease-in-out', }],
}],
},{
name: 'Perspective',
property: 'perspective',
type: 'integer',
units: ['px'],
defaults : '0',
min: 0,
},{
name: 'Transform',
property: 'transform',
type: 'composite',
properties:[{
name: 'Rotate X',
property: 'transform-rotate-x',
type: 'integer',
units: ['deg'],
defaults : '0',
functionName: 'rotateX',
},{
name: 'Rotate Y',
property: 'transform-rotate-y',
type: 'integer',
units: ['deg'],
defaults : '0',
functionName: 'rotateY',
},{
name: 'Rotate Z',
property: 'transform-rotate-z',
type: 'integer',
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: [{

79
src/style_manager/model/PropertyFactory.js
View File

@ -38,6 +38,7 @@ define(['backbone'],
case 'border-style':
case 'box-shadow-type':
case 'background-repeat': case 'background-position': case 'background-attachment': case 'background-size':
case 'transition-property': case 'transition-timing-function':
obj.type = 'select';
break;
case 'top': case 'right': case 'bottom': case 'left':
@ -51,11 +52,16 @@ define(['backbone'],
case 'border-top-left-radius': case 'border-top-right-radius': case 'border-bottom-left-radius':case 'border-bottom-right-radius':
case 'border-width':
case 'box-shadow-h': case 'box-shadow-v': case 'box-shadow-blur': case 'box-shadow-spread':
case 'transition-duration':
case 'perspective':
case 'transform-rotate-x': case 'transform-rotate-y': case 'transform-rotate-z':
case 'transform-scale-x': case 'transform-scale-y': case 'transform-scale-z':
obj.type = 'integer';
break;
case 'margin': case 'padding':
case 'border-radius':
case 'border':
case 'transform':
obj.type = 'composite';
break;
case 'color': case 'text-shadow-color':
@ -63,6 +69,7 @@ define(['backbone'],
obj.type = 'color';
break;
case 'text-shadow': case 'box-shadow': case 'background':
case 'transition':
obj.type = 'stack';
break;
case 'background-image':
@ -89,8 +96,13 @@ define(['backbone'],
case 'border-radius-c':
case 'border-top-left-radius': case 'border-top-right-radius': case 'border-bottom-left-radius':case 'border-bottom-right-radius':
case 'box-shadow-h': case 'box-shadow-v': case 'box-shadow-spread':
case 'perspective':
case 'transform-rotate-x': case 'transform-rotate-y': case 'transform-rotate-z':
obj.defaults = 0;
break;
case 'transform-scale-x': case 'transform-scale-y': case 'transform-scale-z':
obj.defaults = 1;
break;
case 'box-shadow-blur':
obj.defaults = 5;
break;
@ -133,6 +145,15 @@ define(['backbone'],
case 'background-attachment':
obj.defaults = 'scroll';
break;
case 'transition-property':
obj.defaults = 'width';
break;
case 'transition-duration':
obj.defaults = '2';
break;
case 'transition-timing-function':
obj.defaults = 'ease';
break;
}
// Units
@ -155,8 +176,15 @@ define(['backbone'],
obj.units = ['px','em'];
break;
case 'box-shadow-blur': case 'box-shadow-spread':
case 'perspective':
obj.units = ['px'];
break;
case 'transition-duration':
obj.units = ['s'];
break;
case 'transform-rotate-x': case 'transform-rotate-y': case 'transform-rotate-z':
obj.units = ['deg'];
break;
}
// Min/Max
@ -169,6 +197,8 @@ define(['backbone'],
case 'border-top-left-radius': case 'border-top-right-radius': case 'border-bottom-left-radius':case 'border-bottom-right-radius':
case 'border-width':
case 'box-shadow-blur':
case 'transition-duration':
case 'perspective':
obj.min = 0;
break;
}
@ -187,6 +217,28 @@ define(['backbone'],
break;
}
// Functions
switch(prop){
case 'transform-rotate-x':
obj.functionName = 'rotateX';
break;
case 'transform-rotate-y':
obj.functionName = 'rotateY';
break;
case 'transform-rotate-z':
obj.functionName = 'rotateZ';
break;
case 'transform-scale-x':
obj.functionName = 'scaleX';
break;
case 'transform-scale-y':
obj.functionName = 'scaleY';
break;
case 'transform-scale-z':
obj.functionName = 'scaleZ';
break;
}
// Options
switch(prop){
case 'float':
@ -303,6 +355,26 @@ define(['backbone'],
{ value : 'contain'}
];
break;
case 'transition-property':
obj.list = [
{ value: 'width'},
{ value : 'height'},
{ value : 'background-color'},
{ value : 'transform'},
{ value : 'box-shadow'},
{ value : 'opacity'}
];
break;
case 'transition-timing-function':
obj.list = [
{ value : 'linear'},
{ value : 'ease'},
{ value : 'ease-in'},
{ value : 'ease-out'},
{ value : 'ease-in-out'}
];
break;
}
// Properties
@ -331,6 +403,13 @@ define(['backbone'],
obj.properties = this.build(['background-image', 'background-repeat', 'background-position','background-attachment',
'background-size']);
break;
case 'transition':
obj.properties = this.build(['transition-property', 'transition-duration', 'transition-timing-function']);
break;
case 'transform':
obj.properties = this.build(['transform-rotate-x', 'transform-rotate-y', 'transform-rotate-z',
'transform-scale-x', 'transform-scale-y', 'transform-scale-z']);
break;
}
objs.push(obj);

12
test/specs/class_manager/e2e/ClassManager.js
View File

@ -1,6 +1,6 @@
define(
function(require) {
define(['GrapesJS'],
function(GrapesJS) {
return {
run : function(){
@ -30,12 +30,10 @@ define(
});
beforeEach(function () {
var Grapes = require('editor/main');
this.gjs = new Grapes({
var Grapes = GrapesJS;
this.gjs = Grapes.init({
stylePrefix: '',
storageManager: {
type: 'none',
},
storage: { autoload: 0, type:'none' },
assetManager: {
storageType: 'none',
},

14
test/specs/css_composer/e2e/CssComposer.js
View File

@ -1,5 +1,5 @@
define(function(require) {
define(['GrapesJS'],function(Grapes) {
return {
run : function(){
@ -11,10 +11,10 @@ define(function(require) {
});
beforeEach(function () {
this.Grapes = require('editor/main');
this.gjs = new this.Grapes({
Grapes = Grapes;
this.gjs = Grapes.init({
stylePrefix: '',
storageManager: { type: 'none', },
storage: { autoload: 0, type:'none' },
assetManager: { storageType: 'none', },
container: 'csscomposer-fixture',
});
@ -31,7 +31,7 @@ define(function(require) {
});
afterEach(function () {
delete this.Grapes;
delete Grapes;
delete this.gjs;
delete this.cssc;
delete this.clsm;
@ -42,9 +42,9 @@ define(function(require) {
});
it('Rules are correctly imported from default property', function() {
var gj = new this.Grapes({
var gj = new Grapes.init({
stylePrefix: '',
storageManager: { type: 'none', },
storage: { autoload: 0, type:'none' },
assetManager: { storageType: 'none', },
cssComposer: { defaults: this.rulesSet},
container: 'csscomposer-fixture',

2
test/specs/panels/main.js
View File

@ -38,7 +38,7 @@ define([
});
it("No panels inside", function() {
obj.getPanels().length.should.equal(0);
obj.getPanels().length.should.equal(3);
});
it("Adds new panel correctly via object", function() {

87
test/specs/style_manager/model/Models.js
View File

@ -678,6 +678,93 @@ define([path + 'Sector',
obj.build('background').should.deep.equal([res]);
});
it('Build transition', function() {
var res = {
property: 'transition',
type: 'stack',
properties:[{
property: 'transition-property',
type: 'select',
defaults: 'width',
list: [{ value: 'width'},
{ value : 'height'},
{ value : 'background-color'},
{ value : 'transform'},
{ value : 'box-shadow'},
{ value : 'opacity'}],
},{
property: 'transition-duration',
type: 'integer',
units: ['s'],
defaults: '2',
min: 0,
},{
property: 'transition-timing-function',
type: 'select',
defaults: 'ease',
list: [{ value : 'linear'},
{ value : 'ease'},
{ value : 'ease-in'},
{ value : 'ease-out'},
{ value : 'ease-in-out'}],
}],
};
obj.build('transition').should.deep.equal([res]);
});
it('Build perspective', function() {
var res = {
property: 'perspective',
type: 'integer',
units: ['px'],
defaults : 0,
min: 0,
};
obj.build('perspective').should.deep.equal([res]);
});
it('Build transform', function() {
var res = {
property: 'transform',
type: 'composite',
properties:[{
property: 'transform-rotate-x',
type: 'integer',
units: ['deg'],
defaults : 0,
functionName: 'rotateX',
},{
property: 'transform-rotate-y',
type: 'integer',
units: ['deg'],
defaults : 0,
functionName: 'rotateY',
},{
property: 'transform-rotate-z',
type: 'integer',
units: ['deg'],
defaults : 0,
functionName: 'rotateZ',
},{
property: 'transform-scale-x',
type: 'integer',
defaults : 1,
functionName: 'scaleX',
},{
property: 'transform-scale-y',
type: 'integer',
defaults : 1,
functionName: 'scaleY',
},{
property: 'transform-scale-z',
type: 'integer',
defaults : 1,
functionName: 'scaleZ',
}],
};
obj.build('transform').should.deep.equal([res]);
});
});
}

Write Preview
Loading…
Cancel
Save