From e23cdbe7446c6261ef7018e9db131443b70f2e0a Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 5 Oct 2016 15:28:58 +0200 Subject: [PATCH] Add abstracts --- src/commands/view/OpenTraitManager.js | 32 ++++++ src/config/require-config.js | 3 +- src/dom_components/model/Component.js | 9 -- src/domain_abstract/view/DomainViews.js | 139 ++++++++++++++++++++++++ src/editor/main.js | 7 +- src/editor/model/Editor.js | 4 +- src/trait_manager/main.js | 2 + src/trait_manager/view/TraitsView.js | 62 +++++++++++ 8 files changed, 245 insertions(+), 13 deletions(-) create mode 100644 src/commands/view/OpenTraitManager.js create mode 100644 src/domain_abstract/view/DomainViews.js create mode 100644 src/trait_manager/view/TraitsView.js diff --git a/src/commands/view/OpenTraitManager.js b/src/commands/view/OpenTraitManager.js new file mode 100644 index 000000000..f8b87ce7c --- /dev/null +++ b/src/commands/view/OpenTraitManager.js @@ -0,0 +1,32 @@ +define(function() { + + return { + + run: function(editor, sender) { + var config = editor.Config; + var pfx = config.stylePrefix; + var tm = editor.TraitManager; + if(!this.blocks){ + var tmView = new tm.TraitsView({ + collection: [], + editor: editor + }); + this.blocks = $('
').get(0); + this.blocks.appendChild(tmView.render()); + 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'); + } + + this.blocks.style.display = 'block'; + }, + + stop: function() { + if(this.blocks) + this.blocks.style.display = 'none'; + } + }; + }); diff --git a/src/config/require-config.js b/src/config/require-config.js index 97343826d..90725af9b 100644 --- a/src/config/require-config.js +++ b/src/config/require-config.js @@ -33,7 +33,8 @@ require.config({ }, packages : [ - { name: 'GrapesJS', location: 'grapesjs', }, + { name: 'GrapesJS', location: 'grapesjs' }, + { name: 'Abstracts', 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 462486df6..e70ca6c9c 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -111,14 +111,5 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana return this.name; }, - /** - * Returns HTML code of the component - * @return {string} - * @private - */ - getCode: function() { - return ''; - }, - }); }); diff --git a/src/domain_abstract/view/DomainViews.js b/src/domain_abstract/view/DomainViews.js new file mode 100644 index 000000000..7a516b5c8 --- /dev/null +++ b/src/domain_abstract/view/DomainViews.js @@ -0,0 +1,139 @@ +define(['backbone'], +function(Backbone) { + + return Backbone.View.extend({ + + 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 + * @param {Model} model + * @private + * */ + addTo: function(model){ + this.add(model); + }, + + /** + * Render new model inside the view + * @param {Model} model + * @param {Object} fragment Fragment collection + * @private + * */ + add: function(model, fragment){ + var frag = fragment || null; + var view = new BlockView({ + model: model, + attributes: model.get('attributes'), + }, this.config); + var rendered = view.render().el; + + if(frag) + frag.appendChild(rendered); + else + this.$el.append(rendered); + }, + + + + render: function() { + var frag = document.createDocumentFragment(); + this.$el.empty(); + + this.collection.each(function(model){ + this.add(model, frag); + }, this); + + this.$el.append(frag); + return this; + }, + + }); +}); diff --git a/src/editor/main.js b/src/editor/main.js index 0eca115a2..f13ae3d94 100644 --- a/src/editor/main.js +++ b/src/editor/main.js @@ -112,6 +112,11 @@ define(function (require){ */ BlockManager: em.get('BlockManager'), + /** + * @property {TraitManager} + */ + TraitManager: em.get('TraitManager'), + /** * @property {SelectorManager} */ @@ -394,4 +399,4 @@ define(function (require){ }; return Editor; -}); \ No newline at end of file +}); diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 8fb9ea1e9..883ea5e07 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -1,11 +1,11 @@ var deps = ['Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager', 'ModalDialog', 'CodeManager', 'Panels', - 'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents', 'Canvas', 'Commands', 'BlockManager']; + 'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents', 'Canvas', 'Commands', 'BlockManager', 'TraitManager']; // r.js do not see deps if I pass them as a variable // http://stackoverflow.com/questions/27545412/optimization-fails-when-passing-a-variable-with-a-list-of-dependencies-to-define define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager', 'ModalDialog', 'CodeManager', 'Panels', 'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents', -'Canvas', 'Commands', 'BlockManager'], function(){ +'Canvas', 'Commands', 'BlockManager', 'TraitManager'], function(){ return Backbone.Model.extend({ defaults: { diff --git a/src/trait_manager/main.js b/src/trait_manager/main.js index 613b821d6..df8270f57 100644 --- a/src/trait_manager/main.js +++ b/src/trait_manager/main.js @@ -9,6 +9,8 @@ define(function(require) { return { + Traits: Traits, + /** * Name of the module * @type {String} diff --git a/src/trait_manager/view/TraitsView.js b/src/trait_manager/view/TraitsView.js new file mode 100644 index 000000000..be985ac41 --- /dev/null +++ b/src/trait_manager/view/TraitsView.js @@ -0,0 +1,62 @@ +define(['backbone'], function (Backbone) { + + return Backbone.View.extend({ + + className: 'test-traits', + + initialize: function(o) { + console.log(o); + this.config = o.config || {}; + this.pfx = this.config.stylePrefix || ''; + // listen selected component change + /* + if target not empty refresh + */ + }, + + 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; + }, + + }); + +});