From cbcb1ebf06346f0d46f94d5b763d45c78713a26d Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 20 Apr 2016 13:55:15 +0200 Subject: [PATCH] Add possibility to watch states on select --- src/demo.js | 178 +++++++++++++++++- src/dom_components/view/ComponentView.js | 21 ++- src/style_manager/view/PropertyView.js | 3 + src/style_manager/view/SectorsView.js | 15 ++ .../dom_components/view/componentView.js | 49 ----- 5 files changed, 212 insertions(+), 54 deletions(-) diff --git a/src/demo.js b/src/demo.js index ed8872225..d0a773ddf 100644 --- a/src/demo.js +++ b/src/demo.js @@ -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', + }], + }] + } ], }, diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 7d8e0506f..a1d621702 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -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) { diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index b6ea12a46..e478f9bc5 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -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; diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index 1d29aa99f..b4b7d17d1 100644 --- a/src/style_manager/view/SectorsView.js +++ b/src/style_manager/view/SectorsView.js @@ -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; diff --git a/test/specs/dom_components/view/componentView.js b/test/specs/dom_components/view/componentView.js index edad4d7e9..e69de29bb 100644 --- a/test/specs/dom_components/view/componentView.js +++ b/test/specs/dom_components/view/componentView.js @@ -1,49 +0,0 @@ -define(['componentView','componentModel'], - function(componentView,componentModel) { - - describe("ComponentView", function () { - before(function () { - this.$fixture = $("
"); - }); - - 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'}, - }); - }); - }); -}); \ No newline at end of file