Ability to drag&select in the drive

www/drive/file.css

@@ -89,6 +89,16 @@ li {
 .selected .fa-plus-square-o {
   color: #000;
 }
+.selectedTmp {
+  border: 1px dotted #bbb;
+  background: #AAA;
+  color: #ddd;
+  margin: -1px;
+}
+.selectedTmp .fa-minus-square-o,
+.selectedTmp .fa-plus-square-o {
+  color: #000;
+}
 span.fa-folder,
 span.fa-folder-open {
   color: #FEDE8B;
@@ -215,6 +225,12 @@ span.fa-folder-open {
   flex: 1;
   display: flex;
   flex-flow: column;
+  position: relative;
+}
+#content .selectBox {
+  display: none;
+  background-color: rgba(100, 100, 100, 0.7);
+  position: absolute;
 }
 #content.readonly {
   background: #e6e6e6;
@@ -242,7 +258,7 @@ span.fa-folder-open {
 #content li:not(.header) *:not(input) {
   /*pointer-events: none;*/
 }
-#content li:not(.header):hover:not(.selected) {
+#content li:not(.header):hover:not(.selected, .selectedTmp) {
   background-color: #eee;
 }
 #content li:not(.header):hover .name {
@@ -304,8 +320,8 @@ span.fa-folder-open {
   padding-bottom: 5px;
   max-height: 145px;
 }
-#content div.grid li:not(.selected) {
-  border: transparent 1px;
+#content div.grid li:not(.selected):not(.selectedTmp) {
+  border: 1px solid transparent;
 }
 #content div.grid li .name {
   width: 100%;
@@ -326,6 +342,9 @@ span.fa-folder-open {
 #content div.grid .listElement {
   display: none;
 }
+#content .list {
+  padding-left: 20px;
+}
 #content .list ul {
   display: table;
   width: 100%;

www/drive/file.less

@@ -121,6 +121,16 @@ li {
     }
 }
 
+.selectedTmp {
+    border: 1px dotted #bbb;
+    background: #AAA;
+    color: #ddd;
+    margin: -1px;
+    .fa-minus-square-o, .fa-plus-square-o {
+        color: @tree-fg;
+    }
+}
+
 span {
     &.fa-folder, &.fa-folder-open {
         color: #FEDE8B;
@@ -260,6 +270,12 @@ span {
     flex: 1;
     display: flex;
     flex-flow: column;
+    position: relative;
+    .selectBox {
+        display: none;
+        background-color: rgba(100, 100, 100, 0.7);
+        position: absolute;
+    }
     &.readonly {
         background: @content-bg-ro;
     }
@@ -287,7 +303,7 @@ span {
                 /*pointer-events: none;*/
             }
             &:hover {
-                &:not(.selected) {
+                &:not(.selected, .selectedTmp) {
                     background-color: @drive-hover;
                 }
                 .name {
@@ -357,8 +373,8 @@ span {
             padding-bottom: 5px;
             max-height: 145px;
 
-            &:not(.selected) {
-                border: transparent 1px;
+            &:not(.selected):not(.selectedTmp) {
+                border: 1px solid transparent;
             }
             .name {
                 width: 100%;
@@ -384,6 +400,7 @@ span {
 
     .list {
         // Make it act as a table!
+        padding-left: 20px;
         ul {
             display: table;
             width: 100%;

www/drive/main.js

@@ -199,6 +199,7 @@ define([
         var $trashTreeContextMenu = $iframe.find("#trashTreeContextMenu");
         var $trashContextMenu = $iframe.find("#trashContextMenu");
 
+
         // TOOLBAR
 
         /* add a "change username" button */
@@ -252,12 +253,113 @@ define([
             return $el.is('.element-row') ? $el : $el.closest('.element-row');
         };
 
+
+        // Selection
         var removeSelected =  function () {
             $iframe.find('.selected').removeClass("selected");
             var $container = $driveToolbar.find('#contextButtonsContainer');
             if (!$container.length) { return; }
             $container.html('');
         };
+
+        var sel = {};
+        sel.refresh = 200;
+        sel.$selectBox = $('<div>', {'class': 'selectBox'}).appendTo($content);
+        var checkSelected = function () {
+            if (!sel.down) { return; }
+            var pos = sel.pos;
+            var l = $content[0].querySelectorAll('.element:not(.selected):not(.header)');
+            var p, el;
+            for (var i = 0; i < l.length; i++) {
+                el = l[i];
+                p = $(el).position();
+                p.top += 10 + $content.scrollTop();
+                p.left += 10;
+                p.bottom = p.top + $(el).outerHeight();
+                p.right = p.left + $(el).outerWidth();
+                if (p.right < pos.left || p.left > pos.right
+                    || p.top > pos.bottom || p.bottom < pos.top) {
+                    $(el).removeClass('selectedTmp');
+                } else {
+                    $(el).addClass('selectedTmp');
+                }
+            }
+        };
+        $content.on('mousedown', function (e) {
+            console.log('down');
+            sel.down = true;
+            if (!e.ctrlKey) { removeSelected(); }
+            var rect = e.currentTarget.getBoundingClientRect();
+            sel.startX = e.clientX - rect.left,
+            sel.startY = e.clientY - rect.top + $content.scrollTop();
+            sel.$selectBox.show().css({
+                left: sel.startX + 'px',
+                top: sel.startY + 'px',
+                width: '0px',
+                height: '0px'
+            });
+            if (sel.move) { console.log('ret'); return; }
+            sel.move = function (ev) {
+                var rectMove = ev.currentTarget.getBoundingClientRect(),
+                    offX = ev.clientX - rectMove.left,
+                    offY = ev.clientY - rectMove.top + $content.scrollTop();
+
+
+                var left = sel.startX,
+                    top = sel.startY;
+                var width = offX - sel.startX;
+                if (width < 0) {
+                    left = Math.max(0, offX);
+                    var diffX = left-offX;
+                    width = Math.abs(width) - diffX;
+                }
+                var height = offY - sel.startY;
+                if (height < 0) {
+                    top = Math.max(0, offY);
+                    var diffY = top-offY;
+                    height = Math.abs(height) - diffY;
+                }
+                sel.$selectBox.css({
+                    width: width + 'px',
+                    left: left + 'px',
+                    height: height + 'px',
+                    top: top + 'px'
+                });
+
+
+                sel.pos = {
+                    top: top,
+                    left: left,
+                    bottom: top + height,
+                    right: left + width
+                };
+                var diffT = sel.update ? +new Date() - sel.update : sel.refresh;
+                if (diffT < sel.refresh) {
+                    if (!sel.to) {
+                        sel.to = window.setTimeout(function () {
+                            sel.update = +new Date();
+                            checkSelected();
+                            sel.to = undefined;
+                        }, (sel.refresh - diffT));
+                    }
+                    console.log('cancelled');
+                    return;
+                }
+                sel.update = +new Date();
+                checkSelected();
+            };
+            $content.mousemove(sel.move);
+        });
+        $content.on('mouseup', function (e) {
+            console.log(sel.pos);
+            sel.down = false;
+            sel.$selectBox.hide();
+            $content.off('mousemove', sel.move);
+            delete sel.move;
+            $content.find('.selectedTmp').removeClass('selectedTmp').addClass('selected');
+        });
+
+
         var removeInput =  function (cancel) {
             if (!cancel && $iframe.find('.element-row > input').length === 1) {
                 var $input = $iframe.find('.element-row > input');
@@ -1501,6 +1603,7 @@ define([
             currentPath = path;
             var s = $content.scrollTop() || 0;
             $content.html("");
+            sel.$selectBox = $('<div>', {'class': 'selectBox'}).appendTo($content);
             if (!path || path.length === 0) {
                 path = [ROOT];
             }