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

package/src/layout/affiliation/affiliation.js

@@ -0,0 +1,295 @@
+import { CarouselItemViewabilityObserver, requestAnimationFrame as raf } from '@miso.ai/commons';
+import { STATUS, LAYOUT_CATEGORY, EVENT_TYPE } from '../../constants.js';
+import CollectionLayout from '../list/collection.js';
+import { affiliation } from '../templates.js';
+
+const TYPE = 'affiliation';
+const DEFAULT_CLASSNAME = 'miso-affiliation';
+
+function root(layout, state) {
+  const { className, role, templates } = layout;
+  const { status } = 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>`;
+}
+
+function ready(layout, state) {
+  const { templates } = layout;
+  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');
+  } else {
+    return templates.empty(layout, state);
+  }
+}
+
+function control(layout, state, direction) {
+  const { className } = layout;
+  return `<div class="${className}__control-${direction}" data-role="${direction}"></div>`;
+}
+
+function body(layout, state) {
+  const { className, templates } = layout;
+  const items = layout._getItems(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>`;
+}
+
+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) {
+    return '';
+  }
+  return `<div class="${className}__item-header"><div class="${className}__item-header-tab">${headerText}</div></div>`;
+}
+
+const DEFAULT_TEMPLATES = Object.freeze({
+  root,
+  [STATUS.READY]: ready,
+  control,
+  body,
+  header,
+  item,
+  itemHeader,
+  affiliation,
+  ctaText: 'View',
+  headerText: 'Featured',
+});
+
+const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
+  ...CollectionLayout.defaultTemplates,
+  ...DEFAULT_TEMPLATES,
+});
+
+function normalizeAutoplayOptions(options) {
+  if (options === true) {
+    options = { interval: 5000 };
+  } 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() {
+    return LAYOUT_CATEGORY.AFFILIATION;
+  }
+
+  static get type() {
+    return TYPE;
+  }
+
+  static get defaultTemplates() {
+    return INHERITED_DEFAULT_TEMPLATES;
+  }
+
+  static get defaultClassName() {
+    return DEFAULT_CLASSNAME;
+  }
+
+  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 = undefined;
+    this._autoplay = {};
+
+    this.autoplay(autoplay);
+  }
+
+  initialize(view) {
+    super.initialize(view);
+    const { viewable: options } = this._view.trackerOptions || {};
+    this._viewable = new CarouselItemViewabilityObserver(this._onViewable.bind(this), options);
+  }
+
+  autoplay(options = true) {
+    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;
+    raf(() => this._syncItemIndex());
+  }
+
+  next() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.itemIndex++;
+  }
+
+  previous() {
+    if (this._itemCount === undefined) {
+      return;
+    }
+    this.itemIndex--;
+  }
+
+  _getItems(state) {
+    const { products } = 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;
+
+    raf(() => {
+      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._track(EVENT_TYPE.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) {
+    super._onClick(event);
+    const element = event.target;
+    if (element.closest(`[data-role="previous"]`)) {
+      this.previous();
+      return;
+    }
+    if (element.closest(`[data-role="next"]`)) {
+      this.next();
+      return;
+    }
+  }
+
+}

package/src/layout/index.js

@@ -11,3 +11,4 @@ export { default as OptionListLayout } from './input/option-list.js';
 export { default as FeedbackLayout } from './radio/feedback.js';
 export { default as TextLayout } from './text/text.js';
 export { default as TypewriterLayout } from './text/typewriter/index.js';
+export { default as AffiliationLayout } from './affiliation/affiliation.js';

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/input/search-box.js

@@ -285,7 +285,8 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
     // TODO: select completion items with arrow keys
   }
 
-  _handleClick({ target }) {
+  _handleClick(event) {
+    const { target } = event;
     const { inputElement } = this._context();
     for (let element = target; element && element !== this._element; element = element.parentElement) {
       if (element.matches('[data-role="submit"]') || element.matches('[data-role="button"]') || element.matches('[type="submit"]')) {
@@ -303,12 +304,16 @@ export default class SearchBoxLayout extends TemplateBasedLayout {
           if (inputElement) {
             inputElement.value = value;
           }
-          this._submit(value);
+          this._view._events.emit('select', Object.freeze({ value: item, index, domEvent: event }));
+          if (!event.defaultPrevented) {
+            this._submit(value);
+          }
         }
         this.close();
         return;
       }
       if (element.matches('[data-role="product-item"]')) {
+        this._view._events.emit('select', Object.freeze({ value: item, index, domEvent: event }));
         return;
       }
     }

package/src/layout/list/carousel.js

@@ -17,7 +17,8 @@ const INHERITED_DEFAULT_TEMPLATES = Object.freeze({
 
 function ready(layout, state) {
   const { templates } = layout;
-  const nonEmpty = state.value && state.value.length > 0;
+  const items = layout._getItems(state);
+  const nonEmpty = items && items.length > 0;
   const html = Object.getPrototypeOf(layout.constructor).defaultTemplates.ready(layout, state);
   return nonEmpty ? templates.carousel(layout, state, html) : html;
 }
@@ -60,7 +61,8 @@ export default class CarouselLayout extends CollectionLayout {
   _render(element, states, controls) {
     super._render(element, states, controls);
     const { state } = states;
-    this._itemCount = state.value ? state.value.length : undefined;
+    const items = this._getItems(state);
+    this._itemCount = items ? items.length : undefined;
     this.syncSize();
   }
 

package/src/layout/list/collection.js

@@ -1,9 +1,7 @@
-import { defineValues } from '@miso.ai/commons';
 import { STATUS, LAYOUT_CATEGORY } from '../../constants.js';
 import TemplateBasedLayout from '../template.js';
-import { product, article, question, productInfoBlock, articleInfoBlock, imageBlock, indexBlock, helpers } from '../templates.js';
-
-const VALUE = Symbol.for('miso.value');
+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';
 
 function root(layout, state) {
   const { className, role, templates } = layout;
@@ -14,7 +12,7 @@ function root(layout, state) {
 
 function ready(layout, state) {
   const { templates } = layout;
-  const values = state.value;
+  const values = layout._getItems(state);
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
   if ((values && values.length > 0) || state.ongoing) {
@@ -28,7 +26,7 @@ function list(layout, state, values) {
   const { className, templates, options } = 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, { offset = 0 } = {}) {
@@ -59,6 +57,14 @@ const DEFAULT_TEMPLATES = Object.freeze({
   item,
   productInfoBlock,
   articleInfoBlock,
+  brandBlock,
+  titleBlock,
+  descriptionBlock,
+  dateBlock,
+  priceBlock,
+  discountRateText,
+  ctaBlock,
+  cta,
   imageBlock,
   indexBlock,
   helpers,
@@ -80,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 }) {
@@ -117,7 +118,7 @@ export default class CollectionLayout extends TemplateBasedLayout {
   _html(state, rendered, incremental) {
     if (incremental) {
       const offset = rendered.value.length;
-      const values = state.value.slice(offset);
+      const values = (this._getItems(state) || []).slice(offset);
       return values.length > 0 ? this.templates.items(this, state, values, { offset }) : '';
     } else {
       return this.templates.root(this, state);
@@ -136,42 +137,23 @@ 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 = state.value || [];
-    let i = 0;
-    for (const itemElement of this._listItemElements(element)) {
-      itemElement[VALUE] = values[i++];
-    }
+  _unrender() {
+    this._clearBindings();
   }
 
-  _getListElement(element) {
-    return element.querySelector(`.${this.className}__list`);
+  _getItems(state) {
+    return state.value;
   }
 
-  _listItemElements(element) {
-    return element ? Array.from(element.querySelectorAll(`[data-role="item"]`)) : [];
+  _getListElement(element) {
+    return element.querySelector('[data-role="list"]');
   }
 
-  _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;
+  _getItemElements(element) {
+    return element ? Array.from(element.querySelectorAll(`[data-role="item"]`)) : [];
   }
 
   _onClick(event) {
@@ -179,14 +161,26 @@ export default class CollectionLayout extends TemplateBasedLayout {
     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);