From 5534de28ad0a09d3f4ff51eb5cec7a5f4d3569ad Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 7 Apr 2017 11:03:52 +0100 Subject: [PATCH 1/4] Fix component layout options --- .../page/views/editorComponentListView.js | 216 +++++++++--------- .../editor/page/views/editorComponentView.js | 48 ++-- 2 files changed, 141 insertions(+), 123 deletions(-) diff --git a/frontend/src/core/editor/page/views/editorComponentListView.js b/frontend/src/core/editor/page/views/editorComponentListView.js index af12ce97de..2e8e1e5d18 100644 --- a/frontend/src/core/editor/page/views/editorComponentListView.js +++ b/frontend/src/core/editor/page/views/editorComponentListView.js @@ -7,123 +7,129 @@ define(function(require) { var EditorComponentListItemView = require('editorPage/views/editorComponentListItemView'); var EditorComponentListView = EditorOriginView.extend({ - tagName: "div", - className: "editor-component-list", - - events: { - 'click': 'onOverlayClicked', - 'click .editor-component-list-sidebar-exit, .click-capture': 'closeView', - 'keyup .editor-component-list-sidebar-search input': 'onSearchKeyup' - }, - - preRender: function(options) { - $('html').css('overflow-y', 'hidden'); - - this.listenTo(Origin, 'editorComponentListView:remove', this.remove); - this.listenTo(Origin, 'window:resize', this.onScreenResize); - - this.setupCollection(); - this.setupFilters(); - - this.$parentElement = options.$parentElement; - this.parentView = options.parentView; - }, - - setupCollection: function() { - var availableComponents = _.where(this.model.get('componentTypes'), { _isAvailableInEditor: true }); - this.collection = new Backbone.Collection(availableComponents); - }, - - setupFilters: function() { - this.availablePositions = { - left: false, - right: false, - full: false - }; - - _.each(this.model.get('layoutOptions'), function(layoutOption) { - switch(layoutOption.type) { - case 'left': - this.availablePositions.left = true; - break; - case 'right': - this.availablePositions.right = true; - break; - case 'full': - this.availablePositions.full = true; - break; - } - }, this); - - this.model.set('_availablePosition', this.availablePositions); - }, - - postRender: function() { - this.renderComponentList(); - this.headerHeight = this.$('.editor-component-list-sidebar-header').height(); - $(window).resize(); - // move bar into place and animate in - this.$el.css({ right:this.$('.editor-component-list-sidebar').width()*-1}).animate({ right:"0" }, 400,"easeOutQuart"); - }, - - closeView: function() { - var self = this; - this.$el.animate({ right:this.$('.editor-component-list-sidebar').width() *- 1 }, 400,"easeOutQuart", function onAnimOut() { - $('html').css('overflow-y', ''); - self.remove(); - }); - }, - - renderComponentList: function() { - Origin.trigger('editorComponentListView:removeSubviews'); - // _.each(this.collection, function(componentType) { - this.collection.each(function(componentType) { - var properties = componentType.get('properties'); - if (properties && properties.hasOwnProperty('._supportedLayout')) { - var supportedLayout = properties.hasOwnProperty('._supportedLayout').enum; - - // Prune the available positions - if (_.indexOf(supportedLayout, 'half-width') == -1) { - this.availablePositions.left = false; - this.availablePositions.right = false; + tagName: "div", + className: "editor-component-list", + + events: { + 'click': 'onOverlayClicked', + 'click .editor-component-list-sidebar-exit, .click-capture': 'closeView', + 'keyup .editor-component-list-sidebar-search input': 'onSearchKeyup' + }, + + preRender: function(options) { + $('html').css('overflow-y', 'hidden'); + + this.listenTo(Origin, 'editorComponentListView:remove', this.remove); + this.listenTo(Origin, 'window:resize', this.onScreenResize); + + this.setupCollection(); + this.setupFilters(); + + this.$parentElement = options.$parentElement; + this.parentView = options.parentView; + }, + + setupCollection: function() { + var availableComponents = _.where(this.model.get('componentTypes'), { _isAvailableInEditor: true }); + this.collection = new Backbone.Collection(availableComponents); + }, + + setupFilters: function() { + this.availablePositions = { + left: false, + right: false, + full: false + }; + + _.each(this.model.get('layoutOptions'), function(layoutOption) { + switch(layoutOption.type) { + case 'left': + this.availablePositions.left = true; + break; + case 'right': + this.availablePositions.right = true; + break; + case 'full': + this.availablePositions.full = true; + break; } - - if (_.indexOf(supportedLayout, 'full-width') == -1) { - this.availablePositions.full = false; + }, this); + + this.model.set('_availablePosition', this.availablePositions); + }, + + postRender: function() { + this.renderComponentList(); + this.headerHeight = this.$('.editor-component-list-sidebar-header').height(); + $(window).resize(); + // move bar into place and animate in + this.$el.css({ right:this.$('.editor-component-list-sidebar').width()*-1}).animate({ right:"0" }, 400,"easeOutQuart"); + }, + + closeView: function() { + var self = this; + this.$el.animate({ right:this.$('.editor-component-list-sidebar').width() *- 1 }, 400,"easeOutQuart", function onAnimOut() { + $('html').css('overflow-y', ''); + self.remove(); + }); + }, + + renderComponentList: function() { + Origin.trigger('editorComponentListView:removeSubviews'); + // _.each(this.collection, function(componentType) { + + this.collection.each(function(componentType) { + var properties = componentType.get('properties'); + if (properties && properties.hasOwnProperty('_supportedLayout')) { + var supportedLayout = properties._supportedLayout.enum; + var availablePositions = { + left: true, + right: true, + full: true + }; + + // Prune the available positions + if (_.indexOf(supportedLayout, 'half-width') == -1) { + availablePositions.left = false; + availablePositions.right = false; + } + + if (_.indexOf(supportedLayout, 'full-width') == -1) { + availablePositions.full = false; + } } - } - this.$('.editor-component-list-sidebar-list').append(new EditorComponentListItemView({ + this.$('.editor-component-list-sidebar-list').append(new EditorComponentListItemView({ model: componentType, - availablePositions: this.availablePositions, + availablePositions: availablePositions, _parentId: this.model.get('_parentId'), $parentElement: this.$parentElement, parentView: this.parentView, searchTerms: componentType.get('displayName').toLowerCase() }).$el); - }, this); - }, + }, this); + }, + + onOverlayClicked: function(event) { + if ($(event.target).hasClass('editor-component-list')) { + Origin.trigger('editorComponentListView:removeSubviews'); + $('html').css('overflow-y', ''); + this.remove(); + } + }, - onOverlayClicked: function(event) { - if ($(event.target).hasClass('editor-component-list')) { - Origin.trigger('editorComponentListView:removeSubviews'); - $('html').css('overflow-y', ''); - this.remove(); - } - }, + onSearchKeyup: function(event) { + var searchValue = $(event.currentTarget).val(); + Origin.trigger('editorComponentListView:searchKeyup', searchValue); + }, - onSearchKeyup: function(event) { - var searchValue = $(event.currentTarget).val(); - Origin.trigger('editorComponentListView:searchKeyup', searchValue); + onScreenResize: function(windowWidth, windowHeight) { + this.$('.editor-component-list-sidebar-list').height(windowHeight - this.headerHeight); + } }, - - onScreenResize: function(windowWidth, windowHeight) { - this.$('.editor-component-list-sidebar-list').height(windowHeight - this.headerHeight); - } - }, - { - template: 'editorComponentList' - }); + { + template: 'editorComponentList' + }); return EditorComponentListView; }); \ No newline at end of file diff --git a/frontend/src/core/editor/page/views/editorComponentView.js b/frontend/src/core/editor/page/views/editorComponentView.js index d5ebbe24ee..6fbaa48dea 100644 --- a/frontend/src/core/editor/page/views/editorComponentView.js +++ b/frontend/src/core/editor/page/views/editorComponentView.js @@ -30,7 +30,7 @@ define(function(require){ this.on('contextMenu:component:edit', this.loadComponentEdit); this.on('contextMenu:component:copy', this.onCopy); this.on('contextMenu:component:copyID', this.onCopyID), - this.on('contextMenu:component:cut', this.onCut); + this.on('contextMenu:component:cut', this.onCut); this.on('contextMenu:component:delete', this.deleteComponentPrompt); }, @@ -145,28 +145,40 @@ define(function(require){ }, evaluateLayout: function() { + + var componentType = _.find(Origin.editor.data.componentTypes.models, function(type){ + return type.get('component') == this.model.get('_component'); + }, this); + + var supportedLayout = componentType.get("properties")._supportedLayout; + var isFullSupported = _.indexOf(supportedLayout.enum, "full-width") > -1; + var isHalfSupported = _.indexOf(supportedLayout.enum, "half-width") > -1; + var movePositions = { left: false, right: false, full: false }; - var siblings = this.model.getSiblings(); - var showFull = !siblings.length; - var type = this.model.get('_layout'); - switch (type) { - case 'left': - movePositions.right = true; - movePositions.full = showFull; - break; - case 'right': - movePositions.left = true; - movePositions.full = showFull; - break; - case 'full': - movePositions.left = true; - movePositions.right = true; - break + if (isHalfSupported) { + var siblings = this.model.getSiblings(); + var showFull = !siblings.length && isFullSupported; + var type = this.model.get('_layout'); + + switch (type) { + case 'left': + movePositions.right = true; + movePositions.full = showFull; + break; + case 'right': + movePositions.left = true; + movePositions.full = showFull; + break; + case 'full': + movePositions.left = true; + movePositions.right = true; + break + } } this.model.set('_movePositions', movePositions); @@ -262,4 +274,4 @@ define(function(require){ return EditorComponentView; -}); +}); \ No newline at end of file From 0945a3ff878e158a0f2a797b7a0a7b144ff93cae Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 7 Apr 2017 11:10:10 +0100 Subject: [PATCH 2/4] Fix component layout options --- .../page/views/editorComponentListView.js | 232 +++++++++--------- .../editor/page/views/editorComponentView.js | 4 +- 2 files changed, 118 insertions(+), 118 deletions(-) diff --git a/frontend/src/core/editor/page/views/editorComponentListView.js b/frontend/src/core/editor/page/views/editorComponentListView.js index 2e8e1e5d18..ec2e5f1d38 100644 --- a/frontend/src/core/editor/page/views/editorComponentListView.js +++ b/frontend/src/core/editor/page/views/editorComponentListView.js @@ -7,129 +7,129 @@ define(function(require) { var EditorComponentListItemView = require('editorPage/views/editorComponentListItemView'); var EditorComponentListView = EditorOriginView.extend({ - tagName: "div", - className: "editor-component-list", - - events: { - 'click': 'onOverlayClicked', - 'click .editor-component-list-sidebar-exit, .click-capture': 'closeView', - 'keyup .editor-component-list-sidebar-search input': 'onSearchKeyup' - }, - - preRender: function(options) { - $('html').css('overflow-y', 'hidden'); - - this.listenTo(Origin, 'editorComponentListView:remove', this.remove); - this.listenTo(Origin, 'window:resize', this.onScreenResize); - - this.setupCollection(); - this.setupFilters(); - - this.$parentElement = options.$parentElement; - this.parentView = options.parentView; - }, - - setupCollection: function() { - var availableComponents = _.where(this.model.get('componentTypes'), { _isAvailableInEditor: true }); - this.collection = new Backbone.Collection(availableComponents); - }, - - setupFilters: function() { - this.availablePositions = { - left: false, - right: false, - full: false - }; - - _.each(this.model.get('layoutOptions'), function(layoutOption) { - switch(layoutOption.type) { - case 'left': - this.availablePositions.left = true; - break; - case 'right': - this.availablePositions.right = true; - break; - case 'full': - this.availablePositions.full = true; - break; - } - }, this); - - this.model.set('_availablePosition', this.availablePositions); - }, - - postRender: function() { - this.renderComponentList(); - this.headerHeight = this.$('.editor-component-list-sidebar-header').height(); - $(window).resize(); - // move bar into place and animate in - this.$el.css({ right:this.$('.editor-component-list-sidebar').width()*-1}).animate({ right:"0" }, 400,"easeOutQuart"); - }, - - closeView: function() { - var self = this; - this.$el.animate({ right:this.$('.editor-component-list-sidebar').width() *- 1 }, 400,"easeOutQuart", function onAnimOut() { - $('html').css('overflow-y', ''); - self.remove(); - }); - }, - - renderComponentList: function() { - Origin.trigger('editorComponentListView:removeSubviews'); - // _.each(this.collection, function(componentType) { - - this.collection.each(function(componentType) { - var properties = componentType.get('properties'); - if (properties && properties.hasOwnProperty('_supportedLayout')) { - var supportedLayout = properties._supportedLayout.enum; - var availablePositions = { - left: true, - right: true, - full: true - }; - - // Prune the available positions - if (_.indexOf(supportedLayout, 'half-width') == -1) { - availablePositions.left = false; - availablePositions.right = false; - } - - if (_.indexOf(supportedLayout, 'full-width') == -1) { - availablePositions.full = false; - } + tagName: "div", + className: "editor-component-list", + + events: { + 'click': 'onOverlayClicked', + 'click .editor-component-list-sidebar-exit, .click-capture': 'closeView', + 'keyup .editor-component-list-sidebar-search input': 'onSearchKeyup' + }, + + preRender: function(options) { + $('html').css('overflow-y', 'hidden'); + + this.listenTo(Origin, 'editorComponentListView:remove', this.remove); + this.listenTo(Origin, 'window:resize', this.onScreenResize); + + this.setupCollection(); + this.setupFilters(); + + this.$parentElement = options.$parentElement; + this.parentView = options.parentView; + }, + + setupCollection: function() { + var availableComponents = _.where(this.model.get('componentTypes'), { _isAvailableInEditor: true }); + this.collection = new Backbone.Collection(availableComponents); + }, + + setupFilters: function() { + this.availablePositions = { + left: false, + right: false, + full: false + }; + + _.each(this.model.get('layoutOptions'), function(layoutOption) { + switch(layoutOption.type) { + case 'left': + this.availablePositions.left = true; + break; + case 'right': + this.availablePositions.right = true; + break; + case 'full': + this.availablePositions.full = true; + break; + } + }, this); + + this.model.set('_availablePosition', this.availablePositions); + }, + + postRender: function() { + this.renderComponentList(); + this.headerHeight = this.$('.editor-component-list-sidebar-header').height(); + $(window).resize(); + // move bar into place and animate in + this.$el.css({ right:this.$('.editor-component-list-sidebar').width()*-1}).animate({ right:"0" }, 400,"easeOutQuart"); + }, + + closeView: function() { + var self = this; + this.$el.animate({ right:this.$('.editor-component-list-sidebar').width() *- 1 }, 400,"easeOutQuart", function onAnimOut() { + $('html').css('overflow-y', ''); + self.remove(); + }); + }, + + renderComponentList: function() { + Origin.trigger('editorComponentListView:removeSubviews'); + // _.each(this.collection, function(componentType) { + + this.collection.each(function(componentType) { + var properties = componentType.get('properties'); + if (properties && properties.hasOwnProperty('_supportedLayout')) { + var supportedLayout = properties._supportedLayout.enum; + var availablePositions = { + left: true, + right: true, + full: true + }; + + // Prune the available positions + if (_.indexOf(supportedLayout, 'half-width') == -1) { + availablePositions.left = false; + availablePositions.right = false; } - this.$('.editor-component-list-sidebar-list').append(new EditorComponentListItemView({ - model: componentType, - availablePositions: availablePositions, - _parentId: this.model.get('_parentId'), - $parentElement: this.$parentElement, - parentView: this.parentView, - searchTerms: componentType.get('displayName').toLowerCase() - }).$el); - }, this); - }, - - onOverlayClicked: function(event) { - if ($(event.target).hasClass('editor-component-list')) { - Origin.trigger('editorComponentListView:removeSubviews'); - $('html').css('overflow-y', ''); - this.remove(); + if (_.indexOf(supportedLayout, 'full-width') == -1) { + availablePositions.full = false; + } } - }, - onSearchKeyup: function(event) { - var searchValue = $(event.currentTarget).val(); - Origin.trigger('editorComponentListView:searchKeyup', searchValue); - }, + this.$('.editor-component-list-sidebar-list').append(new EditorComponentListItemView({ + model: componentType, + availablePositions: availablePositions, + _parentId: this.model.get('_parentId'), + $parentElement: this.$parentElement, + parentView: this.parentView, + searchTerms: componentType.get('displayName').toLowerCase() + }).$el); + }, this); + }, - onScreenResize: function(windowWidth, windowHeight) { - this.$('.editor-component-list-sidebar-list').height(windowHeight - this.headerHeight); + onOverlayClicked: function(event) { + if ($(event.target).hasClass('editor-component-list')) { + Origin.trigger('editorComponentListView:removeSubviews'); + $('html').css('overflow-y', ''); + this.remove(); } }, - { - template: 'editorComponentList' - }); + + onSearchKeyup: function(event) { + var searchValue = $(event.currentTarget).val(); + Origin.trigger('editorComponentListView:searchKeyup', searchValue); + }, + + onScreenResize: function(windowWidth, windowHeight) { + this.$('.editor-component-list-sidebar-list').height(windowHeight - this.headerHeight); + } + }, + { + template: 'editorComponentList' + }); return EditorComponentListView; }); \ No newline at end of file diff --git a/frontend/src/core/editor/page/views/editorComponentView.js b/frontend/src/core/editor/page/views/editorComponentView.js index 6fbaa48dea..dd3d34b39b 100644 --- a/frontend/src/core/editor/page/views/editorComponentView.js +++ b/frontend/src/core/editor/page/views/editorComponentView.js @@ -29,8 +29,8 @@ define(function(require){ this.on('contextMenu:component:edit', this.loadComponentEdit); this.on('contextMenu:component:copy', this.onCopy); - this.on('contextMenu:component:copyID', this.onCopyID), - this.on('contextMenu:component:cut', this.onCut); + this.on('contextMenu:component:copyID', this.onCopyID); + this.on('contextMenu:component:cut', this.onCut); this.on('contextMenu:component:delete', this.deleteComponentPrompt); }, From 9f99618aca5486e5e1b0b70fc117b08c39f9cd3e Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 7 Apr 2017 11:11:56 +0100 Subject: [PATCH 3/4] Fix component layout options --- .../src/core/editor/page/views/editorComponentView.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/core/editor/page/views/editorComponentView.js b/frontend/src/core/editor/page/views/editorComponentView.js index dd3d34b39b..abfc4d1e98 100644 --- a/frontend/src/core/editor/page/views/editorComponentView.js +++ b/frontend/src/core/editor/page/views/editorComponentView.js @@ -151,8 +151,8 @@ define(function(require){ }, this); var supportedLayout = componentType.get("properties")._supportedLayout; - var isFullSupported = _.indexOf(supportedLayout.enum, "full-width") > -1; - var isHalfSupported = _.indexOf(supportedLayout.enum, "half-width") > -1; + var isFullWidthSupported = _.indexOf(supportedLayout.enum, "full-width") > -1; + var isHalfWidthSupported = _.indexOf(supportedLayout.enum, "half-width") > -1; var movePositions = { left: false, @@ -160,9 +160,9 @@ define(function(require){ full: false }; - if (isHalfSupported) { + if (isHalfWidthSupported) { var siblings = this.model.getSiblings(); - var showFull = !siblings.length && isFullSupported; + var showFull = !siblings.length && isFullWidthSupported; var type = this.model.get('_layout'); switch (type) { From 880b29b71ed36ac7b601ba7ba405b1bd24d3cf3d Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 7 Apr 2017 16:40:45 +0100 Subject: [PATCH 4/4] Check remaining available positions in block as well as _supportedLayout --- .../src/core/editor/page/views/editorComponentListView.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/frontend/src/core/editor/page/views/editorComponentListView.js b/frontend/src/core/editor/page/views/editorComponentListView.js index ec2e5f1d38..d4f32dd751 100644 --- a/frontend/src/core/editor/page/views/editorComponentListView.js +++ b/frontend/src/core/editor/page/views/editorComponentListView.js @@ -82,11 +82,7 @@ define(function(require) { var properties = componentType.get('properties'); if (properties && properties.hasOwnProperty('_supportedLayout')) { var supportedLayout = properties._supportedLayout.enum; - var availablePositions = { - left: true, - right: true, - full: true - }; + var availablePositions = _.clone(this.availablePositions); // Prune the available positions if (_.indexOf(supportedLayout, 'half-width') == -1) {