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

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-support-item-view.js

@@ -0,0 +1,84 @@
+import kefirStopper from 'kefir-stopper';
+export default class GmailSupportItemView {
+    _stopper = kefirStopper();
+    _driver;
+    _insertElementContainer = null;
+    constructor(driver, supportItemDescriptor) {
+        this._driver = driver;
+        this._setup(supportItemDescriptor);
+    }
+    destroy() {
+        this._stopper.destroy();
+        if (this._insertElementContainer) {
+            this._insertElementContainer.remove();
+            this._insertElementContainer = null;
+        }
+    }
+    _setup(supportItemDescriptor) {
+        const supportMenuNodes = this._driver
+            .getTagTree()
+            .getAllByTag('supportMenu');
+        const subscription = supportMenuNodes.subscribe((changes) => {
+            changes.forEach((change) => {
+                if (change.type === 'add') {
+                    this._addSupportElement(change.value.getValue(), supportItemDescriptor);
+                }
+                else if (change.type === 'remove') {
+                    if (this._insertElementContainer) {
+                        this._insertElementContainer.remove();
+                        this._insertElementContainer = null;
+                    }
+                }
+            });
+        });
+        this._stopper.onValue(() => subscription.unsubscribe());
+    }
+    _addSupportElement(supportElement, supportItemDescriptor) {
+        const insertElementContainer = document.createElement('div');
+        const menuItemAttributes = supportElement.children.item(0).attributes;
+        for (const attribute of menuItemAttributes) {
+            if (attribute.name === 'aria-label') {
+                continue;
+            }
+            if (attribute.name === 'class') {
+                const classes = `${attribute.value} inboxsdk__support_menuItem`;
+                insertElementContainer.setAttribute(attribute.name, classes);
+                continue;
+            }
+            insertElementContainer.setAttribute(attribute.name, attribute.value);
+        }
+        // Append to-be-inserted element
+        insertElementContainer.append(supportItemDescriptor.element);
+        // Adjust insert position to always be the last one before separator
+        let lastSeparatorItem = null;
+        for (const item of supportElement.children) {
+            if (item.getAttribute('role') === 'separator') {
+                lastSeparatorItem = item;
+            }
+        }
+        if (lastSeparatorItem) {
+            lastSeparatorItem.insertAdjacentElement('beforebegin', insertElementContainer);
+        }
+        else {
+            supportElement.append(insertElementContainer);
+        }
+        insertElementContainer.onclick = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            supportItemDescriptor.onClick();
+            this._closeSupportMenu(supportElement);
+        };
+        insertElementContainer.onkeypress = (event) => {
+            if (event.key === 'Enter') {
+                supportItemDescriptor.onClick();
+                this._closeSupportMenu(supportElement);
+            }
+        };
+    }
+    _closeSupportMenu(supportElement) {
+        if (supportElement.getAttribute('aria-hidden') != 'true') {
+            const button = supportElement.previousElementSibling;
+            button && button.click();
+        }
+    }
+}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/button-color-classes.js

@@ -0,0 +1,33 @@
+const ButtonColorClasses = {
+    default: {
+        INACTIVE_CLASS: 'T-I-ax7',
+        HOVER_CLASS: 'T-I-JW',
+        ACTIVE_CLASS: 'T-I-Kq',
+    },
+    flatIcon: {
+        INACTIVE_CLASS: 'J-Z-I',
+        HOVER_CLASS: 'J-Z-I-JW',
+        ACTIVE_CLASS: 'J-Z-I-KO',
+    },
+    pureIcon: {
+        INACTIVE_CLASS: 'inboxsdk__button_pureIcon_inactive',
+        HOVER_CLASS: 'inboxsdk__button_pureIcon_hover',
+        ACTIVE_CLASS: 'inboxsdk__button_pureIcon_active',
+    },
+    blue: {
+        INACTIVE_CLASS: 'T-I-atl',
+        HOVER_CLASS: 'T-I-JW',
+        ACTIVE_CLASS: 'T-I-JO',
+    },
+    red: {
+        INACTIVE_CLASS: 'T-I-KE',
+        HOVER_CLASS: 'T-I-JW',
+        ACTIVE_CLASS: 'T-I-JO',
+    },
+    green: {
+        INACTIVE_CLASS: 'inboxsdk__button_green_inactive',
+        HOVER_CLASS: 'inboxsdk__button_green_hover',
+        ACTIVE_CLASS: 'inboxsdk__button_green_active',
+    },
+};
+export default ButtonColorClasses;

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/button-view.js

@@ -0,0 +1,325 @@
+import includes from 'lodash/includes';
+import * as Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import Logger from '../../../../lib/logger';
+import { simulateHover } from '../../../../lib/dom/simulate-mouse-event';
+import keyboardShortcutStream from '../../../../lib/dom/keyboard-shortcut-stream';
+import BUTTON_COLOR_CLASSES from './button-color-classes';
+export default class ButtonView {
+    _element = document.createElement('div');
+    _innerElement = document.createElement('div');
+    _textElement;
+    _iconElement;
+    _iconImgElement;
+    _iconClass;
+    _iconUrl;
+    _title;
+    _tooltip;
+    _hasDropdown;
+    _buttonColor;
+    _isEnabled;
+    _keyboardShortcutHandle;
+    _eventStream;
+    constructor(options) {
+        this._hasDropdown = false;
+        this._isEnabled = options.enabled !== false;
+        this._iconClass = options.iconClass;
+        this._iconUrl = options.iconUrl;
+        this._title = options.text || options.title;
+        this._tooltip = options.tooltip || options.title;
+        this._hasDropdown = !!options.hasDropdown;
+        this._buttonColor = options.buttonColor || 'default';
+        this._keyboardShortcutHandle = options.keyboardShortcutHandle;
+        this._createElement(options);
+        this._eventStream = kefirBus();
+        this._setupEventStream();
+        this._setupAestheticEvents();
+        if (options.enabled !== false) {
+            this._setupKeyboardShortcutEvent();
+        }
+    }
+    destroy() {
+        this._element.remove();
+        this._eventStream.end();
+    }
+    getElement() {
+        return this._element;
+    }
+    getEventStream() {
+        return this._eventStream;
+    }
+    activate() {
+        this.addClass(BUTTON_COLOR_CLASSES[this._buttonColor].ACTIVE_CLASS);
+        this.addClass(BUTTON_COLOR_CLASSES[this._buttonColor].HOVER_CLASS);
+    }
+    deactivate() {
+        this.removeClass(BUTTON_COLOR_CLASSES[this._buttonColor].ACTIVE_CLASS);
+        this.removeClass(BUTTON_COLOR_CLASSES[this._buttonColor].HOVER_CLASS);
+    }
+    addClass(className) {
+        this._element.classList.add(className);
+    }
+    removeClass(className) {
+        this._element.classList.remove(className);
+    }
+    simulateHover() {
+        simulateHover(this._element);
+    }
+    setEnabled(value) {
+        this._setEnabled(value);
+    }
+    isEnabled() {
+        return this._isEnabled;
+    }
+    update(options) {
+        if (!options) {
+            this._element.style.display = 'none';
+            return;
+        }
+        else if (this._element.style.display === 'none') {
+            this._element.style.display = '';
+        }
+        if (options.buttonColor != this._buttonColor && this._buttonColor) {
+            this._updateButtonColor(options.buttonColor);
+        }
+        if (options.title != this._title) {
+            this._updateTitle(options.title);
+        }
+        if (options.tooltip != this._tooltip) {
+            this._updateTooltip(options.tooltip);
+        }
+        if (options.iconUrl != this._iconUrl) {
+            this._updateIconUrl(options.iconUrl);
+        }
+        if (options.iconClass != this._iconClass) {
+            this._updateIconClass(options.iconClass);
+        }
+        if (options.enabled === false || options.enabled === true) {
+            this._setEnabled(options.enabled);
+        }
+    }
+    _createElement(options) {
+        this._setupMainElement(options);
+        this._setupInnerElement(options);
+        this._createTextElement();
+        this._createIconElement();
+    }
+    _setupMainElement(options) {
+        this._element.setAttribute('class', 'T-I J-J5-Ji ar7 inboxsdk__button ' +
+            BUTTON_COLOR_CLASSES[this._buttonColor].INACTIVE_CLASS);
+        if (options.tooltip) {
+            this._element.setAttribute('aria-label', options.tooltip);
+        }
+        this._element.setAttribute('role', 'button');
+        this._element.setAttribute('tabindex', '0');
+        if (options.hasButtonToRight) {
+            this._element.classList.add('T-I-Js-IF');
+        }
+        if (options.hasButtonToLeft) {
+            this._element.classList.add('T-I-Js-Gs');
+        }
+        if (options.tooltip || options.title) {
+            this._element.setAttribute('data-tooltip', String(options.tooltip || options.title));
+        }
+        if (options.enabled === false) {
+            this._element.classList.add('inboxsdk__button_disabled');
+        }
+    }
+    _setupInnerElement(options) {
+        this._innerElement.classList.add('asa');
+        if (this._hasDropdown && !options.noArrow) {
+            this._innerElement.innerHTML =
+                '<div class="G-asx T-I-J3 - J-J5-Ji">&nbsp;</div>';
+        }
+        this._element.appendChild(this._innerElement);
+    }
+    _createTextElement() {
+        if (!this._title) {
+            return;
+        }
+        this._textElement = document.createElement('span');
+        this._textElement.setAttribute('class', 'inboxsdk__button_text');
+        this._textElement.textContent = this._title;
+        if (this._iconElement) {
+            const parent = this._iconElement.parentElement;
+            if (!parent)
+                throw new Error('Could not find parent');
+            parent.insertBefore(this._textElement, this._iconElement.nextSibling);
+        }
+        else {
+            this._innerElement.insertBefore(this._textElement, this._innerElement.firstElementChild);
+        }
+    }
+    _createIconElement() {
+        if (!this._iconClass && !this._iconUrl) {
+            return;
+        }
+        const iconElement = (this._iconElement = document.createElement('div'));
+        iconElement.classList.add('inboxsdk__button_icon');
+        if (this._iconClass) {
+            iconElement.innerHTML = '&nbsp;';
+            iconElement.setAttribute('class', 'inboxsdk__button_icon ' + this._iconClass);
+        }
+        if (this._iconUrl) {
+            this._createIconImgElement();
+        }
+        this._innerElement.insertBefore(iconElement, this._innerElement.firstElementChild);
+    }
+    _createIconImgElement() {
+        if (!this._iconElement) {
+            this._createIconElement();
+        }
+        const iconElement = this._iconElement;
+        if (!iconElement)
+            throw new Error('Should not happen');
+        if (iconElement.innerHTML !== '') {
+            iconElement.innerHTML = '';
+        }
+        const iconImgElement = (this._iconImgElement =
+            document.createElement('img'));
+        iconImgElement.classList.add('inboxsdk__button_iconImg');
+        if (this._iconUrl) {
+            iconImgElement.src = this._iconUrl;
+        }
+        else {
+            Logger.error(new Error('_createIconImgElement should not be called with null _iconUrl'));
+        }
+        iconElement.appendChild(iconImgElement);
+    }
+    _updateButtonColor(newButtonColor) {
+        this._element.classList.remove(BUTTON_COLOR_CLASSES[this._buttonColor].INACTIVE_CLASS);
+        this._buttonColor = newButtonColor;
+        this._element.classList.add(BUTTON_COLOR_CLASSES[this._buttonColor].INACTIVE_CLASS);
+    }
+    _updateTitle(newTitle) {
+        if (!this._title && newTitle) {
+            this._title = newTitle;
+            this._createTextElement();
+        }
+        else if (this._title && !newTitle && this._textElement) {
+            this._textElement.remove();
+            this._textElement = undefined;
+            this._title = newTitle;
+        }
+        else if (this._textElement) {
+            this._textElement.textContent = newTitle;
+            this._title = newTitle;
+        }
+    }
+    _updateTooltip(newTooltip) {
+        this._tooltip = newTooltip;
+        if (newTooltip) {
+            this._element.setAttribute('data-tooltip', newTooltip);
+        }
+        else {
+            this._element.removeAttribute('data-tooltip');
+        }
+    }
+    _updateIconUrl(newIconUrl) {
+        this._iconUrl = newIconUrl;
+        if (this._iconImgElement && !newIconUrl) {
+            this._iconImgElement.remove();
+            this._iconImgElement = undefined;
+        }
+        else if (!this._iconImgElement && newIconUrl) {
+            this._createIconImgElement();
+        }
+        if (this._iconImgElement && newIconUrl) {
+            this._iconImgElement.src = newIconUrl;
+        }
+    }
+    _updateIconClass(newIconClass) {
+        if (this._iconElement && !newIconClass && !this._iconUrl) {
+            this._iconElement.remove();
+            this._iconElement = undefined;
+        }
+        else if (!this._iconElement && newIconClass) {
+            this._createIconElement();
+        }
+        this._iconClass = newIconClass;
+        if (this._iconElement) {
+            this._iconElement.setAttribute('class', 'inboxsdk__button_icon ' + (newIconClass || ''));
+        }
+    }
+    _setEnabled(value) {
+        if (this._isEnabled === value) {
+            return;
+        }
+        this._isEnabled = value;
+        if (this._isEnabled) {
+            this._element.classList.remove('inboxsdk__button_disabled');
+        }
+        else {
+            this._element.classList.add('inboxsdk__button_disabled');
+        }
+        this._eventStream.emit({
+            eventName: 'enabledChanged',
+            isEnabled: this._isEnabled,
+        });
+        if (this._isEnabled) {
+            this._setupKeyboardShortcutEvent();
+        }
+    }
+    _setupEventStream() {
+        const clickEventStream = Kefir.fromEvents(this._element, 'click');
+        clickEventStream.onValue(function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this._eventStream.plug(clickEventStream
+            .filter(() => this.isEnabled())
+            .map(function (event) {
+            return {
+                eventName: 'click',
+                domEvent: event,
+            };
+        }));
+        const isEnterOrSpace = (event) => includes([32 /* space */, 13 /* enter */], event.which);
+        const keydownEventStream = Kefir.fromEvents(this._element, 'keydown').filter(() => this.isEnabled());
+        const enterEventStream = keydownEventStream.filter(isEnterOrSpace);
+        this._eventStream.plug(enterEventStream.map(function (event) {
+            return {
+                eventName: 'click',
+                domEvent: event,
+            };
+        }));
+        enterEventStream.onValue(function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        });
+    }
+    _setupKeyboardShortcutEvent() {
+        const keyboardShortcutHandle = this._keyboardShortcutHandle;
+        if (keyboardShortcutHandle) {
+            this._eventStream.plug(keyboardShortcutStream(keyboardShortcutHandle.chord)
+                .takeUntilBy(this._eventStream.filter(function (event) {
+                return (event.eventName === 'enabledChanged' &&
+                    event.isEnabled === false);
+            }))
+                .map(function (domEvent) {
+                return {
+                    eventName: 'click',
+                    domEvent: domEvent,
+                };
+            }));
+        }
+    }
+    _setupAestheticEvents() {
+        Kefir.fromEvents(this._element, 'mouseenter')
+            .filter(() => this.isEnabled())
+            .onValue(() => {
+            this._element.classList.add(BUTTON_COLOR_CLASSES[this._buttonColor].HOVER_CLASS);
+            this._element.classList.add('inboxsdk__button_hover');
+        });
+        Kefir.fromEvents(this._element, 'mouseleave').onValue(() => {
+            this._element.classList.remove(BUTTON_COLOR_CLASSES[this._buttonColor].HOVER_CLASS);
+            this._element.classList.remove('inboxsdk__button_hover');
+        });
+        Kefir.fromEvents(this._element, 'focus').onValue(() => {
+            this._element.classList.add('T-I-JO');
+        });
+        Kefir.fromEvents(this._element, 'blur').onValue(() => {
+            this._element.classList.remove('T-I-JO');
+        });
+    }
+}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/create-accessory-button-view.js

@@ -0,0 +1,58 @@
+import * as Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+export default class CreateAccessoryButtonView {
+    _element = document.createElement('div');
+    _eventStream = kefirBus();
+    _stopper = kefirStopper();
+    constructor() {
+        this._setupElement();
+        this._setupEventStream();
+    }
+    update() {
+        // noop
+    }
+    setEnabled() {
+        throw new Error('not implemented');
+    }
+    destroy() {
+        this._eventStream.end();
+        this._stopper.destroy();
+        this._element.remove();
+    }
+    getElement() {
+        return this._element;
+    }
+    getEventStream() {
+        return this._eventStream;
+    }
+    activate() {
+        const innerButtonElement = this._element.firstElementChild;
+        if (innerButtonElement)
+            innerButtonElement.classList.add('aj1');
+    }
+    deactivate() {
+        const innerButtonElement = this._element.firstElementChild;
+        if (innerButtonElement)
+            innerButtonElement.classList.remove('aj1');
+    }
+    _setupElement() {
+        this._element.setAttribute('class', 'nL aig');
+        this._element.setAttribute('style', 'left: 7px');
+        this._element.innerHTML = [
+            '<div class="pM aRw" style="display: inline-flex; margin-left: 16px;" role="button">',
+            '<div class="p6">',
+            '<div class="p8">▼</div>',
+            '</div>',
+            '</div>',
+        ].join('');
+    }
+    _setupEventStream() {
+        const clickEventStream = Kefir.fromEvents(this._element, 'click');
+        clickEventStream.onValue((event) => {
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this._eventStream.plug(clickEventStream.map((event) => ({ eventName: 'click', domEvent: event })));
+    }
+}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/create-parent-accessory-button-view.js

@@ -0,0 +1,55 @@
+import * as Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+export default class CreateParentAccessoryButtonView {
+    _element = document.createElement('div');
+    _eventStream = kefirBus();
+    _stopper = kefirStopper();
+    constructor() {
+        this._setupElement();
+        this._setupEventStream();
+    }
+    activate() {
+        const innerButtonElement = this._element.firstElementChild;
+        if (innerButtonElement) {
+            innerButtonElement.classList.add('aj1');
+        }
+    }
+    deactivate() {
+        const innerButtonElement = this._element.firstElementChild;
+        if (innerButtonElement) {
+            innerButtonElement.classList.remove('aj1');
+        }
+    }
+    destroy() {
+        this._element.remove();
+        this._eventStream.end();
+        this._stopper.destroy();
+    }
+    getElement() {
+        return this._element;
+    }
+    getEventStream() {
+        return this._eventStream;
+    }
+    setEnabled() {
+        throw new Error('not implemented');
+    }
+    update() {
+        // noop
+    }
+    _setupElement() {
+        this._element.setAttribute('class', 'Yh inboxsdk__navItem_parent_accessory_button');
+        this._element.setAttribute('role', 'button');
+        this._element.setAttribute('tabindex', '0');
+        this._element.setAttribute('type', 'button');
+    }
+    _setupEventStream() {
+        const clickEventStream = Kefir.fromEvents(this._element, 'click');
+        clickEventStream.onValue((event) => {
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this._eventStream.plug(clickEventStream.map((event) => ({ eventName: 'click', domEvent: event })));
+    }
+}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/modal-button-view.js

@@ -0,0 +1,96 @@
+import includes from 'lodash/includes';
+import * as Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+export default class ModalButtonView {
+    _element = document.createElement('button');
+    _title;
+    _tooltip;
+    _buttonColor;
+    _eventStream = kefirBus();
+    _isEnabled;
+    constructor(options) {
+        this._isEnabled = options.enabled !== false;
+        this._title = options.text || options.title;
+        this._tooltip = options.tooltip || options.title;
+        this._buttonColor = options.buttonColor || 'default';
+        this._createElement(options);
+        this._eventStream = kefirBus();
+        this._setupEventStream();
+    }
+    destroy() {
+        this._element.remove();
+        this._eventStream.end();
+    }
+    getElement() {
+        return this._element;
+    }
+    getEventStream() {
+        return this._eventStream;
+    }
+    setEnabled(value) {
+        this._setEnabled(value);
+    }
+    update() {
+        throw new Error('not implemented');
+    }
+    isEnabled() {
+        return this._isEnabled;
+    }
+    _createElement(options) {
+        if (options.isPrimary)
+            this._element.classList.add('J-at1-auR');
+        this._element.innerText = options.text || options.title || '';
+        if (options.tooltip) {
+            this._element.setAttribute('aria-label', options.tooltip);
+        }
+        this._element.setAttribute('role', 'button');
+        this._element.setAttribute('tabindex', '0');
+        if (options.tooltip || options.title) {
+            this._element.setAttribute('data-tooltip', String(options.tooltip || options.title));
+        }
+    }
+    _setEnabled(value) {
+        if (this._isEnabled === value) {
+            return;
+        }
+        this._isEnabled = value;
+        if (this._isEnabled) {
+            this._element.classList.remove('inboxsdk__button_disabled');
+        }
+        else {
+            this._element.classList.add('inboxsdk__button_disabled');
+        }
+        this._eventStream.emit({
+            eventName: 'enabledChanged',
+            isEnabled: this._isEnabled,
+        });
+    }
+    _setupEventStream() {
+        const clickEventStream = Kefir.fromEvents(this._element, 'click');
+        clickEventStream.onValue(function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        });
+        this._eventStream.plug(clickEventStream
+            .filter(() => this.isEnabled())
+            .map(function (event) {
+            return {
+                eventName: 'click',
+                domEvent: event,
+            };
+        }));
+        const isEnterOrSpace = (event) => includes([32 /* space */, 13 /* enter */], event.which);
+        const keydownEventStream = Kefir.fromEvents(this._element, 'keydown').filter(() => this.isEnabled());
+        const enterEventStream = keydownEventStream.filter(isEnterOrSpace);
+        this._eventStream.plug(enterEventStream.map(function (event) {
+            return {
+                eventName: 'click',
+                domEvent: event,
+            };
+        }));
+        enterEventStream.onValue(function (event) {
+            event.stopPropagation();
+            event.preventDefault();
+        });
+    }
+}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/more-dropdown-button-view.js

@@ -0,0 +1,30 @@
+import GenericButtonView from '../../../../lib/dom/generic-button-view';
+export default class MoreDropdownButtonView extends GenericButtonView {
+    _isActive = false;
+    constructor() {
+        super(document.createElement('div'));
+        const element = this._element;
+        element.setAttribute('class', 'nL aig');
+        const child = document.createElement('div');
+        child.setAttribute('class', 'pM aj0');
+        element.appendChild(child);
+        element.addEventListener('click', () => {
+            this._isActive = true;
+        });
+        element.addEventListener('mouseenter', () => {
+            child.classList.add('aj1');
+        });
+        element.addEventListener('mouseleave', () => {
+            if (!this._isActive) {
+                child.classList.remove('aj1');
+            }
+        });
+    }
+    activate() {
+        this.getElement().children[0].classList.add('aj1');
+    }
+    deactivate() {
+        this.getElement().children[0].classList.remove('aj1');
+        this._isActive = false;
+    }
+}

package/src/platform-implementation-js/dom-driver/gmail/widgets/buttons/more-parent-accessory-button-view.js

@@ -0,0 +1,10 @@
+import CreateParentAccessoryButtonView from './create-parent-accessory-button-view';
+export default class MoreParentAccessoryButtonView extends CreateParentAccessoryButtonView {
+    constructor() {
+        super();
+        // New Gmail left nav does not have a "more" parent level accessory icon (only "create").
+        // So we extend the CreateParentAccessoryButtonView and manually change the background-image.
+        this.getElement().style.backgroundImage =
+            'url(https://www.gstatic.com/images/icons/material/system_gm/2x/more_vert_black_20dp.png)';
+    }
+}