{"name":"web-components","master":true,"version":"1.0.2","description":"Create Web Components\n\n1. The tag &lt;mywidget message=\"hello world !\"/> is added to the body of the page\n2. This tag calls the Component MyWidget\n3. It generates an input and a span tag that are binded: the value in the span change if you change the input value\n\nnote: the purpose of the example is to show how easily you can create Web Component, and we show only one way to do that","schemas":{"14f55163a913fca":{"_id":"14f55163a913fca","_name":"Component","_inherit":["_Component"],"template":"link","render":"method"},"10d741d0fe1d5dd":{"_id":"10d741d0fe1d5dd","_name":"Page","_inherit":["_Component"],"load":"method"},"1a18311b401430e":{"_id":"1a18311b401430e","_name":"Template","_inherit":["_Component"],"source":"property","render":"method"},"1da3516b1615f32":{"_id":"1da3516b1615f32","_name":"MyWidget","_inherit":["Component"],"template":"link","message":"property"}},"models":{"150131153d1ce4b":{"_id":"150131153d1ce4b","_name":"Component","template":{"type":"Template","readOnly":false,"mandatory":false,"default":""},"render":{"params":[{"name":"elt","type":"DOMElement","mandatory":false,"default":null}]}},"112b81bbdb1b85e":{"_id":"112b81bbdb1b85e","_name":"Page","load":{"params":[{"name":"dom","type":"object","mandatory":false,"default":null}]}},"1111f1e8071e204":{"_id":"1111f1e8071e204","_name":"Template","source":{"type":"html","readOnly":false,"mandatory":false,"default":""},"render":{"params":[{"name":"elt","type":"DOMElement","mandatory":false,"default":null}]}},"115b814492191b0":{"_id":"115b814492191b0","_name":"MyWidget","template":{"type":"Template","readOnly":false,"mandatory":false,"default":"mywidget"},"message":{"type":"string","readOnly":false,"mandatory":false,"default":""}}},"behaviors":{"1dab11f5c61411c":{"_id":"1dab11f5c61411c","component":"1261a1e1fa1f9d3","state":"start","action":"function start() { \n  // render the html\n  this.require('app').render();\n  \n  // load the app\n  this.require('page').load();\n}","useCoreAPI":false,"core":false},"18fba183c51300f":{"_id":"18fba183c51300f","component":"Component","state":"render","action":"function render(elt) { \n  var html = '',\n      domNode = elt,\n      listeners = {},\n      domId = '',\n      inc = 0,\n      self = this,\n      activeElementId = '',\n      activeElement = null,\n      cursorPosition = 0,\n      schema = null,\n      propertyName = '',\n      properties = [];\n      \n  if (domNode) {\n    activeElementId = document.activeElement.id;\n    activeElement = document.getElementById(activeElementId);\n    if (activeElement) {\n      cursorPosition = activeElement.selectionStart;\n    }\n    domNode.innerHTML = '';\n  }    \n      \n  if (this.template()) {\n    html = this.template().source();\n  }    \n  \n  // render html\n  if (html) {\n    \n    // search for input value with component property\n    html = html.replace(\n      /value=\"\\{[^\\}]+\\}\"/g,\n      function (match){\n        var id = self.id() + (inc + 1),\n            prop = match.replace('value=\"{','').replace('}\"','').trim();\n            \n        listeners[id] = prop;    \n        return ' id=\"' + id +'\" ' + match;\n      }\n    );\n  \n    // set value\n    schema = this.require('db').collections()._GeneratedSchema.find({'_name': this.constructor.name})[0];\n  \n    for (propertyName in schema) {\n      if (schema[propertyName] === 'property') {\n        properties.push(propertyName);\n      }\n    }\n    \n    properties.forEach(function (val) {\n      var reg = new RegExp('\\{' + val + '\\}', 'g');\n      html = html.replace(reg, this[val]());\n    }.bind(this));\n    \n    if (domNode === null) {\n      domNode = document.body;\n    }\n    \n    domNode.insertAdjacentHTML('beforeend', html);\n    \n    // add listeners\n    for (domId in listeners) {\n      document.getElementById(domId).addEventListener('keyup', function keyup(e) {\n        self[listeners[domId]](this.value);  \n      });\n      document.getElementById(domId).addEventListener('input', function input(e) {\n        self[listeners[domId]](this.value);  \n      });\n      document.getElementById(domId).addEventListener('blur', function blur(e) {\n        self[listeners[domId]](this.value);  \n      });\n      document.getElementById(domId).addEventListener('change', function change(e) {\n        self[listeners[domId]](this.value);  \n      });\n    }\n    \n    // restore focus if any\n    activeElement = document.getElementById(activeElementId);\n    if (activeElement) {\n      activeElement.focus();\n      activeElement.value = activeElement.value;\n      activeElement.setSelectionRange(cursorPosition, cursorPosition);\n    }\n  }\n}","useCoreAPI":false,"core":false},"1e11612b8915c5d":{"_id":"1e11612b8915c5d","component":"Page","state":"load","action":"function load(dom) { \n\tvar components = Object.keys(this.require('db').collections()),\n\t    tagNames = {},\n\t    doms = document.getElementsByTagName('*'),\n\t    i = 0,\n\t    length = doms.length,\n\t    domElt = null,\n\t    attributes = [],\n\t    j = 0,\n\t    nbAtt = 0,\n\t    config = {},\n\t    Component = null,\n\t    component = null;\n\t  \n\t  // list all the component classes\n    components.forEach(function (val) {\n      tagNames[val.toUpperCase()] = val;\n    });\n\n    // check if a HTML tag if a Web Component\n    for (i = 0; i < length; i++) {\n        domElt = doms[i];\n        if (tagNames[domElt.tagName]) {\n              attributes =  domElt.attributes;\n              \n              nbAtt = attributes.length;\n              for (j = 0; j < nbAtt; j++) {\n                if (attributes[j].name === 'id') {\n                  config._id = attributes[j].value; \n                } else {\n                  config[attributes[j].name] = attributes[j].value; \n                }\n              }\n              \n              Component = this.require(tagNames[domElt.tagName]);\n              component = new Component(config);\n              domElt.setAttribute('id', component.id());\n              component.render(domElt);\n        }\n    }\n}","useCoreAPI":false,"core":false},"158761d3d5141db":{"_id":"158761d3d5141db","component":"Component","state":"init","action":"function init(conf) { \n  var properties = [],\n      schema = {},\n      propertyName = '';\n      \n  \n  schema = this.require('db').collections()._GeneratedSchema.find({'_name': this.constructor.name})[0];\n  \n  for (propertyName in schema) {\n    if (schema[propertyName] === 'property') {\n      properties.push(propertyName);\n    }\n  }\n  \n  properties.forEach(function (val) {\n    this.on(val, function (value) {\n      this.render(document.getElementById(this.id()));\n    });\n  }.bind(this));\n}","useCoreAPI":false,"core":false},"u18de81d8c213864":{"_id":"u18de81d8c213864","component":"Template","state":"render","action":"function render(elt) { \n  var html = this.source(),\n      domNode = elt;\n  \n  if (html) {\n    if (domNode === null) {\n      domNode = document.body;\n    }\n    \n    domNode.insertAdjacentHTML('beforeend', html);\n  }\n}","useCoreAPI":false,"core":false}},"types":{"DOMElement":{"_id":"128a215dea1ecda","name":"DOMElement","type":"object"}},"components":{"Component":{},"Page":{"page":{"_id":"page"}},"Template":{"mywidget":{"_id":"mywidget","source":"<input value=\"{message}\"/>\n<span>{message}</span>"},"app":{"_id":"app","source":"<div style=\"margin-top:20%; text-align:center;\">\n    <mywidget message=\"Hello World!\" />\n</div>"}},"MyWidget":{"a068434e-9ae4-4608-9eb4-8e9f275eb0ff":{"message":"dddd","template":"mywidget","_id":"a068434e-9ae4-4608-9eb4-8e9f275eb0ff"},"da082fb2-a96e-4ca7-8b89-a59e4f7d7b3f":{"message":"erzrzHello World!ffff","template":"mywidget","_id":"da082fb2-a96e-4ca7-8b89-a59e4f7d7b3f"}}},"_id":"1261a1e1fa1f9d3"}