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

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-button.js

@@ -0,0 +1,197 @@
+/* @flow */
+
+import Kefir from 'kefir';
+import type GmailDriver from '../../gmail-driver';
+import GmailComposeButtonView from './gmail-compose-button-view';
+import BasicButtonViewController from '../../../../widgets/buttons/basic-button-view-controller';
+import DropdownButtonViewController from '../../../../widgets/buttons/dropdown-button-view-controller';
+import GmailDropdownView from '../../widgets/gmail-dropdown-view';
+import insertElementInOrder from '../../../../lib/dom/insert-element-in-order';
+
+import type GmailComposeView from '../gmail-compose-view';
+
+export default function addButton(
+  gmailComposeView: GmailComposeView,
+  buttonDescriptorStream: Kefir.Observable<?Object>,
+  groupOrderHint: string,
+  extraOnClickOptions: Object
+): Promise<?Object> {
+  return new Promise((resolve, reject) => {
+    let buttonViewController;
+
+    buttonDescriptorStream
+      .takeUntilBy(gmailComposeView.getStopper())
+      .onValue((buttonDescriptor: ?Object) => {
+        const buttonOptions = _processButtonDescriptor(
+          buttonDescriptor,
+          extraOnClickOptions,
+          gmailComposeView.getGmailDriver()
+        );
+
+        if (!buttonViewController) {
+          if (buttonOptions) {
+            buttonViewController = _addButton(
+              gmailComposeView,
+              buttonOptions,
+              groupOrderHint
+            );
+            resolve({
+              buttonViewController: buttonViewController,
+              buttonDescriptor: buttonDescriptor,
+            });
+          }
+        } else {
+          buttonViewController.update(buttonOptions);
+        }
+      })
+      .onEnd(() => {
+        // Just in case things end without ever resolving above.
+        resolve(null);
+      });
+  });
+}
+
+function _addButton(
+  gmailComposeView: GmailComposeView,
+  buttonOptions: Object,
+  groupOrderHint: string
+) {
+  if (
+    !gmailComposeView.getElement() ||
+    !gmailComposeView.getFormattingToolbar()
+  ) {
+    return;
+  }
+
+  let buttonViewController;
+  if (buttonOptions.type === 'MODIFIER') {
+    buttonViewController = _addButtonToModifierArea(
+      gmailComposeView,
+      buttonOptions,
+      groupOrderHint
+    );
+  } else if (buttonOptions.type === 'SEND_ACTION') {
+    buttonViewController = _addButtonToSendActionArea(
+      gmailComposeView,
+      buttonOptions
+    );
+  }
+
+  gmailComposeView.getElement().dispatchEvent(
+    new CustomEvent('buttonAdded', {
+      bubbles: false,
+      cancelable: false,
+      detail: null,
+    })
+  );
+
+  return buttonViewController;
+}
+
+function _addButtonToModifierArea(
+  gmailComposeView: GmailComposeView,
+  buttonDescriptor: Object,
+  groupOrderHint: string
+) {
+  var buttonViewController = _getButtonViewController(buttonDescriptor);
+  buttonViewController.getView().getElement().setAttribute('tabindex', '1');
+  buttonViewController
+    .getView()
+    .getElement()
+    .setAttribute('data-order-hint', String(buttonDescriptor.orderHint || 0));
+  buttonViewController
+    .getView()
+    .getElement()
+    .setAttribute('data-group-order-hint', groupOrderHint);
+
+  var formattingAreaOffsetLeft =
+    gmailComposeView._getFormattingAreaOffsetLeft();
+  var element: HTMLElement = buttonViewController.getView().getElement();
+  var actionToolbar: HTMLElement =
+    gmailComposeView.getAdditionalActionToolbar();
+
+  insertElementInOrder(actionToolbar, element);
+  gmailComposeView.updateInsertMoreAreaLeft(formattingAreaOffsetLeft);
+
+  gmailComposeView.addManagedViewController(buttonViewController);
+
+  return buttonViewController;
+}
+
+function _addButtonToSendActionArea(gmailComposeView, buttonDescriptor) {
+  const buttonViewController = _getButtonViewController(buttonDescriptor);
+  buttonViewController.getView().removeClass('inboxsdk__composeButton');
+  buttonViewController.getView().addClass('inboxsdk__compose_sendButton');
+  buttonViewController.getView().getElement().setAttribute('tabindex', '1');
+
+  const sendButtonGroupElement = gmailComposeView.getSendButtonGroup();
+
+  const buttonElement: HTMLElement = buttonViewController
+    .getView()
+    .getElement();
+  const parent: HTMLElement = (sendButtonGroupElement.parentElement: any);
+  parent.insertBefore(buttonElement, sendButtonGroupElement.nextSibling);
+
+  gmailComposeView.addManagedViewController(buttonViewController);
+
+  return buttonViewController;
+}
+
+function _getButtonViewController(buttonDescriptor: Object) {
+  const buttonView = new GmailComposeButtonView(buttonDescriptor);
+  const options = { buttonView, ...buttonDescriptor };
+
+  let buttonViewController;
+  if (buttonDescriptor.hasDropdown) {
+    Object.assign(options, {
+      dropdownViewDriverClass: GmailDropdownView,
+      dropdownPositionOptions: { vAlign: 'top' },
+    });
+
+    buttonViewController = new DropdownButtonViewController(options);
+  } else {
+    buttonViewController = new BasicButtonViewController(options);
+  }
+
+  return buttonViewController;
+}
+
+function _processButtonDescriptor(
+  buttonDescriptor: ?Object,
+  extraOnClickOptions: Object,
+  driver: GmailDriver
+): ?Object {
+  // clone the descriptor and set defaults.
+  if (!buttonDescriptor) {
+    return null;
+  }
+
+  const buttonOptions = {
+    type: 'MODIFIER',
+    ...buttonDescriptor,
+  };
+
+  const oldOnClick = buttonOptions.onClick;
+  buttonOptions.onClick = function (event) {
+    driver.getLogger().eventSdkActive('composeView.addedButton.click');
+    oldOnClick({ ...extraOnClickOptions, ...event });
+  };
+
+  if (buttonOptions.hasDropdown) {
+    buttonOptions.dropdownShowFunction = buttonOptions.onClick;
+  } else {
+    buttonOptions.activateFunction = buttonOptions.onClick;
+  }
+
+  buttonOptions.noArrow = true;
+  buttonOptions.tooltip = buttonOptions.tooltip || buttonOptions.title;
+  delete buttonOptions.title;
+
+  if (buttonOptions.type === 'MODIFIER') {
+    buttonOptions.buttonColor = 'flatIcon';
+  } else if (buttonOptions.type === 'SEND_ACTION') {
+    buttonOptions.buttonColor = 'blue';
+  }
+
+  return buttonOptions;
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-compose-notice.js

@@ -0,0 +1,76 @@
+/* @flow */
+
+import Kefir from 'kefir';
+import kefirStopper from 'kefir-stopper';
+
+import insertElementInOrder from '../../../../lib/dom/insert-element-in-order';
+import Logger from '../../../../lib/logger';
+import querySelector from '../../../../lib/dom/querySelectorOrFail';
+import SimpleElementView from '../../../../views/SimpleElementView';
+
+import type GmailComposeView from '../gmail-compose-view';
+import type { Stopper } from 'kefir-stopper';
+
+export default function addComposeNotice(
+  gmailComposeView: GmailComposeView,
+  options: {
+    orderHint?: number,
+  }
+) {
+  const { orderHint } = {
+    orderHint: 0,
+    ...options,
+  };
+
+  const composeNotice = new ComposeNotice(gmailComposeView, orderHint);
+
+  gmailComposeView
+    .getStopper()
+    .takeUntilBy(Kefir.fromEvents(composeNotice, 'destroy'))
+    .onValue(() => composeNotice.destroy());
+
+  return composeNotice;
+}
+
+class ComposeNotice extends SimpleElementView {
+  _gmailComposeView: GmailComposeView;
+  _orderHint: number;
+  _stopper = kefirStopper();
+
+  constructor(gmailComposeView: GmailComposeView, orderHint: number) {
+    let el = document.createElement('div');
+    el.style.fontFamily = 'Roboto,RobotoDraft,Helvetica,Arial,sans-serif';
+    el.style.fontSize = '14px';
+
+    super(el);
+    this._gmailComposeView = gmailComposeView;
+    this._orderHint = orderHint;
+
+    el.className = 'inboxsdk__compose_notice';
+    el.setAttribute('data-order-hint', String(orderHint));
+
+    this._setComposeNotice();
+  }
+
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+
+    super.destroy();
+    this._stopper.destroy();
+  }
+
+  _setComposeNotice() {
+    try {
+      const composeTable = querySelector(
+        this._gmailComposeView.getElement(),
+        '.iN'
+      );
+
+      insertElementInOrder(composeTable, this.el, ['data-order-hint'], true);
+    } catch (err) {
+      Logger.error(err);
+    }
+  }
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-inner-sidebar.js

@@ -0,0 +1,34 @@
+/* @flow */
+
+import type GmailComposeView from '../gmail-compose-view';
+
+type Options = {
+  title: string,
+  el: HTMLElement,
+};
+
+export default function addInnerSidebar(
+  gmailComposeView: GmailComposeView,
+  options: Options
+) {
+  // if(!gmailComposeView.getAdditionalAreas().innerSidebar){
+  // 	_createInnerSidebar(gmailComposeView);
+  // }
+  //
+  // gmailComposeView.getAdditionalAreas().innerSidebar.appendChild(options.el);
+}
+
+// function _createInnerSidebar(gmailComposeView){
+// 	var sidebar = document.createElement('div');
+// 	sidebar.classList.add('inboxsdk__compose_innerSidebar');
+//
+// 	var borderColor = gmailComposeView.getElement().querySelector('.aoD').getComputedStyle().getPropertyValue('border-bottom-color');
+//
+// 	sidebar.style.borderLeft = '1px solid ' + borderColor;
+// 	sidebar.style.borderBottom = '1px solid ' + borderColor;
+//
+// 	gmailComposeView.getElement().querySelector('.I5').appendChild(sidebar);
+// 	gmailComposeView.getElement().classList.add('inboxsdk__compose_innerSidebarActive');
+//
+// 	gmailComposeView.getAdditionalAreas().innerSidebar = sidebar;
+// }

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-outer-sidebar.js

@@ -0,0 +1,46 @@
+/* @flow */
+
+import type GmailComposeView from '../gmail-compose-view';
+
+type Options = {
+  title: string,
+  el: HTMLElement,
+};
+
+export default function addOuterSidebar(
+  gmailComposeView: GmailComposeView,
+  options: Options
+) {
+  // if(!gmailComposeView.getAdditionalAreas().outerSidebar){
+  // 	_createOuterSidebar(gmailComposeView);
+  // }
+  //
+  // gmailComposeView.getAdditionalAreas().outerSidebar.querySelector('.inboxsdk__compose_outerSidebar_header').innerHTML = escape(options.title);
+  // gmailComposeView.getAdditionalAreas().outerSidebar.querySelector('.inboxsdk__compose_outerSidebar_footer').appendChild(options.el);
+}
+
+function _createOuterSidebar(gmailComposeView: GmailComposeView) {
+  const outerSidebar = document.createElement('div');
+  outerSidebar.classList.add('inboxsdk__compose_outerSidebar_wrapper');
+
+  const header = document.createElement('div');
+  header.classList.add('inboxsdk__compose_outerSidebar_header');
+  outerSidebar.appendChild(header);
+
+  const body = document.createElement('div');
+  body.classList.add('inboxsdk__compose_outerSidebar_body');
+  outerSidebar.appendChild(body);
+
+  const footer = document.createElement('div');
+  footer.classList.add('inboxsdk__compose_outerSidebar_footer');
+  footer.classList.add('aDh');
+  outerSidebar.append(footer);
+
+  gmailComposeView.getElement().appendChild(outerSidebar);
+  // gmailComposeView.getAdditionalAreas().outerSidebar = outerSidebar;
+
+  ((document.body: any): HTMLElement).classList.add(
+    'inboxsdk__outerSidebarActive'
+  );
+  // gmailComposeView.getElement().addClass('inboxsdk__compose_outerSidebarActive');
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-recipient-row.js

@@ -0,0 +1,97 @@
+/* @flow */
+
+import Kefir from 'kefir';
+
+import blockAndReemiteKeyboardEvents from '../../../../lib/dom/block-and-reemit-keyboard-events';
+import { getRecipientRowElements } from './page-parser';
+
+import type GmailComposeView from '../gmail-compose-view';
+
+export default function addRecipientRow(
+  gmailComposeView: GmailComposeView,
+  recipientRowOptionStream: Kefir.Observable<?Object>
+): () => void {
+  let row;
+
+  recipientRowOptionStream
+    .takeUntilBy(gmailComposeView.getStopper())
+    .onValue((options) => {
+      if (row) {
+        row.remove();
+        row = null;
+      }
+
+      if (options) {
+        row = _createRecipientRowElement(gmailComposeView, options);
+        blockAndReemiteKeyboardEvents(row);
+      }
+      gmailComposeView.getElement().dispatchEvent(
+        new CustomEvent('resize', {
+          bubbles: false,
+          cancelable: false,
+          detail: null,
+        })
+      );
+    });
+
+  return () => {
+    if (row) {
+      row.remove();
+      row = null;
+      gmailComposeView.getElement().dispatchEvent(
+        new CustomEvent('resize', {
+          bubbles: false,
+          cancelable: false,
+          detail: null,
+        })
+      );
+    }
+  };
+}
+
+function _createRecipientRowElement(
+  gmailComposeView: GmailComposeView,
+  options: Object
+): HTMLElement {
+  var row = document.createElement('tr');
+  var labelTD = document.createElement('td');
+  var contentTD = document.createElement('td');
+
+  row.appendChild(labelTD);
+  row.appendChild(contentTD);
+
+  row.setAttribute('class', 'inboxsdk__recipient_row');
+
+  if (options.labelText) {
+    labelTD.setAttribute('class', 'ok');
+
+    var span = document.createElement('span');
+    span.setAttribute('class', 'gO');
+
+    labelTD.appendChild(span);
+    span.textContent = options.labelText;
+
+    if (options.labelClass) {
+      labelTD.classList.add(options.labelClass);
+    }
+
+    if (options.labelTextClass) {
+      span.classList.add(options.labelTextClass);
+    }
+  }
+
+  if (options.el) {
+    contentTD.setAttribute('class', 'az3');
+    contentTD.appendChild(options.el);
+  }
+
+  var firstRowElement = getRecipientRowElements(
+    gmailComposeView.getElement()
+  )[0];
+  var parent: HTMLElement = (firstRowElement.parentElement: any);
+  parent.insertBefore(row, firstRowElement.nextSibling);
+  const addressBarContainer = parent.closest('.fX');
+  addressBarContainer &&
+    addressBarContainer.classList.add('inboxsdk__compose_addressList');
+  return row;
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-status-bar.d.ts

@@ -20,3 +20,4 @@ declare class StatusBar extends SimpleElementView implements IStatusBar {
     private _updateTotalHeight;
     private _setStatusBar;
 }
+//# sourceMappingURL=add-status-bar.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-status-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"add-status-bar.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-status-bar.ts"],"names":[],"mappings":"AAQA,OAAO,iBAAiB,MAAM,qCAAqC,CAAC;AAEpE,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAErD,OAAO,EAAE,SAAS,IAAI,UAAU,EAAE,MAAM,mDAAmD,CAAC;;AAE5F,wBAA0C;AAE1C,iBAAS,YAAY,CACnB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE;IACP,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC,GACA,SAAS,CAqBX;AAaD,cAAM,SAAU,SAAQ,iBAAkB,YAAW,UAAU;IAC7D,OAAO,CAAC,wBAAwB,CAAU;IAC1C,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,sBAAsB,CAAc;IAC5C,OAAO,CAAC,iBAAiB,CAAwC;IACjE,OAAO,CAAC,QAAQ,CAAkB;gBAGhC,gBAAgB,EAAE,gBAAgB,EAClC,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,EACjB,uBAAuB,EAAE,OAAO;IAc3B,OAAO;IAiBP,SAAS,CAAC,SAAS,EAAE,MAAM;IAKlC,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,aAAa;CAiCtB"}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/add-tooltip-to-button.js

@@ -0,0 +1,125 @@
+/* @flow */
+
+import Kefir from 'kefir';
+import Logger from '../../../../lib/logger';
+
+import GmailTooltipView from '../../widgets/gmail-tooltip-view';
+import type GmailComposeView from '../gmail-compose-view';
+
+import type { TooltipDescriptor } from '../../../../views/compose-button-view';
+
+export default function addTooltipToButton(
+  gmailComposeView: GmailComposeView,
+  buttonViewController: Object,
+  buttonDescriptor: Object,
+  tooltipDescriptor: TooltipDescriptor
+): GmailTooltipView {
+  var gmailTooltipView = new GmailTooltipView(tooltipDescriptor);
+  var tooltipStopperStream: Kefir.Observable<any> = gmailTooltipView
+    .getStopper()
+    .merge(gmailComposeView.getStopper());
+
+  gmailComposeView
+    .getStopper()
+    .takeUntilBy(gmailTooltipView.getStopper())
+    .onValue(() => gmailTooltipView.destroy());
+
+  ((document.body: any): HTMLElement).appendChild(
+    gmailTooltipView.getElement()
+  );
+
+  _anchorTooltip(
+    gmailTooltipView,
+    gmailComposeView,
+    buttonViewController,
+    buttonDescriptor
+  );
+
+  gmailComposeView
+    .getEventStream()
+    .filter(
+      (event) =>
+        event.eventName === 'buttonAdded' ||
+        event.eventName === 'fullscreenChanged'
+    )
+    .merge(
+      gmailTooltipView
+        .getEventStream()
+        .filter(({ eventName }) => eventName === 'imageLoaded')
+    )
+    .debounce(10)
+    .takeUntilBy(tooltipStopperStream)
+    .onValue(
+      _anchorTooltip.bind(
+        null,
+        gmailTooltipView,
+        gmailComposeView,
+        buttonViewController,
+        buttonDescriptor
+      )
+    );
+
+  buttonViewController
+    .getView()
+    .getEventStream()
+    .takeUntilBy(tooltipStopperStream)
+    .filter(function (event) {
+      return event.eventName === 'click';
+    })
+    .onValue(gmailTooltipView.destroy.bind(gmailTooltipView));
+
+  var stoppedIntervalStream =
+    Kefir.interval(50).takeUntilBy(tooltipStopperStream);
+
+  var left = 0;
+  var top = 0;
+
+  stoppedIntervalStream
+    .takeWhile(
+      () => !!buttonViewController.getView() && !!gmailTooltipView.getElement()
+    )
+    .map(() =>
+      buttonViewController.getView().getElement().getBoundingClientRect()
+    )
+    .filter((rect) => rect.left !== left || rect.top !== top)
+    .map((rect) => {
+      left = rect.left;
+      top = rect.top;
+      return rect;
+    })
+    .onValue(
+      gmailTooltipView.anchor.bind(
+        gmailTooltipView,
+        buttonViewController.getView().getElement(),
+        { position: 'top' }
+      )
+    );
+
+  stoppedIntervalStream
+    .filter(
+      () =>
+        !buttonViewController.getView() ||
+        !buttonViewController.getView().getElement().offsetParent
+    )
+    .onValue(gmailTooltipView.destroy.bind(gmailTooltipView));
+
+  return gmailTooltipView;
+}
+
+function _anchorTooltip(
+  gmailTooltipView,
+  gmailComposeView,
+  buttonViewController,
+  buttonDescriptor
+) {
+  try {
+    gmailComposeView.ensureGroupingIsOpen(buttonDescriptor.type);
+    setTimeout(function () {
+      gmailTooltipView.anchor(buttonViewController.getView().getElement(), {
+        position: 'top',
+      });
+    }, 10);
+  } catch (err) {
+    Logger.error(err);
+  }
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/detectClassicRecipientsArea.d.ts

@@ -1,2 +1,3 @@
 declare const _default: () => void;
 export default _default;
+//# sourceMappingURL=detectClassicRecipientsArea.d.ts.map

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/detectClassicRecipientsArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detectClassicRecipientsArea.d.ts","sourceRoot":"","sources":["../../../../../../../../src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/detectClassicRecipientsArea.ts"],"names":[],"mappings":";AAEA,wBA6CG"}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/ensure-app-button-toolbars-are-closed.js

@@ -0,0 +1,22 @@
+/* @flow */
+
+import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
+
+export default function ensureAppButtonToolbarsAreClosed(
+  gmailComposeViewElement: HTMLElement
+) {
+  var groupedButton = gmailComposeViewElement.querySelector(
+    '.inboxsdk__compose_groupedActionButton'
+  );
+  if (!groupedButton) {
+    return; //no group button so we're good
+  }
+
+  if (
+    gmailComposeViewElement.classList.contains(
+      'inboxsdk__compose_groupedActionToolbar_visible'
+    )
+  ) {
+    simulateClick(groupedButton);
+  }
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/ensure-grouping-is-open.js

@@ -0,0 +1,29 @@
+/* @flow */
+
+import { simulateClick } from '../../../../lib/dom/simulate-mouse-event';
+
+export default function ensureGroupingIsOpen(
+  gmailComposeViewElement: HTMLElement,
+  type: string
+) {
+  if (type === 'SEND_ACTION') {
+    return; //we don't currently group send_actions
+  }
+
+  var groupedButton = gmailComposeViewElement.querySelector(
+    '.inboxsdk__compose_groupedActionButton'
+  );
+  if (!groupedButton) {
+    return; //no group button so we're good
+  }
+
+  if (
+    gmailComposeViewElement.classList.contains(
+      'inboxsdk__compose_groupedActionToolbar_visible'
+    )
+  ) {
+    return; //we are already visible
+  }
+
+  simulateClick(groupedButton);
+}

package/src/platform-implementation-js/dom-driver/gmail/views/gmail-compose-view/focus.js

@@ -0,0 +1,19 @@
+/* @flow */
+
+import type GmailComposeView from '../gmail-compose-view';
+
+export default function (gmailComposeView: GmailComposeView) {
+  gmailComposeView.getBodyElement().focus();
+
+  const lastSelectionRange = gmailComposeView.getLastSelectionRange();
+  const selection = document.getSelection();
+  if (!selection) throw new Error();
+  if (
+    lastSelectionRange &&
+    selection.anchorNode === selection.focusNode &&
+    selection.anchorOffset === selection.focusOffset
+  ) {
+    selection.removeAllRanges();
+    selection.addRange(lastSelectionRange);
+  }
+}