Browse Source

HUE-8234 [frontend] Add a contextPopover binding

This enables an easy way of showing a context popover on click on any element. Currently it's limited to SQL entities but will later be extended for files or documents.

Example usage : ... data-bind="contextPopover: { sourceType: 'impala', path: ['default', 'customers'], orientation: 'bottom' }" ...
Johan Ahlen 7 years ago
parent
commit
9d23e42141
1 changed files with 29 additions and 0 deletions
  1. 29 0
      desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

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

@@ -2404,6 +2404,35 @@
     }
   };
 
+  ko.bindingHandlers.contextPopover = {
+    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+      var options = valueAccessor();
+      ko.bindingHandlers.click.init(element, function () {
+        return function () {
+          DataCatalog.getEntry({ sourceType: options.sourceType, path: options.path }).done(function (entry) {
+            var $source = $(element);
+            var offset = $source.offset();
+            huePubSub.publish('context.popover.show', {
+              data: {
+                type: 'catalogEntry',
+                catalogEntry: entry
+              },
+              showInAssistEnabled: true,
+              orientation: options.orientation || 'right',
+              source: {
+                element: element,
+                left: offset.left,
+                top: offset.top,
+                right: offset.left + $source.width(),
+                bottom: offset.top + $source.height()
+              }
+            });
+          });
+        }
+      }, allBindings, viewModel, bindingContext);
+    }
+  };
+
   ko.bindingHandlers.aceResizer = {
     init: function (element, valueAccessor) {
       var options = ko.unwrap(valueAccessor());