@miso.ai/client-sdk-ui 1.10.0-beta.8 → 1.10.0

package/dist/cjs/layout/affiliation/affiliation.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _commons = require("@miso.ai/commons");
 var _constants = require("../../constants.js");
 var _collection = _interopRequireDefault(require("../list/collection.js"));
 var _templates = require("../templates.js");
-const _excluded = ["className", "templates"];
+var _svgs = require("../../asset/svgs.js");
+const _excluded = ["className", "templates", "autoplay"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'affiliation';
@@ -32,45 +34,134 @@ function ready(layout, state) {
   } = layout;
   const items = layout._getItems(state);
   if (items && items.length > 0) {
-    return templates.body(layout, state);
+    return templates.controlContainer(layout, state, 'previous') + templates.body(layout, state) + templates.controlContainer(layout, state, 'next');
   } else {
     return templates.empty(layout, state);
   }
 }
+function controlContainer(layout, state, direction) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__control-${direction}-container">${templates.control(layout, state, direction)}</div>`;
+}
+function control(layout, state, direction) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__control-${direction}" data-role="${direction}">${templates.controlIcon(layout, state, direction)}</div>`;
+}
+function controlIcon(layout, state, direction) {
+  return _svgs.TRIANGLE;
+}
 function body(layout, state) {
   const {
     className,
     templates
   } = layout;
   const items = layout._getItems(state);
-  return `<div class="${className}__body">${templates.header(layout, state)}${templates.list(layout, state, items)}</div>`;
+  return `<div class="${className}__body">${templates.list(layout, state, items)}</div>`;
+}
+function item(layout, state, value, index) {
+  const {
+    className,
+    templates,
+    options
+  } = layout;
+  const {
+    itemType
+  } = options;
+  const header = templates.itemHeader(layout, state, value, {
+    index
+  });
+  const body = templates[itemType](layout, state, value, {
+    index
+  });
+  return `<li class="${className}__item"><div class="${className}__item-inner">${header}${body}</div></li>`;
 }
-function header(layout, state) {
+function itemHeader(layout, state, value, meta) {
   const {
     className,
     templates
   } = layout;
   let {
-    headerText
+    itemHeaderLeftText,
+    itemHeaderRightText
   } = templates;
-  if (typeof headerText === 'function') {
-    headerText = headerText(layout, state);
-  }
-  if (!headerText) {
+  itemHeaderLeftText = _templates.helpers.asFunction(itemHeaderLeftText)(layout, state, value, meta);
+  itemHeaderRightText = _templates.helpers.asFunction(itemHeaderRightText)(layout, state, value, meta);
+  return `<div class="${className}__item-header">
+  <div class="${className}__item-header-left">${itemHeaderLeftText}</div>
+  <div class="${className}__item-header-right">${itemHeaderRightText}</div>
+</div>`;
+}
+function itemHeaderRightText(layout, state, value, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  const logoText = _templates.helpers.asFunction(templates.logoText)(layout, state, value, meta) || '';
+  const logoImg = _templates.helpers.asFunction(templates.logoImg)(layout, state, value, meta);
+  return logoImg ? `<span class="${className}__item-header-logo-phrase">${logoText}</span>${logoImg}` : '';
+}
+function logoImg(layout, state, value, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  const logoUrl = _templates.helpers.asFunction(templates.logoUrl)(layout, state, value, meta);
+  if (!logoUrl) {
     return '';
   }
-  return `<div class="${className}__header"><div class="${className}__header-tab">${headerText}</div></div>`;
+  const logoAltText = _templates.helpers.asFunction(templates.logoAltText)(layout, state, value, meta);
+  const logoAltTextAttr = logoAltText ? ` alt="${logoAltText}"` : '';
+  return `<img class="${className}__item-header-logo" src="${logoUrl}"${logoAltTextAttr}>`;
 }
 const DEFAULT_TEMPLATES = Object.freeze({
   root,
   [_constants.STATUS.READY]: ready,
+  controlContainer,
+  control,
+  controlIcon,
   body,
-  header,
+  item,
+  itemHeader,
   affiliation: _templates.affiliation,
-  ctaText: 'View',
-  headerText: 'Featured'
+  ctaText: 'View deal',
+  itemHeaderLeftText: `Today's best deals`,
+  itemHeaderRightText,
+  logoImg,
+  logoText: 'Selected by'
 });
 const INHERITED_DEFAULT_TEMPLATES = Object.freeze(Object.assign({}, _collection.default.defaultTemplates, DEFAULT_TEMPLATES));
+
+/*
+function normalizeAutoplayOptions(options) {
+  if (options === true) {
+    options = { interval: 10000 };
+  } else if (typeof options === 'number') {
+    if (options <= 0) {
+      options = false;
+    } else {
+      options = { interval: Math.max(options, 500) };
+    }
+  }
+  return options;
+}
+
+function autoplayOptionsEquals(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  return a.interval === b.interval;
+}
+*/
+
 class AffiliationLayout extends _collection.default {
   static get category() {
     return _constants.LAYOUT_CATEGORY.AFFILIATION;
@@ -96,6 +187,71 @@ class AffiliationLayout extends _collection.default {
       itemType: 'affiliation',
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
     }, options));
+    this._itemCount = undefined;
+    this._itemIndex = 0;
+    this._displayedCount = undefined;
+    this._displayedIndex = undefined;
+    this._viewable = undefined;
+
+    // TODO: extract this
+    /*
+    this._autoplay = {};
+    this.autoplay(autoplay);
+    */
+  }
+  initialize(view) {
+    super.initialize(view);
+    const {
+      viewable: options
+    } = this._view.tracker.options || {};
+    this._viewable = new _commons.CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
+  }
+
+  /*
+  autoplay(options = false) {
+    options = normalizeAutoplayOptions(options);
+    if (autoplayOptionsEquals(options, this._autoplay.options)) {
+      return;
+    }
+    if (this._autoplay.options) {
+      clearInterval(this._autoplay.intervalId);
+    }
+    this._autoplay = { options };
+    // TODO: use slower transition speed for autoplay
+    // TODO: pause on hover
+    // TODO: cooldown after manual interaction
+    if (options) {
+      this._autoplay.intervalId = setInterval(() => this.next(), options.interval);
+    }
+  }
+  */
+
+  get itemIndex() {
+    return this._itemIndex;
+  }
+  set itemIndex(index) {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    if (index < 0) {
+      index = this._itemCount - 1;
+    } else if (index >= this._itemCount) {
+      index = 0;
+    }
+    this._itemIndex = index;
+    (0, _commons.requestAnimationFrame)(() => this._syncItemIndex());
+  }
+  next() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.itemIndex++;
+  }
+  previous() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.itemIndex--;
   }
   _getItems(state) {
     const {
@@ -103,5 +259,99 @@ class AffiliationLayout extends _collection.default {
     } = state.value || {};
     return products;
   }
+  _render(element, states, controls) {
+    super._render(element, states, controls);
+
+    // update item count, but raf to display as attribute
+    const items = this._getItems(states.state);
+    this._itemCount = items ? items.length : undefined;
+    (0, _commons.requestAnimationFrame)(() => {
+      this._syncItemCount();
+      this._syncItemIndex();
+    });
+  }
+  _syncElement(element) {
+    const oldElement = this._element;
+    super._syncElement(element);
+    this._syncViewableElement(oldElement, element);
+  }
+  _syncViewableElement(oldElement, newElement) {
+    if (oldElement === newElement) {
+      return;
+    }
+    oldElement && this._viewable.unobserve(oldElement);
+    newElement && this._viewable.observe(newElement);
+  }
+  _syncItemCount() {
+    const itemCount = this._itemCount;
+    if (itemCount === this._displayedCount) {
+      return;
+    }
+    let {
+      element
+    } = this._view;
+    element = element.firstElementChild;
+    if (!element) {
+      return;
+    }
+    this._displayedCount = itemCount;
+    if (itemCount === undefined) {
+      element.removeAttribute('data-item-count');
+    } else {
+      element.setAttribute('data-item-count', itemCount);
+    }
+  }
+  _syncItemIndex() {
+    const index = this._itemIndex;
+    if (index === this._displayedIndex) {
+      return;
+    }
+    const {
+      element
+    } = this._view;
+    const listElement = element && this._getListElement(element);
+    if (!listElement) {
+      return;
+    }
+    this._displayedIndex = index;
+    listElement.style.left = `${-index * 100}%`;
+    this._viewable.display(index);
+    this._view._events.emit('display', {
+      index
+    });
+  }
+  _onViewable(index) {
+    const item = this._getRenderedItemData(index);
+    if (!item) {
+      return;
+    }
+    this._view.tracker.viewable([item]);
+  }
+  _getRenderedItemData(index) {
+    const {
+      value
+    } = this._rendered.get(this._element) || {};
+    if (!value) {
+      return undefined;
+    }
+    const {
+      products = []
+    } = value;
+    return products[index];
+  }
+  _trackViewables() {} // omit default behavior for we want to track by other means
+
+  _onClick(event) {
+    const element = event.target;
+    if (element.closest(`[data-role="previous"]`)) {
+      this.previous();
+      return;
+    }
+    if (element.closest(`[data-role="next"]`)) {
+      this.next();
+      return;
+    }
+    super._onClick(event);
+  }
 }
 exports.default = AffiliationLayout;

package/dist/cjs/layout/input/option-list.js

@@ -8,10 +8,10 @@ var _commons = require("@miso.ai/commons");
 var _constants = require("../../constants.js");
 var _index = require("../../actor/index.js");
 var _template = _interopRequireDefault(require("../template.js"));
+var _trackable = require("../trackable.js");
 const _excluded = ["className", "templates"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-const OPTION_VALUE = Symbol.for('miso.option-value');
 const TYPE = 'option-list';
 const DEFAULT_CLASSNAME = 'miso-option-list';
 function root(layout, state) {
@@ -77,11 +77,7 @@ class OptionListLayout extends _template.default {
       className,
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates)
     }, options));
-    (0, _commons.defineValues)(this, {
-      bindings: Object.freeze({
-        list: this._listBindings.bind(this)
-      })
-    });
+    this._initTrackable();
   }
   initialize(view) {
     this._view = view;
@@ -98,61 +94,44 @@ class OptionListLayout extends _template.default {
   }
   _render(element, data, controls) {
     super._render(element, data, controls);
-    this._syncOptionValues(element, data);
-  }
-  _syncOptionValues(element, _ref2) {
-    let {
+    const {
       state
-    } = _ref2;
-    if (!element) {
-      return;
-    }
-    const optionsElement = this._getOptionsElement(element);
+    } = data;
+    this._syncBindings(element, state);
+    this._syncOptionValues(element, state);
+  }
+  _unrender() {
+    this._clearBindings();
+  }
+  _syncOptionValues(element, state) {
+    const optionsElement = element && this._getOptionsElement(element);
     if (!optionsElement) {
       return;
     }
-    const optionValues = state.value || [];
+    const optionValues = this._getItems(state) || [];
     optionsElement.classList[optionValues.length === 0 ? 'add' : 'remove']('empty');
-    let i = 0;
-    for (const optionElement of this._listOptionElements(optionsElement)) {
-      optionElement[OPTION_VALUE] = optionValues[i++];
-    }
   }
-  _listBindings(rootElement) {
-    if (!rootElement) {
-      return [];
-    }
-    const optionsElement = this._getOptionsElement(rootElement);
-    const bindings = [];
-    for (const element of this._listOptionElements(optionsElement)) {
-      const value = element[OPTION_VALUE];
-      if (!value) {
-        continue;
-      }
-      const key = value.text || value;
-      bindings.push({
-        key,
-        value,
-        element
-      });
-    }
-    return bindings;
+  _getItems(state) {
+    return state.value;
   }
   _getOptionsElement(element) {
     return element.querySelector(`[data-role="options"]`);
   }
-  _listOptionElements(optionsElement) {
-    return optionsElement ? Array.from(optionsElement.querySelectorAll(`[data-role="option"]`)) : [];
+  _getItemElements(element) {
+    return element ? Array.from(element.querySelectorAll(`[data-role="option"]`)) : [];
   }
-  _handleClick(e) {
-    for (let element = e.target; element && element !== this._view.element; element = element.parentElement) {
-      const option = element[OPTION_VALUE];
-      if (!option) {
-        continue;
-      }
-      this._submit(option.text);
+  _handleClick(event) {
+    const element = event.target.closest(`[data-role="option"]`);
+    if (!element) {
+      return;
+    }
+    const binding = this._bindings.get(element);
+    const option = binding && binding.value;
+    if (!option) {
       return;
     }
+    this._trackClick(event, binding);
+    this._submit(option.text);
   }
   async _submit(value) {
     if (!value) {
@@ -163,5 +142,11 @@ class OptionListLayout extends _template.default {
       q: value
     });
   }
+  destroy() {
+    this._destroyTrackable();
+    this._view = undefined;
+    super.destroy();
+  }
 }
-exports.default = OptionListLayout;
+exports.default = OptionListLayout;
+(0, _trackable.makeTrackable)(OptionListLayout.prototype);

package/dist/cjs/layout/list/collection.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _commons = require("@miso.ai/commons");
 var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
+var _trackable = require("../trackable.js");
 var _templates = require("../templates.js");
 const _excluded = ["templates", "itemType"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
-const VALUE = Symbol.for('miso.value');
 function root(layout, state) {
   const {
     className,
@@ -45,7 +44,7 @@ function list(layout, state, values) {
   } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
 }
 function items(layout, state, values) {
   let {
@@ -116,19 +115,12 @@ class CollectionLayout extends _template.default {
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates),
       itemType
     }, options));
-    (0, _commons.defineValues)(this, {
-      bindings: Object.freeze({
-        list: this._listBindings.bind(this)
-      })
-    });
     this._view = undefined;
+    this._initTrackable();
   }
   initialize(view) {
     this._view = view;
-    const {
-      proxyElement
-    } = this._view = view;
-    this._unsubscribes.push(proxyElement.on('click', this._onClick.bind(this)));
+    this._unsubscribes.push(view.proxyElement.on('click', this._onClick.bind(this)));
   }
   _preprocess(_ref2) {
     let {
@@ -178,55 +170,40 @@ class CollectionLayout extends _template.default {
     } else {
       element.innerHTML = html;
     }
-    this._syncValues(element, state);
+    this._syncBindings(element, state);
   }
-  _syncValues(element, state) {
-    if (!element) {
-      return;
-    }
-    const values = this._getItems(state) || [];
-    let i = 0;
-    for (const itemElement of this._listItemElements(element)) {
-      itemElement[VALUE] = values[i++];
-    }
+  _unrender() {
+    this._clearBindings();
   }
   _getItems(state) {
     return state.value;
   }
   _getListElement(element) {
-    return element.querySelector(`.${this.className}__list`);
+    return element.querySelector('[data-role="list"]');
   }
-  _listItemElements(element) {
+  _getItemElements(element) {
     return element ? Array.from(element.querySelectorAll(`[data-role="item"]`)) : [];
   }
-  _listBindings(rootElement) {
-    if (!rootElement) {
-      return [];
-    }
-    const bindings = [];
-    for (const element of this._listItemElements(rootElement)) {
-      const value = element[VALUE];
-      if (!value) {
-        continue;
-      }
-      const key = this.options.itemType === 'product' ? value.product_id : value;
-      bindings.push({
-        element,
-        key,
-        value
-      });
-    }
-    return bindings;
-  }
   _onClick(event) {
     const element = event.target.closest(`[data-role="item"]`);
     if (!element) {
       return;
     }
-    const value = element[VALUE];
+    const binding = this._bindings.get(element);
+    if (!binding) {
+      return;
+    }
+    this._trackClick(event, binding);
+    this._emitClickEvent(event, binding);
+  }
+  _emitClickEvent(event, binding) {
     const {
       session
     } = this._view._state;
+    const {
+      value,
+      element
+    } = binding;
     this._view._events.emit('click', {
       session,
       value,
@@ -235,8 +212,10 @@ class CollectionLayout extends _template.default {
     });
   }
   destroy() {
+    this._destroyTrackable();
     this._view = undefined;
     super.destroy();
   }
 }
-exports.default = CollectionLayout;
+exports.default = CollectionLayout;
+(0, _trackable.makeTrackable)(CollectionLayout.prototype);