@inboxsdk/core 0.2.28-alpha.6 → 0.2.28

package/src/platform-implementation-js/dom-driver/gmail/widgets/gmail-tooltip-view.js

@@ -1,88 +1,137 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
-var _escape = _interopRequireDefault(require("lodash/escape"));
-var _asap = _interopRequireDefault(require("asap"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirBus = _interopRequireDefault(require("kefir-bus"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
-var _buttonView = _interopRequireDefault(require("./buttons/button-view"));
-var _basicButtonViewController = _interopRequireDefault(require("../../../widgets/buttons/basic-button-view-controller"));
+/* @flow */
+
+import sortBy from 'lodash/sortBy';
+import escape from 'lodash/escape';
+import asap from 'asap';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import ButtonView from './buttons/button-view';
+import BasicButtonViewController from '../../../widgets/buttons/basic-button-view-controller';
+
 const ARROW_HORIZONTAL_HEIGHT = 9;
 const ARROW_HORIZONTAL_WIDTH = 18;
 const ARROW_VERTICAL_HEIGHT = 18;
 const ARROW_VERTICAL_WIDTH = 9;
-class GmailTooltipView {
-  constructor() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    (0, _defineProperty2.default)(this, "_eventStream", (0, _kefirBus.default)());
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+
+type BoundingBox = [
+  {
+    x: number,
+    y: number,
+  },
+  {
+    x: number,
+    y: number,
+  }
+];
+
+type PositionType = 'left' | 'right' | 'top' | 'bottom';
+
+type BoundingBoxWrapper = {
+  type: PositionType,
+  value: BoundingBox,
+  smallestDistance?: number,
+};
+
+export default class GmailTooltipView {
+  _element: HTMLElement;
+  _eventStream: Bus<any> = kefirBus();
+  _stopper = kefirStopper();
+
+  constructor(options?: Object = {}) {
     this._setupElement(options);
   }
+
   destroy() {
     this._eventStream.end();
     this._stopper.destroy();
     this._element.remove();
   }
-  getElement() {
+
+  getElement(): HTMLElement {
     return this._element;
   }
-  getStopper() {
+
+  getStopper(): Kefir.Observable<null> {
     return this._stopper;
   }
-  getEventStream() {
+
+  getEventStream(): Kefir.Observable<Object> {
     return this._eventStream;
   }
-  anchor(anchorElement, placementOptions) {
+
+  anchor(anchorElement: HTMLElement, placementOptions: Object) {
     if (!anchorElement) {
       return;
     }
+
     if (!this._element) {
       return;
     }
+
     var targetBoundingBox = anchorElement.getBoundingClientRect();
     var tipBoundingBox = this._element.getBoundingClientRect();
+
     var theBoundingBoxWrapperToUse;
     if (placementOptions && placementOptions.position) {
       switch (placementOptions.position) {
         case 'top':
           theBoundingBoxWrapperToUse = {
             type: 'top',
-            value: this._getTopPositionBoundingBox(targetBoundingBox, tipBoundingBox)
+            value: this._getTopPositionBoundingBox(
+              targetBoundingBox,
+              tipBoundingBox
+            ),
           };
           break;
         case 'bottom':
           theBoundingBoxWrapperToUse = {
             type: 'bottom',
-            value: this._getBottomPositionBoundingBox(targetBoundingBox, tipBoundingBox)
+            value: this._getBottomPositionBoundingBox(
+              targetBoundingBox,
+              tipBoundingBox
+            ),
           };
           break;
       }
     }
-    if (!theBoundingBoxWrapperToUse) theBoundingBoxWrapperToUse = this._getAutomaticPlacementBoundingBox(targetBoundingBox, tipBoundingBox);
-    var containedBoundingBox = this._containBoundingBox(theBoundingBoxWrapperToUse.value, placementOptions && placementOptions.offset);
+
+    if (!theBoundingBoxWrapperToUse)
+      theBoundingBoxWrapperToUse = this._getAutomaticPlacementBoundingBox(
+        targetBoundingBox,
+        tipBoundingBox
+      );
+
+    var containedBoundingBox = this._containBoundingBox(
+      theBoundingBoxWrapperToUse.value,
+      placementOptions && placementOptions.offset
+    );
     this._setPositionAtBoundingBox(containedBoundingBox);
-    this._setArrowPosition(theBoundingBoxWrapperToUse.type, containedBoundingBox, targetBoundingBox);
+    this._setArrowPosition(
+      theBoundingBoxWrapperToUse.type,
+      containedBoundingBox,
+      targetBoundingBox
+    );
   }
-  getContainerElement() {
+
+  getContainerElement(): HTMLElement {
     return this._element;
   }
-  getContentElement() {
-    return (0, _querySelectorOrFail.default)(this._element, '.aRM');
+
+  getContentElement(): HTMLElement {
+    return querySelector(this._element, '.aRM');
   }
+
   close() {
     this.destroy();
   }
-  _setupElement(options) {
+
+  _setupElement(options: Object) {
     this._element = document.createElement('div');
     this._element.setAttribute('class', 'inboxsdk__tooltip');
+
     if (options.el) {
       let html = `<div class="T-P aRL">
 						<div class="T-P-Jz-UR">
@@ -95,37 +144,70 @@ class GmailTooltipView {
 							<div class="T-P-atC"></div>
 						</div>
 					</div>`;
+
       this._element.innerHTML = html;
+
       this._element.classList.add('inboxdk__tooltip_content');
-      (0, _querySelectorOrFail.default)(this._element, '.aRM').appendChild(options.el);
+      querySelector(this._element, '.aRM').appendChild(options.el);
     } else {
-      let html = ['<div class="T-P aRL">', '<div class="T-P-Jz-UR">', '<div class="aRM" tabindex="0">', '<div class="aVn inboxsdk__tooltip_image">',
-      //image goes here
-      '</div>', '<div class="aRR">', (0, _escape.default)(options.title || ''), '</div>', '<div class="aRQ">', (0, _escape.default)(options.subtitle || ''), '</div>', '<div class="inboxsdk__tooltip_button">',
-      //button goes here
-      '</div>', '</div>', '</div>', '<div class="T-P-aut-UR T-P-aut inboxsdk__tooltip_close" aria-label="Close" role="button"></div>', '<div class="T-P-hFsbo-UR T-P-hFsbo T-P-atB inboxsdk__tooltip_arrow">', '<div class="T-P-atD"></div>', '<div class="T-P-atC"></div>', '</div>', '</div>'].join('');
+      let html = [
+        '<div class="T-P aRL">',
+        '<div class="T-P-Jz-UR">',
+        '<div class="aRM" tabindex="0">',
+        '<div class="aVn inboxsdk__tooltip_image">',
+        //image goes here
+        '</div>',
+        '<div class="aRR">',
+        escape(options.title || ''),
+        '</div>',
+        '<div class="aRQ">',
+        escape(options.subtitle || ''),
+        '</div>',
+        '<div class="inboxsdk__tooltip_button">',
+        //button goes here
+        '</div>',
+        '</div>',
+        '</div>',
+        '<div class="T-P-aut-UR T-P-aut inboxsdk__tooltip_close" aria-label="Close" role="button"></div>',
+        '<div class="T-P-hFsbo-UR T-P-hFsbo T-P-atB inboxsdk__tooltip_arrow">',
+        '<div class="T-P-atD"></div>',
+        '<div class="T-P-atC"></div>',
+        '</div>',
+        '</div>',
+      ].join('');
+
       this._element.innerHTML = html;
-      let closeElement = this._element.querySelector('.inboxsdk__tooltip_close');
+
+      let closeElement = this._element.querySelector(
+        '.inboxsdk__tooltip_close'
+      );
       if (closeElement) {
-        closeElement.addEventListener('click', e => {
+        closeElement.addEventListener('click', (e: MouseEvent) => {
           this.destroy();
         });
       }
+
       if (options.imageUrl) {
         const image = document.createElement('img');
         image.src = options.imageUrl;
-        (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__tooltip_image').appendChild(image);
-        image.addEventListener('load', domEvent => {
-          (0, _asap.default)(() => {
+        querySelector(this._element, '.inboxsdk__tooltip_image').appendChild(
+          image
+        );
+
+        image.addEventListener('load', (domEvent: any) => {
+          asap(() => {
             this._eventStream.emit({
-              eventName: 'imageLoaded'
+              eventName: 'imageLoaded',
             });
           });
         });
       }
+
       if (options.button) {
         const buttonOptions = Object.assign({}, options.button);
+
         buttonOptions.buttonColor = 'blue';
+
         const oldOnClick = buttonOptions.onClick;
         buttonOptions.onClick = () => {
           this.destroy();
@@ -133,149 +215,259 @@ class GmailTooltipView {
             oldOnClick();
           }
         };
-        buttonOptions.buttonView = new _buttonView.default(buttonOptions);
-        const buttonViewController = new _basicButtonViewController.default(buttonOptions);
-        (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__tooltip_button').appendChild(buttonOptions.buttonView.getElement());
+
+        buttonOptions.buttonView = new ButtonView(buttonOptions);
+        const buttonViewController = new BasicButtonViewController(
+          buttonOptions
+        );
+        querySelector(this._element, '.inboxsdk__tooltip_button').appendChild(
+          buttonOptions.buttonView.getElement()
+        );
       }
     }
   }
-  _getAutomaticPlacementBoundingBox(targetBoundingBox, tipBoundingBox) {
-    var boundingBoxWrappers = [{
-      type: 'top',
-      value: this._getTopPositionBoundingBox(targetBoundingBox, tipBoundingBox)
-    }, {
-      type: 'left',
-      value: this._getLeftPositionBoundingBox(targetBoundingBox, tipBoundingBox)
-    }, {
-      type: 'right',
-      value: this._getRightPositionBoundingBox(targetBoundingBox, tipBoundingBox)
-    }, {
-      type: 'bottom',
-      value: this._getBottomPositionBoundingBox(targetBoundingBox, tipBoundingBox)
-    }];
-    var bestBoundingBoxWrapper = this._figureOutBestBoundingBox(boundingBoxWrappers);
+
+  _getAutomaticPlacementBoundingBox(
+    targetBoundingBox: ClientRect,
+    tipBoundingBox: ClientRect
+  ): BoundingBoxWrapper {
+    var boundingBoxWrappers = [
+      {
+        type: 'top',
+        value: this._getTopPositionBoundingBox(
+          targetBoundingBox,
+          tipBoundingBox
+        ),
+      },
+      {
+        type: 'left',
+        value: this._getLeftPositionBoundingBox(
+          targetBoundingBox,
+          tipBoundingBox
+        ),
+      },
+      {
+        type: 'right',
+        value: this._getRightPositionBoundingBox(
+          targetBoundingBox,
+          tipBoundingBox
+        ),
+      },
+      {
+        type: 'bottom',
+        value: this._getBottomPositionBoundingBox(
+          targetBoundingBox,
+          tipBoundingBox
+        ),
+      },
+    ];
+
+    var bestBoundingBoxWrapper =
+      this._figureOutBestBoundingBox(boundingBoxWrappers);
     return bestBoundingBoxWrapper;
   }
-  _getTopPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
-    var top = targetBoundingBox.top - tipBoundingBox.height - ARROW_HORIZONTAL_HEIGHT;
-    var left = targetBoundingBox.left + targetBoundingBox.width / 2 - tipBoundingBox.width / 2;
-    return [{
-      x: left,
-      y: top
-    }, {
-      x: left + tipBoundingBox.width,
-      y: top + tipBoundingBox.height
-    }];
+
+  _getTopPositionBoundingBox(
+    targetBoundingBox: ClientRect,
+    tipBoundingBox: ClientRect
+  ): BoundingBox {
+    var top =
+      targetBoundingBox.top - tipBoundingBox.height - ARROW_HORIZONTAL_HEIGHT;
+    var left =
+      targetBoundingBox.left +
+      targetBoundingBox.width / 2 -
+      tipBoundingBox.width / 2;
+
+    return [
+      {
+        x: left,
+        y: top,
+      },
+      {
+        x: left + tipBoundingBox.width,
+        y: top + tipBoundingBox.height,
+      },
+    ];
   }
-  _getRightPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
+
+  _getRightPositionBoundingBox(
+    targetBoundingBox: ClientRect,
+    tipBoundingBox: ClientRect
+  ): BoundingBox {
     var left = targetBoundingBox.right + ARROW_VERTICAL_WIDTH;
-    var top = targetBoundingBox.top + targetBoundingBox.height / 2 - tipBoundingBox.height / 2;
-    return [{
-      x: left,
-      y: top
-    }, {
-      x: left + tipBoundingBox.width,
-      y: top + tipBoundingBox.height
-    }];
+    var top =
+      targetBoundingBox.top +
+      targetBoundingBox.height / 2 -
+      tipBoundingBox.height / 2;
+
+    return [
+      {
+        x: left,
+        y: top,
+      },
+      {
+        x: left + tipBoundingBox.width,
+        y: top + tipBoundingBox.height,
+      },
+    ];
   }
-  _getBottomPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
+
+  _getBottomPositionBoundingBox(
+    targetBoundingBox: ClientRect,
+    tipBoundingBox: ClientRect
+  ): BoundingBox {
     var top = targetBoundingBox.bottom + ARROW_HORIZONTAL_HEIGHT;
-    var left = targetBoundingBox.left + targetBoundingBox.width / 2 - tipBoundingBox.width / 2;
-    return [{
-      x: left,
-      y: top
-    }, {
-      x: left + tipBoundingBox.width,
-      y: top + tipBoundingBox.height
-    }];
+    var left =
+      targetBoundingBox.left +
+      targetBoundingBox.width / 2 -
+      tipBoundingBox.width / 2;
+
+    return [
+      {
+        x: left,
+        y: top,
+      },
+      {
+        x: left + tipBoundingBox.width,
+        y: top + tipBoundingBox.height,
+      },
+    ];
   }
-  _getLeftPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
-    var left = targetBoundingBox.left - ARROW_VERTICAL_WIDTH - tipBoundingBox.width;
-    var top = targetBoundingBox.top + targetBoundingBox.height / 2 - tipBoundingBox.height / 2;
-    return [{
-      x: left,
-      y: top
-    }, {
-      x: left + tipBoundingBox.width,
-      y: top + tipBoundingBox.height
-    }];
+
+  _getLeftPositionBoundingBox(
+    targetBoundingBox: ClientRect,
+    tipBoundingBox: ClientRect
+  ): BoundingBox {
+    var left =
+      targetBoundingBox.left - ARROW_VERTICAL_WIDTH - tipBoundingBox.width;
+    var top =
+      targetBoundingBox.top +
+      targetBoundingBox.height / 2 -
+      tipBoundingBox.height / 2;
+
+    return [
+      {
+        x: left,
+        y: top,
+      },
+      {
+        x: left + tipBoundingBox.width,
+        y: top + tipBoundingBox.height,
+      },
+    ];
   }
-  _figureOutBestBoundingBox(boundingBoxWrappers) {
+
+  _figureOutBestBoundingBox(
+    boundingBoxWrappers: Array<BoundingBoxWrapper>
+  ): BoundingBoxWrapper {
     for (var ii = 0; ii < boundingBoxWrappers.length; ii++) {
-      boundingBoxWrappers[ii].smallestDistance = this._getSmallestDistance(boundingBoxWrappers[ii]);
+      boundingBoxWrappers[ii].smallestDistance = this._getSmallestDistance(
+        boundingBoxWrappers[ii]
+      );
     }
-    return (0, _sortBy.default)(boundingBoxWrappers, function (boundingBoxWrapper) {
+
+    return sortBy(boundingBoxWrappers, function (boundingBoxWrapper) {
       return boundingBoxWrapper.smallestDistance;
     }).reverse()[0];
   }
-  _getSmallestDistance(boundingBoxWrapper) {
-    var distances = [boundingBoxWrapper.value[0].y,
-    //top
-    boundingBoxWrapper.value[0].x,
-    //left
-    document.body.clientWidth - boundingBoxWrapper.value[1].x,
-    //right
-    document.body.clientHeight - boundingBoxWrapper.value[1].y //bottom
+
+  _getSmallestDistance(boundingBoxWrapper: BoundingBoxWrapper): number {
+    var distances = [
+      boundingBoxWrapper.value[0].y, //top
+      boundingBoxWrapper.value[0].x, //left
+      ((document.body: any): HTMLElement).clientWidth -
+        boundingBoxWrapper.value[1].x, //right
+      ((document.body: any): HTMLElement).clientHeight -
+        boundingBoxWrapper.value[1].y, //bottom
     ];
 
-    return (0, _sortBy.default)(distances, function (distance) {
+    return sortBy(distances, function (distance) {
       return distance;
     })[0];
   }
-  _containBoundingBox(boundingBox, offset) {
+
+  _containBoundingBox(
+    boundingBox: BoundingBox,
+    offset?: { left?: number, top?: number }
+  ): BoundingBox {
     var boundingBoxHeight = boundingBox[1].y - boundingBox[0].y;
     var boundingBoxWidth = boundingBox[1].x - boundingBox[0].x;
+
     if (boundingBox[0].y < -1) {
       boundingBox[0].y = 0;
       boundingBox[1].y = boundingBox[0].y + boundingBoxHeight;
-    } else if (boundingBox[1].y > document.body.clientHeight) {
-      boundingBox[0].y = document.body.clientHeight - boundingBoxHeight;
+    } else if (
+      boundingBox[1].y > ((document.body: any): HTMLElement).clientHeight
+    ) {
+      boundingBox[0].y =
+        ((document.body: any): HTMLElement).clientHeight - boundingBoxHeight;
       boundingBox[1].y = boundingBox[0].y + boundingBoxHeight;
     }
+
     if (boundingBox[0].x < -1) {
       boundingBox[0].x = 0;
       boundingBox[1].x = boundingBox[0].x + boundingBoxWidth;
-    } else if (boundingBox[1].x > document.body.clientWidth) {
-      boundingBox[0].x = document.body.clientWidth - boundingBoxWidth - 20;
+    } else if (
+      boundingBox[1].x > ((document.body: any): HTMLElement).clientWidth
+    ) {
+      boundingBox[0].x =
+        ((document.body: any): HTMLElement).clientWidth - boundingBoxWidth - 20;
       boundingBox[1].x = boundingBox[0].x + boundingBoxWidth;
     }
+
     if (offset) {
       if (offset.left) {
         boundingBox[0].x += offset.left;
         boundingBox[1].x += offset.left;
       }
+
       if (offset.top) {
         boundingBox[0].y += offset.top;
         boundingBox[1].y += offset.top;
       }
     }
+
     return boundingBox;
   }
-  _setPositionAtBoundingBox(boundingBox) {
+
+  _setPositionAtBoundingBox(boundingBox: BoundingBox) {
     this._element.style.left = boundingBox[0].x + 'px';
     this._element.style.top = boundingBox[0].y + 'px';
   }
-  _setArrowPosition(type, containedBoundingBox, targetBoundingBox) {
+
+  _setArrowPosition(
+    type: PositionType,
+    containedBoundingBox: BoundingBox,
+    targetBoundingBox: ClientRect
+  ) {
     var position = {};
+
     switch (type) {
       case 'top':
         position.top = containedBoundingBox[1].y;
         position.left = targetBoundingBox.left + targetBoundingBox.width / 2;
         break;
       case 'left':
-        position.top = (containedBoundingBox[0].y + containedBoundingBox[1].y) / 2 - ARROW_VERTICAL_HEIGHT / 2;
+        position.top =
+          (containedBoundingBox[0].y + containedBoundingBox[1].y) / 2 -
+          ARROW_VERTICAL_HEIGHT / 2;
         position.left = containedBoundingBox[1].x;
         break;
       case 'right':
-        position.top = (containedBoundingBox[0].y + containedBoundingBox[1].y) / 2 - ARROW_VERTICAL_HEIGHT / 2;
-        position.left = containedBoundingBox[0].x - ARROW_HORIZONTAL_WIDTH / 2 + 1;
+        position.top =
+          (containedBoundingBox[0].y + containedBoundingBox[1].y) / 2 -
+          ARROW_VERTICAL_HEIGHT / 2;
+        position.left =
+          containedBoundingBox[0].x - ARROW_HORIZONTAL_WIDTH / 2 + 1;
         break;
       case 'bottom':
         position.top = containedBoundingBox[0].y - ARROW_HORIZONTAL_HEIGHT + 1;
-        position.left = (containedBoundingBox[0].x + containedBoundingBox[1].x) / 2;
+        position.left =
+          (containedBoundingBox[0].x + containedBoundingBox[1].x) / 2;
         break;
     }
-    const arrow = (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__tooltip_arrow');
+
+    const arrow = querySelector(this._element, '.inboxsdk__tooltip_arrow');
     arrow.style.left = position.left + 'px';
     arrow.style.top = position.top + 'px';
   }
@@ -310,4 +502,3 @@ class GmailTooltipView {
 
 
 */
-exports.default = GmailTooltipView;