Преглед изворни кода

[core] Improved handling of click and double-click on the same element

When combining click and double-click events on the same element (or element hierarchy) the double click will also trigger a click. To prevent this I've created a knockout binding that will only trigger the double click (if quick enough).

Combining click and double click events is not very good UX so this should be seen as a temporary solution until we find a better way.
Johan Ahlen пре 10 година
родитељ
комит
1d3591a

+ 40 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -37,6 +37,46 @@ ko.bindingHandlers.fadeVisible = {
   }
 };
 
+ko.bindingHandlers.multiClick = {
+  init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+    var clickHandlerFunction = valueAccessor().click;
+    var dblClickHandlerFunction = valueAccessor().dblClick;
+    if (!dblClickHandlerFunction && !clickHandlerFunction) {
+      return;
+    }
+
+    var clickedOnce = false;
+    var singleClickTimeout = -1;
+    var dblClickTimeout = -1;
+
+    var newValueAccessor = function() {
+      return function() {
+        var clickArgs = arguments;
+        if (!dblClickHandlerFunction && clickHandlerFunction) {
+          clickHandlerFunction.apply(viewModel, clickArgs);
+          return;
+        }
+        if (clickedOnce) {
+          dblClickHandlerFunction.apply(viewModel, clickArgs);
+          clickedOnce = false;
+          clearTimeout(singleClickTimeout);
+          clearTimeout(dblClickTimeout);
+        } else {
+          clickedOnce = true;
+          singleClickTimeout = window.setTimeout(function() {
+            clickHandlerFunction.apply(viewModel, clickArgs);
+            dblClickTimeout = window.setTimeout(function() {
+              clickedOnce = false;
+            }, 275);
+          }, 225);
+        }
+      }
+    };
+
+    ko.bindingHandlers.click.init(element, newValueAccessor, allBindings, viewModel, bindingContext);
+  }
+};
+
 ko.bindingHandlers.logScroller = {
   init: function (element, valueAccessor) {
     var $element = $(element);

+ 2 - 2
desktop/core/src/desktop/templates/ko_components.mako

@@ -162,8 +162,8 @@ from desktop.views import _ko
     <ul data-bind="foreach: filteredEntries, css: { 'assist-tables': definition.isDatabase }, event: { 'scroll': assistPanel.repositionActions }">
       <li data-bind="css: { 'assist-table reveals-actions-2nd': definition.isTable, 'assist-column reveals-actions-3rd': definition.isColumn }">
         <!-- ko template: { if: definition.isTable || definition.isColumn, name: 'assist-entry-actions' } --><!-- /ko -->
-        <a class="assist-column-link" data-bind="click: toggleOpen, attr: {'title': definition.title }, css: { 'assist-field-link': ! definition.isTable, 'assist-table-link': definition.isTable }" href="javascript:void(0)">
-          <span data-bind="text: definition.displayName, event: { 'dblclick': dblClick }"></span>
+        <a class="assist-column-link" data-bind="multiClick: { click: toggleOpen, dblClick: dblClick }, attr: {'title': definition.title }, css: { 'assist-field-link': ! definition.isTable, 'assist-table-link': definition.isTable }" href="javascript:void(0)">
+          <span data-bind="text: definition.displayName"></span>
         </a>
         <!-- ko template: { if: open(), name: 'assist-entries'  } --><!-- /ko -->
       </li>