@atlassian/atlassian-connect-js 5.3.190

package/src/host/utils/webitem.js

@@ -0,0 +1,214 @@
+import qs from 'query-string';
+import Util from '../util';
+
+function sanitizeTriggers(triggers) {
+  var onTriggers;
+  if(Array.isArray(triggers)) {
+    onTriggers = triggers.join(' ');
+  } else if (typeof triggers === 'string') {
+    onTriggers = triggers.trim();
+  }
+  return onTriggers;
+}
+
+function uniqueId(){
+  return 'webitem-' + Math.floor(Math.random() * 1000000000).toString(16);
+}
+
+/**
+ * LEGACY: get addon key by webitem for p2
+ * @param {string} cssClass
+ */
+function getExtensionKey(cssClass){
+  var m = cssClass ? cssClass.match(/ap-plugin-key-([^\s]*)/) : null;
+  return Array.isArray(m) ? m[1] : false;
+}
+
+/**
+ * LEGACY: get module key by webitem for p2
+ * @param {string} cssClass
+*/
+function getKey(cssClass){
+  var m = cssClass ? cssClass.match(/ap-module-key-([^\s]*)/) : null;
+  return Array.isArray(m) ? m[1] : false;
+}
+
+/**
+ * @param cssClass
+ */
+function getTargetKey(cssClass){
+  var m = cssClass ? cssClass.match(/ap-target-key-([^\s]*)/) : null;
+  return Array.isArray(m) ? m[1] : false;
+}
+
+/**
+ * @param cssClass
+ * @returns {string}
+ */
+function getFullKey(cssClass){
+  return getExtensionKey(cssClass) + '__' + getKey(cssClass);
+}
+
+function getModuleOptionsByAddonAndModuleKey(type, addonKey, moduleKey) {
+  var moduleType = type + 'Modules';
+  if(window._AP
+    && window._AP[moduleType]
+    && window._AP[moduleType][addonKey]
+    && window._AP[moduleType][addonKey][moduleKey]) {
+    return Util.extend({}, window._AP[moduleType][addonKey][moduleKey].options);
+  }
+}
+
+/**
+ * @param {string} type
+ * @param {string} cssClass
+ */
+function getModuleOptionsForWebitem(type, cssClass){
+  var addon_key = getExtensionKey(cssClass);
+  var targetKey = getTargetKey(cssClass);
+  return getModuleOptionsByAddonAndModuleKey(type, addon_key, targetKey);
+}
+
+/**
+ * gets the connect config from the encoded webitem target (via the url)
+ * @param {JQuery} $target
+ * @param {string} cssClass
+ * @param {string|undefined} href
+ */
+// eslint-disable-next-line complexity
+function getConfigFromTarget($target, cssClass, href){
+  let url = href || $target.attr('href');
+  var convertedOptions = {};
+  var iframeData;
+  // adg3 has classes outside of a tag so look for href inside the a
+  if (!url) {
+    url = $target.find('a').attr('href');
+  }
+  if (url) {
+    var hashIndex = url.indexOf('#');
+    if (hashIndex >= 0) {
+      var hash = url.substring(hashIndex + 1);
+      try {
+        iframeData = JSON.parse(decodeURI(hash));
+      } catch (e) {
+        console.error('ACJS: cannot decode webitem anchor');
+      }
+      if (iframeData && window._AP && window._AP._convertConnectOptions) {
+        convertedOptions = window._AP._convertConnectOptions(iframeData);
+      } else {
+        console.error('ACJS: cannot convert webitem url to connect iframe options');
+      }
+
+    } else {
+      // The URL has no hash component so fall back to the old behaviour of providing:
+      // add-on key, module key, dialog module options and product context (from the webitem url).
+      // This may be the case for web items that were persisted prior to the new storage format whereby a hash
+      // fragment is added into the URL detailing the target module info. If this info is
+      // not present, the content resolver will be used to resolve the module after the web
+      // item is clicked.
+
+      // Old URL format detected. Falling back to old functionality
+      var fullKey = getFullKey(cssClass);
+      var type = isInlineDialogTrigger(cssClass) ? 'inlineDialog' : 'dialog';
+      var options = getModuleOptionsForWebitem(type, cssClass);
+      if(!options && window._AP && window._AP[type + 'Options']) {
+        options = Util.extend({}, window._AP[type + 'Options'][fullKey]) || {};
+      }
+      if(!options){
+        options = {};
+        console.warn('no webitem ' + type + 'Options for ' + fullKey);
+      }
+      options.productContext = options.productContext || {};
+      var query = qs.parse(qs.extract(url));
+      Util.extend(options.productContext, query);
+
+      convertedOptions = {
+        addon_key: getExtensionKey(cssClass),
+        key: getKey(cssClass),
+        options: options
+      };
+    }
+  }
+  return convertedOptions;
+}
+
+/**
+ * @param {string|string[]|null} classes
+ * @returns {boolean}
+ */
+export function isInlineDialogTrigger(classes) {
+  return classes ? classes.includes('ap-inline-dialog') : false
+}
+
+/**
+ * @param {string|string[]|null} classes
+ * @returns {boolean}
+ */
+export function isDialogTrigger(classes) {
+  return classes ? classes.includes('ap-dialog') : false
+}
+
+/**
+ * LEGACY - method for handling webitem options for p2
+ * @param {JQuery} $target
+ * @param {string} cssClass
+ * @param {string|undefined} href
+ */
+function getOptionsForWebItem($target, cssClass, href) {
+  var fullKey = getFullKey(cssClass);
+
+  var type = isInlineDialogTrigger(cssClass) ? 'inlineDialog' : 'dialog';
+  var options = getModuleOptionsForWebitem(type, cssClass);
+  if(!options && window._AP && window._AP[type + 'Options']) {
+    options = Util.extend({}, window._AP[type + 'Options'][fullKey]) || {};
+  }
+  if(!options){
+    options = {};
+    console.warn('no webitem ' + type + 'Options for ' + fullKey);
+  }
+  options.productContext = options.productContext || {};
+  options.structuredContext = options.structuredContext || {};
+  // create product context from url params
+
+  var convertedConfig = getConfigFromTarget($target, cssClass, href);
+
+  if(convertedConfig && convertedConfig.options) {
+    Util.extend(options.productContext, convertedConfig.options.productContext);
+    Util.extend(options.structuredContext, convertedConfig.options.structuredContext);
+    options.contextJwt = convertedConfig.options.contextJwt;
+  }
+
+  return options;
+}
+
+/**
+ * @param {HTMLElement} target
+ * @param {string[]} attributeNames
+ * @returns {string[]}
+ */
+export function collectParentElementAttributes(target, attributeNames) {
+  // Collect attributes from parent elements of the webitem
+  const attributes = [];
+  let current = target
+  let count = 0;
+  while (current && current !== document.body && count++ < 1000) {
+    for (let attributeName of attributeNames) {
+      const attribute = current.getAttribute(attributeName);
+      if (attribute) {
+        attributes.push(attribute);
+      }
+    }
+    current = current.parentElement;
+  }
+  return attributes;
+}
+
+export default {
+  sanitizeTriggers,
+  uniqueId,
+  getExtensionKey,
+  getKey,
+  getOptionsForWebItem,
+  getModuleOptionsByAddonAndModuleKey,
+  getConfigFromTarget,
+};

package/src/plugin/amd.js

@@ -0,0 +1,115 @@
+import AP from 'simple-xdm/combined';
+
+var modules = {};
+
+function reqAll(deps, callback) {
+  var mods = [];
+  var i = 0;
+  var len = deps.length;
+  function addOne(mod) {
+    mods.push(mod);
+    if (mods.length === len) {
+      var exports = [];
+      var i = 0;
+      for (; i < len; i += 1) {
+        exports[i] = mods[i].exports;
+      }
+      if (callback) {
+        callback.apply(window, exports);
+      }
+    }
+  }
+  if (deps && deps.length > 0) {
+    for (; i < len; i += 1) {
+      reqOne(deps[i], addOne);
+    }
+  } else {
+    if (callback) {
+      callback();
+    }
+  }
+}
+
+function reqOne(name, callback) {
+  // naive impl that assumes all modules are already loaded
+  callback(getOrCreate(name));
+}
+
+function getOrCreate(name) {
+  // get defined module
+  if (modules[name]) {
+    return modules[name];
+  }
+
+  // get a host module
+  var hostModule = getFromHostModules(name);
+  if (hostModule) {
+    return modules[name] = hostModule
+  }
+
+  // create a new module
+  return modules[name] = {
+    name: name,
+    exports: function () {
+      function exports() {
+        var target = exports.__target__;
+        if (target) {
+          return target.apply(window, arguments);
+        }
+      }
+      return exports;
+    }()
+  };
+}
+
+function getFromHostModules(name) {
+  var module;
+  if (AP._hostModules) {
+    if (AP._hostModules[name]) {
+      module = AP._hostModules[name];
+    }
+    if (AP._hostModules._globals && AP._hostModules._globals[name]) {
+      module = AP._hostModules._globals[name];
+    }
+    if (module) {
+      return {
+        name: name,
+        exports: module
+      }
+    }
+  }
+}
+
+// define(name, objOrFn)
+// define(name, deps, fn(dep1, dep2, ...))
+export default {
+  define: function (name, deps, exports) {
+    var mod = getOrCreate(name);
+    var factory;
+    if (!exports) {
+      exports = deps;
+      deps = [];
+    }
+    if (exports) {
+      factory = typeof exports !== 'function' ? function () {
+        return exports;
+      } : exports;
+      reqAll(deps, function () {
+        var exports = factory.apply(window, arguments);
+        if (exports) {
+          if (typeof exports === 'function') {
+            mod.exports.__target__ = exports;
+          }
+          for (var k in exports) {
+            if (exports.hasOwnProperty(k)) {
+              mod.exports[k] = exports[k];
+            }
+          }
+        }
+      });
+    }
+  },
+  require: function (deps, callback) {
+    reqAll(typeof deps === 'string' ? [deps] : deps, callback);
+  }
+};

package/src/plugin/analytics.js

@@ -0,0 +1,84 @@
+import AP from 'simple-xdm/combined';
+import {onCLS, onFCP, onLCP, onTTFB} from 'web-vitals';
+
+function getMetrics() {
+  if (window.performance && window.performance.getEntries) {
+    let navigationEntries = window.performance.getEntriesByType('navigation');
+    if (navigationEntries && navigationEntries[0]) {
+      let timingInfo = navigationEntries[0];
+      // dns loookup time
+      let domainLookupTime = timingInfo.domainLookupEnd - timingInfo.domainLookupStart;
+      let connectStart = timingInfo.connectStart;
+      // if it's a tls connection, use the secure connection start instead
+      if (timingInfo.secureConnectionStart > 0) {
+        connectStart = timingInfo.secureConnectionStart;
+      }
+      // connection negotiation time
+      let connectionTime = timingInfo.connectEnd - connectStart;
+      // page body size
+      let decodedBodySize = timingInfo.decodedBodySize;
+      // time to load dom
+      let domContentLoadedTime = timingInfo.domContentLoadedEventEnd - timingInfo.domContentLoadedEventStart;
+      // time to download the page
+      let fetchTime = timingInfo.responseEnd - timingInfo.fetchStart;
+
+      return {
+        domainLookupTime,
+        connectionTime,
+        decodedBodySize,
+        domContentLoadedTime,
+        fetchTime
+      }
+    }
+  }
+}
+
+function sendMetrics() {
+  let metrics = getMetrics();
+  if (AP._analytics && AP._analytics.trackIframePerformanceMetrics) {
+    AP._analytics.trackIframePerformanceMetrics(metrics);
+  }
+}
+
+
+function setupWebVitals(timeout) {
+  let metrics = {};
+
+  const collectMetrics = (source) => {
+    if (Object.keys(metrics).length > 0) {
+      console.log(`[web-vitals] Sending metrics triggered by: ${source}`, metrics);
+      if (AP._analytics && AP._analytics.trackWebVitals) {
+        AP._analytics.trackWebVitals(metrics);
+        metrics = {};
+      }
+    }
+  }
+
+  // Report all available metrics whenever the page is backgrounded or unloaded.
+  // https://github.com/GoogleChrome/web-vitals/blob/main/README.md#batch-multiple-reports-together
+  addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'hidden') {
+      collectMetrics('visibility change');
+    }
+  });
+
+  Promise.all([onCLS, onFCP, onLCP, onTTFB].map(collector => new Promise(resolve => {
+    collector(metric => {
+      const {name, value} = metric;
+      // Copied from https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/performance/browser-metrics/src/observer/web-vitals-observer.ts#web-vitals-observer.ts-36
+      // round FCP, LCP, TTFB to nearest integer.
+      // CLS is rounded to two decimal places.
+      const metricName = name.toLowerCase();
+      metrics[`metric:${metricName}`] = metricName === 'cls' ? parseFloat(value.toFixed(2)) : Math.round(value);
+      resolve();
+    });
+  }))).then(() => collectMetrics('all collected'));
+
+  // Collect any metrics we can after the timeout, if they haven't already been collected.
+  setTimeout(() => collectMetrics('timeout'), timeout);
+}
+
+export default {
+  sendMetrics,
+  setupWebVitals
+}

package/src/plugin/deprecate.js

@@ -0,0 +1,16 @@
+import AP from 'simple-xdm/combined';
+
+export default function (fn, name, alternate, sinceVersion) {
+  let called = false;
+  return (...args) => {
+    if (!called && typeof console !== 'undefined' && console.warn) {
+      called = true;
+      console.warn(`DEPRECATED API - ${name} has been deprecated ${sinceVersion ? `since ACJS ${sinceVersion}` : 'in ACJS'}` +
+        ` and will be removed in a future release. ${ alternate ? `Use ${alternate} instead.` : 'No alternative will be provided.' }`);
+      if(AP._analytics) {
+        AP._analytics.trackDeprecatedMethodUsed(name);
+      }
+    }
+    return fn(...args);
+  };
+};

package/src/plugin/dialog.js

@@ -0,0 +1,197 @@
+import AP from 'simple-xdm/combined';
+import deprecate from './deprecate';
+import EventsInstance from './events-instance';
+
+let customButtonIncrement = 1;
+
+const getCustomData = deprecate(() => {
+  return AP._data.options.customData;
+}, 'AP.dialog.customData', 'AP.dialog.getCustomData()', '5.0');
+
+if(AP._hostModules && AP._hostModules.dialog) {
+  /**
+   * Returns the custom data Object passed to the dialog at creation.
+   * @noDemo
+   * @deprecated after August 2017 | Please use <code>dialog.getCustomData(callback)</code> instead.
+   * @name customData
+   * @memberOf module:Dialog
+   * @ignore
+   * @example
+   * var myDataVariable = AP.dialog.customData.myDataVariable;
+   *
+   * @return {Object} Data Object passed to the dialog on creation.
+   */
+  Object.defineProperty(AP._hostModules.dialog, 'customData', {
+    get: getCustomData
+  });
+  Object.defineProperty(AP.dialog, 'customData', {
+    get: getCustomData
+  });
+
+  AP.dialog._disableCloseOnSubmit = false;
+  AP.dialog.disableCloseOnSubmit = function(){
+    AP.dialog._disableCloseOnSubmit = true;
+  }
+
+}
+
+const dialogHandlers = {};
+
+EventsInstance.onAny(eventDelegator);
+function eventDelegator(name, args) {
+  let dialogEventMatch = name.match(/^dialog\.(\w+)/);
+  if(!dialogEventMatch) {
+    return;
+  }
+  if(name === 'dialog.button.click') {
+    customButtonEvent(args.button.identifier, args);
+  } else {
+    submitOrCancelEvent(dialogEventMatch[1], args);
+  }
+}
+
+function customButtonEvent(buttonIdentifier, args) {
+  var callbacks = dialogHandlers[buttonIdentifier];
+  if(callbacks && callbacks.length !== 0){
+    try{
+      callbacks.forEach((callback) => {
+        callback.call(null, args);
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}
+
+function submitOrCancelEvent(name, args) {
+  let handlers = dialogHandlers[name];
+  let shouldClose = name !== 'close';
+  var context = null;
+  // ignore events that are triggered by button clicks
+  // allow dialog.close through for close on ESC
+  if (shouldClose && typeof args.button === 'undefined') {
+    return;
+  }
+
+  // if the submit button has been set to not close on click
+  if(name === 'submit' && AP.dialog._disableCloseOnSubmit) {
+    shouldClose = false;
+  }
+
+  try {
+    if (handlers) {
+      if(args && args.button && args.button.name) {
+        context = AP.dialog.getButton(args.button.name);
+      }
+      shouldClose = handlers.reduce((result, cb) => cb.call(context, args) && result, shouldClose);
+    }
+  } catch (err) {
+    console.error(err);
+  } finally {
+    const shouldRemoveHandler = shouldClose || name === 'close';
+    if (shouldRemoveHandler) {
+      delete dialogHandlers[name];
+    }
+  }
+  if (shouldClose) {
+    AP.dialog.close();
+  }
+}
+
+function registerHandler(event, callback) {
+  if (typeof callback === 'function') {
+    if (!dialogHandlers[event]) {
+      dialogHandlers[event] = [];
+    }
+    dialogHandlers[event].push(callback);
+  }
+}
+
+if(AP.dialog && AP.dialog.create) {
+  const original_dialogCreate = AP.dialog.create.prototype.constructor.bind({});
+
+  AP.dialog.create = AP._hostModules.dialog.create = (...args) => {
+    const dialog = original_dialogCreate(...args);
+    /**
+     * Allows the add-on to register a callback function for the given event. The listener is only called once and must be re-registered if needed.
+     * @deprecated after August 2017 | Please use <code>AP.events.on("dialog.close", callback)</code> instead.
+     * @memberOf Dialog~Dialog
+     * @method on
+     * @ignore
+     * @param {String} event name of the event to listen for, such as 'close'.
+     * @param {Function} callback function to receive the event callback.
+     * @noDemo
+     * @example
+     * AP.dialog.create(opts).on("close", callbackFunc);
+     */
+    dialog.on = deprecate(registerHandler,
+      'AP.dialog.on("close", callback)', 'AP.events.on("dialog.close", callback)', '5.0');
+    return dialog;
+  };
+}
+
+if(AP.dialog && AP.dialog.getButton) {
+  let original_dialogGetButton = AP.dialog.getButton.prototype.constructor.bind({});
+
+  AP.dialog.getButton = AP._hostModules.dialog.getButton = function(name) {
+    try {
+      const button = original_dialogGetButton(name);
+      /**
+       * Registers a function to be called when the button is clicked.
+       * @deprecated after August 2017 | Please use <code>AP.events.on("dialog.message", callback)</code> instead.
+       * @method bind
+       * @memberOf Dialog~DialogButton
+       * @ignore
+       * @param {Function} callback function to be triggered on click or programatically.
+       * @noDemo
+       * @example
+       * AP.dialog.getButton('submit').bind(function(){
+       *   alert('clicked!');
+       * });
+       */
+      button.bind = deprecate((callback) => registerHandler(name, callback),
+        'AP.dialog.getDialogButton().bind()', 'AP.events.on("dialog.message", callback)', '5.0');
+
+      return button;
+    } catch (e) {
+      return {};
+    }
+  };
+}
+
+if(AP.dialog && AP.dialog.createButton) {
+  let original_dialogCreateButton = AP.dialog.createButton.prototype.constructor.bind({});
+
+  AP.dialog.createButton = AP._hostModules.dialog.createButton = function(options) {
+    let buttonProperties = {};
+    if(typeof options !== 'object') {
+      buttonProperties.text = options;
+      buttonProperties.identifier = options;
+    } else {
+      buttonProperties = options;
+    }
+    if(!buttonProperties.identifier) {
+      buttonProperties.identifier = 'user.button.' + customButtonIncrement++;
+    }
+    let createButton = original_dialogCreateButton(buttonProperties);
+    return AP.dialog.getButton(buttonProperties.identifier);
+  };
+}
+
+/**
+ * Register callbacks responding to messages from the host dialog, such as "submit" or "cancel"
+ * @deprecated after August 2017 | Please use <code>AP.events.on("dialog.message", callback)</code> instead.
+ * @memberOf module:Dialog
+ * @method onDialogMessage
+ * @ignore
+ * @param {String} buttonName - button either "cancel" or "submit"
+ * @param {Function} listener - callback function invoked when the requested button is pressed
+ */
+if(AP.dialog) {
+  AP.dialog.onDialogMessage = AP._hostModules.dialog.onDialogMessage = deprecate(registerHandler,
+    'AP.dialog.onDialogMessage()', 'AP.events.on("dialog.message", callback)', '5.0');
+}
+
+if(!AP.Dialog){
+  AP.Dialog = AP._hostModules.Dialog = AP.dialog;
+}

package/src/plugin/dollar.js

@@ -0,0 +1,77 @@
+import util from './util';
+
+var each = util.each;
+var extend = util.extend;
+var document = window.document;
+
+function $(sel, context) {
+
+  context = context || document;
+
+  var els = [];
+  if (sel) {
+    if (typeof sel === 'string') {
+      var results = context.querySelectorAll(sel);
+      each(results, function (i, v) {
+        els.push(v);
+      });
+    } else if (sel.nodeType === 1) {
+      els.push(sel);
+    } else if (sel === window) {
+      els.push(sel);
+    }
+  }
+
+  extend(els, {
+    each: function (it) {
+      each(this, it);
+      return this;
+    },
+    bind: function (name, callback) {
+      this.each(function (i, el) {
+        util.bind(el, name, callback);
+      });
+    },
+    attr: function (k) {
+      var v;
+      this.each(function (i, el) {
+        v = el[k] || (el.getAttribute && el.getAttribute(k));
+        return !v;
+      });
+      return v;
+    },
+    removeClass: function (className) {
+      return this.each(function (i, el) {
+        if (el.className) {
+          el.className = el.className.replace(new RegExp('(^|\\s)' + className + '(\\s|$)'), ' ');
+        }
+      });
+    },
+    html: function (html) {
+      return this.each(function (i, el) {
+        el.innerHTML = html;
+      });
+    },
+    append: function (spec) {
+      return this.each(function (i, to) {
+        var el = context.createElement(spec.tag);
+        each(spec, function (k, v) {
+          if (k === '$text') {
+            if (el.styleSheet) { // style tags in ie
+              el.styleSheet.cssText = v;
+            } else {
+              el.appendChild(context.createTextNode(v));
+            }
+          } else if (k !== 'tag') {
+            el[k] = v;
+          }
+        });
+        to.appendChild(el);
+      });
+    }
+  });
+
+  return els;
+}
+
+export default extend($, util);

package/src/plugin/events-instance.js

@@ -0,0 +1,2 @@
+import Events from './events';
+export default new Events();