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

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

@@ -1,45 +1,32 @@
-/* @flow */
-
-import Kefir from 'kefir';
-import kefirBus from 'kefir-bus';
-import type { Bus } from 'kefir-bus';
-
-import getInsertBeforeElement from '../../../lib/dom/get-insert-before-element';
-import makeMutationObserverChunkedStream from '../../../lib/dom/make-mutation-observer-chunked-stream';
-import makeMutationObserverStream from '../../../lib/dom/make-mutation-observer-stream';
-import querySelector from '../../../lib/dom/querySelectorOrFail';
-import findParent from '../../../../common/find-parent';
-
-import GmailElementGetter from '../gmail-element-getter';
-
-import GmailNavItemView, {
-  getLeftIndentationPaddingValue,
-} from './gmail-nav-item-view';
-
-import type GmailDriver from '../gmail-driver';
-
-export default class NativeGmailNavItemView {
-  _driver: GmailDriver;
-  _element: HTMLElement;
-  _navItemName: string;
-  _activeMarkerElement: ?HTMLElement = null;
-  _eventStream: Bus<any>;
-  _elementBus: Bus<HTMLElement>;
-  _elementStream: Kefir.Observable<HTMLElement>;
-  _isActive: boolean = false;
-  _itemContainerElement: ?HTMLElement = null;
-
-  constructor(
-    driver: GmailDriver,
-    nativeElement: HTMLElement,
-    navItemName: string
-  ) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _kefir = _interopRequireDefault(require("kefir"));
+var _kefirBus = _interopRequireDefault(require("kefir-bus"));
+var _getInsertBeforeElement = _interopRequireDefault(require("../../../lib/dom/get-insert-before-element"));
+var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-chunked-stream"));
+var _makeMutationObserverStream = _interopRequireDefault(require("../../../lib/dom/make-mutation-observer-stream"));
+var _querySelectorOrFail = _interopRequireDefault(require("../../../lib/dom/querySelectorOrFail"));
+var _findParent = _interopRequireDefault(require("../../../../common/find-parent"));
+var _gmailElementGetter = _interopRequireDefault(require("../gmail-element-getter"));
+var _gmailNavItemView = _interopRequireWildcard(require("./gmail-nav-item-view"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+class NativeGmailNavItemView {
+  constructor(driver, nativeElement, navItemName) {
+    (0, _defineProperty2.default)(this, "_activeMarkerElement", null);
+    (0, _defineProperty2.default)(this, "_isActive", false);
+    (0, _defineProperty2.default)(this, "_itemContainerElement", null);
     this._driver = driver;
     this._element = nativeElement;
-    this._eventStream = kefirBus();
-    this._elementBus = kefirBus();
+    this._eventStream = (0, _kefirBus.default)();
+    this._elementBus = (0, _kefirBus.default)();
     this._elementStream = this._elementBus.toProperty(() => this._element);
-
     this._navItemName = navItemName;
 
     // gmail v2 continually replaces the native nav elements
@@ -47,37 +34,27 @@ export default class NativeGmailNavItemView {
     // readd any sub nav items
     const parentElement = this._element.parentElement;
     if (parentElement) {
-      makeMutationObserverChunkedStream((parentElement: any), {
-        childList: true,
-      })
-        .map(() =>
-          parentElement.querySelector(`.aim a[href*="#${this._navItemName}"]`)
-        )
-        .filter(Boolean)
-        .map((link) => findParent(link, (el) => el.classList.contains('aim')))
-        .filter(Boolean)
-        .filter((newElement) => newElement !== this._element)
-        .onValue((newElement) => {
-          if (newElement) {
-            const currentContainerElement = this._itemContainerElement;
-            if (currentContainerElement) {
-              //if we have an existing container then remove it
-              //so a new one can be created and get things back into a good state
-              currentContainerElement.remove();
-              this._itemContainerElement = null;
-            }
-            this._elementBus.emit(newElement);
+      (0, _makeMutationObserverChunkedStream.default)(parentElement, {
+        childList: true
+      }).map(() => parentElement.querySelector(`.aim a[href*="#${this._navItemName}"]`)).filter(Boolean).map(link => (0, _findParent.default)(link, el => el.classList.contains('aim'))).filter(Boolean).filter(newElement => newElement !== this._element).onValue(newElement => {
+        if (newElement) {
+          const currentContainerElement = this._itemContainerElement;
+          if (currentContainerElement) {
+            //if we have an existing container then remove it
+            //so a new one can be created and get things back into a good state
+            currentContainerElement.remove();
+            this._itemContainerElement = null;
           }
-        });
+          this._elementBus.emit(newElement);
+        }
+      });
     }
-
-    this._elementStream.onValue((element) => {
+    this._elementStream.onValue(element => {
       this._element = element;
       this._monitorElementForActiveChanges();
       this.setActive(this._isActive);
     });
   }
-
   destroy() {
     this._element.classList.remove('inboxsdk__navItem_claimed');
     this._eventStream.end();
@@ -85,34 +62,21 @@ export default class NativeGmailNavItemView {
     if (this._activeMarkerElement) this._activeMarkerElement.remove();
     if (this._itemContainerElement) this._itemContainerElement.remove();
   }
-
-  getElement(): HTMLElement {
+  getElement() {
     return this._element;
   }
-
-  getEventStream(): Kefir.Observable<Object> {
+  getEventStream() {
     return this._eventStream;
   }
-
-  addNavItem(orderGroup: number, navItemDescriptor: Object): GmailNavItemView {
-    const gmailNavItemView = new GmailNavItemView(this._driver, orderGroup, 2);
-
-    Kefir.merge([
-      gmailNavItemView
-        .getEventStream()
-        .filter((event) => event.eventName === 'orderChanged'),
-
-      this._elementStream,
-    ]).onValue(() => this._addNavItemElement(gmailNavItemView));
-
+  addNavItem(orderGroup, navItemDescriptor) {
+    const gmailNavItemView = new _gmailNavItemView.default(this._driver, orderGroup, 2);
+    _kefir.default.merge([gmailNavItemView.getEventStream().filter(event => event.eventName === 'orderChanged'), this._elementStream]).onValue(() => this._addNavItemElement(gmailNavItemView));
     gmailNavItemView.setNavItemDescriptor(navItemDescriptor);
-
     return gmailNavItemView;
   }
-
-  setActive(value: boolean) {
+  setActive(value) {
     this._isActive = value;
-    const toElement = querySelector(this._element, '.TO');
+    const toElement = (0, _querySelectorOrFail.default)(this._element, '.TO');
     if (value) {
       this._element.classList.add('ain');
       toElement.classList.add('nZ');
@@ -122,209 +86,128 @@ export default class NativeGmailNavItemView {
       toElement.classList.remove('nZ');
       toElement.classList.remove('aiq');
     }
-
     this._setHeights();
   }
-
   toggleCollapse() {
     this._toggleCollapse();
   }
-
-  setCollapsed(value: string) {
+  setCollapsed(value) {
     localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] = value;
-
     if (!this._element.querySelector('.inboxsdk__expando')) {
       return;
     }
-
     if (value) {
       this._collapse();
     } else {
       this._expand();
     }
   }
-
   remove() {
     /* do nothing */
   }
-
   _monitorElementForActiveChanges() {
     this._element.classList.add('inboxsdk__navItem_claimed');
     const element = this._element;
-    const classChangeStream = makeMutationObserverChunkedStream(element, {
+    const classChangeStream = (0, _makeMutationObserverChunkedStream.default)(element, {
       attributes: true,
-      attributeFilter: ['class'],
-    })
-      .takeUntilBy(this._eventStream.filter(() => false).beforeEnd(() => null))
-      .toProperty(() => [])
-      .map(() => element);
-
-    classChangeStream
-      .filter((el) => el.classList.contains('ain'))
-      .onValue(() => this._createActiveMarkerElement());
-
-    classChangeStream
-      .filter((el) => !el.classList.contains('ain'))
-      .onValue(() => this._removeActiveMarkerElement());
+      attributeFilter: ['class']
+    }).takeUntilBy(this._eventStream.filter(() => false).beforeEnd(() => null)).toProperty(() => []).map(() => element);
+    classChangeStream.filter(el => el.classList.contains('ain')).onValue(() => this._createActiveMarkerElement());
+    classChangeStream.filter(el => !el.classList.contains('ain')).onValue(() => this._removeActiveMarkerElement());
   }
-
-  _addNavItemElement(gmailNavItemView: GmailNavItemView) {
+  _addNavItemElement(gmailNavItemView) {
     const itemContainerElement = this._getItemContainerElement();
-
-    const insertBeforeElement = getInsertBeforeElement(
-      gmailNavItemView.getElement(),
-      itemContainerElement.children,
-      ['data-group-order-hint', 'data-order-hint', 'data-insertion-order-hint']
-    );
-    itemContainerElement.insertBefore(
-      gmailNavItemView.getElement(),
-      insertBeforeElement
-    );
-
+    const insertBeforeElement = (0, _getInsertBeforeElement.default)(gmailNavItemView.getElement(), itemContainerElement.children, ['data-group-order-hint', 'data-order-hint', 'data-insertion-order-hint']);
+    itemContainerElement.insertBefore(gmailNavItemView.getElement(), insertBeforeElement);
     const element = gmailNavItemView.getElement();
-    querySelector(element, '.TN').style.marginLeft =
-      getLeftIndentationPaddingValue() + 'px';
-
+    (0, _querySelectorOrFail.default)(element, '.TN').style.marginLeft = (0, _gmailNavItemView.getLeftIndentationPaddingValue)() + 'px';
     this._setHeights();
   }
-
-  _getItemContainerElement(): HTMLElement {
+  _getItemContainerElement() {
     let itemContainerElement = this._itemContainerElement;
     if (!itemContainerElement) {
-      itemContainerElement = this._itemContainerElement =
-        this._element.querySelector('.inboxsdk__navItem_container');
+      itemContainerElement = this._itemContainerElement = this._element.querySelector('.inboxsdk__navItem_container');
       if (!itemContainerElement) {
         itemContainerElement = this._createItemContainerElement();
         this._createExpando();
       }
     }
-
     return itemContainerElement;
   }
-
-  _createItemContainerElement(): HTMLElement {
-    const itemContainerElement = (this._itemContainerElement =
-      document.createElement('div'));
+  _createItemContainerElement() {
+    const itemContainerElement = this._itemContainerElement = document.createElement('div');
     itemContainerElement.classList.add('inboxsdk__navItem_container');
-
     this._element.appendChild(itemContainerElement);
     return itemContainerElement;
   }
-
   _createExpando() {
     const link = this._element.querySelector('a');
-
     const expandoElement = document.createElement('div');
     expandoElement.setAttribute('class', 'TH aih J-J5-Ji inboxsdk__expando');
     expandoElement.setAttribute('role', 'link');
-    expandoElement.title = `Expand ${
-      link ? link.title || link.textContent : ''
-    }`;
-
-    expandoElement.addEventListener(
-      'click',
-      (e: MouseEvent) => {
-        this._toggleCollapse();
-        e.stopPropagation();
-        e.preventDefault();
-        e.stopImmediatePropagation();
-      },
-      true
-    );
-
+    expandoElement.title = `Expand ${link ? link.title || link.textContent : ''}`;
+    expandoElement.addEventListener('click', e => {
+      this._toggleCollapse();
+      e.stopPropagation();
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }, true);
     const insertionPoint = this._element.querySelector('.TN');
     if (insertionPoint) {
-      (insertionPoint: any).insertAdjacentElement('afterbegin', expandoElement);
+      insertionPoint.insertAdjacentElement('afterbegin', expandoElement);
     }
-
-    if (
-      localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] ===
-      'collapsed'
-    ) {
+    if (localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] === 'collapsed') {
       this._collapse();
     } else {
       this._expand();
     }
   }
-
   _toggleCollapse() {
     if (!this._element.querySelector('.inboxsdk__expando')) {
-      if (
-        localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] ===
-        'collapsed'
-      ) {
-        localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] =
-          'expanded';
+      if (localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] === 'collapsed') {
+        localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] = 'expanded';
       } else {
-        localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] =
-          'collapsed';
+        localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] = 'collapsed';
       }
       return;
     }
-
-    if (
-      localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] ===
-      'collapsed'
-    ) {
+    if (localStorage['inboxsdk__nativeNavItem__state_' + this._navItemName] === 'collapsed') {
       this._expand();
     } else {
       this._collapse();
     }
   }
-
   _collapse() {
-    const expandoElement = querySelector(this._element, '.inboxsdk__expando');
+    const expandoElement = (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__expando');
     expandoElement.classList.remove('aih');
     expandoElement.classList.add('aii');
-
-    if (this._itemContainerElement)
-      this._itemContainerElement.style.display = 'none';
-
-    localStorage.setItem(
-      'inboxsdk__nativeNavItem__state_' + this._navItemName,
-      'collapsed'
-    );
-
+    if (this._itemContainerElement) this._itemContainerElement.style.display = 'none';
+    localStorage.setItem('inboxsdk__nativeNavItem__state_' + this._navItemName, 'collapsed');
     this._eventStream.emit({
-      eventName: 'collapsed',
+      eventName: 'collapsed'
     });
-
     this._setHeights();
   }
-
   _expand() {
-    const expandoElement = querySelector(this._element, '.inboxsdk__expando');
+    const expandoElement = (0, _querySelectorOrFail.default)(this._element, '.inboxsdk__expando');
     expandoElement.classList.add('aih');
     expandoElement.classList.remove('aii');
-
-    if (this._itemContainerElement)
-      this._itemContainerElement.style.display = '';
-
-    localStorage.setItem(
-      'inboxsdk__nativeNavItem__state_' + this._navItemName,
-      'expanded'
-    );
-
+    if (this._itemContainerElement) this._itemContainerElement.style.display = '';
+    localStorage.setItem('inboxsdk__nativeNavItem__state_' + this._navItemName, 'expanded');
     this._eventStream.emit({
-      eventName: 'expanded',
+      eventName: 'expanded'
     });
-
     this._setHeights();
   }
-
-  _isExpanded(): boolean {
+  _isExpanded() {
     return !!this._element.querySelector('.inboxsdk__expando.aih');
   }
-
   _setHeights() {
-    const toElement = querySelector(this._element, '.TO');
-
+    const toElement = (0, _querySelectorOrFail.default)(this._element, '.TO');
     if (this._element.classList.contains('ain') && this._itemContainerElement) {
       this._element.style.height = '';
-
       const totalHeight = this._element.clientHeight;
       const itemHeight = toElement.clientHeight;
-
       this._element.style.height = itemHeight + 'px';
       this._element.style.overflow = 'visible';
       this._element.style.marginBottom = totalHeight - itemHeight + 'px';
@@ -334,22 +217,14 @@ export default class NativeGmailNavItemView {
       this._element.style.marginBottom = '';
     }
   }
-
   _createActiveMarkerElement() {
     this._removeActiveMarkerElement();
-
-    const activeMarkerElement = (this._activeMarkerElement =
-      document.createElement('div'));
+    const activeMarkerElement = this._activeMarkerElement = document.createElement('div');
     activeMarkerElement.classList.add('inboxsdk__navItem_marker');
     activeMarkerElement.classList.add('ain');
     activeMarkerElement.innerHTML = '&nbsp;';
-
-    this._element.insertBefore(
-      activeMarkerElement,
-      this._element.firstElementChild
-    );
+    this._element.insertBefore(activeMarkerElement, this._element.firstElementChild);
   }
-
   _removeActiveMarkerElement() {
     const activeMarkerElement = this._activeMarkerElement;
     if (activeMarkerElement) {
@@ -358,3 +233,4 @@ export default class NativeGmailNavItemView {
     }
   }
 }
+exports.default = NativeGmailNavItemView;

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;