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

package/src/platform-implementation-js/views/app-menu-item-view.js

@@ -0,0 +1,257 @@
+import isEqual from 'lodash/isEqual';
+import kefir from 'kefir';
+import EventEmitter from '../lib/safe-event-emitter';
+import { GmailAppMenuItemView, NATIVE_CLASS, INBOXSDK_CLASS, } from '../dom-driver/gmail/views/gmail-app-menu-item-view';
+import { CollapsiblePanelView } from './collapsible-panel-view';
+import { addCollapsiblePanel } from '../dom-driver/gmail/gmail-driver/add-collapsible-panel';
+import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
+let prevNative = {
+    menuItem: null,
+    panel: null,
+    route: null,
+};
+const setPrevNative = (next) => {
+    prevNative = {
+        ...prevNative,
+        ...next,
+    };
+};
+/**
+ * Contains both a native Gmail app menu item and a collapsible panel.
+ */
+export class AppMenuItemView extends EventEmitter {
+    /**
+     * Native panels are HTMLElements, custom panels are CollapsiblePanelViews.
+     */
+    static #activePanel;
+    static #nativeMenuItemChangeStream = (() => {
+        const stream = kefir.stream((emitter) => {
+            const observer = new MutationObserver((mutations) => {
+                for (const mutation of mutations) {
+                    const { target } = mutation;
+                    if (mutation.type === 'attributes' &&
+                        target instanceof HTMLElement &&
+                        target.classList.contains(NATIVE_CLASS) &&
+                        !target.classList.contains(INBOXSDK_CLASS)) {
+                        if (target.classList.contains(GmailAppMenuItemView.elementCss.ACTIVE)) {
+                            emitter.emit(['activated', target]);
+                        }
+                        else if (target.classList.contains(GmailAppMenuItemView.elementCss.HOVER)) {
+                            emitter.emit(['hovered', target]);
+                        }
+                    }
+                }
+            });
+            const f = async () => {
+                const gmailAppMenu = await GmailElementGetter.getAppMenuAsync();
+                if (!gmailAppMenu) {
+                    return;
+                }
+                const { ACTIVE } = GmailAppMenuItemView.elementCss;
+                const nativeMenuItemSelector = `.${NATIVE_CLASS}.${ACTIVE}:not(.${INBOXSDK_CLASS})`;
+                const nativeActivePanel = AppMenuItemView.#getNativeActivePanel();
+                setPrevNative({
+                    menuItem: gmailAppMenu.querySelector(nativeMenuItemSelector),
+                    panel: nativeActivePanel,
+                });
+                AppMenuItemView.#activePanel = nativeActivePanel;
+                document.addEventListener('mousedown', (e) => {
+                    const { target } = e;
+                    if (!(target instanceof Element)) {
+                        return;
+                    }
+                    if (!gmailAppMenu.contains(target)) {
+                        return;
+                    }
+                    const closest = target.closest(`.${NATIVE_CLASS}:not(.${INBOXSDK_CLASS})`);
+                    if (closest) {
+                        emitter.emit(['mousedown-on-native-el', closest, e]);
+                    }
+                });
+                observer.observe(gmailAppMenu, {
+                    attributes: true,
+                    childList: true,
+                    subtree: true,
+                });
+            };
+            f();
+        });
+        return stream;
+    })();
+    static #getNativeActivePanel() {
+        const appMenuElement = GmailElementGetter.getAppMenuContainer();
+        const { ACTIVE, HOVER } = CollapsiblePanelView.elementCss;
+        const nativePanel = appMenuElement?.querySelector(`${CollapsiblePanelView.elementSelectors.NATIVE}.${ACTIVE}:not(.${HOVER}):not(${CollapsiblePanelView.elementSelectors.CUSTOM})`);
+        return nativePanel;
+    }
+    static #customMenuItems = new Set();
+    static {
+        AppMenuItemView.#nativeMenuItemChangeStream.onValue(async (e) => {
+            const [type, el /*, mouseEvent */] = e;
+            if (type === 'activated') {
+                AppMenuItemView.#activePanel = AppMenuItemView.#getNativeActivePanel();
+                await Promise.all(Array.from(AppMenuItemView.#customMenuItems).map(async (customMenuItem) => {
+                    await customMenuItem.#deactivate();
+                }));
+            }
+            if (type === 'mousedown-on-native-el') {
+                if (prevNative.menuItem !== el) {
+                    prevNative.menuItem = el;
+                    return;
+                }
+                else {
+                    const { menuItem, panel, route } = prevNative;
+                    prevNative.menuItem = el;
+                    if (route) {
+                        document.location.hash = route;
+                    }
+                    menuItem?.classList.add(GmailAppMenuItemView.elementCss.ACTIVE);
+                    menuItem.classList.remove(GmailAppMenuItemView.elementCss.HOVER);
+                    panel?.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+                    panel?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+                }
+            }
+        });
+    }
+    #driver;
+    #destroyed = false;
+    #gmailViewPromise;
+    #collapsiblePanel;
+    /** Denotes if either the collapsable panel or app menu item are hovered. */
+    #hovered = false;
+    constructor(driver, menuItemDescriptor) {
+        super();
+        this.#driver = driver;
+        const gmailAppMenuItemView = this.#driver.addAppMenuItem(menuItemDescriptor);
+        this.#gmailViewPromise = gmailAppMenuItemView;
+        gmailAppMenuItemView.then((gmailView) => {
+            if (this.#destroyed || !gmailView) {
+                return; //we have been removed already
+            }
+            // add callbacks and listeners here
+            gmailView.on('click', this.#onClick);
+            gmailView.on('destroy', () => this.remove());
+            gmailView.on('blur', this.#onBlur);
+            gmailView.on('hover', this.#onHover);
+            // handle routing
+            driver.getRouteViewDriverStream().onValue((routeView) => {
+                const routeViewID = routeView.getRouteID();
+                const routeViewParams = routeView.getParams();
+                const routeViewType = routeView.getRouteType();
+                // Ignore custom routes that don't have a route id
+                // TODO fix chat/spaces routes to have NATIVE routeViewTypes so we can gate on that instead.
+                if (!(routeViewType === 'UNKNOWN' && routeViewID === null)) {
+                    console.log({ routeViewID, routeViewType });
+                    if (routeViewType !== 'CUSTOM') {
+                        prevNative.route === document.location.hash;
+                    }
+                }
+                const { activeRouteID, routeID, routeParams, activeRouteParams } = gmailView.menuItemDescriptor ?? {};
+                let isActive = isEqual(activeRouteID || routeID, routeViewID);
+                if (isActive) {
+                    if (activeRouteParams) {
+                        isActive = isEqual(activeRouteParams, routeViewParams);
+                    }
+                    else if (routeParams) {
+                        isActive = isEqual(routeParams, routeViewParams);
+                    }
+                }
+                // deactivation is handled by the native menu item change stream
+                if (isActive) {
+                    this.#activate();
+                }
+            });
+        });
+        AppMenuItemView.#customMenuItems.add(this);
+    }
+    async addCollapsiblePanel(panelDescriptor) {
+        const collapsiblePanel = await addCollapsiblePanel(this.#driver, panelDescriptor);
+        if (collapsiblePanel) {
+            collapsiblePanel.on('blur', this.#onBlur);
+            collapsiblePanel.on('hover', this.#onHover);
+        }
+        this.#collapsiblePanel = collapsiblePanel;
+        return collapsiblePanel;
+    }
+    async update(menuItemDescriptor) {
+        const gmailView = await this.#gmailViewPromise;
+        gmailView.setMenuItemDescriptor(menuItemDescriptor);
+    }
+    remove() {
+        if (this.#destroyed)
+            return;
+        this.#destroyed = true;
+        AppMenuItemView.#customMenuItems.delete(this);
+        this.emit('destroy');
+        this.#collapsiblePanel?.remove();
+        this.#gmailViewPromise.then((gmailView) => gmailView.remove());
+    }
+    async #deactivate() {
+        const gmailView = await this.#gmailViewPromise;
+        gmailView.deactivate();
+        this.#collapsiblePanel?.deactivate();
+    }
+    async #activate() {
+        AppMenuItemView.#activePanel = this.#collapsiblePanel;
+        const gmailView = await this.#gmailViewPromise;
+        const appMenuElement = GmailElementGetter.getAppMenuContainer();
+        const { ACTIVE } = GmailAppMenuItemView.elementCss;
+        // Note this affects both the active app menu item and the collapsible panel.
+        for (const el of appMenuElement?.querySelectorAll(`.${ACTIVE}`) ?? []) {
+            el.classList.remove(ACTIVE);
+        }
+        gmailView.activate();
+        this.#collapsiblePanel?.activate();
+    }
+    #onBlur = async (e) => {
+        const gmailView = await this.#gmailViewPromise;
+        const { relatedTarget } = e;
+        const blurringMenuItem = relatedTarget instanceof Node &&
+            gmailView.element?.contains(relatedTarget);
+        const blurringPanel = relatedTarget instanceof Node &&
+            this.#collapsiblePanel?.element?.contains(relatedTarget);
+        if (blurringMenuItem || blurringPanel) {
+            return;
+        }
+        this.#hovered = false;
+        gmailView.blur();
+        const hasActivePanel = this.#hasActivePanel();
+        this.#collapsiblePanel?.blur(hasActivePanel);
+        if (!hasActivePanel) {
+            if (AppMenuItemView.#activePanel instanceof CollapsiblePanelView) {
+                AppMenuItemView.#activePanel?.activate();
+            }
+            else if (AppMenuItemView.#activePanel instanceof HTMLElement) {
+                AppMenuItemView.#activePanel.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+            }
+        }
+        this.emit('blur');
+    };
+    #hasActivePanel() {
+        return (this.#collapsiblePanel != null &&
+            AppMenuItemView.#activePanel === this.#collapsiblePanel);
+    }
+    #onHover = async (_e) => {
+        if (this.#hovered) {
+            return;
+        }
+        this.#hovered = true;
+        const gmailView = await this.#gmailViewPromise;
+        gmailView.hover();
+        const hasActivePanel = this.#hasActivePanel();
+        if (!hasActivePanel) {
+            if (AppMenuItemView.#activePanel instanceof CollapsiblePanelView) {
+                AppMenuItemView.#activePanel?.deactivate();
+            }
+            else if (AppMenuItemView.#activePanel instanceof HTMLElement) {
+                AppMenuItemView.#activePanel.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+            }
+        }
+        this.#collapsiblePanel?.hover(hasActivePanel);
+        this.emit('hover');
+    };
+    #onClick = () => {
+        this.#activate();
+        this.emit('click');
+    };
+}

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

@@ -1,73 +1,52 @@
-/* @flow */
-
-import EventEmitter from '../lib/safe-event-emitter';
-import get from '../../common/get-or-fail';
-import type { Driver } from '../driver-interfaces/driver';
-
-import type GmailAppToolbarButtonView from '../dom-driver/gmail/views/gmail-app-toolbar-button-view';
-import type InboxAppToolbarButtonView from '../dom-driver/inbox/views/inbox-app-toolbar-button-view';
-
-type AppToolbarButtonViewDriver =
-  | GmailAppToolbarButtonView
-  | InboxAppToolbarButtonView;
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _safeEventEmitter = _interopRequireDefault(require("../lib/safe-event-emitter"));
+var _getOrFail = _interopRequireDefault(require("../../common/get-or-fail"));
 const memberMap = new WeakMap();
 
 // Documented in src/docs/app-toolbar-button-view.js
-export default class AppToolbarButtonView extends EventEmitter {
-  destroyed: boolean;
-
-  constructor(
-    driver: Driver,
-    appToolbarButtonViewDriverPromise: Promise<AppToolbarButtonViewDriver>
-  ) {
+class AppToolbarButtonView extends _safeEventEmitter.default {
+  constructor(driver, appToolbarButtonViewDriverPromise) {
     super();
     const members = {
       appToolbarButtonViewDriverPromise,
-      appToolbarButtonViewDriver: (null: ?AppToolbarButtonViewDriver),
+      appToolbarButtonViewDriver: null
     };
     memberMap.set(this, members);
-
     this.destroyed = false;
-    members.appToolbarButtonViewDriverPromise.then(
-      (appToolbarButtonViewDriver) => {
-        members.appToolbarButtonViewDriver = appToolbarButtonViewDriver;
-        appToolbarButtonViewDriver.getStopper().onValue(() => {
-          this.destroyed = true;
-          this.emit('destroy');
-        });
-      }
-    );
-
+    members.appToolbarButtonViewDriverPromise.then(appToolbarButtonViewDriver => {
+      members.appToolbarButtonViewDriver = appToolbarButtonViewDriver;
+      appToolbarButtonViewDriver.getStopper().onValue(() => {
+        this.destroyed = true;
+        this.emit('destroy');
+      });
+    });
     driver.getStopper().onValue(() => {
       this.remove();
     });
   }
-
   open() {
-    const members = get(memberMap, this);
-    members.appToolbarButtonViewDriverPromise.then(function (
-      appToolbarButtonViewDriver
-    ) {
+    const members = (0, _getOrFail.default)(memberMap, this);
+    members.appToolbarButtonViewDriverPromise.then(function (appToolbarButtonViewDriver) {
       appToolbarButtonViewDriver.open();
     });
   }
-
   close() {
-    const members = get(memberMap, this);
-    members.appToolbarButtonViewDriverPromise.then(function (
-      appToolbarButtonViewDriver
-    ) {
+    const members = (0, _getOrFail.default)(memberMap, this);
+    members.appToolbarButtonViewDriverPromise.then(function (appToolbarButtonViewDriver) {
       appToolbarButtonViewDriver.close();
     });
   }
-
   remove() {
-    const members = get(memberMap, this);
-    members.appToolbarButtonViewDriverPromise.then(function (
-      appToolbarButtonViewDriver
-    ) {
+    const members = (0, _getOrFail.default)(memberMap, this);
+    members.appToolbarButtonViewDriverPromise.then(function (appToolbarButtonViewDriver) {
       appToolbarButtonViewDriver.destroy();
     });
   }
 }
+exports.default = AppToolbarButtonView;

package/src/platform-implementation-js/views/collapsible-panel-view.js

@@ -0,0 +1,222 @@
+import cx from 'classnames';
+import * as Kefir from 'kefir';
+import kefirCast from 'kefir-cast';
+import EventEmitter from '../lib/safe-event-emitter';
+import autoHtml from 'auto-html';
+import querySelector from '../lib/dom/querySelectorOrFail';
+import GmailElementGetter from '../dom-driver/gmail/gmail-element-getter';
+import NavItemView from './nav-item-view';
+const ELEMENT_CLASS = 'aqn oy8Mbf inboxsdk__collapsiblePanel';
+// const ELEMENT_CLASS_ACTIVE = `aqn oy8Mbf ${ACTIVE_CLASS_NAME_TOKEN}` as const;
+// const ELEMENT_CLASS_COLLAPSED =
+//   `aqn oy8Mbf ${COLLAPSED_CLASS_NAME_TOKEN}` as const;
+const PRIMARY_BUTTON_ELEMENT_CLASS = 'T-I T-I-KE L3';
+const PRIMARY_BUTTON_ELEMENT_SELECTOR = '.T-I.T-I-KE.L3';
+const NAV_MENU_CONTAINER_ELEMENT_SELECTOR = '.at9 .n3 .TK';
+export class CollapsiblePanelView extends EventEmitter {
+    static elementSelectors = {
+        NATIVE: '.aqn.oy8Mbf',
+        CUSTOM: '.inboxsdk__collapsiblePanel',
+    };
+    static elementCss = {
+        ACTIVE: 'apV',
+        COLLAPSED: 'aBa',
+        /** A hover popover has both ACTIVE _and_ HOVER */
+        HOVER: 'aJu',
+    };
+    #panelDescriptor;
+    #element;
+    #destroyed = false;
+    #id = Math.random().toFixed(3);
+    #ARIA_LABELLED_BY_ID = Math.random().toFixed(3);
+    #driver;
+    get element() {
+        return this.#element;
+    }
+    set panelDescriptor(panelDescriptor) {
+        this.#panelDescriptor = panelDescriptor;
+        this.#update();
+    }
+    constructor(driver) {
+        super();
+        this.#driver = driver;
+        this.#element = this.#setupElement();
+        this.#element.addEventListener('mouseover', this.#onHover);
+        this.#element.addEventListener('mouseout', this.#onBlur);
+    }
+    toggleCollapse(collapsed) {
+        const element = this.element;
+        if (!element)
+            return;
+        const { COLLAPSED } = CollapsiblePanelView.elementCss;
+        if (collapsed) {
+            element.classList.add(COLLAPSED);
+        }
+        else {
+            element.classList.remove(COLLAPSED);
+        }
+        this.emit('toggle', collapsed);
+    }
+    /**
+     * @internal
+     */
+    blur(isActivePanel) {
+        const { element } = this;
+        if (!element)
+            return;
+        element.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+        if (!isActivePanel) {
+            element.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+        }
+        element.style.removeProperty('height');
+    }
+    /**
+     * @internal
+     */
+    hover(isActivePanel) {
+        const { element } = this;
+        const { ACTIVE, HOVER } = CollapsiblePanelView.elementCss;
+        if (!element || element.classList.contains(ACTIVE))
+            return;
+        element.classList.add(HOVER);
+        if (!isActivePanel) {
+            element.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+        }
+        element.style.cssText = 'height: 785px;';
+    }
+    /**
+     * @internal
+     */
+    activate() {
+        const element = this.element;
+        if (!element)
+            return;
+        element?.classList.remove(CollapsiblePanelView.elementCss.HOVER);
+        element.classList.add(CollapsiblePanelView.elementCss.ACTIVE);
+    }
+    /**
+     * @internal
+     */
+    deactivate() {
+        const element = this.element;
+        if (!element)
+            return;
+        element.classList.remove(CollapsiblePanelView.elementCss.ACTIVE);
+    }
+    remove() {
+        if (this.#destroyed)
+            return;
+        this.#destroyed = true;
+        this.element?.remove();
+        this.emit('destroy');
+    }
+    addNavItem(navItemDescriptor) {
+        const element = this.element;
+        if (!element)
+            return;
+        const navMenuContainerElement = querySelector(element, NAV_MENU_CONTAINER_ELEMENT_SELECTOR);
+        const appId = `collapsible-panel-${this.#id}`;
+        const navItemDescriptorPropertyStream = kefirCast(Kefir, navItemDescriptor).toProperty();
+        const gmailNavItemView = this.#driver.addNavItem(appId, navItemDescriptorPropertyStream, navMenuContainerElement);
+        const navItemView = new NavItemView(appId, this.#driver, navItemDescriptorPropertyStream, gmailNavItemView);
+        return navItemView;
+    }
+    #setupElement() {
+        const { iconUrl: themedIcons, className, name = '', } = this.#panelDescriptor?.primaryButton ?? {};
+        const element = document.createElement('div');
+        element.className = ELEMENT_CLASS;
+        const primaryButtonClass = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
+        let iconUrl;
+        if (themedIcons) {
+            if (GmailElementGetter.isDarkTheme()) {
+                iconUrl = themedIcons.darkTheme;
+            }
+            else {
+                iconUrl = themedIcons.lightTheme;
+            }
+        }
+        element.innerHTML = autoHtml `
+      <div class="aBO">
+        <div class="aic">
+          <div class="z0">
+            <div class="${primaryButtonClass}" style="user-select: none" role="button" tabindex="0">
+              ${name}
+            </div>
+          </div>
+        </div>
+        <div class="at9">
+          <div class="Ls77Lb aZ6">
+            <div class="pp" style="user-select: none;">
+              <div>
+                <div class="nM">
+                  <div class="aic"></div>
+                  <div class="yJ">
+                    <div class="ajl aib aZ6" aria-labelledby="${this.#ARIA_LABELLED_BY_ID}">
+                      <h2 class="aWk" id="${this.#ARIA_LABELLED_BY_ID}">Labels</h2>
+                      <div class="wT">
+                        <div class="n3">
+                          <div class="byl">
+                            <div class="TK"></div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="aTV" style="top: 27px;"></div>
+    `.trim();
+        const primaryBtnEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
+        primaryBtnEl.style.setProperty('--background-image', iconUrl ? `url(${iconUrl})` : 'unset');
+        primaryBtnEl.addEventListener('click', this.#onPrimaryButtonClick);
+        return element;
+    }
+    #onPrimaryButtonClick = (e) => {
+        this.#panelDescriptor?.primaryButton?.onClick?.(e);
+    };
+    #update() {
+        const element = this.element;
+        if (!element)
+            return;
+        const { ACTIVE, COLLAPSED } = CollapsiblePanelView.elementCss;
+        const isActive = element.classList.contains(ACTIVE);
+        const isCollapsed = element.classList.contains(COLLAPSED);
+        element.className = cx(ELEMENT_CLASS, this.#panelDescriptor?.className, {
+            [ACTIVE]: isActive,
+            [COLLAPSED]: isCollapsed,
+        });
+        this.#updateName(element);
+        this.#updateIcon(element);
+    }
+    #updateIcon(element) {
+        const iconContainerEl = querySelector(element, PRIMARY_BUTTON_ELEMENT_SELECTOR);
+        const { iconUrl, className } = this.#panelDescriptor?.primaryButton ?? {};
+        if (iconUrl) {
+            const backgroundImage = `url(${GmailElementGetter.isDarkTheme()
+                ? iconUrl.darkTheme
+                : iconUrl.lightTheme})`;
+            iconContainerEl.style.setProperty('--background-image', backgroundImage);
+        }
+        else {
+            iconContainerEl.style.setProperty('--background-image', 'unset');
+        }
+        iconContainerEl.className = cx(PRIMARY_BUTTON_ELEMENT_CLASS, className);
+    }
+    #updateName(element) {
+        const buttonTextEl = element.querySelector(PRIMARY_BUTTON_ELEMENT_SELECTOR);
+        if (!buttonTextEl) {
+            return;
+        }
+        buttonTextEl.textContent = this.#panelDescriptor?.primaryButton?.name ?? '';
+    }
+    #onBlur = (e) => {
+        this.emit('blur', e);
+    };
+    #onHover = (e) => {
+        this.emit('hover', e);
+    };
+}