ActuatorElements

NOTE: It works on latest versions of Chrome, Firefox and Safari. IE never supported. CAUTION: It doesn't work well on Edge currently, but it will be supported soon.

ActuatorElements consist of some custom elements, and bring an template system to html. They depend on Web Components(webcomponents-lite.js polyfill), but not on any other frameworks like Polymer or X-Tag.

ActuatorElements can bind data to an element. However, they can not detect data changes: You need to notify updates to the element manually. If you want to do it automatically, you can use MechanicalElements instead. They are the reactive(without dirty checking!) version of ActuatorElements.

Examples

DEMO

<template is="act-put" id="message">
  <p>${ message }</p>
</template>
 
<script>
  document.querySelector('#message').bindData({
    message: 'Hello, World!',
  });
</script> 

DEMO

<ul>
  <template is="act-each" id="fruits">
    <li>${ capitalize(name) } is ${ color }.</li>
  </template>
</ul>
 
<script>
  document.querySelector('#fruits').bindData([
    { name: 'apple', color: 'red' },
    { name: 'banana', color: 'yellow' },
    { name: 'orange', color: 'orange' }
  ], {
    capitalize(str) {
      return str.charAt(0).toUpperCase() + str.slice(1);
    }
  });
</script> 

Install

$ npm install --save actuator-elements

$ bower install --save actuator-elements

API

All ActuatorElements support interpolation in JavaScript way: ${ ... }. In addition, they have these interfaces.

JavaScript Interface

• bindData(data, utils)
• unbindData()
• notifyUpdate(name)
• notifyUpdateAll()
• boundData: read only

Attribute Interface

• data-bind
• data-json
• data-template

ActPutElement

<template is="act-put" id="counter">count = ${ count }</template>
 
<script>
  const counter = document.querySelector('#counter');
  const data = { count: 0 }
 
  counter.bindData(data);
 
  counter.boundData.count++;  // counter.boundData === data;
  // bound data updated
  // but view is not updated yet...
 
  counter.notifyUpdate('count');
  // view updated!
</script> 

ActEachElement

JavaScript API

• notifySplice(index, removedCount, addedCount)
• notifySpliceAll()
• childCreatedCallback(child::document fragment, data, { index })
• childDetachedCallback(child::document fragment, data, { index })

<template is="act-each" id="hydrocarbons">C2H${ index * 2 }: ${ name }</template>
 
<script>
  const hydrocarbons = document.querySelector('#hydrocarbons');
 
  hydrocarbons.bindData([
    { 'name': 'acetylene' },
    { 'name': 'ethylene' },
  ]);
 
  hydrocarbons.boundData.push({ 'name': 'ethane' });
  hydrocarbons.notifySplice(hydrocarbons.length - 1, 0, 1);
</script> 

ActRegisterElement

Attribute Interface

• data-tag-name: required
• data-extends

<style>
  [data-if=false] {
    display: none;
  } 
</style> 
 
<template is="act-register" data-tag-name="dynamic-langs" data-extends="ul">
  <template is="act-each" data-bind>
    <!-- dynamic languages only displayed -->
    <li data-if="${ dynamic }">${ name }</li>
  </template>
</template>
 
<ul is="dynamic-langs" id="langs"></ul>
 
<script>
  document.querySelector('#langs').bindData([
    { name: 'JavaScript', dynamic: true },
    { name: 'Python', dynamic: true },
    { name: 'Java', dynamic: false },
  ]);
</script> 

ActFormElement

ActFormElement and ActInputElement can automatically detect form changes and reflect them in bound data.

Attributes

• data-updateOn

<style>
  [data-if=false] {
    display: none;
  } 
</style> 
 
<form is="act-form" name="account">
  <label>ID: <input name="id" type="text"></label>
  <label>PASSWORD: <input name="password" type="password"></label>
 
  <p data-if="${ password.length < 6 }">Your password is too weak...</p>
 
  <button type="submit">
</form>
 
<script>
  document.querySelector('[name=account]').bindData({
    completed: false,
    title: 'homework',
  });
</script> 

ActInputElement

NOTE: type="radio" not supported

<input is="act-input" type="text" name="sport" placeholder="what's your favorite sport?">
 
<script>
  document.querySelector('[name=sport]').bindData({
    sport: 'tennis'
  });
</script> 

Tips

Extension

One of the advantages to use ActuatorElements is high extendability.

DEMO

class SortableEachElement extends ActEachElement {
  createdCallback() {
    if (this.content.children.length !== 1) {
      throw new Error('child length must be 1');
    }
 
    // CAUTION: Don't forget to call super.lifecycleCallback
    super.createdCallback();
  }
 
  childCreatedCallback(child, data, context) {
    const { boundData } = this;
 
    // NOTE: child is document fragment
    child.firstElementChild.draggable = true;
 
    child.firstElementChild.addEventListener('dragstart',  e => {
      e.dataTransfer.setData('text/plain', String(context.index));
    });
 
    child.firstElementChild.addEventListener('dragover', e => {
      e.preventDefault();
    });
 
    child.firstElementChild.addEventListener('drop', e => {
      e.preventDefault();
 
      const i = Number(e.dataTransfer.getData('text/plain'));
      const j = context.index;
      const d = boundData[i];
 
      boundData.splice(i, 1);
      boundData.splice(j, 0, d);
 
      for (let k = Math.min(i, j); k < Math.max(i, j) + 1; k++) {
        this.notifyUpdate(k);
      }
    });
  }
}
 
document.registerElement('sortable-each', SortableEachElement);

De-ActuatorElements

You can change the register name not to pollute your namespace.

const act = require('actuator-elements');
 
// register act-each as 'my-each'
document.registerElement('my-each', act.ActEachElement);

// Or you can register all elements with 'my-' prefix 
act.registerAll(prefix='my');