How to use the incremental-dom.elementClose function in incremental-dom

To help you get started, we’ve selected a few incremental-dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github eliot-akira / idom / src / index.js View on Github external
// Prepare arguments
  // (See: http://google.github.io/incremental-dom/#api/elementOpen)
  let args = [tag, null, null]

  for (let key in props) {
    if (key==='key') {
      args[1] = props.key
      delete props.key
    }
    args.push(key)
    args.push(props[key])
  }

  elementOpen.apply(null, args)
  children.forEach(create)
  elementClose(tag)
}
github spectjs / spect / src / min.js View on Github external
let el

      // <ul is="">
      if (is) {
        function create() { return document.createElement(tag, { is }) }
        el = elementOpen(create, key, staticProps, ...props)
        children.forEach(render)
        elementClose(create)
      }

      // if (!children) el = elementVoid(tag, key, staticProps, ...props)
      else {
        el = elementOpen(tag, key, staticProps, ...props)
        children.forEach(render)
        elementClose(tag)
      }

      // plan aspects init
      if (use) (new $(el)).use(...use)

      // run provided effects
      for (let effect in effects) {
        $(el)[effect](effects[effect])
      }
    }
</ul>
github joshthecoder / idom-redux-todomvc-app / components / TodoItem.js View on Github external
function ReadView({todo, startEditingTodo}) {
  function onDoubleClick() {
    startEditingTodo(todo.id);

    // TODO: Better way of access the real DOM element of a component?
    // Here we want to focus the input field and set the curor to the end
    const input = document.querySelector('.edit');
    input.focus();
    input.setSelectionRange(input.value.length, input.value.length);
  }

  elementOpen('div', null, ['class', 'view']);
    elementVoid('input', null, ['class', 'toggle', 'type', 'checkbox']);
    elementOpen('label', null, null, 'ondblclick', onDoubleClick);
      text(todo.text);
    elementClose('label');
    elementVoid('button', null, ['class', 'destroy']);
  elementClose('div');
}
github spectjs / spect / src / html.js View on Github external
// objects create elements
  let { tag, key, props, staticProps, children, use, create, fn } = arg

  // fragment (direct vdom)
  if (!tag) {
    return children &amp;&amp; children.forEach(render, this)
  }

  let el
  if (!children || !children.length) {
    el = elementVoid(create, key, staticProps, ...props)
  }
  else {
    el = elementOpen(create, key, staticProps, ...props)
    children.forEach(render, this)
    elementClose(create)
  }

  // if spect instance - init aspects
  if (this[_instance]) {
    let Spect = this[_instance].constructor
    let proto = Spect.prototype

    const $el = new Spect(el)
    el[_spect] = $el

    if (fn) $el.update(fn)
    if (use) $el.update(use)

    for (let i = 0, key, value; i &lt; props.length; i += 2) {
      key = props[i], value = props[i + 1]
      if (key in proto) $el[key](value)
github joshthecoder / idom-redux-todomvc-app / components / TodoItem.js View on Github external
startEditingTodo(todo.id);

    // TODO: Better way of access the real DOM element of a component?
    // Here we want to focus the input field and set the curor to the end
    const input = document.querySelector('.edit');
    input.focus();
    input.setSelectionRange(input.value.length, input.value.length);
  }

  elementOpen('div', null, ['class', 'view']);
    elementVoid('input', null, ['class', 'toggle', 'type', 'checkbox']);
    elementOpen('label', null, null, 'ondblclick', onDoubleClick);
      text(todo.text);
    elementClose('label');
    elementVoid('button', null, ['class', 'destroy']);
  elementClose('div');
}
github spectjs / spect / src / html-idom.js View on Github external
if (typeof arg === 'object' && !arg[_vnode]) return text(arg.toString())

  // objects create elements
  let { tag, key, props, staticProps, children } = arg

  // fragment (direct vdom)
  if (!tag) return children && children.forEach(render)

  let el
  if (!children || !children.length) {
    el = elementVoid(tag, key, staticProps, ...props)
  }
  else {
    el = elementOpen(tag, key, staticProps, ...props)
    children.forEach(render)
    elementClose(tag)
  }
}
github eliot-akira / idom / src / core / create / render-idom.js View on Github external
argsArray[1] = attrs[key]

    } else {
      argsArray.push( attr )
      argsArray.push( attrs[attr] )
    }
  }

  if ( ! children || ! children.length ) {

    node.el = elementVoid.apply(null, argsArray)

  } else {
    elementOpen.apply(null, argsArray)
    children.forEach( renderIdom )
    node.el = elementClose(tag)
  }

  // If component instance, store reference to element
  if (node.instance)
    node.instance.el = node.el

  return node
}
github spectjs / spect / html.js View on Github external
let el

    // <ul is="">
    if (is) {
      function create() { return document.createElement(tag, { is }) }
      el = elementOpen(create, key, staticProps, ...props)
      children.forEach(render)
      elementClose(create)
    }

    // if (!children) el = elementVoid(tag, key, staticProps, ...props)
    else {
      el = elementOpen(tag, key, staticProps, ...props)
      children.forEach(render)
      elementClose(tag)
    }

    // plan aspects init
    if (use) (new $(el)).use(...use)

    // run provided effects
    for (let effect in effects) {
      $(el)[effect](effects[effect])
    }
  }
</ul>
github justinfagnani / stampino / lib / stampino.js View on Github external
args.push(attr.name);
            args.push(getValue(attr.value, model));
          }
        }
        let el = idom.elementOpen.apply(null, args);

        for (let i = 0; i &lt; handledAttributes.length; i++) {
          let attr = handledAttributes[i];
          attributeHandler.handle(el, attr.name, attr.value, model);
        }

        let children = node.childNodes;
        for (let i = 0; i &lt; children.length; i++) {
          renderNode(children[i], model, renderers, handlers, attributeHandler);
        }
        idom.elementClose(node.tagName);
      }
      break;
    case Node.TEXT_NODE:
      let value = getValue(node.nodeValue, model);
      idom.text(value);
      break;
    default:
      console.warn('unhandled node type', node.nodeType);
  }
}
github joshthecoder / idom-redux-todomvc-app / components / Header.js View on Github external
export default function({addTodo}) {
  elementOpen('header', null, null, 'class', 'header');
    elementOpen('h1');
      text('todos');
    elementClose('h1');
    TodoTextInput({newTodo: true});
  elementClose('header');
};