diff --git a/src/demo.js b/src/demo.js index 085205f90..e919c83bd 100644 --- a/src/demo.js +++ b/src/demo.js @@ -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: [{ diff --git a/src/style_manager/model/PropertyFactory.js b/src/style_manager/model/PropertyFactory.js index 5d00a5ca2..bb3ac1434 100644 --- a/src/style_manager/model/PropertyFactory.js +++ b/src/style_manager/model/PropertyFactory.js @@ -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); diff --git a/test/specs/class_manager/e2e/ClassManager.js b/test/specs/class_manager/e2e/ClassManager.js index 34a831223..d40faf9c6 100644 --- a/test/specs/class_manager/e2e/ClassManager.js +++ b/test/specs/class_manager/e2e/ClassManager.js @@ -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', }, diff --git a/test/specs/css_composer/e2e/CssComposer.js b/test/specs/css_composer/e2e/CssComposer.js index e65b21ff6..9364cf61f 100644 --- a/test/specs/css_composer/e2e/CssComposer.js +++ b/test/specs/css_composer/e2e/CssComposer.js @@ -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', diff --git a/test/specs/panels/main.js b/test/specs/panels/main.js index cc2195bb4..b1aece998 100644 --- a/test/specs/panels/main.js +++ b/test/specs/panels/main.js @@ -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() { diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js index b446447a6..6ee1db9ae 100644 --- a/test/specs/style_manager/model/Models.js +++ b/test/specs/style_manager/model/Models.js @@ -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]); + }); + }); }