@inboxsdk/core 0.2.28-alpha.0 → 0.2.28-alpha.2

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-toolbar-button-view/monitor-top-banner-size-and-react.js

@@ -0,0 +1,27 @@
+/* @flow */
+
+const BANNER_WIDTH_LIMIT = 900;
+
+export default function monitorTopBannerSizeAndReact() {
+  const ResizeObserver = global.ResizeObserver;
+  if (!ResizeObserver) return;
+
+  const body = document.body;
+  if (!body) return;
+
+  const banner = body.querySelector('[role=banner]');
+  if (!banner) return;
+
+  if (banner.hasAttribute('inboxsdk__resize_claimed')) return;
+  banner.setAttribute('inboxsdk__resize_claimed', 'true');
+
+  const resizeObserver = new ResizeObserver(() => {
+    if (banner.clientWidth < BANNER_WIDTH_LIMIT) {
+      body.classList.add('inboxsdk__searchIsNarrow');
+    } else {
+      body.classList.remove('inboxsdk__searchIsNarrow');
+    }
+  });
+
+  resizeObserver.observe(banner);
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-app-toolbar-button-view.js

@@ -0,0 +1,215 @@
+/* @flow */
+
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import censorHTMLtree from '../../../../common/censorHTMLtree';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import type { Stopper } from 'kefir-stopper';
+import updateIcon from '../../../driver-common/update-icon';
+import GmailElementGetter from '../gmail-element-getter';
+import GmailTooltipView from '../widgets/gmail-tooltip-view';
+import DropdownView from '../../../widgets/buttons/dropdown-view';
+
+import monitorTopBannerSizeAndReact from './gmail-app-toolbar-button-view/monitor-top-banner-size-and-react';
+
+import type Driver from '../gmail-driver';
+
+export default class GmailAppToolbarButtonView {
+  _stopper: Stopper;
+  _iconSettings: Object;
+  _element: ?HTMLElement = null;
+  _activeDropdown: ?DropdownView;
+  _buttonDescriptor: ?Object;
+  _driver: Driver;
+
+  constructor(driver: Driver, inButtonDescriptor: Kefir.Observable<Object>) {
+    this._driver = driver;
+    this._stopper = kefirStopper();
+    this._iconSettings = {};
+    inButtonDescriptor
+      .takeUntilBy(this._stopper)
+      .onValue((buttonDescriptor) => {
+        try {
+          this._handleButtonDescriptor(buttonDescriptor);
+        } catch (err) {
+          this._driver.getLogger().error(err);
+        }
+      });
+
+    monitorTopBannerSizeAndReact();
+  }
+
+  destroy() {
+    this._stopper.destroy();
+    if (this._element) {
+      this._element.remove();
+    }
+    if (this._activeDropdown) {
+      this._activeDropdown.close();
+    }
+  }
+
+  getStopper(): Kefir.Observable<null> {
+    return this._stopper;
+  }
+  getElement(): ?HTMLElement {
+    return this._element;
+  }
+
+  open() {
+    try {
+      if (!this._activeDropdown) {
+        this._handleClick();
+      }
+    } catch (err) {
+      this._driver.getLogger().error(err);
+    }
+  }
+
+  close() {
+    try {
+      if (this._activeDropdown) {
+        this._handleClick();
+      }
+    } catch (err) {
+      this._driver.getLogger().error(err);
+    }
+  }
+
+  _handleButtonDescriptor(buttonDescriptor: Object) {
+    if (!buttonDescriptor) {
+      throw new Error(
+        'The application passed an invalid value for buttonDescriptor'
+      );
+    }
+    const element = (this._element =
+      this._element ||
+      _createAppButtonElement(this._driver, () => {
+        this._handleClick();
+      }));
+    this._buttonDescriptor = buttonDescriptor;
+    updateIcon(
+      this._iconSettings,
+      querySelector(element, 'a'),
+      false,
+      buttonDescriptor.iconClass,
+      buttonDescriptor.iconUrl
+    );
+    _updateTitle(querySelector(element, 'span'), buttonDescriptor);
+  }
+
+  _handleClick() {
+    const element = this._element;
+    if (!element) {
+      // We must have failed to create the element. An error would have already
+      // been logged.
+      return;
+    }
+    const buttonDescriptor = this._buttonDescriptor;
+    if (!buttonDescriptor) {
+      throw new Error(
+        'app toolbar button clicked before receiving button descriptor'
+      );
+    }
+
+    if (this._activeDropdown) {
+      this._activeDropdown.close();
+    } else {
+      var appEvent = {};
+      var tooltipView = new GmailTooltipView();
+      tooltipView
+        .getContainerElement()
+        .classList.add('inboxsdk__appButton_tooltip');
+      tooltipView.getContentElement().innerHTML = '';
+
+      if (buttonDescriptor.arrowColor) {
+        querySelector(
+          tooltipView.getContainerElement(),
+          '.T-P-atC'
+        ).style.borderTopColor = buttonDescriptor.arrowColor;
+      }
+
+      appEvent.dropdown = this._activeDropdown = new DropdownView(
+        tooltipView,
+        element,
+        { manualPosition: true }
+      );
+      appEvent.dropdown.on('destroy', () => {
+        this._activeDropdown = null;
+      });
+
+      if (buttonDescriptor.onClick) {
+        buttonDescriptor.onClick.call(null, appEvent);
+      }
+
+      if (this._element) {
+        tooltipView.anchor(this._element, {
+          position: 'bottom',
+          offset: { top: 8 },
+        });
+      }
+    }
+  }
+}
+
+function _createAppButtonElement(
+  driver: Driver,
+  onclick: (event: Object) => void
+): HTMLElement {
+  const element = document.createElement('div');
+  element.setAttribute('class', 'inboxsdk__appButton');
+
+  element.innerHTML = `<a href="#">
+               <span class="inboxsdk__appButton_title"></span>
+             </a>`;
+
+  element.addEventListener('click', (event: MouseEvent) => {
+    event.preventDefault();
+    onclick(event);
+  });
+
+  const topAccountContainer = GmailElementGetter.getTopAccountContainer();
+  if (!topAccountContainer) {
+    const err = new Error('Could not make button');
+    const banner = document.querySelector('[role=banner]');
+    driver.getLogger().error(err, {
+      type: 'failed to make appToolbarButton',
+      gbsfwPresent: !!document.getElementById('gbsfw'),
+      bannerHtml: banner && censorHTMLtree(banner),
+    });
+    throw err;
+  }
+
+  const insertionElement: ?HTMLElement = topAccountContainer;
+
+  if (!insertionElement) {
+    const err = new Error('Could not make button');
+    driver.getLogger().error(err, {
+      type: 'failed to make appToolbarButton',
+      topAccountContainerHTML: censorHTMLtree(topAccountContainer),
+    });
+    throw err;
+  }
+
+  try {
+    if (!GmailElementGetter.isGplusEnabled()) {
+      element.classList.add('inboxsdk__appButton_noGPlus');
+    }
+
+    insertionElement.insertBefore(element, insertionElement.lastElementChild);
+    return element;
+  } catch (err) {
+    driver.getLogger().error(err, {
+      type: 'failed to make appToolbarButton',
+      insertionElementHTML: censorHTMLtree(insertionElement),
+    });
+    throw err;
+  }
+}
+
+function _updateTitle(element: HTMLElement, descriptor: Object) {
+  element.textContent = descriptor.title;
+  element.className = `inboxsdk__appButton_title ${
+    descriptor.titleClass || ''
+  }`;
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-attachment-area-view.js

@@ -0,0 +1,141 @@
+/* @flow */
+
+import { defn } from 'ud';
+import type GmailDriver from '../gmail-driver';
+import type GmailMessageView from './gmail-message-view';
+import GmailAttachmentCardView from './gmail-attachment-card-view';
+import ButtonView from '../widgets/buttons/button-view';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import BasicButtonViewController from '../../../widgets/buttons/basic-button-view-controller';
+
+const GmailAttachmentAreaView = defn(
+  module,
+  class GmailAttachmentAreaView {
+    _element: HTMLElement;
+    _messageViewDriver: GmailMessageView;
+    _driver: GmailDriver;
+    _elsToCardViews: WeakMap<HTMLElement, GmailAttachmentCardView>;
+
+    constructor(
+      element: ?HTMLElement,
+      driver: GmailDriver,
+      messageViewDriver: GmailMessageView
+    ) {
+      this._driver = driver;
+      this._messageViewDriver = messageViewDriver;
+      this._elsToCardViews = new WeakMap();
+      if (element) {
+        this._element = element;
+      } else {
+        this._setupElement();
+      }
+    }
+
+    destroy() {
+      this.getAttachmentCardViews().forEach((view) => {
+        view.destroy();
+      });
+    }
+
+    getElement(): HTMLElement {
+      return this._element;
+    }
+
+    getAttachmentCardViews() {
+      const attachments = this._element.querySelectorAll('.aQH > span');
+      return Array.from(attachments).map((attachment) => {
+        let cardView = this._elsToCardViews.get(attachment);
+        if (!cardView) {
+          cardView = new GmailAttachmentCardView(
+            { element: attachment },
+            this._driver,
+            this._messageViewDriver
+          );
+          this._elsToCardViews.set(attachment, cardView);
+        }
+        return cardView;
+      });
+    }
+
+    _setupElement() {
+      this._element = document.createElement('div');
+      this._element.setAttribute('class', 'hq gt a10');
+
+      this._element.innerHTML = [
+        '<div class="hp"></div>',
+        '<div class="a3I">Attachments area</div>',
+        '<div></div>',
+        '<div class="aQH">',
+        '<div class="aZK"></div>',
+        '</div>',
+      ].join('');
+    }
+
+    _createAreaToolbarIfNeeded(): HTMLElement {
+      const preexistingToolbar = this._element.querySelector('.ho');
+      if (preexistingToolbar) {
+        return preexistingToolbar;
+      }
+      const toolbar = document.createElement('div');
+      toolbar.className = 'ho';
+      toolbar.innerHTML = `<span class="aVW"><span>${
+        this.getAttachmentCardViews().length
+      }</span> Attachments</span><div class="aZi J-J5-Ji"></div>`;
+      this._element.insertBefore(toolbar, this._element.lastElementChild);
+      this._element.classList.remove('a10');
+      return toolbar;
+    }
+
+    _updateToolbarCardCount() {
+      const cardCount = this.getAttachmentCardViews().length;
+      if (cardCount > 1) {
+        const toolbar = this._createAreaToolbarIfNeeded();
+        const counter = querySelector(toolbar, '.aVW > span');
+        counter.textContent = String(cardCount);
+      }
+    }
+
+    addGmailAttachmentCardView(
+      gmailAttachmentCardView: GmailAttachmentCardView
+    ) {
+      const zone = this._element.querySelector('.aXK, .aQH');
+      if (!zone) {
+        this._driver
+          .getLogger()
+          .error(new Error('Could not find attachment zone'));
+        return;
+      }
+      zone.insertBefore(
+        gmailAttachmentCardView.getElement(),
+        zone.lastElementChild
+      );
+      this._updateToolbarCardCount();
+    }
+
+    addButtonToDownloadAllArea(options: Object) {
+      var buttonView = new ButtonView({
+        iconClass: 'T-I-J3',
+        iconUrl: options.iconUrl,
+        tooltip: options.tooltip,
+        hasButtonToLeft: true,
+      });
+
+      buttonView.addClass('aZj');
+      buttonView.getElement().children[0].className = 'asa';
+
+      var basicButtonViewController = new BasicButtonViewController({
+        activateFunction: () => {
+          if (options.onClick) {
+            options.onClick();
+          }
+        },
+        buttonView: buttonView,
+      });
+
+      const toolbar = this._createAreaToolbarIfNeeded();
+      querySelector(toolbar, '.aZi').appendChild(buttonView.getElement());
+    }
+  }
+);
+
+export default GmailAttachmentAreaView;