Fixes #1631

frontend/src/modules/editor/contentObject/views/editorPageComponentListView.js

@@ -79,30 +79,32 @@ define(function(require) {
     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;
+        if (properties && properties.hasOwnProperty('_supportedLayout')) {
+          var supportedLayout = properties._supportedLayout.enum;
+          var availablePositions = _.clone(this.availablePositions);
 
           // Prune the available positions
           if (_.indexOf(supportedLayout, 'half-width') == -1) {
-            this.availablePositions.left = false;
-            this.availablePositions.right = false;
+            availablePositions.left = false;
+            availablePositions.right = false;
           }
 
           if (_.indexOf(supportedLayout, 'full-width') == -1) {
-            this.availablePositions.full = false;
+            availablePositions.full = false;
           }
         }
 
-        this.$('.editor-component-list-sidebar-list').append(new EditorPageComponentListItemView({
-            model: componentType,
-            availablePositions: this.availablePositions,
-            _parentId: this.model.get('_parentId'),
-            $parentElement: this.$parentElement,
-            parentView: this.parentView,
-            searchTerms: componentType.get('displayName').toLowerCase()
-          }).$el);
+        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);
     },
 

frontend/src/modules/editor/contentObject/views/editorPageComponentView.js

@@ -25,7 +25,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:copyID', this.onCopyID);
       this.on('contextMenu:component:cut', this.onCut);
       this.on('contextMenu:component:delete', this.deleteComponentPrompt);
     },
@@ -93,7 +93,10 @@ define(function(require){
           view.offsetTopFromWindow = view.$el.offset().top - $(window).scrollTop();
           // This is in the helper method because the height needs to be
           // manipulated before the drag start method due to adding drop zones
-          view.showDropZones();
+          // Passing the supported layout as a parameter allows the method to
+          // determine which drop zones should be displayed
+          var supportedLayout = view.getSupportedLayout();
+          view.showDropZones(supportedLayout);
           $(this).attr('data-component-id', view.model.get('_id'));
           $(this).attr('data-block-id', view.model.get('_parentId'));
           return $('<div class="drag-helper">' + view.model.get('title') + '</div>');
@@ -133,29 +136,49 @@ define(function(require){
       });
     },
 
+    getSupportedLayout: 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;
+
+      return {
+        full: _.indexOf(supportedLayout.enum, 'full-width') > -1,
+        half: _.indexOf(supportedLayout.enum, 'half-width') > -1
+      }
+    },
+
     evaluateLayout: function() {
+      var supportedLayout = this.getSupportedLayout();
+      var isFullWidthSupported = supportedLayout.full;
+      var isHalfWidthSupported = supportedLayout.half;
+
       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 (isHalfWidthSupported) {
+        var siblings = this.model.getSiblings();
+        var showFull = !siblings.length && isFullWidthSupported;
+        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);

frontend/src/modules/editor/global/views/editorOriginView.js

@@ -64,12 +64,31 @@ define(function(require){
       $('.add-control').removeClass('display-none');
     },
 
-    showDropZones: function() {
+    showDropZones: function (supportedLayout) {
       $('.paste-zone').addClass('display-none');
       $('.add-control').addClass('display-none');
       $('.paste-zone-'+ this.model.get('_type') + ' a').addClass('display-none');
+      // Components may be restricted to either full or half width so
+      // make sure only the appropriate paste zones are displayed
+      var type = this.model.get('_type');
+      var pasteZoneSelector = '.paste-zone-'+ type;
+      var $pasteZones;
+
+      if (type === 'component') {
+        $pasteZones = $();
+        if (supportedLayout.full) {
+          $pasteZones = $pasteZones.add('.paste-zone-component-full');
+        }
+        if (supportedLayout.half) {
+          $pasteZones = $pasteZones.add('.paste-zone-component-left, .paste-zone-component-right');
+        }
+      } else {
+        $pasteZones = $(pasteZoneSelector);
+      }
+
+      $(pasteZoneSelector + ' a').addClass('display-none');
 
-      $('.paste-zone-'+ this.model.get('_type'))
+      $pasteZones
         .addClass('paste-zone-available')
         .removeClass('display-none');