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

Reduce demo config

pull/36/head
Artur Arseniev 10 years ago
parent
f9ad8d4372
commit
546b19f10a
6 changed files with 362 additions and 489 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. 501
      src/demo.js
  2. 1
      src/style_manager/model/Layer.js
  3. 2
      src/style_manager/model/Property.js
  4. 147
      src/style_manager/model/PropertyFactory.js
  5. 21
      src/style_manager/view/PropertyStackView.js
  6. 179
      test/specs/style_manager/model/Models.js

501
src/demo.js
View File

@ -140,152 +140,34 @@ require(['config/require-config'], function() {
styleManager : {
sectors: [{
name: 'Dimension555',
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-align', 'text-shadow'],
properties: [{
property: 'text-align',
list : [
{value: 'left', className: 'fa fa-align-left'},
{value: 'center', className: 'fa fa-align-center' },
{value: 'right', className: 'fa fa-align-right'},
{value: 'justify', className: 'fa fa-align-justify'}
],
}]
},{
name: 'General',
name: 'Decorations',
open: false,
properties:[{
name : 'Alignment',
property : 'float',
type : 'radio',
defaults : 'none',
list : [{
value : 'none',
title : 'None',
className : 'fa fa-times',
},{
value : 'left',
className : 'fa fa-align-left',
title : 'Float element to the left',
},{
value : 'right',
className : 'fa fa-align-right',
title : 'Float element to the right',
}],
},{
name : 'Display',
property : 'display',
type : 'radio',
defaults : 'block',
list : [{
value : 'block',
title : 'Block',
},{
value : 'inline',
title : 'Inline',
},{
value : 'inline-block',
title : 'Inline-block',
},{
value : 'none',
title : 'None',
className : 'fa fa-eye-slash',
}],
},{
name : 'Position',
property : 'position',
type : 'radio',
defaults : 'static',
list : [{
value : 'static',
title : 'Static',
},{
value : 'relative',
title : 'Relative',
},{
value : 'absolute',
title : 'Absolute',
},{
value : 'fixed',
title : 'fixed',
}],
},{
name : 'Top',
property : 'top',
type : 'integer',
units : ['px','%'],
defaults : '0',
},{
name : 'Right',
property : 'right',
type : 'integer',
units : ['px','%'],
defaults : '0',
},{
name : 'Left',
property : 'left',
type : 'integer',
units : ['px','%'],
defaults : '0',
},{
name : 'Bottom',
property : 'bottom',
type : 'integer',
units : ['px','%'],
defaults : '0',
}],
},{
buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
},/*{
name: 'Dimension',
open: false,
properties:[{
name : 'Width',
property : 'width',
type : 'integer',
units : ['px','%'],
defaults : 'auto',
min : 0,
},{
name : 'Height',
property : 'height',
type : 'integer',
units : ['px','%'],
defaults : 'auto',
min : 0,
},{
name : 'Max width',
property : 'max-width',
type : 'integer',
units : ['px','%'],
defaults : 'auto',
min : 0,
},{
name : 'Min height',
property : 'min-height',
type : 'integer',
units : ['px','%'],
defaults : 'auto',
min : 0,
},{
name : 'Margin',
property : 'margin',
type : 'composite',
properties:[{
name : 'Top',
property : 'margin-top',
type : 'integer',
units : ['px','%'],
defaults : 0,
},{
name : 'Right',
property : 'margin-right',
type : 'integer',
units : ['px','%'],
defaults : 0,
},{
name : 'Bottom',
property : 'margin-bottom',
type : 'integer',
units : ['px','%'],
defaults : 0,
},{
name : 'Left',
property : 'margin-left',
type : 'integer',
units : ['px','%'],
defaults : 0,
},],
},{
name : 'Center block',
property : 'margin',
type : 'select',
@ -297,345 +179,8 @@ require(['config/require-config'], function() {
value : '0 auto',
name : 'Center',
}],
},{
name : 'Padding',
property : 'padding',
type : 'composite',
properties:[{
name : 'Top',
property : 'padding-top',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},{
name : 'Right',
property : 'padding-right',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},{
name : 'Bottom',
property : 'padding-bottom',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},{
name : 'Left',
property : 'padding-left',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},],
},],
},{
name: 'Typography',
open: false,
properties:[{
name : 'Font',
property : 'font-family',
type : 'select',
defaults : 'Arial, Helvetica, sans-serif',
list : [{
value : 'Arial, Helvetica, sans-serif',
name : 'Arial',
style : 'font-family: Arial, Helvetica, sans-serif; font-size:15px;',
},{
value : '"Arial Black", Gadget, sans-serif',
style : 'font-family: "Arial Black", Gadget, sans-serif; font-size:15px;',
name : 'Arial Black',
},{
value : '"Brush Script MT", sans-serif',
style : 'font-family: "Brush Script MT", sans-serif; font-size:15px;',
name : 'Brush Script MT',
},{
value : '"Comic Sans MS", cursive, sans-serif',
style : 'font-family: "Comic Sans MS", cursive, sans-serif; font-size:15px;',
name : 'Comica Sans',
},{
value : '"Courier New", Courier, monospace',
style : 'font-family: "Courier New", Courier, monospace; font-size:15px;',
name : 'Courier New',
},{
value : 'Georgia, serif',
style : 'font-family: Georgia, serif; font-size:15px;',
name : 'Georgia',
},{
value : 'Helvetica, serif',
style : 'font-family: Helvetica, serif; font-size:15px;',
name : 'Helvetica',
},{
value : 'Impact, Charcoal, sans-serif',
style : 'font-family: Impact, Charcoal, sans-serif; font-size:15px;',
name : 'Impact',
},{
value : '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
style : 'font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:15px;',
name : 'Lucida Sans',
},{
value : 'Tahoma, Geneva, sans-serif',
style : 'font-family: Tahoma, Geneva, sans-serif; font-size:15px;',
name : 'Tahoma',
},{
value : '"Times New Roman", Times, serif',
style : 'font-family: "Times New Roman", Times, serif; font-size:15px;',
name : 'Times New Roman',
},{
value : '"Trebuchet MS", Helvetica, sans-serif',
style : 'font-family: "Trebuchet MS", Helvetica, sans-serif; font-size:15px;',
name : 'Trebuchet',
},{
value : 'Verdana, Geneva, sans-serif',
style : 'font-family: Verdana, Geneva, sans-serif; font-size:15px;',
name : 'Verdana',
}],
},{
name : 'Font size',
property : 'font-size',
type : 'integer',
units : ['px','em', 'rem', '%'],
defaults : '12',
min : 0,
},{
name : 'Weight',
property : 'font-weight',
type : 'select',
defaults : '400',
list: [{ value : '100', name : 'Thin', },
{ value : '200', name : 'Extra-Light', },
{ value : '300', name : 'Light', },
{ value : '400', name : 'Normal', },
{ value : '500', name : 'Medium',},
{ value : '600', name : 'Semi-Bold',},
{ value : '700', name : 'Bold', },
{ value : '800', name : 'Extra-Bold',},
{ value : '900', name : 'Ultra-Bold', }],
},{
name : 'Letter spacing',
property : 'letter-spacing',
type : 'integer',
units : ['px','em','%'],
defaults : 'normal',
},{
name: 'Font color',
property: 'color',
type: 'color',
defaults: 'black',
},{
name : 'Line height',
property : 'line-height',
type : 'integer',
units : ['px','em','%'],
defaults : 'normal',
},{
name : 'Text align',
property : 'text-align',
type : 'radio',
defaults : 'left',
list : [{ value : 'left', name : 'Left', className: 'fa fa-align-left'},
{ value : 'center', name : 'Center', className: 'fa fa-align-center' },
{ value : 'right', name : 'Right', className: 'fa fa-align-right'},
{ value : 'justify', name : 'Justify', className: 'fa fa-align-justify'},],
},{
name : 'Text shadow',
property : 'text-shadow',
type : 'stack',
preview : true,
properties : [{
name: 'X position',
property: 'h-shadow',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Y position',
property: 'v-shadow',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Blur',
property: 'blur-radius',
type: 'integer',
units: ['px'],
defaults : 0,
min: 0,
},{
name: 'Color',
property: 'shadow-color',
type: 'color',
defaults: 'black',
},],
}],
},{
name: 'Decorations',
open: false,
properties: [{
name : 'Border radius',
property : 'border-radius',
type : 'integer',
units : ['px'],
defaults : '0',
min : 0,
},{
name : 'Background',
property : 'background-color',
type : 'color',
defaults: 'none'
},{
name : 'Border radius',
property : 'border-radius',
type : 'composite',
properties : [{
name : 'Top',
property : 'b-top',
type : 'integer',
units : ['px','%'],
defaults : 0,
min : 0,
},{
name : 'Right',
property : 'b-right',
type : 'integer',
units : ['px','%'],
min : 0,
defaults : 0,
},{
name : 'Bottom',
property : 'b-bot',
type : 'integer',
units : ['px','%'],
min : 0,
defaults : 0,
},{
name : 'Left',
property : 'b-left',
type : 'integer',
units : ['px'],
min : 0,
defaults : 0,
},],
},{
name : 'Border',
property : 'border',
type : 'composite',
properties : [{
name : 'Width',
property : 'br-width',
type : 'integer',
units : ['px','em'],
defaults : 0,
min : 0,
},{
name : 'Style',
property : 'br-style',
type : 'select',
defaults : 'solid',
list: [{ value : 'none', name : 'None', },
{ value : 'solid', name : 'Solid', },
{ value : 'dashed', name : 'Dashed', },
{ value : 'dotted', name : 'Dotted', },],
},{
name: 'Color',
property: 'color',
type: 'color',
defaults: 'black',
}],
},{
name : 'Box shadow',
property : 'box-shadow',
type : 'stack',
preview : true,
properties : [{
name: 'X position',
property: 'shadow-x',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Y position',
property: 'shadow-y',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
name: 'Blur',
property: 'shadow-blur',
type: 'integer',
units: ['px'],
defaults : 5,
min: 0,
},{
name: 'Spread',
property: 'shadow-spread',
type: 'integer',
units: ['px'],
defaults : 0,
},{
name: 'Color',
property: 'shadow-color',
type: 'color',
defaults: 'black',
},{
name: 'Shadow type',
property: 'shadow-type',
type: 'select',
defaults: '',
list: [ { value : '', name : 'Outside', },
{ value : 'inset', name : 'Inside', }],
}],
},{
name : 'Background',
property : 'background',
type : 'stack',
preview : true,
detached: true,
properties : [{
name: 'Image',
property: 'background-image',
type: 'file',
defaults: 'none',
},
{
name: 'Repeat',
property: 'background-repeat',
type: 'select',
defaults: 'repeat',
list: [{ value : 'repeat', name : 'Repeat', },
{ value : 'repeat-x', name : 'Repeat X', },
{ value : 'repeat-y', name : 'Repeat Y', },
{ value : 'no-repeat', name : 'No repeat', }],
},
{
name: 'Position X',
property: 'background-position',
type: 'select',
defaults: 'left',
list: [ { value : 'left', name : 'Left', },
{ value : 'center', name : 'Center', },
{ value : 'right', name : 'Right', }],
},{
name: 'Position Y',
property: 'background-position',
type: 'select',
defaults: 'top',
list: [ { value : 'top', name : 'Top', },
{ value : 'center', name : 'Center', },
{ value : 'bottom', name : 'Bottom', }],
},{
name: 'Attach',
property: 'background-attachment',
type: 'select',
defaults: 'scroll',
list: [{ value : 'scroll', name : 'Scroll', },
{ value : 'fixed', name : 'Fixed', },
{ value : 'local', name : 'Local', }],
},],
},],
},{
}*/{
name: 'Extra',
open: false,
properties: [{

1
src/style_manager/model/Layer.js
View File

@ -7,6 +7,7 @@ define(['backbone'],
index: '',
active: true,
value: '',
values: {},
preview: false,
}

2
src/style_manager/model/Property.js
View File

@ -28,7 +28,7 @@ define(['backbone', './Layers'],
var prop = this.get('property');
if(!name)
this.set('name', prop.charAt(0).toUpperCase() + prop.slice(1));
this.set('name', prop.charAt(0).toUpperCase() + prop.slice(1).replace(/-/g,' '));
switch(type){
case 'stack':

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

@ -20,6 +20,13 @@ define(['backbone'],
var prop = props[i];
obj.property = prop;
// Property
switch(prop){
case 'border-radius-c':
obj.property = 'border-radius';
break;
}
// Type
switch(prop){
case 'float': case 'position':
@ -28,6 +35,9 @@ define(['backbone'],
break;
case 'display': case 'font-family':
case 'font-weight':
case 'border-style':
case 'box-shadow-type':
case 'background-repeat': case 'background-position': case 'background-attachment': case 'background-size':
obj.type = 'select';
break;
case 'top': case 'right': case 'bottom': case 'left':
@ -37,22 +47,33 @@ define(['backbone'],
case 'width': case 'height':
case 'font-size': case 'letter-spacing': case 'line-height':
case 'text-shadow-h': case 'text-shadow-v': case 'text-shadow-blur':
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 'border-width':
case 'box-shadow-h': case 'box-shadow-v': case 'box-shadow-blur': case 'box-shadow-spread':
obj.type = 'integer';
break;
case 'margin': case 'padding':
case 'border-radius':
case 'border':
obj.type = 'composite';
break;
case 'color': case 'text-shadow-color':
case 'background-color': case 'border-color': case 'box-shadow-color':
obj.type = 'color';
break;
case 'text-shadow':
case 'text-shadow': case 'box-shadow': case 'background':
obj.type = 'stack';
break;
case 'background-image':
obj.type = 'file';
break;
}
// Default
// Defaults
switch(prop){
case 'float':
case 'float': case 'background-color':
case 'background-image':
obj.defaults = 'none';
break;
case 'display':
@ -65,16 +86,23 @@ define(['backbone'],
case 'margin-top': case 'margin-right': case 'margin-bottom': case 'margin-left':
case 'padding-top': case 'padding-right': case 'padding-bottom': case 'padding-left':
case 'text-shadow-h': case 'text-shadow-v': case 'text-shadow-blur':
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':
obj.defaults = 0;
break;
case 'box-shadow-blur':
obj.defaults = 5;
break;
case 'min-height': case 'min-width': case 'max-height': case 'max-width':
case 'width': case 'height':
case 'background-size':
obj.defaults = 'auto';
break;
case 'font-family':
obj.defaults = 'Arial, Helvetica, sans-serif';
break;
case 'font-size':
case 'font-size': case 'border-width':
obj.defaults = 'medium';
break;
case 'font-weight':
@ -84,14 +112,30 @@ define(['backbone'],
obj.defaults = 'normal';
break;
case 'color': case 'text-shadow-color':
case 'border-color': case 'box-shadow-color':
obj.defaults = 'black';
break;
case 'text-align':
obj.defaults = 'left';
break;
case 'border-style':
obj.defaults = 'solid';
break;
case 'box-shadow-type':
obj.defaults = '';
break;
case 'background-repeat':
obj.defaults = 'repeat';
break;
case 'background-position':
obj.defaults = 'left top';
break;
case 'background-attachment':
obj.defaults = 'scroll';
break;
}
//Units
// Units
switch(prop){
case 'top': case 'right': case 'bottom': case 'left':
case 'margin-top': case 'margin-right': case 'margin-bottom': case 'margin-left':
@ -99,11 +143,20 @@ define(['backbone'],
case 'min-height': case 'min-width': case 'max-height': case 'max-width':
case 'width': case 'height':
case 'text-shadow-h': case 'text-shadow-v': case 'text-shadow-blur':
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':
obj.units = ['px','%'];
break;
case 'font-size': case 'letter-spacing': case 'line-height':
obj.units = ['px','em', 'rem', '%'];
break;
case 'border-width':
obj.units = ['px','em'];
break;
case 'box-shadow-blur': case 'box-shadow-spread':
obj.units = ['px'];
break;
}
// Min/Max
@ -112,18 +165,29 @@ define(['backbone'],
case 'width': case 'height':
case 'font-size':
case 'text-shadow-blur':
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 'border-width':
case 'box-shadow-blur':
obj.min = 0;
break;
}
// Preview
switch(prop){
case 'text-shadow':
case 'text-shadow': case 'box-shadow': case 'background':
obj.preview = true;
break;
}
//Options
// Detached
switch(prop){
case 'background':
obj.detached = true;
break;
}
// Options
switch(prop){
case 'float':
obj.list = [
@ -185,6 +249,60 @@ define(['backbone'],
{ value : 'justify'}
];
break;
case 'border-style':
obj.list = [
{ value : 'none'},
{ value : 'solid'},
{ value : 'dotted'},
{ value : 'dashed'},
{ value : 'double'},
{ value : 'groove'},
{ value : 'ridge'},
{ value : 'inset'},
{ value : 'outset'}
];
break;
case 'box-shadow-type':
obj.list = [
{value : '', name: 'Outside'},
{value : 'inset', name: 'Inside'}
];
break;
case 'background-repeat':
obj.list = [
{ value : 'repeat'},
{ value : 'repeat-x'},
{ value : 'repeat-y'},
{ value : 'no-repeat'}
];
break;
case 'background-position':
obj.list = [
{ value : 'left top',},
{ value : 'left center',},
{ value : 'left bottom',},
{ value : 'right top',},
{ value : 'right center'},
{ value : 'right bottom'},
{ value : 'center top'},
{ value : 'center center'},
{ value : 'center bottom'}
];
break;
case 'background-attachment':
obj.list = [
{ value : 'scroll'},
{ value : 'fixed'},
{ value : 'local'}
];
break;
case 'background-size':
obj.list = [
{ value : 'auto'},
{ value : 'cover'},
{ value : 'contain'}
];
break;
}
// Properties
@ -198,6 +316,21 @@ define(['backbone'],
case 'text-shadow':
obj.properties = this.build(['text-shadow-h', 'text-shadow-v', 'text-shadow-blur', 'text-shadow-color']);
break;
case 'border':
obj.properties = this.build(['border-width', 'border-style', 'border-color']);
break;
case 'border-radius':
obj.properties = this.build(['border-top-left-radius', 'border-top-right-radius',
'border-bottom-left-radius', 'border-bottom-right-radius']);
break;
case 'box-shadow':
obj.properties = this.build(['box-shadow-h', 'box-shadow-v', 'box-shadow-blur','box-shadow-spread',
'box-shadow-color', 'box-shadow-type']);
break;
case 'background':
obj.properties = this.build(['background-image', 'background-repeat', 'background-position','background-attachment',
'background-size']);
break;
}
objs.push(obj);

21
src/style_manager/view/PropertyStackView.js
View File

@ -73,11 +73,13 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
if(that.model.get('detached')){
var propVal = '';
var index = model.collection.indexOf(model);
that.getLayers().each(function(layer){
var vals = layer.get('value').split(' ');
if(vals.length && vals[index])
propVal += (propVal ? ',' : '') + vals[index];
var val = layer.get('values')[model.get('property')];
if(val)
propVal += (propVal ? ',' : '') + val;
});
view.updateTargetStyle(propVal, null, opt);
}else
that.model.set('value', result, opt);
@ -120,6 +122,19 @@ define(['backbone','./PropertyCompositeView', 'text!./../templates/propertyStack
var model = this.getLayers().at(stackIndex);
if(!model)
return;
// Store properties values inside layer, in this way it's more reliable
// to fetch them later
var valObj = {};
this.model.get('properties').each(function(prop){
var v = prop.getValue();
func = prop.get('functionName');
if(func)
v = func + '(' + v + ')';
valObj[prop.get('property')] = v;
});
model.set('values', valObj);
model.set('value', result);
return this.createValue();
},

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

@ -499,6 +499,185 @@ define([path + 'Sector',
obj.build('text-shadow').should.deep.equal([res]);
});
it('Build border-radius-c', function() {
var res = {
type: 'integer',
units: ['px', '%'],
defaults: 0,
min: 0,
};
res.property = 'border-radius';
obj.build('border-radius-c').should.deep.equal([res]);
});
it('Build border-radius', function() {
var res = {
property: 'border-radius',
type: 'composite',
properties: [{
property : 'border-top-left-radius',
type: 'integer',
units: ['px','%'],
defaults: 0,
min: 0,
},{
property: 'border-top-right-radius',
type: 'integer',
units: ['px','%'],
min : 0,
defaults: 0,
},{
property: 'border-bottom-left-radius',
type: 'integer',
units: ['px','%'],
min: 0,
defaults: 0,
},{
property: 'border-bottom-right-radius',
type: 'integer',
units: ['px','%'],
min: 0,
defaults : 0,
},],
};
res.property = 'border-radius';
obj.build('border-radius').should.deep.equal([res]);
});
it('Build background-color', function() {
var res = {
type : 'color',
defaults: 'none'
};
res.property = 'background-color';
obj.build('background-color').should.deep.equal([res]);
});
it('Build border', function() {
var res = {
property: 'border',
type: 'composite',
properties : [{
property: 'border-width',
type: 'integer',
units: ['px','em'],
defaults: 'medium',
min: 0,
},{
property: 'border-style',
type : 'select',
defaults: 'solid',
list: [{ value : 'none'},
{ value : 'solid'},
{ value : 'dotted'},
{ value : 'dashed'},
{ value : 'double'},
{ value : 'groove'},
{ value : 'ridge'},
{ value : 'inset'},
{ value : 'outset'},],
},{
property: 'border-color',
type: 'color',
defaults: 'black',
}],
};
obj.build('border').should.deep.equal([res]);
});
it('Build box-shadow', function() {
var res = {
property: 'box-shadow',
type: 'stack',
preview: true,
properties: [{
property: 'box-shadow-h',
type: 'integer',
units: ['px','%'],
defaults: 0,
},{
property: 'box-shadow-v',
type: 'integer',
units: ['px','%'],
defaults: 0,
},{
property: 'box-shadow-blur',
type: 'integer',
units: ['px'],
defaults: 5,
min: 0,
},{
property: 'box-shadow-spread',
type: 'integer',
units: ['px'],
defaults: 0,
},{
property: 'box-shadow-color',
type: 'color',
defaults: 'black',
},{
property: 'box-shadow-type',
type: 'select',
defaults: '',
list: [{value : '', name: 'Outside' },
{value : 'inset', name: 'Inside' }],
}],
};
obj.build('box-shadow').should.deep.equal([res]);
});
it('Build background', function() {
var res = {
property: 'background',
type: 'stack',
preview: true,
detached: true,
properties : [{
property: 'background-image',
type: 'file',
defaults: 'none',
},{
property: 'background-repeat',
type: 'select',
defaults: 'repeat',
list: [{ value : 'repeat'},
{ value : 'repeat-x'},
{ value : 'repeat-y'},
{ value : 'no-repeat'}],
},{
property: 'background-position',
type: 'select',
defaults: 'left top',
list: [ { value : 'left top',},
{ value : 'left center',},
{ value : 'left bottom',},
{ value : 'right top',},
{ value : 'right center'},
{ value : 'right bottom'},
{ value : 'center top'},
{ value : 'center center'},
{ value : 'center bottom'}
]
},{
property: 'background-attachment',
type: 'select',
defaults: 'scroll',
list: [{ value : 'scroll'},
{ value : 'fixed'},
{ value : 'local'}],
},{
property: 'background-size',
type: 'select',
defaults: 'auto',
list: [{ value : 'auto'},
{ value : 'cover'},
{ value : 'contain'}],
}],
};
obj.build('background').should.deep.equal([res]);
});
});
}

Write Preview
Loading…
Cancel
Save