From 9a79f7f1bb13c5fdbf60948337615dc519d065dd Mon Sep 17 00:00:00 2001
From: Dan <danielstorey@gmail.com>
Date: Thu, 11 May 2017 14:18:19 +0100
Subject: [PATCH] Fixes #1631

Pass a supportedLayout object to the showDropZones method defined in the editorOriginView so that only the appropriate drop zones are displayed when dragging a component from one block to another.
---
 .../editor/global/views/editorOriginView.js   | 25 ++++++++++++++++---
 .../editor/page/views/editorComponentView.js  | 25 +++++++++++++------
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/frontend/src/core/editor/global/views/editorOriginView.js b/frontend/src/core/editor/global/views/editorOriginView.js
index f1f62ac08a..e1c69b1ff3 100644
--- a/frontend/src/core/editor/global/views/editorOriginView.js
+++ b/frontend/src/core/editor/global/views/editorOriginView.js
@@ -122,13 +122,32 @@ define(function(require){
       type && $('.paste-zone-' + type).removeClass('display-none');
     },
 
-    showDropZones: function () {
+    showDropZones: function (supportedLayout) {
       // Purposeful global selector here
       $('.paste-zone').addClass('display-none');
       // Hide the links within the dropzone
       $('.add-control').addClass('display-none');
-      $('.paste-zone-'+ this.model.get('_type') + ' a').addClass('display-none');
-      $('.paste-zone-'+ this.model.get('_type')).addClass('paste-zone-available').removeClass('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');
+      $pasteZones.addClass('paste-zone-available').removeClass('display-none');
       this.$el.parent().children('.drop-only').removeClass('display-none');
     },
 
diff --git a/frontend/src/core/editor/page/views/editorComponentView.js b/frontend/src/core/editor/page/views/editorComponentView.js
index abfc4d1e98..b33040bf6c 100644
--- a/frontend/src/core/editor/page/views/editorComponentView.js
+++ b/frontend/src/core/editor/page/views/editorComponentView.js
@@ -104,7 +104,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>');
@@ -144,15 +147,23 @@ define(function(require){
       });
     },
 
-    evaluateLayout: function() {
-
+    getSupportedLayout: function() {
       var componentType = _.find(Origin.editor.data.componentTypes.models, function(type){
-        return type.get('component') == this.model.get('_component');
+        return type.get('component') === this.model.get('_component');
       }, this);
 
-      var supportedLayout = componentType.get("properties")._supportedLayout;
-      var isFullWidthSupported = _.indexOf(supportedLayout.enum, "full-width") > -1;
-      var isHalfWidthSupported = _.indexOf(supportedLayout.enum, "half-width") > -1;
+      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,