diff --git a/src/commands/main.js b/src/commands/main.js index d222cbd17..0f1febadc 100644 --- a/src/commands/main.js +++ b/src/commands/main.js @@ -96,6 +96,7 @@ define(function(require) { defaultCommands['sw-visibility'] = require('./view/SwitchVisibility'); defaultCommands['open-layers'] = require('./view/OpenLayers'); defaultCommands['open-sm'] = require('./view/OpenStyleManager'); + defaultCommands['open-tm'] = require('./view/OpenTraitManager'); defaultCommands['open-blocks'] = require('./view/OpenBlocks'); defaultCommands.fullscreen = require('./view/Fullscreen'); defaultCommands.preview = require('./view/Preview'); @@ -165,4 +166,4 @@ define(function(require) { }; }; -}); \ No newline at end of file +}); diff --git a/src/commands/view/OpenTraitManager.js b/src/commands/view/OpenTraitManager.js index f8b87ce7c..e03dcb394 100644 --- a/src/commands/view/OpenTraitManager.js +++ b/src/commands/view/OpenTraitManager.js @@ -6,27 +6,27 @@ define(function() { var config = editor.Config; var pfx = config.stylePrefix; var tm = editor.TraitManager; - if(!this.blocks){ + if(!this.obj){ var tmView = new tm.TraitsView({ collection: [], - editor: editor + editor: editor.editor }); - this.blocks = $('
').get(0); - this.blocks.appendChild(tmView.render()); + this.obj = $('
').get(0); + this.obj.appendChild(tmView.render().el); var panels = editor.Panels; if(!panels.getPanel('views-container')) panelC = panels.addPanel({id: 'views-container'}); else panelC = panels.getPanel('views-container'); - panelC.set('appendContent', this.blocks).trigger('change:appendContent'); + panelC.set('appendContent', this.obj).trigger('change:appendContent'); } - this.blocks.style.display = 'block'; + this.obj.style.display = 'block'; }, stop: function() { - if(this.blocks) - this.blocks.style.display = 'none'; + if(this.obj) + this.obj.style.display = 'none'; } }; }); diff --git a/src/config/require-config.js b/src/config/require-config.js index 90725af9b..55ae4d0c5 100644 --- a/src/config/require-config.js +++ b/src/config/require-config.js @@ -34,7 +34,7 @@ require.config({ packages : [ { name: 'GrapesJS', location: 'grapesjs' }, - { name: 'Abstracts', location: 'domain_abstract' }, + { name: 'Abstract', location: 'domain_abstract' }, { name: 'Editor', location: 'editor', }, { name: 'AssetManager', location: 'asset_manager', }, { name: 'BlockManager', location: 'block_manager', }, diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index e70ca6c9c..3a9101864 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -35,7 +35,10 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana this.components = new Components(this.defaultC, opt); this.set('components', this.components); this.set('classes', new Selectors(this.defaultCl)); - this.set('traits', new Traits(this.get('traits'), this)); + var traits = new Traits(); + traits.setTarget(this); + traits.add(this.get('traits')); + this.set('traits', traits); }, /** diff --git a/src/domain_abstract/view/DomainViews.js b/src/domain_abstract/view/DomainViews.js index 7a516b5c8..a0d7c1f4f 100644 --- a/src/domain_abstract/view/DomainViews.js +++ b/src/domain_abstract/view/DomainViews.js @@ -3,94 +3,12 @@ function(Backbone) { return Backbone.View.extend({ + itemView: '', + initialize: function(opts, config) { - _.bindAll(this, 'getSorter', 'onDrag', 'onDrop', 'dragHelper', 'moveHelper'); this.config = config || {}; - this.ppfx = this.config.pStylePrefix || ''; - this.listenTo(this.collection, 'add', this.addTo); - this.em = this.config.em; - this.tac = 'test-tac'; - - if(this.em){ - this.config.getSorter = this.getSorter; - this.config.dragHelper = this.dragHelper; - this.canvas = this.em.get('Canvas'); - } }, - /** - * Get sorter - * @private - */ - getSorter: function(){ - if(!this.em) - return; - if(!this.sorter){ - var utils = this.em.get('Utils'); - var canvas = this.canvas; - this.sorter = new utils.Sorter({ - container: canvas.getBody(), - placer: canvas.getPlacerEl(), - containerSel: '*', - itemSel: '*', - pfx: this.ppfx, - onStart: this.onDrag, - onEndMove: this.onDrop, - document: canvas.getFrameEl().contentDocument, - direction: 'a', - wmargin: 1, - nested: 1, - em: this.em - }); - } - return this.sorter; - }, -/* - updateOffset: function(){ - if(!this.sorter) - return; - var sorter = this.sorter; - var offDim = this.canvas.getOffset(); - sorter.offTop = offDim.top; - sorter.offLeft = offDim.left; - }, -*/ - /** - * Callback when block is on drag - * @private - */ - onDrag: function(){ - this.em.stopDefault(); - this.em.get('Canvas').getBody().style.cursor = 'grabbing'; - document.body.style.cursor = 'grabbing'; - }, - - dragHelper: function(el){ - el.className += ' ' + this.ppfx + 'bdrag'; - this.helper = el; - document.body.appendChild(el); - $(this.em.get('Canvas').getBody()).on('mousemove', this.moveHelper); - $(document).on('mousemove', this.moveHelper); - }, - - moveHelper: function(e){ - this.helper.style.left = e.pageX + 'px'; - this.helper.style.top = e.pageY + 'px'; - }, - - /** - * Callback when block is dropped - * @private - */ - onDrop: function(model){ - this.em.runDefault(); - this.em.get('Canvas').getBody().style.cursor = ''; - document.body.style.cursor = ''; - if(model && model.get('activeOnRender')){ - model.trigger('active'); - model.set('activeOnRender', 0); - } - }, /** * Add new model to the collection @@ -109,9 +27,8 @@ function(Backbone) { * */ add: function(model, fragment){ var frag = fragment || null; - var view = new BlockView({ - model: model, - attributes: model.get('attributes'), + var view = new this.itemView({ + model: model }, this.config); var rendered = view.render().el; @@ -127,9 +44,10 @@ function(Backbone) { var frag = document.createDocumentFragment(); this.$el.empty(); - this.collection.each(function(model){ - this.add(model, frag); - }, this); + if(this.collection.length) + this.collection.each(function(model){ + this.add(model, frag); + }, this); this.$el.append(frag); return this; diff --git a/src/panels/config/config.js b/src/panels/config/config.js index 273e67096..b83ee291a 100644 --- a/src/panels/config/config.js +++ b/src/panels/config/config.js @@ -4,6 +4,7 @@ define(function () { var swv = 'sw-visibility'; var expt = 'export-template'; var osm = 'open-sm'; + var otm = 'open-tm'; var ola = 'open-layers'; var obl = 'open-blocks'; var ful = 'fullscreen'; @@ -64,6 +65,11 @@ define(function () { command: osm, active: true, attributes: { title: 'Open Style Manager' }, + },{ + id: otm, + className: 'fa fa-cog', + command: otm, + attributes: { title: 'Settings' }, },{ id: ola, className: 'fa fa-bars', @@ -83,4 +89,4 @@ define(function () { // Delay before show children buttons (in milliseconds) delayBtnsShow : 300, }; -}); \ No newline at end of file +}); diff --git a/src/trait_manager/main.js b/src/trait_manager/main.js index df8270f57..403d0a601 100644 --- a/src/trait_manager/main.js +++ b/src/trait_manager/main.js @@ -9,7 +9,7 @@ define(function(require) { return { - Traits: Traits, + TraitsView: TraitsView, /** * Name of the module diff --git a/src/trait_manager/model/Trait.js b/src/trait_manager/model/Trait.js index b2901188f..cf972a4e0 100644 --- a/src/trait_manager/model/Trait.js +++ b/src/trait_manager/model/Trait.js @@ -13,6 +13,8 @@ define(['backbone'], }, initialize: function(){ + if(!this.get('target')) + throw new Error('Target not found'); }, }); diff --git a/src/trait_manager/model/Traits.js b/src/trait_manager/model/Traits.js index 6660704de..f98c81b0a 100644 --- a/src/trait_manager/model/Traits.js +++ b/src/trait_manager/model/Traits.js @@ -5,14 +5,19 @@ define(['backbone','./Trait', './TraitFactory'], model: Trait, + setTarget: function(target){ + this.target = target; + }, + add: function(models, opt){ // Use TraitFactory if necessary if(typeof models === 'string' || models instanceof Array){ if(typeof models === 'string') models = [models]; for(var i = 0, len = models.length; i < len; i++){ - var model = models[i]; - models[i] = TraitFactory.build(model)[0]; + var model = TraitFactory.build(models[i])[0]; + model.target = this.target; + models[i] = model; } } return Backbone.Collection.prototype.add.apply(this, [models, opt]); diff --git a/src/trait_manager/view/TraitView.js b/src/trait_manager/view/TraitView.js index ebf925de2..2701ee060 100644 --- a/src/trait_manager/view/TraitView.js +++ b/src/trait_manager/view/TraitView.js @@ -32,6 +32,7 @@ define(['backbone'], function (Backbone) { * @private */ renderLabel: function() { + /* this.$el.html(this.templateLabel({ pfx : this.pfx, ppfx : this.ppfx, @@ -39,6 +40,34 @@ define(['backbone'], function (Backbone) { info : this.model.get('info'), label : this.model.get('name'), })); + */ + console.log(this.model); + this.$el.html('
' + this.getLabel() + '
'); + }, + + /** + * Returns label for the input + * @return {string} + * @private + */ + getLabel: function() { + var model = this.model; + return model.get('label') || model.get('name'); + }, + + /** + * Renders input + * */ + renderField: function(){ + if(!this.$input){ + this.$el.append('
'); + this.$input = $('', { + placeholder: this.model.get('defaults'), + type: 'text' + }); + this.$el.find('.input-h').html(this.$input); + } + //this.setValue(this.componentValue, 0); }, render : function() { diff --git a/src/trait_manager/view/TraitsView.js b/src/trait_manager/view/TraitsView.js index be985ac41..8cd7644b3 100644 --- a/src/trait_manager/view/TraitsView.js +++ b/src/trait_manager/view/TraitsView.js @@ -1,62 +1,62 @@ -define(['backbone'], function (Backbone) { +define(['backbone', 'Abstract/view/DomainViews', './TraitView'], + function (Backbone, DomainViews, TraitView) { - return Backbone.View.extend({ + return DomainViews.extend({ - className: 'test-traits', + itemView: TraitView, - initialize: function(o) { - console.log(o); - this.config = o.config || {}; - this.pfx = this.config.stylePrefix || ''; - // listen selected component change - /* - if target not empty refresh + className: 'test-traits', + + initialize: function(o) { + this.config = o.config || {}; + this.em = o.editor; + this.pfx = this.config.stylePrefix || ''; + this.listenTo(this.em, 'change:selectedComponent', this.updatedCollection); + /* + if target not empty refresh + */ + }, + + /** + * Update view collection + * @private + */ + updatedCollection: function() { + var comp = this.em.get('selectedComponent'); + this.collection = comp.get('traits'); + this.render(); + }, + + onChange: function() { + //change model value + }, + + /** + * On change callback + * @private + */ + onValuesChange: function() { + var m = this.model; + var trg = m.target; + var attrs = trg.get('attributes'); + attrs[m.get('name')] = m.get('value'); + trg.set('attributes', attrs); + }, + + /** + * Render label + * @private */ - }, - - onChange: function() { - //change model value - }, - - /** - * On change callback - * @private - */ - onValuesChange: function() { - var m = this.model; - var trg = m.target; - var attrs = trg.get('attributes'); - attrs[m.get('name')] = m.get('value'); - trg.set('attributes', attrs); - }, - - /** - * Render label - * @private - */ - renderLabel: function() { - this.$el.html(this.templateLabel({ - pfx : this.pfx, - ppfx : this.ppfx, - icon : this.model.get('icon'), - info : this.model.get('info'), - label : this.model.get('name'), - })); - }, - - render: function() { - var frag = document.createDocumentFragment(); - this.$el.empty(); - - this.collection.each(function(model){ - this.add(model, frag); - }, this); - - this.$el.append(frag); - this.$el.addClass(this.ppfx + 'blocks-c'); - return this; - }, - - }); + renderLabel: function() { + this.$el.html(this.templateLabel({ + pfx : this.pfx, + ppfx : this.ppfx, + icon : this.model.get('icon'), + info : this.model.get('info'), + label : this.model.get('name'), + })); + }, + + }); });