@miso.ai/client-sdk-ui 1.10.0-beta.9 → 1.10.1-beta.0

package/src/layout/affiliation/affiliation.js

@@ -1,7 +1,8 @@
-import { STATUS, LAYOUT_CATEGORY, EVENT_TYPE } from '../../constants.js';
+import { CarouselItemViewabilityObserver, requestAnimationFrame as raf } from '@miso.ai/commons';
+import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
 import CollectionLayout from '../list/collection.js';
-import { affiliation } from '../templates.js';
-import CarouselItemViewableTracker from './viewable.js';
+import { affiliation, helpers } from '../templates.js';
+import { TRIANGLE } from '../../asset/svgs.js';
 
 const TYPE = 'affiliation';
 const DEFAULT_CLASSNAME = 'miso-affiliation';
@@ -12,7 +13,10 @@ function root(layout, state) {
   const roleAttr = role ? ` data-role="${role}"` : '';
   const data = state.value || {};
   const channelAttr = data.channel ? ` data-channel="${data.channel}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const items = layout._getItems(state);
+  const itemCount = items ? items.length : undefined;
+  const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 
 function ready(layout, state) {
@@ -20,15 +24,24 @@ function ready(layout, state) {
   const items = layout._getItems(state);
 
   if (items && items.length > 0) {
-    return templates.control(layout, state, 'previous') + templates.body(layout, state) + templates.control(layout, state, 'next');
+    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 } = layout;
-  return `<div class="${className}__control-${direction}" data-role="${direction}"></div>`;
+  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 TRIANGLE;
 }
 
 function body(layout, state) {
@@ -37,49 +50,58 @@ function body(layout, state) {
   return `<div class="${className}__body">${templates.list(layout, state, items)}</div>`;
 }
 
-function header(layout, state) {
-  const { className, templates } = layout;
-  let { headerText } = templates;
-  if (typeof headerText === 'function') {
-    headerText = headerText(layout, state);
-  }
-  if (!headerText) {
-    return '';
-  }
-  return `<div class="${className}__header"><div class="${className}__header-tab">${headerText}</div></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">${header}${body}</li>`;
+  return `<li class="${className}__item"><div class="${className}__item-inner">${header}${body}</div></li>`;
 }
 
 function itemHeader(layout, state, value, meta) {
   const { className, templates } = layout;
-  let { headerText } = templates;
-  if (typeof headerText === 'function') {
-    headerText = headerText(layout, state, value, meta);
-  }
-  if (!headerText) {
+  let { itemHeaderLeftText, itemHeaderRightText } = templates;
+  itemHeaderLeftText = helpers.asFunction(itemHeaderLeftText)(layout, state, value, meta);
+  itemHeaderRightText = 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 = helpers.asFunction(templates.logoText)(layout, state, value, meta) || '';
+  const logoImg = 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 = helpers.asFunction(templates.logoUrl)(layout, state, value, meta);
+  if (!logoUrl) {
     return '';
   }
-  return `<div class="${className}__item-header"><div class="${className}__item-header-tab">${headerText}</div></div>`;
+  const logoAltText = 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,
   [STATUS.READY]: ready,
+  controlContainer,
   control,
+  controlIcon,
   body,
-  header,
   item,
   itemHeader,
   affiliation,
-  ctaText: 'View',
-  headerText: 'Featured',
+  ctaText: 'View deal',
+  itemHeaderLeftText: `Today's best deals`,
+  itemHeaderRightText,
+  logoImg,
+  logoText: 'Selected by',
 });
 
 const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
@@ -87,6 +109,31 @@ const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
   ...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;
+}
+*/
+
 export default class AffiliationLayout extends CollectionLayout {
 
   static get category() {
@@ -105,33 +152,51 @@ export default class AffiliationLayout extends CollectionLayout {
     return DEFAULT_CLASSNAME;
   }
 
-  constructor({ className = DEFAULT_CLASSNAME, templates, ...options } = {}) {
+  constructor({ className = DEFAULT_CLASSNAME, templates, autoplay, ...options } = {}) {
     super({ className, itemType: 'affiliation', templates: { ...DEFAULT_TEMPLATES, ...templates }, ...options });
     this._itemCount = undefined;
     this._itemIndex = 0;
+    this._displayedCount = undefined;
     this._displayedIndex = undefined;
-    this._viewable = new CarouselItemViewableTracker(this._onViewable.bind(this));
+    this._viewable = undefined;
+
+    // TODO: extract this
+    /*
+    this._autoplay = {};
+    this.autoplay(autoplay);
+    */
   }
 
-  get itemIndex() {
-    return this._itemIndex;
+  initialize(view) {
+    super.initialize(view);
+    const { viewable: options } = this._view.tracker.options || {};
+    this._viewable = new CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
   }
 
-  next() {
-    if (this._itemCount === undefined) {
+  /*
+  autoplay(options = false) {
+    options = normalizeAutoplayOptions(options);
+    if (autoplayOptionsEquals(options, this._autoplay.options)) {
       return;
     }
-    this.go(this._itemIndex + 1);
+    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);
+    }
   }
+  */
 
-  previous() {
-    if (this._itemCount === undefined) {
-      return;
-    }
-    this.go(this._itemIndex - 1);
+  get itemIndex() {
+    return this._itemIndex;
   }
 
-  go(index) {
+  set itemIndex(index) {
     if (this._itemCount === undefined) {
       return;
     }
@@ -141,7 +206,21 @@ export default class AffiliationLayout extends CollectionLayout {
       index = 0;
     }
     this._itemIndex = index;
-    this._syncItemIndex();
+    raf(() => this._syncItemIndex());
+  }
+
+  next() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.itemIndex++;
+  }
+
+  previous() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.itemIndex--;
   }
 
   _getItems(state) {
@@ -151,7 +230,8 @@ export default class AffiliationLayout extends CollectionLayout {
 
   _render(element, states, controls) {
     super._render(element, states, controls);
-    this._syncItemCount(element, states);
+    // sync again for incremental item rendering
+    this._syncItemCount(states);
     this._syncItemIndex();
   }
 
@@ -169,14 +249,18 @@ export default class AffiliationLayout extends CollectionLayout {
     newElement && this._viewable.observe(newElement);
   }
 
-  _syncItemCount(element, states) {
+  _syncItemCount({ state } = {}) {
+    const items = this._getItems(state);
+    const itemCount = this._itemCount = items ? items.length : undefined;
+    if (itemCount === this._displayedCount) {
+      return;
+    }
+    let { element } = this._view;
     element = element.firstElementChild;
     if (!element) {
       return;
     }
-    const { state } = states;
-    const items = this._getItems(state);
-    const itemCount = this._itemCount = items ? items.length : undefined;
+    this._displayedCount = itemCount;
     if (itemCount === undefined) {
       element.removeAttribute('data-item-count');
     } else {
@@ -185,16 +269,15 @@ export default class AffiliationLayout extends CollectionLayout {
   }
 
   _syncItemIndex() {
-    // TODO: raf
+    const index = this._itemIndex;
+    if (index === this._displayedIndex) {
+      return;
+    }
     const { element } = this._view;
     const listElement = element && this._getListElement(element);
     if (!listElement) {
       return;
     }
-    const index = this._itemIndex;
-    if (index === this._displayedIndex) {
-      return;
-    }
     this._displayedIndex = index;
     listElement.style.left = `${-index * 100}%`;
     this._viewable.display(index);
@@ -206,7 +289,7 @@ export default class AffiliationLayout extends CollectionLayout {
     if (!item) {
       return;
     }
-    this._view._events.emit(EVENT_TYPE.VIEWABLE, [item]);
+    this._view.tracker.viewable([item]);
   }
 
   _getRenderedItemData(index) {
@@ -218,8 +301,9 @@ export default class AffiliationLayout extends CollectionLayout {
     return products[index];
   }
 
+  _trackViewables() {} // omit default behavior for we want to track by other means
+
   _onClick(event) {
-    super._onClick(event);
     const element = event.target;
     if (element.closest(`[data-role="previous"]`)) {
       this.previous();
@@ -229,6 +313,7 @@ export default class AffiliationLayout extends CollectionLayout {
       this.next();
       return;
     }
+    super._onClick(event);
   }
 
 }

package/src/layout/input/option-list.js

@@ -1,9 +1,8 @@
-import { defineValues, escapeHtml } from '@miso.ai/commons';
+import { escapeHtml } from '@miso.ai/commons';
 import { LAYOUT_CATEGORY } from '../../constants.js';
 import { fields } from '../../actor/index.js';
 import TemplateBasedLayout from '../template.js';
-
-const OPTION_VALUE = Symbol.for('miso.option-value');
+import { makeTrackable } from '../trackable.js';
 
 const TYPE = 'option-list';
 const DEFAULT_CLASSNAME = 'miso-option-list';
@@ -64,11 +63,7 @@ export default class OptionListLayout extends TemplateBasedLayout {
       templates: { ...DEFAULT_TEMPLATES, ...templates },
       ...options,
     });
-    defineValues(this, {
-      bindings: Object.freeze({
-        list: this._listBindings.bind(this),
-      }),
-    });
+    this._initTrackable();
   }
 
   initialize(view) {
@@ -89,59 +84,48 @@ export default class OptionListLayout extends TemplateBasedLayout {
 
   _render(element, data, controls) {
     super._render(element, data, controls);
-    this._syncOptionValues(element, data);
+    const { state } = data;
+    this._syncBindings(element, state);
+    this._syncOptionValues(element, state);
   }
 
-  _syncOptionValues(element, { state }) {
-    if (!element) {
-      return;
-    }
-    const optionsElement = this._getOptionsElement(element);
+  _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) {
@@ -152,4 +136,12 @@ export default class OptionListLayout extends TemplateBasedLayout {
     this._view.hub.trigger(fields.query(), { q: value });
   }
 
+  destroy() {
+    this._destroyTrackable();
+    this._view = undefined;
+    super.destroy();
+  }
+
 }
+
+makeTrackable(OptionListLayout.prototype);

package/src/layout/list/collection.js

@@ -1,10 +1,8 @@
-import { defineValues } from '@miso.ai/commons';
 import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
+import { makeTrackable } from '../trackable.js';
 import { product, article, question, productInfoBlock, articleInfoBlock, titleBlock, brandBlock, descriptionBlock, dateBlock, priceBlock, discountRateText, ctaBlock, cta, imageBlock, indexBlock, helpers } from '../templates.js';
 
-const VALUE = Symbol.for('miso.value');
-
 function root(layout, state) {
   const { className, role, templates } = layout;
   const { status } = state;
@@ -88,18 +86,13 @@ export default class CollectionLayout extends TemplateBasedLayout {
       itemType,
       ...options,
     });
-    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({ state, rendered }) {
@@ -144,18 +137,11 @@ export default class CollectionLayout extends TemplateBasedLayout {
     } 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) {
@@ -166,39 +152,35 @@ export default class CollectionLayout extends TemplateBasedLayout {
     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, element, domEvent: event });
   }
 
   destroy() {
+    this._destroyTrackable();
     this._view = undefined;
     super.destroy();
   }
 
 }
+
+makeTrackable(CollectionLayout.prototype);

package/src/layout/templates.js

@@ -44,12 +44,11 @@ export function article(layout, state, data, meta) {
 
 export function affiliation(layout, state, data, meta) {
   const { templates } = layout;
-  const [openTag, closeTag] = tagPair(layout, data);
+  const [openTag, closeTag] = tagPair(layout, data, { link: false});
   return [
     openTag,
     (templates.infoBlock || templates.affiliationInfoBlock || affiliationInfoBlock)(layout, data, meta),
-    (templates.imageBlock || imageBlock)(layout, data, meta),
-    (templates.brandBlock || brandBlock)(layout, data, meta),
+    (templates.imageBlock || imageBlock)(layout, data, { brand: true, ...meta, }),
     closeTag,
   ].join('');
 }
@@ -123,7 +122,7 @@ export function priceBlock(layout, data) {
   content += `<span class="${className}__item-price miso-price" data-currency="${currency}">${price}</span>`;
   // discount rate
   if (discount_rate_percent) {
-    const text = (templates.discountRateText || discountRateText)(layout, data);
+    const text = (templates.discountRateText || discountRateText)(layout, { ...data, discount_rate_percent });
     content += ` <span class="${className}__item-discount-rate">${text}</span>`;
   }
   return `<div class="${className}__item-price-container">${content}</div>`;
@@ -133,12 +132,15 @@ export function discountRateText(layout, { discount_rate_percent }) {
   return `(${discount_rate_percent}% off)`;
 }
 
-export function imageBlock({ className }, { cover_image }) {
+export function imageBlock(layout, data, meta) {
+  const { className, templates } = layout;
+  const { cover_image } = data;
   if (!cover_image) {
     return '';
   }
   const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
-  return `<div class="${className}__item-cover-image-container">${img}</div>`;
+  const brand = meta.brand ? (templates.brandBlock || brandBlock)(layout, data, meta) : '';
+  return `<div class="${className}__item-cover-image-container">${img}${brand}</div>`;
 }
 
 export function indexBlock({ className }, data, { index }) {
@@ -147,28 +149,27 @@ export function indexBlock({ className }, data, { index }) {
 
 export function ctaBlock(layout, data, meta) {
   const { className, templates } = layout;
-  let _cta = templates.cta || cta;
-  if (typeof _cta === 'function') {
-    _cta = _cta(layout, data, meta);
-  }
-  return _cta ? `<div class="${className}__item-cta-container">${_cta}</div>` : '';
+  const cta = helpers.asFunction(templates.cta)(layout, data, meta);
+  return cta ? `<div class="${className}__item-cta-container">${cta}</div>` : '';
 }
 
 export function cta(layout, data, meta) {
-  const { className, templates } = layout;
-  let text = templates.ctaText;
-  if (typeof text === 'function') {
-    text = text(layout, data, meta);
+  const { templates } = layout;
+  const { url } = data;
+  if (!url) {
+    return '';
   }
-  return text ? `<div class="${className}__item-cta">${text}</div>` : '';
+  const [openTag, closeTag] = tagPair(layout, { url }, { classSuffix: 'item-cta', role: 'cta' });
+  const ctaText = helpers.asFunction(templates.ctaText)(layout, data, meta);
+  return ctaText ? `${openTag}${ctaText}${closeTag}` : '';
 }
 
 // helpers //
-function tagPair({ className, options = {} }, { product_id, url }, { classSuffix = 'item-body', role = 'item' } = {}) {
+function tagPair({ className, options = {} }, { product_id, url }, { classSuffix = 'item-body', role = 'item', ...meta } = {}) {
   const { link = {} } = options;
   const { target = '_blank', rel = 'noopener' } = link; // TODO: other properties
-  const tag = url ? 'a' : 'div';
-  const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
+  const tag = meta.link !== false && url ? 'a' : 'div';
+  const urlAttrs = meta.link !== false && url ? `href="${url}" target="${target}" rel="${rel}"` : '';
   const productAttrs = product_id ? `${ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
   const roleAttrs = role ? `data-role="${role}"` : '';
   return [`<${tag} class="${className}__${classSuffix}" ${roleAttrs} ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
@@ -189,8 +190,13 @@ function formatDate(date, fn = DEFAULT_DATE_OPTIONS) {
   }
 }
 
+function asFunction(template = '') {
+  return typeof template === 'function' ? template : () => template;
+}
+
 export const helpers = Object.freeze({
   tagPair,
   formatDate,
   escapeHtml,
+  asFunction,
 });