From 431285c4d48a35673af37446e5df5bb94e929e9f Mon Sep 17 00:00:00 2001
From: Sam Georges <sam@daftspunk.com>
Date: Sat, 24 May 2014 15:55:25 +1000
Subject: [PATCH] Make the component placeholder 50% opaque Disable dragging on
 attached components

---
 modules/cms/assets/css/october.components.css   |  4 ++++
 modules/cms/assets/js/october.cmspage.js        |  1 +
 modules/cms/assets/js/october.dragcomponents.js | 10 ++++++++--
 modules/cms/assets/less/october.components.less |  1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/modules/cms/assets/css/october.components.css b/modules/cms/assets/css/october.components.css
index a04c54b9c..8382aafcc 100644
--- a/modules/cms/assets/css/october.components.css
+++ b/modules/cms/assets/css/october.components.css
@@ -201,6 +201,10 @@ div.control-componentlist div.components div.layout-cell.adding > div {
   -ms-transform: translate(0, -100px) !important;
   transform: translate(0, -100px) !important;
 }
+.draggable-component-item {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
 .draggable-component-item span.alias {
   display: none;
 }
diff --git a/modules/cms/assets/js/october.cmspage.js b/modules/cms/assets/js/october.cmspage.js
index bbebea2d2..16e8d4c53 100644
--- a/modules/cms/assets/js/october.cmspage.js
+++ b/modules/cms/assets/js/october.cmspage.js
@@ -512,6 +512,7 @@
             // Set the last alias used so dragComponents can use it
             $('input[name="component_aliases[]"]', $(this)).val(alias)
 
+            $component.attr('data-component-attached', true)
             $componentContainer.addClass($iconInput.val())
             $iconInput.remove()
             $componentContainer.attr('data-inspectable', '')
diff --git a/modules/cms/assets/js/october.dragcomponents.js b/modules/cms/assets/js/october.dragcomponents.js
index 630af0837..59112cd73 100644
--- a/modules/cms/assets/js/october.dragcomponents.js
+++ b/modules/cms/assets/js/october.dragcomponents.js
@@ -33,11 +33,15 @@
             editorPos
 
         $el.mousedown(function(event){
+            if ($el.data('component-attached')) return
+
             startDrag(event)
             return false
         })
 
         $el.on('touchstart', function(event){
+            if ($el.data('component-attached')) return
+
             var touchEvent = event.originalEvent;
             if (touchEvent.touches.length == 1) {
                 startDrag(touchEvent.touches[0])
@@ -171,8 +175,10 @@
                 $editor.insert("{% component '" + alias + "' %}")
             }
 
-            $editor.removeAllListeners('mousemove')
-            $editor.blur()
+            if ($editor) {
+                $editor.removeAllListeners('mousemove')
+                $editor.blur()
+            }
         }
 
         function collision($div1, $div2) {
diff --git a/modules/cms/assets/less/october.components.less b/modules/cms/assets/less/october.components.less
index 2e95c26ff..3f911ddc4 100644
--- a/modules/cms/assets/less/october.components.less
+++ b/modules/cms/assets/less/october.components.less
@@ -213,6 +213,7 @@ div.control-componentlist {
 }
 
 .draggable-component-item {
+    .opacity(.5);
     span.alias { display: none; }
     a.remove { display: none; }
 }