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

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

@@ -0,0 +1,72 @@
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import InboxToolbarButtonView from './InboxToolbarButtonView';
+import type InboxThreadView from './inbox-thread-view';
+import type InboxDriver from '../inbox-driver';
+
+class InboxToolbarView {
+  _stopper = kefirStopper();
+  _el: HTMLElement;
+  _driver: InboxDriver;
+  _inboxThreadView: ?InboxThreadView;
+
+  constructor(
+    el: HTMLElement,
+    driver: InboxDriver,
+    inboxThreadView: ?InboxThreadView
+  ) {
+    this._el = el;
+    this._driver = driver;
+    this._inboxThreadView = inboxThreadView;
+
+    this._el.classList.add('inboxsdk__list_toolbar');
+  }
+
+  getStopper(): Kefir.Observable<*> {
+    return this._stopper;
+  }
+
+  destroy() {
+    this._stopper.destroy();
+  }
+
+  getThreadRowViewDrivers() {
+    return this._driver.getThreadRowViewDriverLiveSet().values();
+  }
+
+  getRouteViewDriver() {
+    return this._driver.getCurrentRouteViewDriver();
+  }
+
+  isForRowList(): boolean {
+    return this._inboxThreadView == null;
+  }
+
+  isForThread(): boolean {
+    return this._inboxThreadView != null;
+  }
+
+  getThreadViewDriver() {
+    if (!this._inboxThreadView) {
+      throw new Error('this toolbarview is not for a thread');
+    }
+    return this._inboxThreadView;
+  }
+
+  addButton(buttonDescriptor: Object, id?: string) {
+    const button = new InboxToolbarButtonView(
+      buttonDescriptor,
+      this._driver.getAppId(),
+      this._el
+    );
+    this._stopper.takeUntilBy(button.getStopper()).onValue(() => {
+      button.destroy();
+    });
+    return button;
+  }
+}
+
+export default defn(module, InboxToolbarView);

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

@@ -0,0 +1,362 @@
+/* @flow */
+
+import findIndex from 'lodash/findIndex';
+import { defn } from 'ud';
+import autoHtml from 'auto-html';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import fakeWindowResize from '../../../lib/fake-window-resize';
+import findParent from '../../../../common/find-parent';
+import getSidebarClassnames from '../getSidebarClassnames';
+import delayAsap from '../../../lib/delay-asap';
+import waitForAnimationClickBlockerGone from '../waitForAnimationClickBlockerGone';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+import fromEventTargetCapture from '../../../lib/from-event-target-capture';
+import OrderManager from 'order-manager';
+import idMap from '../../../lib/idMap';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import incrementName from '../../../lib/incrementName';
+import type InboxDriver from '../inbox-driver';
+
+import AppSidebar from '../../../driver-common/sidebar/AppSidebar';
+import ContentPanelViewDriver from '../../../driver-common/sidebar/ContentPanelViewDriver';
+
+class InboxAppSidebarView {
+  _stopper = kefirStopper();
+  _driver: InboxDriver;
+  _el: HTMLElement;
+  _mainParent: HTMLElement;
+  _openOrOpeningProp: Kefir.Observable<boolean>;
+
+  constructor(driver: InboxDriver) {
+    this._driver = driver;
+
+    // We need to be able to cooperate with other apps/extensions that are
+    // sharing the app sidebar. We store some properties as attributes in the
+    // shared DOM instead of as class properties; class properties are mostly
+    // restricted to being used for references to DOM nodes. When
+    // InboxAppSidebarView is instantiated, we check to see if the element
+    // already exists and create it if it doesn't.
+    const el = document.querySelector('.' + idMap('app_sidebar_container'));
+    if (el) {
+      this._el = el;
+    } else {
+      this._createElement();
+    }
+
+    const mainParent = findParent(
+      querySelector(document, '[role=application]'),
+      (el) => el.parentElement === document.body
+    );
+    if (!mainParent) {
+      const err = new Error('Failed to find main parent');
+      this._driver.getLogger().errorSite(err);
+      throw err;
+    }
+    this._mainParent = mainParent;
+
+    this._openOrOpeningProp = makeMutationObserverChunkedStream(this._el, {
+      attributes: true,
+      attributeFilter: ['data-open', 'data-is-opening'],
+    })
+      .toProperty(() => null)
+      .map(
+        () =>
+          this._el.getAttribute('data-open') === 'true' ||
+          this._el.getAttribute('data-is-opening') === 'true'
+      )
+      .skipDuplicates();
+  }
+
+  destroy() {
+    this._stopper.destroy();
+  }
+
+  open() {
+    this._setShouldAppSidebarOpen(true);
+    this._setOpenedNow(true);
+  }
+
+  close() {
+    this._setShouldAppSidebarOpen(false);
+    this._setOpenedNow(false);
+  }
+
+  getOpenOrOpeningStream(): Kefir.Observable<boolean> {
+    return this._openOrOpeningProp;
+  }
+
+  // This value controls whether the app sidebar should automatically open
+  // itself when available when the chat sidebar isn't present. It's only set
+  // if the user interacts with the app sidebar button.
+  _getShouldAppSidebarOpen(): boolean {
+    return localStorage.getItem('inboxsdk__app_sidebar_should_open') === 'true';
+  }
+
+  _setShouldAppSidebarOpen(open: boolean) {
+    try {
+      localStorage.setItem('inboxsdk__app_sidebar_should_open', String(open));
+    } catch (err) {
+      console.error('error saving', err); //eslint-disable-line no-console
+    }
+  }
+
+  _createElement() {
+    const el = (this._el = document.createElement('div'));
+    el.className = idMap('app_sidebar_container');
+    // Store the open state in the DOM rather than a class property because
+    // multiple instances of InboxAppSidebarView from different apps need to
+    // share the value.
+    el.setAttribute('data-open', 'false');
+    el.setAttribute('data-is-opening', 'false');
+    ((document.body: any): HTMLElement).appendChild(el);
+
+    if (
+      !((document.body: any): HTMLElement).querySelector(
+        '.' + idMap('app_sidebar_waiting_platform')
+      )
+    ) {
+      const waitingPlatform = document.createElement('div');
+      waitingPlatform.className = idMap('app_sidebar_waiting_platform');
+      ((document.body: any): HTMLElement).appendChild(waitingPlatform);
+    }
+
+    // If the user clicks the chat button while the chat sidebar and app
+    // sidebar are both open, then we want the chat sidebar to become visible.
+    // We block Inbox from closing the chat sidebar, and we close the app sidebar.
+    fromEventTargetCapture(this._driver.getChatSidebarButton(), 'click')
+      .filter(
+        () =>
+          el.getAttribute('data-open') === 'true' &&
+          this._driver.getCurrentChatSidebarView().getMode() === 'SIDEBAR'
+      )
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        event.stopImmediatePropagation();
+        this._setShouldAppSidebarOpen(false);
+        this._setOpenedNow(false);
+      });
+
+    this._driver
+      .getCurrentChatSidebarView()
+      .getModeStream()
+      .changes()
+      .takeUntilBy(this._stopper)
+      .onValue((mode) => {
+        if (mode === 'SIDEBAR') {
+          // If the user clicks the chat button while the chat sidebar is
+          // closed and the app sidebar is open, and Inbox opens the chat
+          // sidebar, then we want the chat sidebar to become visible. We just
+          // hide the app sidebar after Inbox brings up the chat sidebar.
+          this._setShouldAppSidebarOpen(false);
+          this._setOpenedNow(false);
+        } else {
+          // If the chat sidebar changes in any other way
+          // (ie. HIDDEN<->DROPDOWN) while the app sidebar is open, then we
+          // might need to fix up some class changes that Inbox might have
+          // made.
+          if (el.getAttribute('data-open') === 'true') {
+            this._setOpenedNow(true);
+          }
+        }
+      });
+
+    const currentIds = new Set();
+    const orderManager = new OrderManager({
+      get() {
+        try {
+          return JSON.parse(
+            localStorage.getItem('inboxsdk__sidebar_ordering') || 'null'
+          );
+        } catch (err) {
+          console.error('failed to read sidebar order data', err); //eslint-disable-line no-console
+        }
+      },
+      set(data) {
+        try {
+          localStorage.setItem(
+            'inboxsdk__sidebar_ordering',
+            JSON.stringify(data)
+          );
+        } catch (err) {
+          console.error('failed to set sidebar order data', err); //eslint-disable-line no-console
+        }
+      },
+    });
+    let component: AppSidebar;
+
+    const _appSidebarRefSetter = (threadSidebarComponent) => {
+      if (threadSidebarComponent) {
+        component = threadSidebarComponent;
+      }
+    };
+
+    const render = () => {
+      ReactDOM.render(
+        <AppSidebar
+          ref={_appSidebarRefSetter}
+          panels={orderManager.getOrderedItems().map((x) => x.value)}
+          onClose={() => {
+            this._setShouldAppSidebarOpen(false);
+            this._setOpenedNow(false);
+          }}
+          onOutsideClick={() => {
+            this._driver.closeOpenThread();
+          }}
+          onMoveEnd={(newList, movedItem, oldIndex, newIndex) => {
+            orderManager.moveItem(oldIndex, newIndex);
+            render();
+          }}
+        />,
+        el
+      );
+    };
+    render();
+
+    Kefir.fromEvents(window, 'storage')
+      .filter((e) => e.key === 'inboxsdk__sidebar_ordering')
+      .takeUntilBy(this._stopper)
+      .onValue(() => {
+        orderManager.reload();
+        render();
+      });
+
+    this._stopper.onValue(() => {
+      ReactDOM.unmountComponentAtNode(el);
+      el.remove();
+    });
+
+    Kefir.fromEvents((document.body: any), 'inboxsdkNewSidebarPanel')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        let id = event.detail.id;
+        while (currentIds.has(id)) {
+          id = incrementName(id);
+        }
+        currentIds.add(id);
+        orderManager.addItem({
+          groupId: event.detail.appId,
+          id,
+          orderHint: event.detail.orderHint,
+          value: {
+            id,
+            appId: event.detail.appId,
+            instanceId: event.detail.instanceId,
+            title: event.detail.title,
+            iconClass: event.detail.iconClass,
+            iconUrl: event.detail.iconUrl,
+            hideTitleBar: event.detail.hideTitleBar,
+            el: event.target,
+          },
+        });
+        render();
+      });
+    Kefir.fromEvents((document.body: any), 'inboxsdkUpdateSidebarPanel')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        const orderedItems = orderManager.getOrderedItems();
+        const index = findIndex(
+          orderedItems,
+          (x) => x.value.instanceId === event.detail.instanceId
+        );
+        if (index === -1)
+          throw new Error('should not happen: failed to find orderItem');
+        orderManager.updateItemValueByIndex(index, {
+          id: orderedItems[index].value.id,
+          appId: event.detail.appId,
+          instanceId: event.detail.instanceId,
+          title: event.detail.title,
+          iconClass: event.detail.iconClass,
+          iconUrl: event.detail.iconUrl,
+          hideTitleBar: event.detail.hideTitleBar,
+          el: event.target,
+        });
+        render();
+      });
+    Kefir.fromEvents((document.body: any), 'inboxsdkRemoveSidebarPanel')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        const orderedItems = orderManager.getOrderedItems();
+        const index = findIndex(
+          orderedItems,
+          (x) => x.value.instanceId === event.detail.instanceId
+        );
+        if (index === -1)
+          throw new Error('should not happen: failed to find orderItem');
+        currentIds.delete(orderedItems[index].id);
+        orderManager.removeItemByIndex(index);
+        if (orderManager.getOrderedItems().length === 0) {
+          this._setOpenedNow(false);
+        }
+        render();
+      });
+    Kefir.fromEvents((document.body: any), 'inboxsdkSidebarPanelScrollIntoView')
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        component.scrollPanelIntoView(event.detail.instanceId);
+      });
+  }
+
+  _setOpenedNow(open: boolean) {
+    this._el.setAttribute('data-open', String(open));
+    const { chat } = getSidebarClassnames();
+    if (!chat) return;
+    if (!open) {
+      if (
+        this._driver.getCurrentChatSidebarView().getMode() !== 'SIDEBAR' &&
+        this._mainParent.classList.contains(chat)
+      ) {
+        this._mainParent.classList.remove(chat);
+        this._driver.getPageCommunicator().fakeWindowResize();
+      }
+    } else {
+      if (
+        this._driver.getCurrentChatSidebarView().getMode() !== 'SIDEBAR' &&
+        !this._mainParent.classList.contains(chat)
+      ) {
+        this._mainParent.classList.add(chat);
+        this._driver.getPageCommunicator().fakeWindowResize();
+      }
+    }
+  }
+
+  _setOpenedAfterAnimation(open: boolean) {
+    this._el.setAttribute('data-is-opening', 'true');
+    waitForAnimationClickBlockerGone()
+      .takeUntilBy(this._stopper)
+      .takeUntilBy(
+        makeMutationObserverChunkedStream(this._el, {
+          attributes: true,
+          attributeFilter: ['data-open'],
+        })
+      )
+      .onValue(() => {
+        this._setOpenedNow(open);
+      })
+      .onEnd(() => {
+        this._el.setAttribute('data-is-opening', 'false');
+      });
+  }
+
+  addSidebarContentPanel(descriptor: Kefir.Observable<Object>) {
+    // There's only up to one sidebar in Inbox, so the ID doesn't really matter.
+    const view = new ContentPanelViewDriver(this._driver, descriptor, 'inbox');
+
+    if (
+      this._driver.getCurrentChatSidebarView().getMode() === 'SIDEBAR' ||
+      this._getShouldAppSidebarOpen()
+    ) {
+      this._setOpenedAfterAnimation(true);
+    }
+
+    this._stopper.takeUntilBy(view.getStopper()).onValue(() => {
+      view.remove();
+    });
+
+    return view;
+  }
+}
+
+export default defn(module, InboxAppSidebarView);

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

@@ -0,0 +1,236 @@
+/* @flow */
+
+import find from 'lodash/find';
+import includes from 'lodash/includes';
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import type LiveSet from 'live-set';
+import type { TagTreeNode } from 'tag-tree';
+import DropdownView from '../../../widgets/buttons/dropdown-view';
+import InboxAppToolbarTooltipView from './inbox-app-toolbar-tooltip-view';
+import type { ElementWithLifetime } from '../../../lib/dom/make-element-child-stream';
+import toItemWithLifetimeStream from '../../../lib/toItemWithLifetimeStream';
+import setCss from '../../../lib/dom/set-css';
+
+class InboxAppToolbarButtonView {
+  _buttonDescriptor: ?Object = null;
+  _buttonDescriptorStream: Kefir.Observable<Object>;
+  _buttonEl: ?HTMLElement = null;
+  _activeDropdown: ?DropdownView = null;
+  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
+  _ready: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
+
+  constructor(
+    buttonDescriptor: Kefir.Observable<Object>,
+    appToolbarLocationLiveSet: LiveSet<TagTreeNode<HTMLElement>>,
+    searchBarLiveSet: LiveSet<TagTreeNode<HTMLElement>>
+  ) {
+    this._buttonDescriptorStream = buttonDescriptor
+      .toProperty()
+      .takeUntilBy(this._stopper);
+
+    Kefir.combine(
+      [
+        toItemWithLifetimeStream(searchBarLiveSet).take(1),
+        toItemWithLifetimeStream(appToolbarLocationLiveSet).take(1),
+      ],
+      [],
+      (searchBar) => searchBar
+    )
+      .map(({ el: node }) => node.getValue())
+      .takeUntilBy(this._stopper)
+      .onValue((el) => this._adjustSearchBarMargin(el));
+
+    toItemWithLifetimeStream(appToolbarLocationLiveSet)
+      .take(1)
+      .map(({ el: node }) => node.getValue())
+      .takeUntilBy(this._stopper)
+      .onValue((el) => this._setupButton(el));
+  }
+
+  _setupButton(appToolbarLocation: HTMLElement) {
+    let appToolbarButtonContainer = find(appToolbarLocation.children, (el) =>
+      el.classList.contains('inboxsdk__appButton_container')
+    );
+    if (!appToolbarButtonContainer) {
+      appToolbarButtonContainer = document.createElement('div');
+      appToolbarButtonContainer.className = 'inboxsdk__appButton_container';
+      appToolbarLocation.insertBefore(
+        appToolbarButtonContainer,
+        appToolbarLocation.firstChild
+      );
+    }
+
+    const button = document.createElement('div');
+    button.tabIndex = 0;
+    button.setAttribute('role', 'button');
+    button.className = 'inboxsdk__appButton inboxsdk__button_icon';
+
+    const buttonImg = document.createElement('img');
+    buttonImg.className = 'inboxsdk__button_iconImg';
+    button.appendChild(buttonImg);
+
+    this._buttonDescriptorStream.onValue((buttonDescriptor) => {
+      button.title = buttonDescriptor.title;
+      buttonImg.src = buttonDescriptor.iconUrl;
+      buttonImg.className = `inboxsdk__button_iconImg ${
+        buttonDescriptor.iconClass || ''
+      }`;
+      this._buttonDescriptor = buttonDescriptor;
+    });
+
+    Kefir.merge([
+      Kefir.fromEvents(button, 'click'),
+      Kefir.fromEvents(button, 'keypress').filter((e) =>
+        includes([32 /*space*/, 13 /*enter*/], e.which)
+      ),
+    ])
+      .takeUntilBy(this._stopper)
+      .onValue((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this._activeDropdown) {
+          this.close();
+        } else {
+          if (
+            !this._buttonDescriptor ||
+            this._buttonDescriptor.hasDropdown !== false
+          ) {
+            this.open();
+          } else {
+            if (this._buttonDescriptor && this._buttonDescriptor.onClick) {
+              this._buttonDescriptor.onClick();
+            }
+          }
+        }
+      });
+
+    appToolbarButtonContainer.insertBefore(
+      button,
+      appToolbarButtonContainer.firstChild
+    );
+    this._buttonEl = button;
+
+    this._ready.destroy();
+
+    this._stopper.onValue(() => {
+      button.remove();
+    });
+  }
+
+  _adjustSearchBarMargin(searchBar: HTMLElement) {
+    const buttonWidth = 40;
+    const defaultMarginRight = 70;
+
+    const ATTR_NAME = 'data-inboxsdk-searchbar-min-margin-right';
+
+    const newMarginRight =
+      buttonWidth +
+      parseInt(
+        ((document.documentElement: any): HTMLElement).getAttribute(
+          ATTR_NAME
+        ) || '0'
+      );
+
+    const ruleClassName = 'inboxsdk__dynamic_resize_searchbar';
+
+    function setSheetRules(minMarginRight: number) {
+      ((document.documentElement: any): HTMLElement).setAttribute(
+        ATTR_NAME,
+        String(minMarginRight)
+      );
+      if (minMarginRight <= 0) {
+        setCss('dynamic_resize_searchbar', '');
+        return;
+      }
+      const important = minMarginRight > defaultMarginRight ? '!important' : '';
+
+      // When the page gets wider than this number, stop applying our override
+      // so that Inbox's margin:auto takes over.
+      const applyWhenPageWidthUnder = 1394 + 3.575 * minMarginRight;
+
+      // @media-scoped rule is for adjusting gmail stuff. Last rule is for
+      // adjusting icons from non-SDK extensions including Mixmax.
+      const rule = `
+@media (max-width: ${applyWhenPageWidthUnder}px) {
+  .${ruleClassName} {
+    margin-right: ${minMarginRight}px${important};
+  }
+}
+.inboxsdk__appButton_container + * + * ~ *:not(.inboxsdk_escape_mod) {
+  margin-right: ${minMarginRight}px${important};
+}
+`;
+      setCss('dynamic_resize_searchbar', rule);
+    }
+
+    setSheetRules(newMarginRight);
+
+    searchBar.classList.add(ruleClassName);
+    const { nextElementSibling } = searchBar;
+    if (nextElementSibling) {
+      nextElementSibling.classList.add(ruleClassName);
+    }
+
+    this._stopper.onValue(() => {
+      const newMarginRight =
+        parseInt(
+          ((document.documentElement: any): HTMLElement).getAttribute(
+            ATTR_NAME
+          ) || '0'
+        ) - buttonWidth;
+      setSheetRules(newMarginRight);
+    });
+  }
+
+  open() {
+    if (this._activeDropdown) return;
+    const button = this._buttonEl;
+    if (!button) throw new Error('should not happen');
+    button.classList.add('inboxsdk__active');
+    const { arrowColor } = this._buttonDescriptor || {};
+    const dropdown = (this._activeDropdown = new DropdownView(
+      new InboxAppToolbarTooltipView(button, arrowColor),
+      button
+    ));
+    dropdown.once('destroy', () => {
+      this._activeDropdown = null;
+      button.classList.remove('inboxsdk__active');
+    });
+    const appEvent = { dropdown };
+    if (this._buttonDescriptor && this._buttonDescriptor.onClick) {
+      this._buttonDescriptor.onClick.call(null, appEvent);
+    }
+  }
+
+  close() {
+    if (!this._activeDropdown) return;
+    this._activeDropdown.close();
+  }
+
+  waitForReady(): Promise<this> {
+    return this._ready
+      .map(() => this)
+      .merge(
+        this._stopper.flatMap(() =>
+          Kefir.constantError(
+            new Error('InboxAppToolbarButtonView was destroyed early')
+          )
+        )
+      )
+      .take(1)
+      .takeErrors(1)
+      .toPromise(Promise);
+  }
+
+  getStopper() {
+    return this._stopper;
+  }
+
+  destroy() {
+    this._stopper.destroy();
+  }
+}
+
+export default defn(module, InboxAppToolbarButtonView);