Merge pull request #1411 from MITx/feature/dhm/dnd

Attempt to patch the dnd hesitation fixes onto master

cms/static/js/views/overview.js

@@ -8,7 +8,9 @@ $(document).ready(function() {
         handle: '.drag-handle',
         zIndex: 999,  
         start: initiateHesitate,
-        drag: checkHoverState,
+        // left 2nd arg in as inert selector b/c i was uncertain whether we'd try to get the shove up/down
+        // to work in the future
+        drag: generateCheckHoverState('.collapsed', ''), 
         stop: removeHesitate,
         revert: "invalid"
     });
@@ -19,7 +21,7 @@ $(document).ready(function() {
         handle: '.section-item .drag-handle',
         zIndex: 999,  
         start: initiateHesitate,
-        drag: checkHoverState,
+        drag: generateCheckHoverState('.courseware-section.collapsed', ''),
         stop: removeHesitate,
         revert: "invalid"
     });
@@ -59,48 +61,50 @@ $(document).ready(function() {
 
 });
 
-
 CMS.HesitateEvent.toggleXpandHesitation = null;
 function initiateHesitate(event, ui) {
         CMS.HesitateEvent.toggleXpandHesitation = new CMS.HesitateEvent(expandSection, 'dragLeave', true);
         $('.collapsed').on('dragEnter', CMS.HesitateEvent.toggleXpandHesitation, CMS.HesitateEvent.toggleXpandHesitation.trigger);
-        $('.collapsed').each(function() {
+        $('.collapsed, .unit, .id-holder').each(function() {
                 this.proportions = {width : this.offsetWidth, height : this.offsetHeight };
                 // reset b/c these were holding values from aborts
                 this.isover = false;
         });
 }
-function checkHoverState(event, ui) {
-        // copied from jquery.ui.droppable.js $.ui.ddmanager.drag & other ui.intersect
-        var draggable = $(this).data("ui-draggable"),
-                x1 = (draggable.positionAbs || draggable.position.absolute).left + (draggable.helperProportions.width / 2), 
-                y1 = (draggable.positionAbs || draggable.position.absolute).top + (draggable.helperProportions.height / 2);
-        $('.collapsed').each(function() {
+
+function computeIntersection(droppable, uiHelper, y) {
+    /*
+     * Test whether y falls within the bounds of the droppable on the Y axis
+     */
+    // NOTE: this only judges y axis intersection b/c that's all we're doing right now
     //  don't expand the thing being carried
-                if (ui.helper.is(this)) {
-                        return;
+    if (uiHelper.is(droppable)) {
+        return null;
     }
 
-                $.extend(this, {offset : $(this).offset()});
+    $.extend(droppable, {offset : $(droppable).offset()});
 
-                var droppable = this,
-                        l = droppable.offset.left, 
-                        r = l + droppable.proportions.width,
-                        t = droppable.offset.top, 
+    var t = droppable.offset.top, 
         b = t + droppable.proportions.height;
 
-                if (l === r) {
+    if (t === b) {
         // probably wrong values b/c invisible at the time of caching
         droppable.proportions = { width : droppable.offsetWidth, height : droppable.offsetHeight };
-                        r = l + droppable.proportions.width;
         b = t + droppable.proportions.height;
     }
     //  equivalent to the intersects test
-                var intersects = (l < x1  && // Right Half
-                                        x1  < r && // Left Half
-                                        t < y1 && // Bottom Half
-                                        y1  < b ), // Top Half
+    return (t < y && // Bottom Half
+                y  < b ); // Top Half
+}
 
+// NOTE: selectorsToShove is not currently being used but I left this code as it did work but not well
+function generateCheckHoverState(selectorsToOpen, selectorsToShove) {
+    return function(event, ui) {
+        // copied from jquery.ui.droppable.js $.ui.ddmanager.drag & other ui.intersect
+        var draggable = $(this).data("ui-draggable"),
+            centerY = (draggable.positionAbs || draggable.position.absolute).top + (draggable.helperProportions.height / 2);
+        $(selectorsToOpen).each(function() {
+            var intersects = computeIntersection(this, ui.helper, centerY),
                 c = !intersects && this.isover ? "isout" : (intersects && !this.isover ? "isover" : null);
 
             if(!c) {
@@ -111,9 +115,43 @@ function checkHoverState(event, ui) {
             this[c === "isout" ? "isover" : "isout"] = false;
             $(this).trigger(c === "isover" ? "dragEnter" : "dragLeave");
         });
+        
+        $(selectorsToShove).each(function() {
+            var intersectsBottom = computeIntersection(this, ui.helper, (draggable.positionAbs || draggable.position.absolute).top);
+            
+            if ($(this).hasClass('ui-dragging-pushup')) {
+                if (!intersectsBottom) {
+                     console.log('not up', $(this).data('id'));
+                     $(this).removeClass('ui-dragging-pushup');
+                 }
+            }
+            else if (intersectsBottom) {
+                console.log('up', $(this).data('id'));
+                $(this).addClass('ui-dragging-pushup');
+            }
+            
+            var intersectsTop = computeIntersection(this, ui.helper, 
+                    (draggable.positionAbs || draggable.position.absolute).top + draggable.helperProportions.height);
+            
+            if ($(this).hasClass('ui-dragging-pushdown')) {
+                if (!intersectsTop) {
+                    console.log('not down', $(this).data('id'));
+                    $(this).removeClass('ui-dragging-pushdown');
+                }
+            }
+            else if (intersectsTop) {
+                console.log('down', $(this).data('id'));
+                $(this).addClass('ui-dragging-pushdown');
+            }
+            
+        });
+    }
 }
+
 function removeHesitate(event, ui) {
         $('.collapsed').off('dragEnter', CMS.HesitateEvent.toggleXpandHesitation.trigger);
+        $('.ui-dragging-pushdown').removeClass('ui-dragging-pushdown');
+        $('.ui-dragging-pushup').removeClass('ui-dragging-pushup');
         CMS.HesitateEvent.toggleXpandHesitation = null;
 }
 
@@ -189,3 +227,5 @@ function _handleReorder(event, ui, parentIdField, childrenSelector) {
         });
 
 }
+
+

cms/static/sass/_courseware.scss

@@ -647,17 +647,39 @@ input.courseware-unit-search-input {
 
 // sort/drag and drop
 .ui-droppable {
+    @include transition (padding 0.5s ease-in-out 0s);
     min-height: 20px;
+    padding: 0;
 
     &.dropover {
-    padding-top: 10px;
-    padding-bottom: 10px;
+        padding: 15px 0;
     }
 }
 
-ol.ui-droppable .branch:first-child .section-item {
-	border-top: none;
+// sort/drag and drop - make room
+.ui-dragging-pushdown {
+    @include transition (margin-top 0.5s ease-in-out 0s);
+    margin-top: 15px;
 }
 
+.ui-dragging-pushup {
+    @include transition (margin-bottom 0.5s ease-in-out 0s);
+    margin-bottom: 15px;
+}
+
+.ui-draggable-dragging {
+    @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
+    border: 1px solid $darkGrey;
+    opacity : 0.2;
+    &:hover {
+        opacity : 1.0;    
+        .section-item {
+            background: $yellow !important;
+        }
+    }
+}
 
+ol.ui-droppable .branch:first-child .section-item {
+    border-top: none;
+}