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

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

@@ -0,0 +1,75 @@
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+
+class InboxAppToolbarTooltipView {
+  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
+  _anchorElement: HTMLElement;
+  _el: HTMLElement;
+  _containerEl: HTMLElement;
+  _arrowEl: HTMLElement;
+
+  constructor(anchorElement: HTMLElement, arrowColor: ?string) {
+    this._anchorElement = anchorElement;
+
+    this._arrowEl = document.createElement('div');
+    this._arrowEl.className = 'inboxsdk__tooltip_arrow inboxsdk__bottom';
+    ((document.body: any): HTMLElement).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: any): HTMLElement).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();
+  }
+}
+
+export default defn(module, InboxAppToolbarTooltipView);

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-attachment-card-view.js

@@ -0,0 +1,252 @@
+/* @flow */
+
+import includes from 'lodash/includes';
+import { defn } from 'ud';
+import autoHtml from 'auto-html';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+import findParent from '../../../../common/find-parent';
+import querySelector from '../../../lib/dom/querySelectorOrFail';
+import type InboxDriver from '../inbox-driver';
+import type InboxMessageView from './inbox-message-view';
+import type InboxAttachmentOverlayView from './inbox-attachment-overlay-view';
+
+import type { Parsed } from '../detection/attachmentCard/parser';
+
+class InboxAttachmentCardView {
+  _stopper = kefirStopper();
+  _previewClicks = Kefir.pool();
+  _element: HTMLElement;
+  _driver: InboxDriver;
+  _type: string;
+  _p: ?Parsed; // This is only present for native cards
+  _messageViewDriver: ?InboxMessageView;
+  _addedButtonDescriptors: Object[] = [];
+  _overlayView: ?InboxAttachmentOverlayView = null;
+
+  constructor(options: Object, driver: InboxDriver) {
+    this._driver = driver;
+    if (options.element) {
+      this._element = options.element;
+      this._p = options.parsed;
+      this._type = options.parsed.attributes.type;
+
+      Kefir.merge([
+        Kefir.fromEvents(this._element, 'click'),
+        Kefir.fromEvents(this._element, 'keydown'),
+      ])
+        .takeUntilBy(this._stopper)
+        .onValue(() => {
+          this._driver.setLastInteractedAttachmentCardView(this);
+        });
+    } else {
+      this._type = 'CUSTOM';
+      this._createNewElement(options);
+    }
+
+    this._messageViewDriver = this._findMessageView();
+    if (this._messageViewDriver) {
+      this._messageViewDriver.addAttachmentCardViewDriver(this);
+    }
+  }
+
+  destroy() {
+    if (!this._p) {
+      this._element.remove();
+    }
+    this._stopper.destroy();
+  }
+
+  _findMessageView(): ?InboxMessageView {
+    const map = this._driver.getMessageViewElementsMap();
+    const messageViewElement = findParent(this._element, (el) =>
+      map.has((el: any))
+    );
+    if (!messageViewElement) return null;
+    return map.get(messageViewElement);
+  }
+
+  _createNewElement(options: Object) {
+    if (options.previewUrl) {
+      this._element = document.createElement('a');
+      this._element.href = options.previewUrl;
+    } else {
+      this._element = document.createElement('div');
+      this._element.tabIndex = 0;
+    }
+    this._element.title = options.title;
+
+    const setupInnerHtml = (options) => {
+      if (options.previewThumbnailUrl) {
+        this._element.className =
+          'inboxsdk__attachment_card inboxsdk__attachment_card_with_preview';
+        this._element.innerHTML = autoHtml`
+          <img alt="" aria-hidden="true"
+            style="width: 100%"
+            src="${options.previewThumbnailUrl}"
+            >
+          <div class="inboxsdk__attachment_card_hover_overlay">
+            <div class="inboxsdk__attachment_card_title">${options.title}</div>
+            <div class="inboxsdk__attachment_card_buttons"></div>
+          </div>
+        `;
+        if (options.failoverPreviewIconUrl) {
+          Kefir.fromEvents(querySelector(this._element, 'img'), 'error')
+            .take(1)
+            .takeUntilBy(this._stopper)
+            .onValue(() => {
+              setupInnerHtml({
+                ...options,
+                previewThumbnailUrl: null,
+                iconThumbnailUrl: options.failoverPreviewIconUrl,
+              });
+            });
+        }
+      } else {
+        this._element.className = 'inboxsdk__attachment_card';
+        this._element.innerHTML = autoHtml`
+          <div class="inboxsdk__attachment_card_nohover">
+            <div class="inboxsdk__attachment_card_title">${options.title}</div>
+            <div class="inboxsdk__attachment_card_description">
+              <img alt="" aria-hidden="true" src="${options.fileIconImageUrl}">
+              <span>${options.description || ''}</span>
+            </div>
+          </div>
+          <div class="inboxsdk__attachment_card_hover_overlay">
+            <div class="inboxsdk__attachment_card_title">${options.title}</div>
+            <div class="inboxsdk__attachment_card_buttons"></div>
+          </div>
+        `;
+      }
+
+      options.buttons.forEach((button) => {
+        this.addButton(button);
+      });
+    };
+    setupInnerHtml(options);
+    this._previewClicks.plug(
+      Kefir.merge([
+        Kefir.fromEvents(this._element, 'click'),
+        Kefir.fromEvents(this._element, 'keypress').filter((e) =>
+          includes([32 /*space*/, 13 /*enter*/], e.which)
+        ),
+      ])
+    );
+
+    options.container.appendChild(this._element);
+  }
+
+  getElement() {
+    return this._element;
+  }
+
+  getMessageViewDriver() {
+    return this._messageViewDriver;
+  }
+
+  getStopper(): Kefir.Observable<null> {
+    return this._stopper;
+  }
+
+  getPreviewClicks(): Kefir.Observable<Event> {
+    return this._previewClicks.takeUntilBy(this._stopper);
+  }
+
+  getAttachmentType(): string {
+    return this._type;
+  }
+
+  getAddedButtonDescriptors() {
+    return this._addedButtonDescriptors;
+  }
+
+  addButton(button: Object): void {
+    this._addedButtonDescriptors.push(button);
+    if (!this._p) {
+      // artificial SDK-added card. Native cards don't have their added buttons
+      // processed here. They're added in InboxAttachmentOverlayView.
+      const buttonContainer = querySelector(
+        this._element,
+        '.inboxsdk__attachment_card_buttons'
+      );
+      const el = document.createElement('button');
+      el.className = 'inboxsdk__attachment_card_button';
+      if (button.downloadUrl) {
+        el.setAttribute('data-inboxsdk-download-url', button.downloadUrl);
+        (el: any).addEventListener('click', (event: MouseEvent) => {
+          event.stopPropagation();
+          event.preventDefault();
+          let prevented = false;
+          if (button.onClick) {
+            button.onClick({
+              preventDefault() {
+                prevented = true;
+              },
+            });
+          }
+          if (prevented) return;
+          const downloadLink = document.createElement('a');
+          downloadLink.href = button.downloadUrl;
+          if (button.downloadFilename) {
+            downloadLink.download = button.downloadFilename;
+          }
+          downloadLink.addEventListener(
+            'click',
+            function (e: MouseEvent) {
+              e.stopPropagation();
+            },
+            true
+          );
+          if (button.openInNewTab) {
+            downloadLink.setAttribute('target', '_blank');
+          }
+          ((document.body: any): HTMLElement).appendChild(downloadLink);
+          downloadLink.click();
+          downloadLink.remove();
+        });
+        el.innerHTML = `
+          <div style="background: no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAYElEQVQ4y+2UMQ6AQAgEwfhQnnJP4adjc4UxB0ehhXqbULE7BRAUkLu1yQP6OXQveEab1DXTD0O9b53kIui+QReicnJ5lM2gArQA2LLcDCqAXYA2y1SgZ7BV/Lr+6TugB0K2GxxDXjEZAAAAAElFTkSuQmCC)"></div>
+        `;
+      } else {
+        el.addEventListener('click', (event: MouseEvent) => {
+          event.stopPropagation();
+          event.preventDefault();
+          if (button.onClick) {
+            button.onClick({
+              getDownloadURL() {
+                throw new Error(
+                  'not implemented for artificial sdk-added cardViews!'
+                );
+              },
+            });
+          }
+        });
+        el.innerHTML = autoHtml`
+          <img src="${button.iconUrl}">
+        `;
+        el.title = button.tooltip;
+      }
+      buttonContainer.appendChild(el);
+    }
+  }
+
+  getTitle(): string {
+    return this._element.title;
+  }
+
+  async getDownloadURL(): Promise<?string> {
+    const overlayView = this._overlayView;
+    if (!overlayView)
+      throw new Error(
+        'This method only works during a button onClick callback in Inbox'
+      );
+    return overlayView.getDownloadURL();
+  }
+
+  setOverlay(overlayView: ?InboxAttachmentOverlayView) {
+    this._overlayView = overlayView;
+  }
+}
+
+export default defn(module, InboxAttachmentCardView);

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-attachment-overlay-view.js

@@ -0,0 +1,108 @@
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import autoHtml from 'auto-html';
+
+import sharedStyle from '../../../lib/shared-style';
+import customStyle from '../../../dom-driver/inbox/custom-style';
+import { simulateClick } from '../../../lib/dom/simulate-mouse-event';
+import ajax from '../../../../common/ajax';
+
+import type InboxDriver from '../inbox-driver';
+import type { Parsed } from '../detection/attachmentOverlay/parser';
+import type InboxAttachmentCardView from './inbox-attachment-card-view';
+
+class InboxAttachmentOverlayView {
+  _driver: InboxDriver;
+  _el: HTMLElement;
+  _p: Parsed;
+  _cardView: InboxAttachmentCardView;
+  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
+
+  constructor(
+    driver: InboxDriver,
+    el: HTMLElement,
+    parsed: Parsed,
+    cardView: InboxAttachmentCardView
+  ) {
+    this._driver = driver;
+    this._el = el;
+    this._p = parsed;
+    this._cardView = cardView;
+
+    // The element is within a same-origin iframe
+    sharedStyle(el.ownerDocument);
+    customStyle(el.ownerDocument);
+
+    this._cardView.setOverlay(this);
+
+    this._cardView.getAddedButtonDescriptors().forEach((button) => {
+      this.addButton(button);
+    });
+  }
+
+  destroy() {
+    this._cardView.setOverlay(null);
+    this._stopper.destroy();
+  }
+
+  getStopper(): Kefir.Observable<null> {
+    return this._stopper;
+  }
+
+  addButton(button: Object) {
+    const { downloadButton, buttonContainer } = this._p.elements;
+    if (!buttonContainer)
+      throw new Error('Missing buttonContainer, can not add button');
+
+    const el = document.createElement('button');
+    el.className = 'inboxsdk__attachment_overlay_button';
+    el.addEventListener('click', (event: MouseEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      if (button.onClick) {
+        button.onClick({
+          getDownloadURL: () => this.getDownloadURL(),
+        });
+      }
+    });
+    el.innerHTML = autoHtml`
+      <img src="${button.iconUrl}">
+    `;
+    el.setAttribute('data-tooltip-delay', '500');
+    el.setAttribute('data-tooltip-unhoverable', 'true');
+    if (downloadButton) {
+      el.setAttribute(
+        'data-tooltip-class',
+        downloadButton.getAttribute('data-tooltip-class') || ''
+      );
+      el.setAttribute(
+        'data-tooltip-align',
+        downloadButton.getAttribute('data-tooltip-align') || ''
+      );
+    }
+    el.setAttribute('aria-label', button.tooltip);
+    el.setAttribute('data-tooltip', button.tooltip);
+
+    buttonContainer.insertBefore(el, buttonContainer.lastElementChild);
+    this._stopper.onValue(() => {
+      el.remove();
+    });
+  }
+
+  async getDownloadURL(): Promise<?string> {
+    const { downloadButton } = this._p.elements;
+    if (!downloadButton)
+      throw new Error('Could not find download button element');
+    const src = await this._driver
+      .getPageCommunicator()
+      .clickAndGetNewIframeSrc(downloadButton);
+    const { xhr } = await ajax({ url: src, method: 'HEAD' });
+    const url = (xhr: any).responseURL;
+    return url;
+  }
+}
+
+export default defn(module, InboxAttachmentOverlayView);

package/src/platform-implementation-js/dom-driver/inbox/views/inbox-backdrop.js

@@ -0,0 +1,74 @@
+/* @flow */
+
+import { defn } from 'ud';
+import Kefir from 'kefir';
+import kefirBus from 'kefir-bus';
+import type { Bus } from 'kefir-bus';
+import kefirStopper from 'kefir-stopper';
+
+class InboxBackdrop {
+  _preAutoCloseStream: Bus<Object> = kefirBus();
+  _stopper: Kefir.Observable<null> & { destroy(): void } = kefirStopper();
+  _el: HTMLElement;
+
+  constructor(
+    zIndex: number = 500,
+    target: HTMLElement = (document.body: any)
+  ) {
+    const el = (this._el = document.createElement('div'));
+    el.className = 'inboxsdk__inbox_backdrop';
+    el.style.zIndex = String(zIndex);
+
+    Kefir.fromEvents(el, 'click')
+      .filter((event) => {
+        let isCanceled = false;
+        const appEvent = {
+          type: 'outsideInteraction',
+          cause: event,
+          cancel: () => {
+            isCanceled = true;
+          },
+        };
+        this._preAutoCloseStream.emit(appEvent);
+        return !isCanceled;
+      })
+      .onValue((e: MouseEvent) => {
+        this.destroy();
+      });
+
+    if (!target) throw new Error('no target');
+    target.appendChild(el);
+
+    this._stopper.onValue(() => {
+      el.classList.remove('inboxsdk__active');
+      Kefir.fromEvents(el, 'transitionend')
+        .merge(Kefir.later(200)) // transition might not finish if element is hidden
+        .take(1)
+        .onValue(() => {
+          el.remove();
+        });
+    });
+
+    el.offsetHeight; // force layout so that adding this class does a transition.
+    el.classList.add('inboxsdk__active');
+  }
+
+  getElement(): HTMLElement {
+    return this._el;
+  }
+
+  getPreAutoCloseStream(): Kefir.Observable<Object> {
+    return this._preAutoCloseStream;
+  }
+
+  getStopper(): Kefir.Observable<null> {
+    return this._stopper;
+  }
+
+  destroy() {
+    this._preAutoCloseStream.end();
+    this._stopper.destroy();
+  }
+}
+
+export default defn(module, InboxBackdrop);

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

@@ -0,0 +1,55 @@
+/* @flow */
+
+import { defn } from 'ud';
+import once from 'lodash/once';
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+import type { Parsed } from '../detection/chatSidebar/parser';
+import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
+
+export type Mode = 'HIDDEN' | 'DROPDOWN' | 'SIDEBAR';
+
+class InboxChatSidebarView {
+  _el: HTMLElement;
+  _p: Parsed;
+  _stopper = kefirStopper();
+
+  constructor(el: HTMLElement, p: Parsed) {
+    this._el = el;
+    this._p = p;
+  }
+
+  getStopper(): Kefir.Observable<null> {
+    return this._stopper;
+  }
+
+  destroy() {
+    this._stopper.destroy();
+  }
+
+  getMode(): Mode {
+    const parent: HTMLElement = (this._el.parentElement: any);
+    const parentComputedStyle = window.getComputedStyle(parent);
+    if (parseInt(parentComputedStyle.bottom) === 0) {
+      return 'SIDEBAR';
+    }
+    if (parseInt(parentComputedStyle.top) > 0) {
+      return 'DROPDOWN';
+    }
+    return 'HIDDEN';
+  }
+
+  getModeStream: () => Kefir.Observable<Mode> = once(() => {
+    const parent: HTMLElement = (this._el.parentElement: any);
+    return makeMutationObserverChunkedStream(parent, {
+      attributes: true,
+      attributeFilter: ['class'],
+    })
+      .toProperty(() => null)
+      .map(() => this.getMode())
+      .skipDuplicates()
+      .takeUntilBy(this._stopper);
+  });
+}
+
+export default defn(module, InboxChatSidebarView);