@inboxsdk/core 1.0.5 → 1.1.1

package/src/platform-implementation-js/dom-driver/inbox/getSidebarClassnames.js

@@ -1,114 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _difference = _interopRequireDefault(require("lodash/difference"));
-var _once = _interopRequireDefault(require("lodash/once"));
-var _flatMap = _interopRequireDefault(require("lodash/flatMap"));
-var _last = _interopRequireDefault(require("lodash/last"));
-var _transducers = _interopRequireDefault(require("transducers.js"));
-var _postcssSelectorParser = _interopRequireDefault(require("postcss-selector-parser"));
-var _logger = _interopRequireDefault(require("../../lib/logger"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../lib/dom/querySelectorOrFail"));
-const cssProcessor = (0, _postcssSelectorParser.default)();
-
-// There are specific classnames which are added when the chat or nav sidebars
-// are open which affect the layout of the page. We need to be able to activate
-// that chat sidebar layout ourselves, and we don't want to hardcode this
-// classname because Inbox is prone to changing their classnames.
-
-// We also get the classname for the center list element which has margins
-// applied to it depending on the current page width and sidebar settings to
-// keep it lined up with the search bar.
-
-const getSidebarClassnames = (0, _once.default)(() => {
-  // We know that the page has a CSS rule which looks like
-  //   .blah.chat .foo { margin-right: bigger number; margin-left: smaller number; }
-  // where .chat is the chat sidebar classname that we want to know, and .foo
-  // is one of the classnames that's on the [role=application] element.
-
-  // We could search the rules for this rule, but then we don't know which part
-  // of the selector string is the chat sidebar classname!
-
-  // There's also another similar rule for when only the nav sidebar is open:
-  //   .blah.nav .foo { margin-right: smaller number; margin-left: bigger number; }
-  // If we find both of thse rules, then we can find the classname which is
-  // mentioned in the chat sidebar rule which is not mentioned in the nav
-  // sidebar rule.
-
-  // So first we find all the classnames on the [role=application] and make a
-  // regex for each one.
-  const classRegexes = Array.from((0, _querySelectorOrFail.default)(document, '[role=application]').classList).map(x => new RegExp('\\.' + x + '\\b'));
-  if (classRegexes.length === 0) throw new Error('no class names on element');
-
-  // rules will contain both the chat and nav sidebar rules.
-  const rules = _transducers.default.toArray(Array.prototype.slice.call(document.styleSheets), _transducers.default.compose(_transducers.default.filter(sheet => {
-    try {
-      return sheet.cssRules && sheet.cssRules.length;
-    } catch (err) {
-      // ignore. Sometimes pages have stylesheets that don't permit their
-      // rules to be enumerated. Possibly caused by other extensions including
-      // a css file from another domain?
-      return false;
-    }
-  }), _transducers.default.mapcat(sheet => Array.prototype.slice.call(sheet.cssRules || [])), _transducers.default.mapcat(rulesToStyleRules),
-  // We have all page rules. Filter it down to just rules mentioning one of
-  // [role=application]'s classnames.
-  _transducers.default.filter(rule => classRegexes.some(r => r.test(rule.selectorText))),
-  // Now just the rules that contain both margin-left and -right rules.
-  _transducers.default.filter(rule => rule.style['margin-left'] && rule.style['margin-right'])));
-  const onlyNavSidebarRule = _transducers.default.toArray(Array.prototype.slice.call(rules), _transducers.default.compose(_transducers.default.filter(rule => parseFloat(rule.style['margin-left']) > parseFloat(rule.style['margin-right'])), _transducers.default.take(1)))[0];
-  const onlyChatSidebarRule = _transducers.default.toArray(Array.prototype.slice.call(rules), _transducers.default.compose(_transducers.default.filter(rule => parseFloat(rule.style['margin-left']) < parseFloat(rule.style['margin-right'])), _transducers.default.take(1)))[0];
-  if (!onlyNavSidebarRule || !onlyChatSidebarRule) {
-    const err = new Error('Failed to parse element CSS rules');
-    _logger.default.error(err, {
-      rulesCount: rules.length,
-      hasOnlyNavSidebarRule: !!onlyNavSidebarRule,
-      hasOnlyChatSidebarRule: !!onlyChatSidebarRule
-    });
-    throw err;
-  }
-  function getMentionedClassNames(node) {
-    switch (node.type) {
-      case 'root':
-      case 'selector':
-        return (0, _flatMap.default)(node.nodes, getMentionedClassNames);
-      case 'class':
-        return [node.value];
-      default:
-        return [];
-    }
-  }
-  const onlyNavSidebarRuleClassNames = getMentionedClassNames(cssProcessor.process(onlyNavSidebarRule.selectorText).res);
-  const onlyChatSidebarRuleClassNames = getMentionedClassNames(cssProcessor.process(onlyChatSidebarRule.selectorText).res);
-  const chatSidebarClassNames = (0, _difference.default)(onlyChatSidebarRuleClassNames, onlyNavSidebarRuleClassNames);
-  const navSidebarClassNames = (0, _difference.default)(onlyNavSidebarRuleClassNames, onlyChatSidebarRuleClassNames);
-  const centerListClassName = (0, _last.default)(onlyNavSidebarRuleClassNames) === (0, _last.default)(onlyChatSidebarRuleClassNames) ? (0, _last.default)(onlyNavSidebarRuleClassNames) : null;
-  if (chatSidebarClassNames.length !== 1 || navSidebarClassNames.length !== 1 || !centerListClassName) {
-    _logger.default.error(new Error('Failed to find sidebar classnames'), {
-      onlyNavSidebarRuleClassNames,
-      onlyChatSidebarRuleClassNames,
-      chatSidebarClassNames,
-      navSidebarClassNames,
-      centerListClassName
-    });
-  }
-  return {
-    chat: chatSidebarClassNames[0],
-    nav: navSidebarClassNames[0],
-    centerList: centerListClassName
-  };
-});
-var _default = getSidebarClassnames;
-exports.default = _default;
-function rulesToStyleRules(rule) {
-  if (rule instanceof window.CSSMediaRule) {
-    return (0, _flatMap.default)(rule.cssRules, rulesToStyleRules);
-  } else if (rule instanceof window.CSSStyleRule) {
-    return [rule];
-  }
-  return [];
-}

package/src/platform-implementation-js/dom-driver/inbox/getSidebarClassnames.test.js

@@ -1,73 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _getSidebarClassnames = _interopRequireDefault(require("./getSidebarClassnames"));
-document.documentElement.innerHTML = `
-<head>
-<style type="text/css">
-.blah {
-  color: red;
-}
-
-.bz, .bS {
-  width: 1200px;
-  margin-left: auto;
-  margin-right: auto;
-}
-@media (max-width: 1800px) {
-  .bz, .bS {
-    width: 66.66%;
-  }
-}
-@media (max-width: 1260px) {
-  .bz, .bS {
-    width: 840px;
-  }
-}
-.cM {
-  min-width: 512px;
-  padding: 56px 0 1px;
-}
-
-/* chat sidebar open rules */
-@media (max-width: 1632px) {
-  .m .bz {
-    width: auto;
-    margin-left: 50px;
-    margin-right: 272px;
-  }
-}
-
-/* nav sidebar open rules */
-@media (max-width: 1632px) {
-  .M .bz {
-    width: auto;
-    margin-left: 272px;
-    margin-right: 104px;
-  }
-}
-
-/* both open */
-@media (max-width: 1632px) {
-  .m.M .bz {
-    margin-left: 272px;
-    margin-right: 272px;
-  }
-}
-</style>
-</head>
-<body>
-  <div>
-    <div role="application" class="cM bz">
-      <p>foo
-    </div>
-  </div>
-</body>
-`;
-test('works', () => {
-  expect((0, _getSidebarClassnames.default)()).toEqual({
-    chat: 'm',
-    nav: 'M',
-    centerList: 'bz'
-  });
-});

package/src/platform-implementation-js/dom-driver/inbox/gotoView.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = gotoView;
-var _includes = _interopRequireDefault(require("lodash/includes"));
-var _populateRouteID = _interopRequireDefault(require("../../lib/populateRouteID"));
-var _routeIDmatchesHash = _interopRequireDefault(require("../../lib/routeIDmatchesHash"));
-var _router = require("../../constants/router");
-function gotoView(driver, routeID, params) {
-  if ((0, _includes.default)(Object.values(_router.NATIVE_ROUTE_IDS), routeID)) {
-    throw new Error('NativeRouteIDs are not currently supported in Inbox');
-  }
-  if (!driver.getCustomRouteIDs().has(routeID)) {
-    const startedWithHash = routeID[0] === '#';
-    if (startedWithHash) {
-      routeID = routeID.slice(1);
-    }
-    let foundRouteID = false;
-    if (!params) {
-      // If params were given, then we don't assume it was a resolved/populated URL
-      for (let routeIDs of driver.getCustomRouteIDs()) {
-        if ((0, _routeIDmatchesHash.default)(routeIDs, routeID)) {
-          foundRouteID = true;
-          break;
-        }
-      }
-    }
-    if (!foundRouteID) {
-      throw new Error(`Invalid routeID: ${routeID}`);
-    }
-    if (!startedWithHash) {
-      driver.getLogger().deprecationWarning('Router.goto resolved routeID without "#" prefix');
-    }
-  }
-  document.location.hash = (0, _populateRouteID.default)(routeID, params);
-}

package/src/platform-implementation-js/dom-driver/inbox/gotoView.test.js

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _gotoView = _interopRequireDefault(require("./gotoView"));
-function makeDriver() {
-  const customRouteIDs = new Set();
-  return {
-    getCustomRouteIDs: () => customRouteIDs
-  };
-}
-test('works for custom view', () => {
-  const driver = makeDriver();
-  driver.getCustomRouteIDs().add('example/:bar');
-  (0, _gotoView.default)(driver, 'example/:bar', {
-    bar: 'foo'
-  });
-  expect(document.location.hash).toBe('#example/foo');
-});
-test('fails for unknown route id', () => {
-  expect(() => (0, _gotoView.default)(makeDriver(), 'example/:bar', {
-    bar: 'foo'
-  })).toThrowError('Invalid routeID: example/:bar');
-});
-test('fails for native route ids', () => {
-  expect(() => (0, _gotoView.default)(makeDriver(), 'inbox/:threadID', {
-    threadID: 'abc'
-  })).toThrowError('NativeRouteIDs are not currently supported in Inbox');
-});

package/src/platform-implementation-js/dom-driver/inbox/inbox-butter-bar-driver.js

@@ -1,148 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _kefir = _interopRequireDefault(require("kefir"));
-var _streamWaitFor = _interopRequireDefault(require("../../lib/stream-wait-for"));
-var _querySelectorOrFail = _interopRequireDefault(require("../../lib/dom/querySelectorOrFail"));
-var _makeMutationObserverChunkedStream = _interopRequireDefault(require("../../lib/dom/make-mutation-observer-chunked-stream"));
-const elements = (0, _streamWaitFor.default)(() => document.querySelector('body > div[id][jsaction] > div[id] > div[class][jsaction][aria-hidden]')).map(googleNotice => {
-  const noticeContainer = googleNotice.parentElement;
-  if (!noticeContainer) throw new Error('Should not happen');
-  let sdkNotice = noticeContainer.querySelector('.inboxsdk__butterbar');
-  if (!sdkNotice) {
-    sdkNotice = document.createElement('div');
-    sdkNotice.className = googleNotice.className + ' inboxsdk__butterbar';
-    sdkNotice.style.display = 'none';
-    noticeContainer.insertBefore(sdkNotice, googleNotice.nextSibling);
-  }
-  return {
-    noticeContainer,
-    googleNotice,
-    sdkNotice
-  };
-}).toProperty();
-
-// We queue our notices separately from the native ones in Inbox.
-
-const sdkNoticeIdChanges = elements.flatMapLatest(_ref => {
-  let {
-    sdkNotice
-  } = _ref;
-  return (0, _makeMutationObserverChunkedStream.default)(sdkNotice, {
-    attributes: true,
-    attributeFilter: ['data-inboxsdk-id']
-  }).map(() => sdkNotice.getAttribute('data-inboxsdk-id'));
-});
-const sdkRemovedNotice = sdkNoticeIdChanges.filter(id => id == null);
-const noticeAvailableStream = sdkRemovedNotice;
-function hideMessage(noticeContainer, googleNotice, sdkNotice) {
-  Object.assign(sdkNotice.style, {
-    opacity: '0',
-    transform: '',
-    transition: 'opacity 100ms'
-  });
-  sdkNotice.removeAttribute('data-inboxsdk-id');
-  _kefir.default.fromEvents(sdkNotice, 'transitionend').merge(_kefir.default.later(200)) // transition might not finish if element is hidden
-  .takeUntilBy(sdkNoticeIdChanges.filter(id => id != null)).onValue(() => {
-    Object.assign(sdkNotice.style, {
-      display: 'none',
-      opacity: '',
-      transition: ''
-    });
-  });
-}
-class InboxButterBarDriver {
-  constructor() {
-    // Force stream to be in active state. sdkRemovedNotice is prone to missing
-    // events if it only becomes active once a message has started.
-    noticeAvailableStream.onValue(() => {});
-  }
-  getNoticeAvailableStream() {
-    return noticeAvailableStream;
-  }
-  getSharedMessageQueue() {
-    const attr = document.head.getAttribute('data-inboxsdk-butterbar-queue');
-    return attr ? JSON.parse(attr) : [];
-  }
-  setSharedMessageQueue(queue) {
-    const attr = JSON.stringify(queue);
-    document.head.setAttribute('data-inboxsdk-butterbar-queue', attr);
-  }
-
-  // Immediately displays the message, overriding anything else on the screen.
-  // Priority and queuing logic is handled by butter-bar.js above this.
-  showMessage(rawOptions) {
-    const instanceId = Date.now() + '-' + Math.random();
-    elements.take(1).onValue(_ref2 => {
-      let {
-        noticeContainer,
-        googleNotice,
-        sdkNotice
-      } = _ref2;
-      sdkNotice.className = googleNotice.className;
-      sdkNotice.classList.add('inboxsdk__butterbar');
-      if (rawOptions.html) {
-        sdkNotice.innerHTML = rawOptions.html;
-      } else if (rawOptions.el) {
-        sdkNotice.innerHTML = '';
-        sdkNotice.appendChild(rawOptions.el);
-      } else {
-        sdkNotice.textContent = rawOptions.text;
-      }
-      if (rawOptions.className) {
-        sdkNotice.classList.add(rawOptions.className);
-      }
-
-      // If the sdkNotice is already up, just flash it out and in instead of
-      // animating it up into position.
-      if (sdkNotice.style.display === 'block' && getComputedStyle(sdkNotice).opacity === '1') {
-        Object.assign(sdkNotice.style, {
-          opacity: '0',
-          transform: 'none',
-          transition: 'none'
-        });
-        sdkNotice.offsetHeight; // force relayout
-        Object.assign(sdkNotice.style, {
-          opacity: '1',
-          transition: ''
-        });
-      } else {
-        Object.assign(sdkNotice.style, {
-          opacity: '0',
-          transform: '',
-          transition: '',
-          display: 'block'
-        });
-        sdkNotice.offsetHeight; // force relayout
-        Object.assign(sdkNotice.style, {
-          opacity: '1',
-          transform: 'none'
-        });
-      }
-      sdkNotice.setAttribute('data-inboxsdk-id', instanceId);
-    });
-    return {
-      destroy() {
-        elements.take(1).onValue(_ref3 => {
-          let {
-            noticeContainer,
-            googleNotice,
-            sdkNotice
-          } = _ref3;
-          if (sdkNotice.getAttribute('data-inboxsdk-id') === instanceId) {
-            if (rawOptions.className) sdkNotice.classList.remove(rawOptions.className);
-            hideMessage(noticeContainer, googleNotice, sdkNotice);
-          }
-        });
-      }
-    };
-  }
-  hideGmailMessage() {
-    // No-op in Inbox because we don't touch the native messages
-  }
-}
-exports.default = InboxButterBarDriver;