Browse Source

HUE-8265 [frontend] Introduce a documentContextPopover binding to quickly look at any Hue document

Enrico Berti 7 years ago
parent
commit
531174813a
1 changed files with 57 additions and 0 deletions
  1. 57 0
      desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

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

@@ -2530,6 +2530,63 @@
     }
   };
 
+  /**
+   * Show the Context Popover for Documents when the bound element is clicked.
+   *
+   * Parameters:
+   *
+   * {string} uuid - the uuid of the document
+   * {string} [orientation] - 'top', 'right', 'bottom', 'left'. Default 'right'
+   * {Object} [offset] - Optional offset from the element
+   * {number} [offset.top] - Offset in pixels
+   * {number} [offset.left] - Offset in pixels
+   *
+   * Examples:
+   *
+   * data-bind="documentContextPopover: { uuid: 'bana-na12-3456-7890' }"
+   * data-bind="documentContextPopover: { uuid: 'bana-na12-3456-7890', orientation: 'bottom', offset: { top: 5 } }"
+   *
+   * @type {{init: ko.bindingHandlers.documentContextPopover.init}}
+   */
+  ko.bindingHandlers.documentContextPopover = {
+    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+      ko.bindingHandlers.click.init(element, function () {
+        return function () {
+          var options = valueAccessor();
+
+          ApiHelper.getInstance().fetchDocument({
+            uuid: options.uuid,
+            fetchContents: true,
+            silenceErrors: true
+          }).done(function (response) {
+            var $source = $(element);
+            var offset = $source.offset();
+            if (options.offset) {
+              offset.top += options.offset.top || 0;
+              offset.left += options.offset.left || 0;
+            }
+
+            huePubSub.publish('context.popover.show', {
+              data: {
+                type: 'hue',
+                definition: response.document
+              },
+              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());