Improve drag-select.

src/_h5ai/client/css/inc/general.less

@@ -1,9 +1,11 @@
+@col-blue-200: #90caf9;
 @col-blue-400: #42a5f5;
 @col-blue-500: #2196F3;
 @col-blue-700: #1976D2;
 @col-blue-900: #0D47A1;
 @col-green: #4caf50;
 @col-red: #f44336;
+@col-pink-a200: #ff4081;
 
 @col-light: #ffffff;
 @col-lightgray: #fafafa;
@@ -71,8 +73,8 @@
 // @max-icon-size: 24px;
 
 
-::-moz-selection { background: @col-blue-400; color: @col-text-primary-white; text-shadow: none; }
-::selection { background: @col-blue-400; color: @col-text-primary-white; text-shadow: none; }
+::-moz-selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
+::selection { background: @col-pink-a200; color: @col-text-primary-white; text-shadow: none; }
 
 .transition (@transition) {
     -webkit-transition: @transition;
@@ -181,6 +183,6 @@ body {
     height: 0;
 }
 
-// *:focus {
-//     outline: 1px solid #42a5f5;
-// }
+*:focus {
+    outline: 1px solid @col-pink-a200;
+}

src/_h5ai/client/js/inc/ext/preview.js

@@ -5,7 +5,7 @@ modulejs.define('ext/preview', ['_', '$', 'core/settings', 'core/resource', 'cor
         }, allsettings.preview);
     var $window = $(window);
     var template =
-            '<div id="pv-overlay" class="noSelection">' +
+            '<div id="pv-overlay">' +
                 '<div id="pv-content"/>' +
                 '<div id="pv-spinner"><img src="' + resource.image('spinner') + '"/></div>' +
                 '<div id="pv-prev-area" class="hof"><img src="' + resource.image('preview-prev') + '"/></div>' +

src/_h5ai/client/js/inc/ext/select.js

@@ -8,6 +8,7 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
     var template = '<span class="selector"><img src="' + resource.image('selected') + '" alt="selected"/></span>';
     var x = 0, y = 0;
     var l = 0, t = 0, w = 0, h = 0;
+    var isDragSelect, isCtrlPressed;
     var shrink = 1/3;
     var $document = $(document);
     var $selectionRect = $('<div id="selection-rect"/>');
@@ -55,6 +56,13 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
 
     function selectionUpdate(ev) {
 
+        if (!isDragSelect && !isCtrlPressed) {
+            $('#items .item').removeClass('selected');
+            publish();
+        }
+
+        isDragSelect = true;
+
         l = Math.min(x, ev.pageX);
         t = Math.min(y, ev.pageY);
         w = Math.abs(x - ev.pageX);
@@ -78,10 +86,15 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
         });
     }
 
-    function selectionEnd(event) {
+    function selectionEnd(ev) {
 
-        event.preventDefault();
         $document.off('mousemove', selectionUpdate);
+
+        if (!isDragSelect) {
+            return;
+        }
+
+        ev.preventDefault();
         $('#items .item.selecting.selected').removeClass('selecting').removeClass('selected');
         $('#items .item.selecting').removeClass('selecting').addClass('selected');
         publish();
@@ -103,40 +116,21 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
             );
     }
 
-    function selectionStart(event) {
+    function selectionStart(ev) {
 
         // only on left button and don't block scrollbar
-        if (event.button !== 0 || event.offsetX >= $('#content').width() - 14) {
+        if (ev.button !== 0 || ev.offsetX >= $('#content').width() - 14) {
             return;
         }
 
-        x = event.pageX;
-        y = event.pageY;
-
-        $(':focus').blur();
-        if (!event.ctrlKey && !event.metaKey) {
-            $('#items .item').removeClass('selected');
-            publish();
-        }
+        isDragSelect = false;
+        isCtrlPressed = ev.ctrlKey || ev.metaKey;
+        x = ev.pageX;
+        y = ev.pageY;
 
         $document
             .on('mousemove', selectionUpdate)
             .one('mouseup', selectionEnd);
-
-        selectionUpdate(event);
-    }
-
-    function noSelection(event) {
-
-        event.stopImmediatePropagation();
-        return false;
-    }
-
-    function noSelectionUnlessCtrl(event) {
-
-        if (!event.ctrlKey && !event.metaKey) {
-            noSelection(event);
-        }
     }
 
     function initItem(item) {
@@ -144,10 +138,10 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
         if (item.$view) {
             $(template)
                 .appendTo(item.$view.find('a'))
-                .on('click', function (event) {
+                .on('click', function (ev) {
 
-                    event.stopImmediatePropagation();
-                    event.preventDefault();
+                    ev.stopImmediatePropagation();
+                    ev.preventDefault();
 
                     item.$view.toggleClass('selected');
                     publish();
@@ -195,11 +189,13 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core
         if (settings.clickndrag) {
             $selectionRect.hide().appendTo('body');
 
-            // $document
             $('#content')
-                .on('mousedown', '.noSelection', noSelection)
-                .on('mousedown', '.noSelectionUnlessCtrl,input,select,a', noSelectionUnlessCtrl)
-                .on('mousedown', selectionStart);
+                .on('mousedown', selectionStart)
+                .on('click', function (ev) {
+
+                    $('#items .item').removeClass('selected');
+                    publish();
+                });
         }
     }