@inboxsdk/core 0.2.28-alpha.4 → 0.2.28-alpha.5

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

@@ -1,137 +1,88 @@
-/* @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';
-
+"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"));
 const ARROW_HORIZONTAL_HEIGHT = 9;
 const ARROW_HORIZONTAL_WIDTH = 18;
 const ARROW_VERTICAL_HEIGHT = 18;
 const ARROW_VERTICAL_WIDTH = 9;
-
-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 = {}) {
+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)());
     this._setupElement(options);
   }
-
   destroy() {
     this._eventStream.end();
     this._stopper.destroy();
     this._element.remove();
   }
-
-  getElement(): HTMLElement {
+  getElement() {
     return this._element;
   }
-
-  getStopper(): Kefir.Observable<null> {
+  getStopper() {
     return this._stopper;
   }
-
-  getEventStream(): Kefir.Observable<Object> {
+  getEventStream() {
     return this._eventStream;
   }
-
-  anchor(anchorElement: HTMLElement, placementOptions: Object) {
+  anchor(anchorElement, placementOptions) {
     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(): HTMLElement {
+  getContainerElement() {
     return this._element;
   }
-
-  getContentElement(): HTMLElement {
-    return querySelector(this._element, '.aRM');
+  getContentElement() {
+    return (0, _querySelectorOrFail.default)(this._element, '.aRM');
   }
-
   close() {
     this.destroy();
   }
-
-  _setupElement(options: Object) {
+  _setupElement(options) {
     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">
@@ -144,70 +95,37 @@ export default class GmailTooltipView {
 							<div class="T-P-atC"></div>
 						</div>
 					</div>`;
-
       this._element.innerHTML = html;
-
       this._element.classList.add('inboxdk__tooltip_content');
-      querySelector(this._element, '.aRM').appendChild(options.el);
+      (0, _querySelectorOrFail.default)(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">',
-        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('');
-
+      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('');
       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: MouseEvent) => {
+        closeElement.addEventListener('click', e => {
           this.destroy();
         });
       }
-
       if (options.imageUrl) {
         const image = document.createElement('img');
         image.src = options.imageUrl;
-        querySelector(this._element, '.inboxsdk__tooltip_image').appendChild(
-          image
-        );
-
-        image.addEventListener('load', (domEvent: any) => {
-          asap(() => {
+        (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__tooltip_image').appendChild(image);
+        image.addEventListener('load', domEvent => {
+          (0, _asap.default)(() => {
             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();
@@ -215,259 +133,149 @@ export default class GmailTooltipView {
             oldOnClick();
           }
         };
-
-        buttonOptions.buttonView = new ButtonView(buttonOptions);
-        const buttonViewController = new BasicButtonViewController(
-          buttonOptions
-        );
-        querySelector(this._element, '.inboxsdk__tooltip_button').appendChild(
-          buttonOptions.buttonView.getElement()
-        );
+        buttonOptions.buttonView = new _buttonView.default(buttonOptions);
+        const buttonViewController = new _basicButtonViewController.default(buttonOptions);
+        (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__tooltip_button').appendChild(buttonOptions.buttonView.getElement());
       }
     }
   }
-
-  _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);
+  _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);
     return bestBoundingBoxWrapper;
   }
-
-  _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,
-      },
-    ];
+  _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
+    }];
   }
-
-  _getRightPositionBoundingBox(
-    targetBoundingBox: ClientRect,
-    tipBoundingBox: ClientRect
-  ): BoundingBox {
+  _getRightPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
     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: ClientRect,
-    tipBoundingBox: ClientRect
-  ): BoundingBox {
+  _getBottomPositionBoundingBox(targetBoundingBox, tipBoundingBox) {
     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: 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,
-      },
-    ];
+  _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
+    }];
   }
-
-  _figureOutBestBoundingBox(
-    boundingBoxWrappers: Array<BoundingBoxWrapper>
-  ): BoundingBoxWrapper {
+  _figureOutBestBoundingBox(boundingBoxWrappers) {
     for (var ii = 0; ii < boundingBoxWrappers.length; ii++) {
-      boundingBoxWrappers[ii].smallestDistance = this._getSmallestDistance(
-        boundingBoxWrappers[ii]
-      );
+      boundingBoxWrappers[ii].smallestDistance = this._getSmallestDistance(boundingBoxWrappers[ii]);
     }
-
-    return sortBy(boundingBoxWrappers, function (boundingBoxWrapper) {
+    return (0, _sortBy.default)(boundingBoxWrappers, function (boundingBoxWrapper) {
       return boundingBoxWrapper.smallestDistance;
     }).reverse()[0];
   }
-
-  _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
+  _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
     ];
 
-    return sortBy(distances, function (distance) {
+    return (0, _sortBy.default)(distances, function (distance) {
       return distance;
     })[0];
   }
-
-  _containBoundingBox(
-    boundingBox: BoundingBox,
-    offset?: { left?: number, top?: number }
-  ): BoundingBox {
+  _containBoundingBox(boundingBox, offset) {
     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: any): HTMLElement).clientHeight
-    ) {
-      boundingBox[0].y =
-        ((document.body: any): HTMLElement).clientHeight - boundingBoxHeight;
+    } else if (boundingBox[1].y > document.body.clientHeight) {
+      boundingBox[0].y = document.body.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: any): HTMLElement).clientWidth
-    ) {
-      boundingBox[0].x =
-        ((document.body: any): HTMLElement).clientWidth - boundingBoxWidth - 20;
+    } else if (boundingBox[1].x > document.body.clientWidth) {
+      boundingBox[0].x = document.body.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: BoundingBox) {
+  _setPositionAtBoundingBox(boundingBox) {
     this._element.style.left = boundingBox[0].x + 'px';
     this._element.style.top = boundingBox[0].y + 'px';
   }
-
-  _setArrowPosition(
-    type: PositionType,
-    containedBoundingBox: BoundingBox,
-    targetBoundingBox: ClientRect
-  ) {
+  _setArrowPosition(type, containedBoundingBox, targetBoundingBox) {
     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 = querySelector(this._element, '.inboxsdk__tooltip_arrow');
+    const arrow = (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__tooltip_arrow');
     arrow.style.left = position.left + 'px';
     arrow.style.top = position.top + 'px';
   }
@@ -502,3 +310,4 @@ export default class GmailTooltipView {
 
 
 */
+exports.default = GmailTooltipView;