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

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);
+    };
+}

package/src/platform-implementation-js/views/compose-button-view.js

@@ -0,0 +1,45 @@
+import EventEmitter from '../lib/safe-event-emitter';
+import get from '../../common/get-or-fail';
+const memberMap = new WeakMap();
+export default class ComposeButtonView extends EventEmitter {
+    destroyed = false;
+    constructor(optionsPromise, composeViewDriver, driver) {
+        super();
+        const members = { optionsPromise, composeViewDriver, driver };
+        memberMap.set(this, members);
+        members.optionsPromise.then((options) => {
+            if (!options) {
+                _destroy(this);
+                return;
+            }
+            members.composeViewDriver.getStopper().onValue(() => {
+                _destroy(this);
+            });
+        });
+    }
+    showTooltip(tooltipDescriptor) {
+        const members = get(memberMap, this);
+        members.driver
+            .getLogger()
+            .eventSdkPassive('ComposeButtonView.showTooltip', {
+            keys: Object.keys(tooltipDescriptor),
+        });
+        members.optionsPromise.then((options) => {
+            if (!options)
+                return;
+            members.composeViewDriver.addTooltipToButton(options.buttonViewController, options.buttonDescriptor, tooltipDescriptor);
+        });
+    }
+    closeTooltip() {
+        const members = get(memberMap, this);
+        members.optionsPromise.then((options) => {
+            if (!options)
+                return;
+            members.composeViewDriver.closeButtonTooltip(options.buttonViewController);
+        });
+    }
+}
+function _destroy(composeButtonViewInstance) {
+    composeButtonViewInstance.destroyed = true;
+    composeButtonViewInstance.emit('destroy');
+}

package/src/platform-implementation-js/views/compose-view.js

@@ -0,0 +1,312 @@
+/* eslint-disable no-console */
+import EventEmitter from '../lib/safe-event-emitter';
+import Kefir from 'kefir';
+import kefirCast from 'kefir-cast';
+import * as ud from 'ud';
+import get from '../../common/get-or-fail';
+import ComposeButtonView from './compose-button-view';
+const memberMap = ud.defonce(module, () => new WeakMap());
+// documented in src/docs/
+export default class ComposeView extends EventEmitter {
+    destroyed = false;
+    constructor(driver, composeViewImplementation, membrane) {
+        super();
+        const members = {
+            driver,
+            membrane,
+            composeViewImplementation,
+        };
+        memberMap.set(this, members);
+        this.on('newListener', (eventName) => {
+            if (eventName === 'close') {
+                driver
+                    .getLogger()
+                    .deprecationWarning('composeView close event', 'composeView destroy event');
+                if (driver.getOpts().REQUESTED_API_VERSION !== 1) {
+                    console.error('The composeView close event was removed after API version 1');
+                }
+            }
+            else if (eventName === 'messageIDChange') {
+                driver
+                    .getLogger()
+                    .deprecationWarning('composeView messageIDChange event', 'composeView.getDraftID');
+                if (driver.getOpts().REQUESTED_API_VERSION !== 1) {
+                    console.error('The composeView messageIDChange event was removed after API version 1');
+                }
+            }
+            else if (eventName === 'linkPopOver') {
+                composeViewImplementation.setupLinkPopOvers();
+            }
+        });
+        members.composeViewImplementation.getEventStream().onValue((event) => {
+            if (event.eventName === 'destroy') {
+                this.destroyed = true;
+                if (driver.getOpts().REQUESTED_API_VERSION === 1) {
+                    this.emit('close'); /* deprecated */
+                }
+            }
+            else if (event.eventName === 'messageIDChange') {
+                if (driver.getOpts().REQUESTED_API_VERSION !== 1) {
+                    return;
+                }
+            }
+            this.emit(event.eventName, event.data);
+        });
+    }
+    addButton(buttonDescriptor) {
+        const members = get(memberMap, this);
+        const buttonDescriptorStream = kefirCast(Kefir, buttonDescriptor);
+        const optionsPromise = members.composeViewImplementation.addButton(buttonDescriptorStream, members.driver.getAppId(), { composeView: this });
+        return new ComposeButtonView(optionsPromise, members.composeViewImplementation, members.driver);
+    }
+    /*
+      // Incomplete
+      addInnerSidebar(options){
+          get(memberMap, this).composeViewImplementation.addInnerSidebar(options);
+      }
+  
+      // Incomplete
+      addOuterSidebar(options){
+          get(memberMap, this).composeViewImplementation.addOuterSidebar(options);
+      }
+      */
+    addComposeNotice(composeNoticeDescriptor) {
+        return get(memberMap, this).composeViewImplementation.addComposeNotice(composeNoticeDescriptor);
+    }
+    addStatusBar(statusBarDescriptor) {
+        return get(memberMap, this).composeViewImplementation.addStatusBar(statusBarDescriptor);
+    }
+    hideNativeStatusBar() {
+        return get(memberMap, this).composeViewImplementation.hideNativeStatusBar();
+    }
+    addRecipientRow(options) {
+        return {
+            destroy: get(memberMap, this).composeViewImplementation.addRecipientRow(kefirCast(Kefir, options)),
+        };
+    }
+    forceRecipientRowsOpen() {
+        return get(memberMap, this).composeViewImplementation.forceRecipientRowsOpen();
+    }
+    hideNativeRecipientRows() {
+        return get(memberMap, this).composeViewImplementation.hideNativeRecipientRows();
+    }
+    hideRecipientArea() {
+        return get(memberMap, this).composeViewImplementation.hideRecipientArea();
+    }
+    close() {
+        get(memberMap, this).composeViewImplementation.close();
+    }
+    send({ sendAndArchive } = { sendAndArchive: false }) {
+        get(memberMap, this).composeViewImplementation.send({ sendAndArchive });
+    }
+    discard() {
+        get(memberMap, this).composeViewImplementation.discard();
+    }
+    getMetadataForm() {
+        return get(memberMap, this).composeViewImplementation.getMetadataFormElement();
+    }
+    getSubjectInput() {
+        return get(memberMap, this).composeViewImplementation.getSubjectInput();
+    }
+    getBodyElement() {
+        return get(memberMap, this).composeViewImplementation.getBodyElement();
+    }
+    // NOT DOCUMENTED BECAUSE NOT SURE IF API USERS NEED THIS
+    // TODO remove?
+    getComposeID() {
+        const { driver, composeViewImplementation } = get(memberMap, this);
+        driver.getLogger().deprecationWarning('composeView.getComposeID');
+        if (driver.getOpts().REQUESTED_API_VERSION !== 1) {
+            throw new Error('This method was discontinued after API version 1');
+        }
+        return composeViewImplementation.getComposeID();
+    }
+    getInitialMessageID() {
+        return get(memberMap, this).composeViewImplementation.getInitialMessageID();
+    }
+    /* deprecated */
+    getMessageID() {
+        const { driver, composeViewImplementation } = get(memberMap, this);
+        driver
+            .getLogger()
+            .deprecationWarning('composeView.getMessageID', 'composeView.getDraftID');
+        if (driver.getOpts().REQUESTED_API_VERSION !== 1) {
+            throw new Error('This method was discontinued after API version 1');
+        }
+        return composeViewImplementation.getMessageID();
+    }
+    getThreadID() {
+        return get(memberMap, this).composeViewImplementation.getThreadID();
+    }
+    getDraftID() {
+        return get(memberMap, this).composeViewImplementation.getDraftID();
+    }
+    getCurrentDraftID() {
+        return get(memberMap, this).composeViewImplementation.getCurrentDraftID();
+    }
+    getHTMLContent() {
+        return get(memberMap, this).composeViewImplementation.getHTMLContent();
+    }
+    getSelectedBodyHTML() {
+        return (get(memberMap, this).composeViewImplementation.getSelectedBodyHTML() || '');
+    }
+    getSelectedBodyText() {
+        return (get(memberMap, this).composeViewImplementation.getSelectedBodyText() || '');
+    }
+    getSubject() {
+        return get(memberMap, this).composeViewImplementation.getSubject();
+    }
+    getTextContent() {
+        return get(memberMap, this).composeViewImplementation.getTextContent();
+    }
+    getToRecipients() {
+        return get(memberMap, this).composeViewImplementation.getToRecipients();
+    }
+    getCcRecipients() {
+        return get(memberMap, this).composeViewImplementation.getCcRecipients();
+    }
+    getBccRecipients() {
+        return get(memberMap, this).composeViewImplementation.getBccRecipients();
+    }
+    insertTextIntoBodyAtCursor(text) {
+        return get(memberMap, this).composeViewImplementation.insertBodyTextAtCursor(text);
+    }
+    insertHTMLIntoBodyAtCursor(html) {
+        return get(memberMap, this).composeViewImplementation.insertBodyHTMLAtCursor(html);
+    }
+    insertLinkChipIntoBodyAtCursor(text, url, iconUrl) {
+        if (!iconUrl ||
+            typeof iconUrl !== 'string' ||
+            iconUrl.indexOf('http') !== 0) {
+            console.warn('You must provide a publicly accessible iconUrl');
+            return;
+        }
+        return get(memberMap, this).composeViewImplementation.insertLinkChipIntoBody({
+            text: text,
+            url: url,
+            iconUrl: iconUrl,
+        });
+    }
+    insertLinkIntoBodyAtCursor(text, url) {
+        return get(memberMap, this).composeViewImplementation.insertLinkIntoBody(text, url);
+    }
+    isForward() {
+        return get(memberMap, this).composeViewImplementation.isForward();
+    }
+    isInlineReplyForm() {
+        return get(memberMap, this).composeViewImplementation.isInlineReplyForm();
+    }
+    isFullscreen() {
+        return get(memberMap, this).composeViewImplementation.isFullscreen();
+    }
+    setFullscreen(fullscreen) {
+        get(memberMap, this).composeViewImplementation.setFullscreen(fullscreen);
+    }
+    isMinimized() {
+        return get(memberMap, this).composeViewImplementation.isMinimized();
+    }
+    setMinimized(minimized) {
+        get(memberMap, this).composeViewImplementation.setMinimized(minimized);
+    }
+    setTitleBarColor(color) {
+        return get(memberMap, this).composeViewImplementation.setTitleBarColor(color);
+    }
+    setTitleBarText(text) {
+        return get(memberMap, this).composeViewImplementation.setTitleBarText(text);
+    }
+    async popOut() {
+        const nextComposeViewDriverPromise = get(memberMap, this).driver.getNextComposeViewDriver();
+        get(memberMap, this).composeViewImplementation.popOut();
+        const nextComposeViewDriver = await nextComposeViewDriverPromise;
+        return get(memberMap, this).membrane.get(nextComposeViewDriver);
+    }
+    isReply() {
+        return get(memberMap, this).composeViewImplementation.isReply();
+    }
+    setToRecipients(emails) {
+        get(memberMap, this).composeViewImplementation.setToRecipients(emails);
+    }
+    setCcRecipients(emails) {
+        get(memberMap, this).composeViewImplementation.setCcRecipients(emails);
+    }
+    setBccRecipients(emails) {
+        get(memberMap, this).composeViewImplementation.setBccRecipients(emails);
+    }
+    getFromContact() {
+        return get(memberMap, this).composeViewImplementation.getFromContact();
+    }
+    getFromContactChoices() {
+        return get(memberMap, this).composeViewImplementation.getFromContactChoices();
+    }
+    setFromEmail(email) {
+        get(memberMap, this).composeViewImplementation.setFromEmail(email);
+    }
+    setSubject(text) {
+        get(memberMap, this).composeViewImplementation.setSubject(text);
+    }
+    setBodyHTML(html) {
+        get(memberMap, this).composeViewImplementation.setBodyHTML(html);
+    }
+    setBodyText(text) {
+        get(memberMap, this).composeViewImplementation.setBodyText(text);
+    }
+    async attachFiles(files) {
+        if (files.length === 0) {
+            return;
+        }
+        if (!(files[0] instanceof Blob)) {
+            throw new Error('parameter must be an array of Blob objects');
+        }
+        return get(memberMap, this).composeViewImplementation.attachFiles(Array.from(files));
+    }
+    async attachInlineFiles(files) {
+        if (files.length === 0) {
+            return;
+        }
+        if (!(files[0] instanceof Blob)) {
+            throw new Error('parameter must be an array of Blob objects');
+        }
+        return get(memberMap, this).composeViewImplementation.attachInlineFiles(Array.from(files));
+    }
+    // Old alias that we should keep around until we're sure no one is using it.
+    dragFilesIntoCompose(files) {
+        const { driver } = get(memberMap, this);
+        driver
+            .getLogger()
+            .deprecationWarning('ComposeView.dragFilesIntoCompose', 'ComposeView.attachInlineFiles');
+        if (driver.getOpts().REQUESTED_API_VERSION !== 1) {
+            throw new Error('This method was discontinued after API version 1');
+        }
+        return this.attachInlineFiles(files);
+    }
+    //NOT DOCUMENTED BECAUSE STREAK-ONLY FOR NOW
+    getElement() {
+        return get(memberMap, this).composeViewImplementation.getElement();
+    }
+    registerRequestModifier(modifier) {
+        get(memberMap, this).composeViewImplementation.registerRequestModifier(modifier);
+    }
+    replaceSendButton({ el }) {
+        return get(memberMap, this).composeViewImplementation.replaceSendButton(el);
+    }
+    hideDiscardButton() {
+        return get(memberMap, this).composeViewImplementation.hideDiscardButton();
+    }
+    ensureFormattingToolbarIsHidden() {
+        get(memberMap, this).composeViewImplementation.ensureFormattingToolbarIsHidden();
+    }
+    ensureAppButtonToolbarsAreClosed() {
+        get(memberMap, this).composeViewImplementation.ensureAppButtonToolbarsAreClosed();
+    }
+    // TODO remove
+    overrideEditSubject() {
+        const { driver, composeViewImplementation } = get(memberMap, this);
+        driver.getLogger().deprecationWarning('composeView.overrideEditSubject');
+        if (driver.getOpts().REQUESTED_API_VERSION !== 1) {
+            throw new Error('This method was discontinued after API version 1');
+        }
+        if (typeof composeViewImplementation.overrideEditSubject === 'function') {
+            composeViewImplementation.overrideEditSubject();
+        }
+    }
+}

package/src/platform-implementation-js/views/keyboard-shortcut-handle.js

@@ -0,0 +1,14 @@
+import EventEmitter from '../lib/safe-event-emitter';
+// documented in src/docs/
+export default class KeyboardShortcutHandle extends EventEmitter {
+    chord;
+    description;
+    constructor(chord, description) {
+        super();
+        this.chord = chord;
+        this.description = description;
+    }
+    remove() {
+        this.emit('destroy');
+    }
+}

package/src/platform-implementation-js/widgets/buttons/basic-button-view-controller.js

@@ -0,0 +1,39 @@
+import kefirStopper from 'kefir-stopper';
+export default class BasicButtonViewController {
+    _activateFunction;
+    _view;
+    _stopper = kefirStopper();
+    constructor(options) {
+        this._activateFunction = options.activateFunction || options.onClick;
+        this._view = options.buttonView;
+        this._view
+            .getEventStream()
+            .filter((event) => event.eventName === 'click')
+            .onValue(() => {
+            this.activate();
+        });
+    }
+    getStopper() {
+        return this._stopper;
+    }
+    destroy() {
+        this._activateFunction = null;
+        this._view.destroy();
+        this._stopper.destroy();
+    }
+    update(options) {
+        this.getView().update(options);
+        this.setActivateFunction(options && (options.activateFunction || options.onClick));
+    }
+    getView() {
+        return this._view;
+    }
+    setActivateFunction(f) {
+        this._activateFunction = f;
+    }
+    activate() {
+        if (this._activateFunction) {
+            this._activateFunction({});
+        }
+    }
+}