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

Add property defaults

pull/36/head
Artur Arseniev 10 years ago
parent
aec9938ed5
commit
f9ad8d4372
5 changed files with 222 additions and 10 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. 13
      src/demo.js
  2. 1
      src/dom_components/main.js
  3. 5
      src/editor/main.js
  4. 84
      src/style_manager/model/PropertyFactory.js
  5. 129
      test/specs/style_manager/model/Models.js

13
src/demo.js
View File

@ -22,14 +22,14 @@ require(['config/require-config'], function() {
id: 'undo',
run: function(em, sender){
sender.set('active',false);
em.get('UndoManager').undo();
em.UndoManager.undo();
},
stop: function(){}
},{
id: 'redo',
run: function(em, sender){
sender.set('active',false);
em.get('UndoManager').redo();
em.UndoManager.redo();
},
stop: function(){}
},{
@ -37,11 +37,7 @@ require(['config/require-config'], function() {
run: function(em, sender){
sender.set('active',false);
if(confirm('Are you sure to clean the canvas?')){
var comps = em.get('Components').getComponents();
var len = comps.length;
for(var i = 0; i < len; i++){
comps.pop();
}
var comps = em.DomComponents.clear();
}
},
stop: function(){}
@ -145,8 +141,7 @@ require(['config/require-config'], function() {
styleManager : {
sectors: [{
name: 'Dimension555',
buildProps: ['width', 'height', 'min-width', 'min-height', 'max-width', 'max-height', 'margin', 'padding'],
extendBuilded: 1,
buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-align', 'text-shadow'],
},{
name: 'General',
open: false,

1
src/dom_components/main.js
View File

@ -3,6 +3,7 @@
* - [getWrapper](#getwrapper)
* - [getComponents](#getcomponents)
* - [addComponent](#addcomponent)
* - [clear](#clear)
* - [render](#render)
*
* With this module is possible to manage all the HTML structure inside the canvas

5
src/editor/main.js
View File

@ -104,6 +104,11 @@ define(function (require){
*/
Canvas: em.get('Canvas'),
/**
* @property {UndoManager}
*/
UndoManager: em.get('UndoManager'),
/**
* @property {Utils}
*/

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

@ -23,9 +23,11 @@ define(['backbone'],
// Type
switch(prop){
case 'float': case 'position':
case 'text-align':
obj.type = 'radio';
break;
case 'display':
case 'display': case 'font-family':
case 'font-weight':
obj.type = 'select';
break;
case 'top': case 'right': case 'bottom': case 'left':
@ -33,11 +35,19 @@ define(['backbone'],
case 'padding-top': case 'padding-right': case 'padding-bottom': case 'padding-left':
case 'min-height': case 'min-width': case 'max-height': case 'max-width':
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':
obj.type = 'integer';
break;
case 'margin': case 'padding':
obj.type = 'composite';
break;
case 'color': case 'text-shadow-color':
obj.type = 'color';
break;
case 'text-shadow':
obj.type = 'stack';
break;
}
// Default
@ -54,12 +64,31 @@ define(['backbone'],
case 'top': case 'right': case 'bottom': case 'left':
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':
obj.defaults = 0;
break;
case 'min-height': case 'min-width': case 'max-height': case 'max-width':
case 'width': case 'height':
obj.defaults = 'auto';
break;
case 'font-family':
obj.defaults = 'Arial, Helvetica, sans-serif';
break;
case 'font-size':
obj.defaults = 'medium';
break;
case 'font-weight':
obj.defaults = '400';
break;
case 'letter-spacing': case 'line-height':
obj.defaults = 'normal';
break;
case 'color': case 'text-shadow-color':
obj.defaults = 'black';
break;
case 'text-align':
obj.defaults = 'left';
break;
}
//Units
@ -69,18 +98,31 @@ define(['backbone'],
case 'padding-top': case 'padding-right': case 'padding-bottom': case 'padding-left':
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':
obj.units = ['px','%'];
break;
case 'font-size': case 'letter-spacing': case 'line-height':
obj.units = ['px','em', 'rem', '%'];
break;
}
// Min/Max
switch(prop){
case 'min-height': case 'min-width': case 'max-height': case 'max-width':
case 'width': case 'height':
case 'font-size':
case 'text-shadow-blur':
obj.min = 0;
break;
}
// Preview
switch(prop){
case 'text-shadow':
obj.preview = true;
break;
}
//Options
switch(prop){
case 'float':
@ -106,6 +148,43 @@ define(['backbone'],
{value: 'fixed'},
];
break;
case 'font-family':
var ss = ', sans-serif';
var s = ', serif';
var fonts = ['Arial, Helvetica' + ss, 'Arial Black, Gadget' + ss, 'Brush Script MT' + ss,
'Comic Sans MS, cursive' + ss, 'Courier New, Courier, monospace', 'Georgia, serif', 'Helvetica, serif',
'Impact, Charcoal' + ss, 'Lucida Sans Unicode, Lucida Grande' + ss, 'Tahoma, Geneva' + ss,
'Times New Roman, Times, serif', 'Trebuchet MS, Helvetica' + ss, 'Verdana, Geneva' + ss];
obj.list = [];
for(var j = 0, l = fonts.length; j < l; j++){
var font = {};
font.value = fonts[j];
font.name = fonts[j].split(',')[0];
font.style = 'font-family: ' + fonts[j] + '; font-size:15px';
obj.list.push(font);
}
break;
case 'font-weight':
obj.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', }
];
break;
case 'text-align':
obj.list = [
{ value : 'left'},
{ value : 'center'},
{ value : 'right'},
{ value : 'justify'}
];
break;
}
// Properties
@ -116,6 +195,9 @@ define(['backbone'],
case 'padding':
obj.properties = this.build(['padding-top', 'padding-right', 'padding-bottom', 'padding-left']);
break;
case 'text-shadow':
obj.properties = this.build(['text-shadow-h', 'text-shadow-v', 'text-shadow-blur', 'text-shadow-color']);
break;
}
objs.push(obj);

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

@ -370,6 +370,135 @@ define([path + 'Sector',
obj.build('padding').should.deep.equal([res]);
});
it('Build font-family', function() {
var ss = ', sans-serif';
var ms = ', monospace';
var ff = 'font-family: ';
var sty = '; font-size:15px';
var res = {
property: 'font-family',
type: 'select',
defaults: 'Arial, Helvetica' + ss,
list:[
{name: 'Arial', value: 'Arial, Helvetica' + ss, style: ff + 'Arial, Helvetica' + ss + sty},
{name: 'Arial Black', value: 'Arial Black, Gadget' + ss, style: ff + 'Arial Black, Gadget' + ss + sty},
{name: 'Brush Script MT', value: 'Brush Script MT' + ss, style: ff + 'Brush Script MT' + ss + sty},
{name: 'Comic Sans MS', value: 'Comic Sans MS, cursive' + ss, style: ff + 'Comic Sans MS, cursive' + ss + sty},
{name: 'Courier New', value: 'Courier New, Courier' + ms, style: ff + 'Courier New, Courier' + ms + sty},
{name: 'Georgia', value: 'Georgia, serif', style: ff + 'Georgia, serif' + sty},
{name: 'Helvetica', value: 'Helvetica, serif', style: ff + 'Helvetica, serif' + sty},
{name: 'Impact', value: 'Impact, Charcoal' + ss, style: ff + 'Impact, Charcoal' + ss + sty},
{name: 'Lucida Sans Unicode', value: 'Lucida Sans Unicode, Lucida Grande' + ss, style: ff + 'Lucida Sans Unicode, Lucida Grande' + ss + sty},
{name: 'Tahoma', value: 'Tahoma, Geneva' + ss, style: ff + 'Tahoma, Geneva' + ss + sty},
{name: 'Times New Roman', value: 'Times New Roman, Times, serif', style: ff + 'Times New Roman, Times, serif' + sty},
{name: 'Trebuchet MS', value: 'Trebuchet MS, Helvetica' + ss, style: ff + 'Trebuchet MS, Helvetica' + ss + sty},
{name: 'Verdana', value: 'Verdana, Geneva' + ss, style: ff + 'Verdana, Geneva' + ss + sty},
],
};
obj.build('font-family').should.deep.equal([res]);
});
it('Build font-size', function() {
var res = {
type: 'integer',
units: ['px','em', 'rem', '%'],
defaults: 'medium',
min: 0,
};
res.property = 'font-size';
obj.build('font-size').should.deep.equal([res]);
});
it('Build letter-spacing', function() {
var res = {
type: 'integer',
units: ['px','em', 'rem', '%'],
defaults: 'normal',
};
res.property = 'letter-spacing';
obj.build('letter-spacing').should.deep.equal([res]);
});
it('Build font-weight', function() {
var res = {
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', }],
};
res.property = 'font-weight';
obj.build('font-weight').should.deep.equal([res]);
});
it('Build color', function() {
var res = {
property: 'color',
type: 'color',
defaults: 'black',
};
obj.build('color').should.deep.equal([res]);
});
it('Build line-height', function() {
var res = {
type: 'integer',
units: ['px','em', 'rem', '%'],
defaults: 'normal',
};
res.property = 'line-height';
obj.build('line-height').should.deep.equal([res]);
});
it('Build text-align', function() {
var res = {
type: 'radio',
defaults: 'left',
list: [{ value : 'left'},
{ value : 'center'},
{ value : 'right'},
{ value : 'justify'}],
};
res.property = 'text-align';
obj.build('text-align').should.deep.equal([res]);
});
it('Build text-shadow', function() {
var res = {
type: 'stack',
preview: true,
properties : [{
property: 'text-shadow-h',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
property: 'text-shadow-v',
type: 'integer',
units: ['px','%'],
defaults : 0,
},{
property: 'text-shadow-blur',
type: 'integer',
units: ['px','%'],
defaults : 0,
min: 0,
},{
property: 'text-shadow-color',
type: 'color',
defaults: 'black',
},],
};
res.property = 'text-shadow';
obj.build('text-shadow').should.deep.equal([res]);
});
});
}

Write Preview
Loading…
Cancel
Save