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

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

@@ -0,0 +1,98 @@
+import kefirStopper from 'kefir-stopper';
+import DropdownView from './dropdown-view';
+export default class DropdownButtonViewController {
+    _view;
+    _dropdownShowFunction;
+    _dropdownView = null;
+    _DropdownViewDriverClass;
+    _dropdownPositionOptions;
+    _stopper = kefirStopper();
+    constructor(options) {
+        this._dropdownShowFunction = options.dropdownShowFunction;
+        this._DropdownViewDriverClass = options.dropdownViewDriverClass;
+        const view = (this._view = options.buttonView);
+        this._dropdownPositionOptions = options.dropdownPositionOptions;
+        view.getElement().setAttribute('aria-haspopup', 'true');
+        view.getElement().setAttribute('aria-pressed', 'false');
+        view.getElement().setAttribute('aria-expanded', 'false');
+        this._bindToViewEvents();
+    }
+    getStopper() {
+        return this._stopper;
+    }
+    destroy() {
+        if (this._view) {
+            this._view.destroy();
+            this._view = null;
+        }
+        if (this._dropdownView) {
+            this._dropdownView.close();
+            this._dropdownView = null;
+        }
+        this._stopper.destroy();
+    }
+    update(options) {
+        this.getView().update(options);
+        this.setDropdownShowFunction(options && options.dropdownShowFunction);
+    }
+    getView() {
+        if (!this._view)
+            throw new Error('Already destroyed');
+        return this._view;
+    }
+    setDropdownShowFunction(func) {
+        this._dropdownShowFunction = func;
+    }
+    showDropdown() {
+        this.hideDropdown();
+        const view = this._view;
+        if (!view)
+            throw new Error('Already destroyed');
+        view.activate();
+        const dropdownView = (this._dropdownView = new DropdownView(new this._DropdownViewDriverClass(), view.getElement(), undefined));
+        if (this._dropdownPositionOptions) {
+            dropdownView.setPlacementOptions(this._dropdownPositionOptions);
+        }
+        dropdownView.on('destroy', this._dropdownClosed.bind(this));
+        if (this._dropdownShowFunction) {
+            this._dropdownShowFunction({ dropdown: this._dropdownView });
+        }
+        view.getElement().setAttribute('aria-pressed', 'true');
+        view.getElement().setAttribute('aria-expanded', 'true');
+    }
+    hideDropdown() {
+        if (this._dropdownView) {
+            this._dropdownView.close();
+        }
+    }
+    isDropdownVisible() {
+        return !!this._dropdownView;
+    }
+    _bindToViewEvents() {
+        if (!this._view)
+            throw new Error('Already destroyed');
+        this._view
+            .getEventStream()
+            .filter((event) => event.eventName === 'click')
+            .onValue(() => {
+            this._toggleDropdownState();
+        });
+    }
+    _toggleDropdownState() {
+        if (this._dropdownView) {
+            this._dropdownView.close();
+        }
+        else {
+            this.showDropdown();
+        }
+    }
+    _dropdownClosed() {
+        const view = this._view;
+        if (view) {
+            view.deactivate();
+            this._dropdownView = null;
+            view.getElement().setAttribute('aria-pressed', 'false');
+            view.getElement().setAttribute('aria-expanded', 'false');
+        }
+    }
+}

package/src/platform-implementation-js/widgets/buttons/dropdown-view.js

@@ -0,0 +1,122 @@
+import asap from 'asap';
+import EventEmitter from '../../lib/safe-event-emitter';
+import Kefir from 'kefir';
+import makeMutationObserverChunkedStream from '../../lib/dom/make-mutation-observer-chunked-stream';
+import ScrollableContainByScreen from '../../lib/ScrollableContainByScreen';
+import outsideClicksAndEscape from '../../lib/dom/outsideClicksAndEscape';
+// documented in src/docs/
+export default class DropdownView extends EventEmitter {
+    _dropdownViewDriver;
+    destroyed = false;
+    /*deprecated*/ closed = false;
+    _options;
+    _userPlacementOptions = { hAlign: 'left' };
+    _scrollableContainByScreen = null;
+    _didInsertContainerEl;
+    el;
+    constructor(dropdownViewDriver, anchorElement, options) {
+        super();
+        this._dropdownViewDriver = dropdownViewDriver;
+        this._options = {
+            ...(dropdownViewDriver.getDropdownOptions &&
+                dropdownViewDriver.getDropdownOptions()),
+            ...options,
+        };
+        this.el = dropdownViewDriver.getContentElement();
+        const containerEl = dropdownViewDriver.getContainerElement();
+        if (document.contains(containerEl)) {
+            this._didInsertContainerEl = false;
+        }
+        else {
+            document.body.insertBefore(containerEl, document.body.firstElementChild);
+            this._didInsertContainerEl = true;
+        }
+        if (!containerEl.hasAttribute('tabindex')) {
+            // makes the element focusable, but not tab-focusable
+            containerEl.setAttribute('tabindex', '-1');
+        }
+        const onDestroy = Kefir.fromEvents(this, 'destroy');
+        const elementsToIgnore = [anchorElement, containerEl];
+        if (this._options.extraElementsToIgnore) {
+            elementsToIgnore.push(...this._options.extraElementsToIgnore);
+        }
+        outsideClicksAndEscape(elementsToIgnore)
+            .takeUntilBy(onDestroy)
+            .filter((event) => {
+            let isCanceled = false;
+            const appEvent = {
+                type: event.type,
+                cause: event.cause,
+                cancel: () => {
+                    isCanceled = true;
+                },
+            };
+            this.emit('preautoclose', appEvent);
+            return !isCanceled;
+        })
+            .onValue(() => {
+            this.close();
+        });
+        if (!this._options.manualPosition) {
+            containerEl.style.position = 'fixed';
+            asap(() => {
+                if (this.closed)
+                    return;
+                Kefir.fromEvents(this, '_placementOptionsUpdated')
+                    .toProperty(() => null)
+                    .takeUntilBy(onDestroy)
+                    .onValue(() => {
+                    if (this._scrollableContainByScreen) {
+                        this._scrollableContainByScreen.destroy();
+                    }
+                    this._scrollableContainByScreen = new ScrollableContainByScreen(containerEl, anchorElement, this._userPlacementOptions);
+                });
+                makeMutationObserverChunkedStream(dropdownViewDriver.getContentElement(), {
+                    childList: true,
+                    attributes: true,
+                    characterData: true,
+                    subtree: true,
+                })
+                    .throttle(200)
+                    .takeUntilBy(onDestroy)
+                    .onValue(() => this.reposition());
+            });
+        }
+        const startActiveElement = document.activeElement;
+        asap(() => {
+            if (this.closed)
+                return;
+            if (document.activeElement !== startActiveElement)
+                return;
+            // Needs to happen after it's been positioned.
+            containerEl.focus();
+        });
+    }
+    setPlacementOptions(options) {
+        if (this._options.manualPosition) {
+            // eslint-disable-next-line no-console
+            console.error('DropdownView.setPlacementOptions() was called on a manually-positioned DropdownView.');
+            return;
+        }
+        this._userPlacementOptions = { ...this._userPlacementOptions, ...options };
+        this.emit('_placementOptionsUpdated');
+    }
+    close() {
+        if (!this.destroyed) {
+            this.destroyed = this.closed = true;
+            if (this._scrollableContainByScreen) {
+                this._scrollableContainByScreen.destroy();
+            }
+            this.emit('destroy');
+            if (this._didInsertContainerEl) {
+                this._dropdownViewDriver.getContainerElement().remove();
+            }
+            this._dropdownViewDriver.destroy();
+        }
+    }
+    reposition() {
+        if (this._scrollableContainByScreen) {
+            this._scrollableContainByScreen.reposition();
+        }
+    }
+}