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

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-message-view.js

@@ -0,0 +1,348 @@
+/* @flow */
+
+import { defn } from 'ud';
+import asap from 'asap';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import BigNumber from 'bignumber.js';
+import delayAsap from '../../../lib/delay-asap';
+import type InboxDriver from '../inbox-driver';
+import type InboxThreadView from './inbox-thread-view';
+import censorHTMLtree from '../../../../common/censorHTMLtree';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import InboxAttachmentCardView from './inbox-attachment-card-view';
+import findParent from '../../../../common/find-parent';
+import parser from '../detection/message/parser';
+import type { Parsed } from '../detection/message/parser';
+import type {
+  MessageViewDriver,
+  MessageViewToolbarButtonDescriptor,
+  MessageViewLinkDescriptor,
+  VIEW_STATE,
+} from '../../../driver-interfaces/message-view-driver';
+import SafeEventEmitter from '../../../lib/safe-event-emitter';
+
+class AttachmentIcon extends SafeEventEmitter {}
+
+class InboxMessageView {
+  _element: HTMLElement;
+  _driver: InboxDriver;
+  _p: Parsed;
+  _stopper: Kefir.Observable<any>;
+  _eventStream: Bus<Object> = kefirBus();
+  _threadViewDriver: ?InboxThreadView;
+  _attachmentCardViews: InboxAttachmentCardView[] = [];
+
+  constructor(element: HTMLElement, driver: InboxDriver, parsed: Parsed) {
+    (this: MessageViewDriver); // interface check
+    this._element = element;
+    this._driver = driver;
+    this._p = parsed;
+
+    this._stopper = this._eventStream.ignoreValues().beforeEnd(() => null);
+
+    // If our id changes, then destroy this view.
+    // getMessageViewDriverStream() will create a new view for this element.
+    makeMutationObserverChunkedStream(this._element, {
+      attributes: true,
+      attributeFilter: ['data-msg-id'],
+    })
+      .toProperty(() => null)
+      .map(() => this._element.getAttribute('data-msg-id'))
+      .skipDuplicates()
+      .changes()
+      .onValue(() => {
+        this.destroy();
+      });
+
+    makeMutationObserverChunkedStream(this._element, {
+      attributes: true,
+      attributeFilter: ['aria-expanded'],
+    })
+      .toProperty(() => null)
+      .map(() => this._element.getAttribute('aria-expanded') === 'true')
+      .skipDuplicates()
+      .changes()
+      .takeUntilBy(this._stopper)
+      .onValue((expanded) => {
+        if (expanded) {
+          this._reparse();
+        } else {
+          // Destroy on collapse so that when it's uncollapsed again, the app
+          // can re-do its modifications.
+          this.destroy();
+        }
+      });
+
+    this._threadViewDriver = this._findThreadView();
+    if (this._threadViewDriver) {
+      this._threadViewDriver.addMessageViewDriver(this);
+    }
+
+    this._driver.getMessageViewElementsMap().set(this._element, this);
+
+    this._monitorEmailAddressHovering();
+  }
+
+  _findThreadView(): ?InboxThreadView {
+    const map = this._driver.getThreadViewElementsMap();
+    const threadViewElement = findParent(this._element, (el) =>
+      map.has((el: any))
+    );
+    if (!threadViewElement) return null;
+    return map.get(threadViewElement);
+  }
+
+  _reparse() {
+    const oldParsed = this._p;
+    this._p = parser(this._element);
+    if (this._p.errors.length > 0) {
+      this._driver.getLogger().errorSite(new Error('message reparse errors'), {
+        score: this._p.score,
+        errors: this._p.errors,
+        html: censorHTMLtree(this._element),
+      });
+    }
+
+    if (!oldParsed.attributes.loaded && this._p.attributes.loaded) {
+      this._eventStream.emit({
+        type: 'internal',
+        eventName: 'messageLoad',
+      });
+    }
+    if (oldParsed.attributes.viewState !== this._p.attributes.viewState) {
+      this._eventStream.emit({
+        eventName: 'viewStateChange',
+        oldValue: oldParsed.attributes.viewState,
+        newValue: this._p.attributes.viewState,
+      });
+    }
+  }
+
+  _monitorEmailAddressHovering() {
+    this._eventStream.plug(
+      Kefir.fromEvents(this._element, 'mouseover')
+        .map((e) => e.target)
+        .filter((element) => element && element.getAttribute('email'))
+        .map((element) => {
+          const contact = {
+            name: element.textContent,
+            emailAddress: element.getAttribute('email'),
+          };
+
+          let contactType;
+          if (
+            this._p.elements.sender &&
+            this._p.elements.sender.contains(element)
+          ) {
+            contactType = 'sender';
+          } else if (
+            this._p.attributes.recipientElements &&
+            Array.from(this._p.attributes.recipientElements).some((el) =>
+              el.contains(element)
+            )
+          ) {
+            contactType = 'recipient';
+          } else {
+            return null;
+          }
+
+          return {
+            eventName: 'contactHover',
+            messageViewDriver: this,
+            contact,
+            contactType,
+          };
+        })
+        .filter()
+    );
+  }
+
+  addAttachmentCardViewDriver(card: InboxAttachmentCardView) {
+    this._attachmentCardViews.push(card);
+    card
+      .getStopper()
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        this._attachmentCardViews = this._attachmentCardViews.filter(
+          (v) => v !== card
+        );
+      });
+  }
+
+  getStopper() {
+    return this._stopper;
+  }
+
+  getEventStream(): Kefir.Observable<Object> {
+    return this._eventStream;
+  }
+
+  isLoaded() {
+    return this._p.attributes.loaded;
+  }
+
+  hasOpenReply() {
+    // Inbox associates inline replies with threads, not messages.
+    return false;
+  }
+
+  getMessageID(): string {
+    const { inboxMessageId } = this._p.attributes;
+    if (!inboxMessageId) {
+      throw new Error('Failed to find message id');
+    }
+    if (/^msg-a:/.test(inboxMessageId)) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'MessageView.getMessageID() returned an incorrect message ID. This method will be deprecated soon. Use getMessageIDAsync() instead which does not have this problem.'
+      );
+    }
+    const m = /\d+$/.exec(inboxMessageId);
+    if (!m) throw new Error('Should not happen');
+    return new BigNumber(m[0]).toString(16);
+  }
+
+  async getMessageIDAsync(): Promise<string> {
+    const { inboxMessageId } = this._p.attributes;
+    if (!inboxMessageId) {
+      throw new Error('Failed to find message id');
+    }
+    if (/^msg-a:/.test(inboxMessageId)) {
+      // If there's a composeView with the same id as this message, then that
+      // means this message hasn't been sent as a real email yet, and we need
+      // to wait for the send to complete before we can look up this message's
+      // id.
+      for (let inboxComposeView of this._driver
+        .getComposeViewDriverLiveSet()
+        .values()) {
+        const draftId = await inboxComposeView.getDraftID();
+        if (draftId && `msg-a:${draftId}` === inboxMessageId) {
+          await inboxComposeView.getStopper().take(1).toPromise();
+          break;
+        }
+      }
+      return await this._driver.getGmailMessageIdForSyncMessageId(
+        inboxMessageId
+      );
+    } else {
+      const m = /\d+$/.exec(inboxMessageId);
+      if (!m) throw new Error('Should not happen');
+      return new BigNumber(m[0]).toString(16);
+    }
+  }
+
+  getContentsElement() {
+    if (!this._p.elements.body) throw new Error('Could not find body element');
+    return this._p.elements.body;
+  }
+
+  getLinks(): Array<MessageViewLinkDescriptor> {
+    throw new Error('not implemented yet');
+  }
+  isElementInQuotedArea(el: HTMLElement): boolean {
+    const quotedArea = findParent(el, (el) =>
+      el.classList.contains('gmail_extra')
+    );
+    return quotedArea != null;
+  }
+  addMoreMenuItem(options: MessageViewToolbarButtonDescriptor): void {
+    throw new Error('not implemented yet');
+  }
+  addAttachmentIcon(options: Object): SafeEventEmitter & {} {
+    // eslint-disable-next-line no-console
+    console.warn(
+      'MessageView.addAttachmentIcon is not implemented yet in Inbox'
+    );
+
+    return new AttachmentIcon();
+  }
+  getAttachmentCardViewDrivers() {
+    return (this._attachmentCardViews: any);
+  }
+  addAttachmentCard(options: Object) {
+    const { attachmentsArea } = this._p.elements;
+    if (!attachmentsArea) throw new Error('Could not find attachments area');
+    let container = attachmentsArea.lastElementChild;
+    if (!container) {
+      attachmentsArea.style.display = '';
+      attachmentsArea.style.margin = '16px 0 0';
+      attachmentsArea.style.paddingTop = '16px';
+      container = document.createElement('div');
+      attachmentsArea.appendChild(container);
+    }
+    return new InboxAttachmentCardView(
+      { ...options, element: null, container },
+      this._driver
+    );
+  }
+  addButtonToDownloadAllArea(options: Object): void {
+    // no-op in Inbox
+  }
+  getViewState(): VIEW_STATE {
+    return this._p.attributes.viewState;
+  }
+  getDateString(): string {
+    throw new Error('not implemented yet');
+  }
+  getSender(): Contact {
+    const { sender } = this._p.elements;
+    if (!sender) throw new Error('could not find sender element');
+    const emailAddress = sender.getAttribute('email');
+    if (!emailAddress) throw new Error('could not find email address');
+    return {
+      emailAddress,
+      name: sender.textContent,
+    };
+  }
+  getRecipients(): Array<Contact> {
+    const userContact = this._driver.getUserContact();
+    return Array.prototype.map.call(
+      this._p.attributes.recipientElements,
+      (el) => {
+        const emailAddress = el.getAttribute('email');
+        if (emailAddress === userContact.emailAddress) {
+          return userContact;
+        }
+        return {
+          emailAddress,
+          name: el.textContent,
+        };
+      }
+    );
+  }
+
+  getRecipientEmailAddresses(): Array<string> {
+    return this.getRecipients().map(({ emailAddress }) => emailAddress);
+  }
+
+  async getRecipientsFull(): Promise<Array<Contact>> {
+    return this.getRecipients();
+  }
+
+  getThreadViewDriver() {
+    if (!this._threadViewDriver) throw new Error('failed to find threadView');
+    return this._threadViewDriver;
+  }
+
+  getReadyStream() {
+    // Needs to emit after any attachment cards have been added in order for
+    // an app calling getFileAttachmentCardViews() immediately to see the cards.
+    // The cards are emitted several microtasks after the message, so we delay
+    // by about 10 microtasks here. An integration test tests this at least.
+    // TODO something else.
+    return Kefir.repeat((i) => (i > 10 ? null : delayAsap(null)))
+      .ignoreValues()
+      .beforeEnd(() => null);
+  }
+
+  destroy() {
+    this._eventStream.end();
+    this._attachmentCardViews.slice().forEach((card) => {
+      card.destroy();
+    });
+  }
+}
+
+export default defn(module, InboxMessageView);

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-modal-view.js

@@ -0,0 +1,153 @@
+/* @flow */
+
+import { defn } from 'ud';
+import sortBy from 'lodash/sortBy';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import insertElementInOrder from '../../../lib/dom/insert-element-in-order';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+
+class InboxModalView {
+  _eventStream: Bus<Object> = kefirBus();
+  _modalContainerElement: HTMLElement;
+
+  constructor(options: Object) {
+    this._setupModalContainerElement(options);
+
+    this._processOptions(options);
+
+    const closeElement = querySelector(
+      this._modalContainerElement,
+      '.inboxsdk__close_button'
+    );
+
+    closeElement.addEventListener('click', (event: MouseEvent) => {
+      this._eventStream.emit({
+        eventName: 'closeClick',
+        domEvent: event,
+      });
+    });
+  }
+
+  destroy() {
+    this._modalContainerElement.remove();
+    this._eventStream.end();
+  }
+
+  getModalContainerElement(): HTMLElement {
+    return this._modalContainerElement;
+  }
+  getEventStream(): Kefir.Observable<Object> {
+    return this._eventStream;
+  }
+
+  _processOptions(options: Object) {
+    this.setTitle(options.title);
+    this.setContentElement(options.el);
+    this.setButtons(options.buttons || []);
+    this.setChromeClasses(options.chrome, options.showCloseButton);
+  }
+
+  setTitle(title: string) {
+    const heading = querySelector(
+      this._modalContainerElement,
+      '[role=heading]'
+    );
+    if (!title) {
+      heading.style.display = 'none';
+    } else {
+      heading.style.display = '';
+      heading.textContent = title;
+    }
+  }
+
+  setContentElement(element: HTMLElement) {
+    const content = querySelector(
+      this._modalContainerElement,
+      '.inboxsdk__modal_content'
+    );
+    content.innerHTML = '';
+    if (typeof element === 'string') {
+      content.innerHTML = element;
+    } else if (element instanceof Element) {
+      content.appendChild(element);
+    }
+  }
+
+  setButtons(buttons: Object[]) {
+    const buttonContainer = querySelector(
+      this._modalContainerElement,
+      '.inboxsdk__modal_buttons'
+    );
+
+    if (buttons.length > 0) {
+      this._modalContainerElement.classList.add('inboxsdk__modal_hasButtons');
+    } else {
+      this._modalContainerElement.classList.remove(
+        'inboxsdk__modal_hasButtons'
+      );
+    }
+
+    buttonContainer.innerHTML = '';
+    sortBy(buttons, [
+      (button) => (button.type === 'PRIMARY_ACTION' ? 0 : 1),
+      (button) => button.orderHint || 0,
+    ]).forEach((buttonDescriptor) => {
+      var buttonEl = document.createElement('input');
+      buttonEl.className =
+        buttonDescriptor.type === 'PRIMARY_ACTION' ? 'inboxsdk__primary' : '';
+      buttonEl.type = 'button';
+      buttonEl.value = buttonDescriptor.text;
+      buttonEl.addEventListener('click', (event: MouseEvent) => {
+        event.preventDefault();
+        buttonDescriptor.onClick.call(null);
+      });
+      buttonContainer.appendChild(buttonEl);
+    });
+  }
+
+  setChromeClasses(chrome: boolean, showCloseButton: boolean) {
+    if (chrome === false) {
+      this._modalContainerElement.classList.add('inboxsdk__modal_chromeless');
+    } else {
+      this._modalContainerElement.classList.remove(
+        'inboxsdk__modal_chromeless'
+      );
+    }
+    if (showCloseButton) {
+      this._modalContainerElement.classList.add(
+        'inboxsdk__modal_showCloseButton'
+      );
+    } else {
+      this._modalContainerElement.classList.remove(
+        'inboxsdk__modal_showCloseButton'
+      );
+    }
+  }
+
+  _setupModalContainerElement(options: Object) {
+    const constrainTitleWidthTopRowClass = options.constrainTitleWidth
+      ? 'inboxsdk__modal_toprow--constrain-title-width'
+      : '';
+
+    this._modalContainerElement = document.createElement('div');
+    this._modalContainerElement.className = 'inboxsdk__modal_fullscreen';
+
+    var htmlString = `
+    <div class="inboxsdk__modal_container" tabindex="0" role="alertdialog">
+      <div class="inboxsdk__modal_toprow ${constrainTitleWidthTopRowClass}">
+        <span role="heading"></span>
+        <button title="Close" class="inboxsdk__close_button"></button>
+      </div>
+      <div class="inboxsdk__modal_content">
+      </div>
+      <div class="inboxsdk__modal_buttons"></div>
+    </div>
+    `;
+
+    this._modalContainerElement.innerHTML = htmlString;
+  }
+}
+
+export default defn(module, InboxModalView);

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-route-view.js

@@ -0,0 +1,123 @@
+/* @flow */
+
+import includes from 'lodash/includes';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import kefirBus from 'kefir-bus';
+
+import type { RouteViewDriver } from '../../../driver-interfaces/route-view-driver';
+
+import { NATIVE_ROUTE_IDS } from '../../../constants/router';
+
+function getRouteID(path) {
+  if (path === '') {
+    return NATIVE_ROUTE_IDS.INBOX;
+  }
+  if (includes(['snoozed', 'reminders', 'done', 'spam', 'trash'], path)) {
+    return NATIVE_ROUTE_IDS[path.toUpperCase()];
+  }
+  if (/search\//.test(path)) {
+    return NATIVE_ROUTE_IDS.SEARCH;
+  }
+  return 'UNKNOWN';
+}
+
+function getParams(path) {
+  const parts = path.split('/');
+  if (parts.length < 2) {
+    return {};
+  }
+  return {
+    query: decodeURIComponent(parts[1]),
+  };
+}
+
+export default class InboxRouteView {
+  _element: HTMLElement;
+  _type: string;
+  _routeType: string;
+  _routeID: string;
+  _params: Object;
+  _eventStream = kefirBus();
+  _stopper = kefirStopper();
+
+  constructor(el: HTMLElement, type: string) {
+    // Check we implement interface
+    (this: RouteViewDriver);
+
+    this._element = el;
+
+    this._type = type;
+    const path = document.location.pathname.slice(1);
+    this._routeID = getRouteID(path);
+    this._params = getParams(path);
+    this._routeType = this._routeID === 'UNKNOWN' ? 'UNKNOWN' : 'LIST';
+
+    // console.log('el jsan', el.getAttribute('jsan'));
+    // if (this._type === 'CUSTOM') {
+    // }
+  }
+
+  getStopper() {
+    return this._stopper;
+  }
+
+  destroy() {
+    this._eventStream.end();
+    this._stopper.destroy();
+  }
+
+  getElement(): HTMLElement {
+    return this._element;
+  }
+
+  getType(): string {
+    return this._type;
+  }
+
+  getRouteType(): string {
+    return this._routeType;
+  }
+
+  getRouteID(): string {
+    return this._routeID;
+  }
+
+  getParams(): Object {
+    return this._params;
+  }
+
+  getEventStream(): Kefir.Observable<Object> {
+    return this._eventStream;
+  }
+
+  refresh() {
+    // stub
+  }
+
+  getHash(): string {
+    throw new Error('should not happen');
+  }
+
+  getCustomViewElement(): ?HTMLElement {
+    throw new Error('should not happen');
+  }
+
+  addCollapsibleSection(
+    sectionDescriptorProperty: Kefir.Observable<?Object>,
+    groupOrderHint: any
+  ) {
+    throw new Error('not implemented yet');
+  }
+
+  addSection(
+    sectionDescriptorProperty: Kefir.Observable<?Object>,
+    groupOrderHint: any
+  ) {
+    throw new Error('not implemented yet');
+  }
+
+  setFullWidth(fullWidth: boolean) {
+    throw new Error('should not happen');
+  }
+}