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

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

@@ -1,68 +1,57 @@
-/* @flow */
-
-import last from 'lodash/last';
-import { defn } from 'ud';
-import Kefir from 'kefir';
-import kefirBus from 'kefir-bus';
-import kefirStopper from 'kefir-stopper';
-import streamWaitFor from '../../../lib/stream-wait-for';
-import querySelector from '../../../lib/dom/querySelectorOrFail';
-import findParent from '../../../../common/find-parent';
-import type {
-  MoleViewDriver,
-  MoleOptions,
-} from '../../../driver-interfaces/mole-view-driver';
-import GmailElementGetter from '../gmail-element-getter';
-import type GmailDriver from '../gmail-driver';
-import isComposeTitleBarLightColor from '../../gmail/is-compose-titlebar-light-color';
-
+"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 _last = _interopRequireDefault(require("lodash/last"));
+var _ud = require("ud");
+var _kefir = _interopRequireDefault(require("kefir"));
+var _kefirBus = _interopRequireDefault(require("kefir-bus"));
+var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
+var _streamWaitFor = _interopRequireDefault(require("../../../lib/stream-wait-for"));
+var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
+var _findParent = _interopRequireDefault(require("../../../../common/find-parent"));
+var _gmailElementGetter = _interopRequireDefault(require("../gmail-element-getter"));
+var _isComposeTitlebarLightColor = _interopRequireDefault(require("../../gmail/is-compose-titlebar-light-color"));
 class GmailMoleViewDriver {
-  _driver: GmailDriver;
-  _eventStream = kefirBus();
-  _stopper = kefirStopper();
-  _element: HTMLElement;
-
-  constructor(driver: GmailDriver, options: MoleOptions) {
-    (this: MoleViewDriver); // interface check
+  constructor(driver, options) {
+    (0, _defineProperty2.default)(this, "_eventStream", (0, _kefirBus.default)());
+    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
+    this; // interface check
     this._driver = driver;
     this._element = Object.assign(document.createElement('div'), {
       className: 'inboxsdk__mole_view ' + (options.className || ''),
-      innerHTML: getHTMLString(options),
+      innerHTML: getHTMLString(options)
     });
-
     if (options.chrome === false) {
       this._element.classList.add('inboxsdk__mole_view_chromeless');
     } else {
-      querySelector(
-        this._element,
-        '.inboxsdk__mole_view_titlebar'
-      ).addEventListener('click', (e: MouseEvent) => {
+      (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__mole_view_titlebar').addEventListener('click', e => {
         this.setMinimized(!this.getMinimized());
         e.preventDefault();
         e.stopPropagation();
       });
-
-      const minimizeBtn = querySelector(this._element, '.Hl');
-      minimizeBtn.addEventListener('click', (e: MouseEvent) => {
+      const minimizeBtn = (0, _querySelectorOrFail.default)(this._element, '.Hl');
+      minimizeBtn.addEventListener('click', e => {
         this.setMinimized(true);
         e.preventDefault();
         e.stopPropagation();
       });
-
-      const maximizeBtn = querySelector(this._element, '.Hk');
-      maximizeBtn.addEventListener('click', (e: MouseEvent) => {
+      const maximizeBtn = (0, _querySelectorOrFail.default)(this._element, '.Hk');
+      maximizeBtn.addEventListener('click', e => {
         this.setMinimized(false);
         e.preventDefault();
         e.stopPropagation();
       });
-
-      const closeBtn = querySelector(this._element, '.Ha');
-      closeBtn.addEventListener('click', (e: MouseEvent) => {
+      const closeBtn = (0, _querySelectorOrFail.default)(this._element, '.Ha');
+      closeBtn.addEventListener('click', e => {
         this.destroy();
         e.preventDefault();
         e.stopPropagation();
       });
-
       if (options.titleEl) {
         this._setTitleEl(options.titleEl);
       } else {
@@ -71,22 +60,17 @@ class GmailMoleViewDriver {
       if (options.minimizedTitleEl) {
         this._setMinimizedTitleEl(options.minimizedTitleEl);
       }
-
       const titleButtons = options.titleButtons;
       if (titleButtons) {
-        const titleButtonContainer = querySelector(
-          this._element,
-          '.inboxsdk__mole_title_buttons'
-        );
-        const lastChild: HTMLElement =
-          (titleButtonContainer.lastElementChild: any);
-        titleButtons.forEach((titleButton) => {
-          const img: HTMLImageElement = (document.createElement('img'): any);
+        const titleButtonContainer = (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__mole_title_buttons');
+        const lastChild = titleButtonContainer.lastElementChild;
+        titleButtons.forEach(titleButton => {
+          const img = document.createElement('img');
           if (titleButton.iconClass) {
             img.className = titleButton.iconClass;
           }
           img.setAttribute('data-tooltip', titleButton.title);
-          img.addEventListener('click', (event: MouseEvent) => {
+          img.addEventListener('click', event => {
             event.preventDefault();
             event.stopPropagation();
             titleButton.onClick.call(null);
@@ -96,33 +80,21 @@ class GmailMoleViewDriver {
         });
       }
     }
-
-    querySelector(this._element, '.inboxsdk__mole_view_content').appendChild(
-      options.el
-    );
+    (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__mole_view_content').appendChild(options.el);
   }
-
   show() {
-    const doShow = (moleParent) => {
-      moleParent.insertBefore(this._element, last(moleParent.children));
-      const dw = findParent(
-        moleParent,
-        (el) => el.nodeName === 'DIV' && el.classList.contains('dw')
-      );
+    const doShow = moleParent => {
+      moleParent.insertBefore(this._element, (0, _last.default)(moleParent.children));
+      const dw = (0, _findParent.default)(moleParent, el => el.nodeName === 'DIV' && el.classList.contains('dw'));
       if (dw) {
         dw.classList.add('inboxsdk__moles_in_use');
       }
     };
-
-    const moleParent = GmailElementGetter.getMoleParent();
+    const moleParent = _gmailElementGetter.default.getMoleParent();
     if (moleParent) {
       doShow(moleParent);
     } else {
-      const moleParentReadyEvent = streamWaitFor(() =>
-        GmailElementGetter.getMoleParent()
-      )
-        .takeUntilBy(this._stopper)
-        .onValue(doShow);
+      const moleParentReadyEvent = (0, _streamWaitFor.default)(() => _gmailElementGetter.default.getMoleParent()).takeUntilBy(this._stopper).onValue(doShow);
 
       // For some users, the mole parent element seems to be lazily loaded by
       // Gmail only once the user has used a compose view or a thread view.
@@ -130,26 +102,23 @@ class GmailMoleViewDriver {
       // we don't have the mole parent yet, then force the mole parent to load
       // by opening a compose view and then closing it.
 
-      Kefir.fromPromise(GmailElementGetter.waitForGmailModeToSettle())
-        .flatMap(() => {
-          // delay until we've passed TimestampOnReady + 10 seconds
-          return this._driver.delayToTimeAfterReady(10 * 1000);
-        })
-        .takeUntilBy(moleParentReadyEvent)
-        .takeUntilBy(this._stopper)
-        .onValue(() => {
-          this._driver.getLogger().eventSdkActive('mole parent force load');
-          this._driver.openNewComposeViewDriver().then((gmailComposeView) => {
-            gmailComposeView.close();
-          });
+      _kefir.default.fromPromise(_gmailElementGetter.default.waitForGmailModeToSettle()).flatMap(() => {
+        // delay until we've passed TimestampOnReady + 10 seconds
+        return this._driver.delayToTimeAfterReady(10 * 1000);
+      }).takeUntilBy(moleParentReadyEvent).takeUntilBy(this._stopper).onValue(() => {
+        this._driver.getLogger().eventSdkActive('mole parent force load');
+        this._driver.openNewComposeViewDriver().then(gmailComposeView => {
+          gmailComposeView.close();
         });
+      });
     }
   }
-
-  setMinimized(minimized: boolean) {
+  setMinimized(minimized) {
     if (minimized) {
       this._element.classList.add('inboxsdk__minimized');
-      this._eventStream.emit({ eventName: 'minimize' });
+      this._eventStream.emit({
+        eventName: 'minimize'
+      });
     } else {
       this._element.classList.remove('inboxsdk__minimized');
 
@@ -157,90 +126,69 @@ class GmailMoleViewDriver {
       // right.
       const moleParent = this._element.parentElement;
       if (moleParent && this._element.getBoundingClientRect().left < 0) {
-        moleParent.insertBefore(this._element, last(moleParent.children));
+        moleParent.insertBefore(this._element, (0, _last.default)(moleParent.children));
       }
-
-      this._eventStream.emit({ eventName: 'restore' });
+      this._eventStream.emit({
+        eventName: 'restore'
+      });
     }
   }
-
-  getMinimized(): boolean {
+  getMinimized() {
     return this._element.classList.contains('inboxsdk__minimized');
   }
-
-  setTitle(text: string) {
-    const titleElement = this._element.querySelector(
-      '.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_default'
-    );
+  setTitle(text) {
+    const titleElement = this._element.querySelector('.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_default');
     if (titleElement) {
       titleElement.textContent = text;
     }
   }
-
-  _setTitleEl(el: HTMLElement) {
-    const container = this._element.querySelector(
-      '.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_default'
-    );
+  _setTitleEl(el) {
+    const container = this._element.querySelector('.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_default');
     if (container) {
       container.textContent = '';
       container.appendChild(el);
     }
   }
-
-  _setMinimizedTitleEl(el: HTMLElement) {
-    const container = this._element.querySelector(
-      '.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_minimized'
-    );
+  _setMinimizedTitleEl(el) {
+    const container = this._element.querySelector('.inboxsdk__mole_view_titlebar h2.inboxsdk__mole_minimized');
     if (container) {
       this._element.classList.add('inboxsdk__mole_use_minimize_title');
       container.textContent = '';
       container.appendChild(el);
     }
   }
-
-  getEventStream(): Kefir.Observable<Object> {
+  getEventStream() {
     return this._eventStream;
   }
-
   destroy() {
     this._element.remove();
     this._eventStream.end();
     this._stopper.destroy();
   }
 }
-
-export default defn(module, GmailMoleViewDriver);
-
-function getHTMLString(options: MoleOptions) {
-  const originalView = !isComposeTitleBarLightColor();
+var _default = (0, _ud.defn)(module, GmailMoleViewDriver);
+exports.default = _default;
+function getHTMLString(options) {
+  const originalView = !(0, _isComposeTitlebarLightColor.default)();
   return `
-    <div class="inboxsdk__mole_view_inner ${
-      originalView ? 'inboxsdk__original_view' : ''
-    }">
+    <div class="inboxsdk__mole_view_inner ${originalView ? 'inboxsdk__original_view' : ''}">
       ${getTitleHTMLString(options)}
-      <div class="inboxsdk__mole_view_content ${
-        originalView ? 'inboxsdk__original_view' : ''
-      }"></div>
+      <div class="inboxsdk__mole_view_content ${originalView ? 'inboxsdk__original_view' : ''}"></div>
     </div>
   `;
 }
-
-function getTitleHTMLString(options: MoleOptions) {
+function getTitleHTMLString(options) {
   if (options.chrome === false) {
     return '';
   } else {
-    const originalView = !isComposeTitleBarLightColor();
+    const originalView = !(0, _isComposeTitlebarLightColor.default)();
     return `
-      <div class="inboxsdk__mole_view_titlebar${
-        originalView ? ' inboxsdk__original_view' : ''
-      }">
-        <div class="inboxsdk__mole_title_buttons${
-          originalView ? ' inboxsdk__original_view' : ''
-        }">
+      <div class="inboxsdk__mole_view_titlebar${originalView ? ' inboxsdk__original_view' : ''}">
+        <div class="inboxsdk__mole_title_buttons${originalView ? ' inboxsdk__original_view' : ''}">
           <img class="Hl" src="images/cleardot.gif" alt="Minimize" aria-label="Minimize" data-tooltip-delay="800" data-tooltip="Minimize"><img class="Hk" id=":rp" src="images/cleardot.gif" alt="Minimize" aria-label="Maximize" data-tooltip-delay="800" data-tooltip="Maximize"><!--<img class="Hq aUG" src="images/cleardot.gif" alt="Pop-out" aria-label="Full-screen (Shift for Pop-out)" data-tooltip-delay="800" data-tooltip="Full-screen (Shift for Pop-out)">--><img class="Ha" src="images/cleardot.gif" alt="Close" aria-label="Close" data-tooltip-delay="800" data-tooltip="Close">
         </div>
         <h2 class="inboxsdk__mole_default"></h2>
         <h2 class="inboxsdk__mole_minimized"></h2>
       </div>`;
   }
-}
+}