@inboxsdk/core 1.0.5 → 1.1.1

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

@@ -1,272 +0,0 @@
-"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 _findIndex = _interopRequireDefault(require("lodash/findIndex"));
-var _ud = require("ud");
-var _autoHtml = _interopRequireDefault(require("auto-html"));
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
-var _fakeWindowResize = _interopRequireDefault(require("../../../lib/fake-window-resize"));
-var _findParent = _interopRequireDefault(require("../../../../common/find-parent"));
-var _getSidebarClassnames = _interopRequireDefault(require("../getSidebarClassnames"));
-var _delayAsap = _interopRequireDefault(require("../../../lib/delay-asap"));
-var _waitForAnimationClickBlockerGone = _interopRequireDefault(require("../waitForAnimationClickBlockerGone"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-chunked-stream"));
-var _fromEventTargetCapture = _interopRequireDefault(require("../../../lib/from-event-target-capture"));
-var _orderManager = _interopRequireDefault(require("order-manager"));
-var _idMap = _interopRequireDefault(require("../../../lib/idMap"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
-var _incrementName = _interopRequireDefault(require("../../../lib/incrementName"));
-var _AppSidebar = _interopRequireDefault(require("../../../driver-common/sidebar/AppSidebar"));
-var _ContentPanelViewDriver = _interopRequireDefault(require("../../../driver-common/sidebar/ContentPanelViewDriver"));
-class InboxAppSidebarView {
-  constructor(driver) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    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('.' + (0, _idMap.default)('app_sidebar_container'));
-    if (el) {
-      this._el = el;
-    } else {
-      this._createElement();
-    }
-    const mainParent = (0, _findParent.default)((0, _querySelectorOrFail.default)(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 = (0, _makeMutationObserverChunkedStream.default)(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() {
-    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() {
-    return localStorage.getItem('inboxsdk__app_sidebar_should_open') === 'true';
-  }
-  _setShouldAppSidebarOpen(open) {
-    try {
-      localStorage.setItem('inboxsdk__app_sidebar_should_open', String(open));
-    } catch (err) {
-      console.error('error saving', err);
-    }
-  }
-  _createElement() {
-    const el = this._el = document.createElement('div');
-    el.className = (0, _idMap.default)('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.appendChild(el);
-    if (!document.body.querySelector('.' + (0, _idMap.default)('app_sidebar_waiting_platform'))) {
-      const waitingPlatform = document.createElement('div');
-      waitingPlatform.className = (0, _idMap.default)('app_sidebar_waiting_platform');
-      document.body.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.
-    (0, _fromEventTargetCapture.default)(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.default({
-      get() {
-        try {
-          return JSON.parse(localStorage.getItem('inboxsdk__sidebar_ordering') || 'null');
-        } catch (err) {
-          console.error('failed to read sidebar order data', err);
-        }
-      },
-      set(data) {
-        try {
-          localStorage.setItem('inboxsdk__sidebar_ordering', JSON.stringify(data));
-        } catch (err) {
-          console.error('failed to set sidebar order data', err);
-        }
-      }
-    });
-    let component;
-    const _appSidebarRefSetter = threadSidebarComponent => {
-      if (threadSidebarComponent) {
-        component = threadSidebarComponent;
-      }
-    };
-    const render = () => {
-      _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_AppSidebar.default, {
-        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.default.fromEvents(window, 'storage').filter(e => e.key === 'inboxsdk__sidebar_ordering').takeUntilBy(this._stopper).onValue(() => {
-      orderManager.reload();
-      render();
-    });
-    this._stopper.onValue(() => {
-      _reactDom.default.unmountComponentAtNode(el);
-      el.remove();
-    });
-    _kefir.default.fromEvents(document.body, 'inboxsdkNewSidebarPanel').takeUntilBy(this._stopper).onValue(event => {
-      let id = event.detail.id;
-      while (currentIds.has(id)) {
-        id = (0, _incrementName.default)(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.default.fromEvents(document.body, 'inboxsdkUpdateSidebarPanel').takeUntilBy(this._stopper).onValue(event => {
-      const orderedItems = orderManager.getOrderedItems();
-      const index = (0, _findIndex.default)(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.default.fromEvents(document.body, 'inboxsdkRemoveSidebarPanel').takeUntilBy(this._stopper).onValue(event => {
-      const orderedItems = orderManager.getOrderedItems();
-      const index = (0, _findIndex.default)(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.default.fromEvents(document.body, 'inboxsdkSidebarPanelScrollIntoView').takeUntilBy(this._stopper).onValue(event => {
-      component.scrollPanelIntoView(event.detail.instanceId);
-    });
-  }
-  _setOpenedNow(open) {
-    this._el.setAttribute('data-open', String(open));
-    const {
-      chat
-    } = (0, _getSidebarClassnames.default)();
-    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) {
-    this._el.setAttribute('data-is-opening', 'true');
-    (0, _waitForAnimationClickBlockerGone.default)().takeUntilBy(this._stopper).takeUntilBy((0, _makeMutationObserverChunkedStream.default)(this._el, {
-      attributes: true,
-      attributeFilter: ['data-open']
-    })).onValue(() => {
-      this._setOpenedNow(open);
-    }).onEnd(() => {
-      this._el.setAttribute('data-is-opening', 'false');
-    });
-  }
-  addSidebarContentPanel(descriptor) {
-    // There's only up to one sidebar in Inbox, so the ID doesn't really matter.
-    const view = new _ContentPanelViewDriver.default(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;
-  }
-}
-var _default = (0, _ud.defn)(module, InboxAppSidebarView);
-exports.default = _default;

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

@@ -1,161 +0,0 @@
-"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 _find = _interopRequireDefault(require("lodash/find"));
-var _includes = _interopRequireDefault(require("lodash/includes"));
-var _ud = require("ud");
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-var _dropdownView = _interopRequireDefault(require("../../../widgets/buttons/dropdown-view"));
-var _inboxAppToolbarTooltipView = _interopRequireDefault(require("./inbox-app-toolbar-tooltip-view"));
-var _toItemWithLifetimeStream = _interopRequireDefault(require("../../../lib/toItemWithLifetimeStream"));
-var _setCss = _interopRequireDefault(require("../../../lib/dom/set-css"));
-class InboxAppToolbarButtonView {
-  constructor(buttonDescriptor, appToolbarLocationLiveSet, searchBarLiveSet) {
-    (0, _defineProperty2.default)(this, "_buttonDescriptor", null);
-    (0, _defineProperty2.default)(this, "_buttonEl", null);
-    (0, _defineProperty2.default)(this, "_activeDropdown", null);
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    (0, _defineProperty2.default)(this, "_ready", (0, _kefirStopper.default)());
-    this._buttonDescriptorStream = buttonDescriptor.toProperty().takeUntilBy(this._stopper);
-    _kefir.default.combine([(0, _toItemWithLifetimeStream.default)(searchBarLiveSet).take(1), (0, _toItemWithLifetimeStream.default)(appToolbarLocationLiveSet).take(1)], [], searchBar => searchBar).map(_ref => {
-      let {
-        el: node
-      } = _ref;
-      return node.getValue();
-    }).takeUntilBy(this._stopper).onValue(el => this._adjustSearchBarMargin(el));
-    (0, _toItemWithLifetimeStream.default)(appToolbarLocationLiveSet).take(1).map(_ref2 => {
-      let {
-        el: node
-      } = _ref2;
-      return node.getValue();
-    }).takeUntilBy(this._stopper).onValue(el => this._setupButton(el));
-  }
-  _setupButton(appToolbarLocation) {
-    let appToolbarButtonContainer = (0, _find.default)(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.default.merge([_kefir.default.fromEvents(button, 'click'), _kefir.default.fromEvents(button, 'keypress').filter(e => (0, _includes.default)([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) {
-    const buttonWidth = 40;
-    const defaultMarginRight = 70;
-    const ATTR_NAME = 'data-inboxsdk-searchbar-min-margin-right';
-    const newMarginRight = buttonWidth + parseInt(document.documentElement.getAttribute(ATTR_NAME) || '0');
-    const ruleClassName = 'inboxsdk__dynamic_resize_searchbar';
-    function setSheetRules(minMarginRight) {
-      document.documentElement.setAttribute(ATTR_NAME, String(minMarginRight));
-      if (minMarginRight <= 0) {
-        (0, _setCss.default)('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};
-}
-`;
-      (0, _setCss.default)('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.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.default(new _inboxAppToolbarTooltipView.default(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() {
-    return this._ready.map(() => this).merge(this._stopper.flatMap(() => _kefir.default.constantError(new Error('InboxAppToolbarButtonView was destroyed early')))).take(1).takeErrors(1).toPromise(Promise);
-  }
-  getStopper() {
-    return this._stopper;
-  }
-  destroy() {
-    this._stopper.destroy();
-  }
-}
-var _default = (0, _ud.defn)(module, InboxAppToolbarButtonView);
-exports.default = _default;

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

@@ -1,58 +0,0 @@
-"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 _ud = require("ud");
-var _kefir = _interopRequireDefault(require("kefir"));
-var _kefirStopper = _interopRequireDefault(require("kefir-stopper"));
-class InboxAppToolbarTooltipView {
-  constructor(anchorElement, arrowColor) {
-    (0, _defineProperty2.default)(this, "_stopper", (0, _kefirStopper.default)());
-    this._anchorElement = anchorElement;
-    this._arrowEl = document.createElement('div');
-    this._arrowEl.className = 'inboxsdk__tooltip_arrow inboxsdk__bottom';
-    document.body.appendChild(this._arrowEl);
-    if (arrowColor) {
-      this._arrowEl.style.borderColor = arrowColor;
-    }
-    this._containerEl = document.createElement('div');
-    this._containerEl.className = 'inboxsdk__appButton_tooltip_container';
-    this._el = document.createElement('div');
-    this._el.className = 'inboxsdk__appButton_tooltip';
-    this._el.setAttribute('role', 'region');
-    this._containerEl.appendChild(this._el);
-    document.body.appendChild(this._containerEl);
-    this._reposition();
-  }
-  _reposition() {
-    const buttonPos = this._anchorElement.getBoundingClientRect();
-    const buttonCenter = buttonPos.left + buttonPos.width / 2;
-    this._arrowEl.style.top = `${buttonPos.bottom + 18}px`;
-    this._arrowEl.style.right = `${window.innerWidth - buttonPos.right + buttonPos.width / 2 - this._arrowEl.offsetWidth / 2 - 1}px`;
-    this._containerEl.style.top = `${buttonPos.bottom + 17}px`;
-    this._containerEl.style.minWidth = `${(window.innerWidth - buttonCenter - 30) * 2}px`;
-  }
-  getDropdownOptions() {
-    return {
-      manualPosition: true,
-      extraElementsToIgnore: [this._arrowEl]
-    };
-  }
-  getContentElement() {
-    return this._el;
-  }
-  getContainerElement() {
-    return this._containerEl;
-  }
-  destroy() {
-    this._containerEl.remove();
-    this._arrowEl.remove();
-    this._stopper.destroy();
-  }
-}
-var _default = (0, _ud.defn)(module, InboxAppToolbarTooltipView);
-exports.default = _default;