saurshaz/polymerbuilder.html

## polymerbuilder.html
<!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>


</head>

</head>

<body>
    <script>
    var _elementname; // keep track of the current element built

    $('document').ready(function() {

        var buildElement = function(element_name, attributes, template_content, model) {

            var elselected = document.querySelector(element_name);
            if (elselected) {
                alert('element already registered. Choose a different name');
                return;
            }

            /// create a DOM element for this polymer element
            var el = document.createElement('div');

            /// TODO :: iterate and add functions to model JSON
            model['fn1'] = function(event, detail, sender) {
                alert('fn1');
            };

            /// model for this polymer element :: TODO , add functions also
            Polymer(element_name, model);
            var template = '<polymer-element name="' + element_name + '" attributes="' + attributes + '">';
            el.setAttribute("id", "id_" + element_name);
            template += '<script><\/script>';
            template += '<template>';
            template += template_content;
            template += '</template>';

            el.innerHTML = template;
            // The custom elements polyfill can't see the <polymer-element>

            _elementname = element_name;
            // unless you put it in the DOM.
            document.body.appendChild(el);
        }


        $("#build").click(function() {
            /// declare this polymer element inside that DOM element
            var template_content = $("#template").val();
            var element_name = $("#elementName").val();
            var attributes = $("#attributes").val();
            var model = JSON.parse($("#model").val());


            buildElement(element_name, attributes, template_content, model);
            var element = $("#element").val();
            $("#elements").html(element);
        });

    });
    </script>


    <div>
        <p>HTML element</p>
    </div>
    <section>
        Element Name ::
        <input type="text" id="elementName" value="x-gra" />
    </section>
    <section>
        Attributes ::
        <input type="text" id="attributes" value="" />
    </section>

    <textarea id="template" cols="80" rows="6">
        <button on-click="{{fn1}}">trigger</button>
        <img src="http://www.gravatar.com/avatar/{{email}}.png" />
        <br>
        <email><a href="mailto:{{email}}">{{email}}</a>
        </email>

    </textarea>
    </section>
    <section>
        HTML (element)::
        <textarea id="element" cols="80" rows="6">
            <x-gra></x-gra>
        </textarea>
    </section>
    <section>
        Model ::
        <textarea id="model" cols="80" rows="6">
            { "email": "saurshaz@gmail.com", "md5": "" }
        </textarea>
    </section>

    <section>
        <button id="build">build</button>
    </section>
    <section id="elements">

    </section>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/polymer.js"></script>


	</head>

	</head>

	<body>
	<script>
	var _elementname; // keep track of the current element built

	$('document').ready(function() {

	var buildElement = function(element_name, attributes, template_content, model) {

	var elselected = document.querySelector(element_name);
	if (elselected) {
	alert('element already registered. Choose a different name');
	return;
	}

	/// create a DOM element for this polymer element
	var el = document.createElement('div');

	/// TODO :: iterate and add functions to model JSON
	model['fn1'] = function(event, detail, sender) {
	alert('fn1');
	};

	/// model for this polymer element :: TODO , add functions also
	Polymer(element_name, model);
	var template = '<polymer-element name="' + element_name + '" attributes="' + attributes + '">';
	el.setAttribute("id", "id_" + element_name);
	template += '<script><\/script>';
	template += '<template>';
	template += template_content;
	template += '</template>';

	el.innerHTML = template;
	// The custom elements polyfill can't see the <polymer-element>

	_elementname = element_name;
	// unless you put it in the DOM.
	document.body.appendChild(el);
	}


	$("#build").click(function() {
	/// declare this polymer element inside that DOM element
	var template_content = $("#template").val();
	var element_name = $("#elementName").val();
	var attributes = $("#attributes").val();
	var model = JSON.parse($("#model").val());


	buildElement(element_name, attributes, template_content, model);
	var element = $("#element").val();
	$("#elements").html(element);
	});

	});
	</script>


	<div>
	<p>HTML element</p>
	</div>
	<section>
	Element Name ::
	<input type="text" id="elementName" value="x-gra" />
	</section>
	<section>
	Attributes ::
	<input type="text" id="attributes" value="" />
	</section>

	<textarea id="template" cols="80" rows="6">
	<button on-click="{{fn1}}">trigger</button>
	<img src="http://www.gravatar.com/avatar/{{email}}.png" />
	<br>
	<email><a href="mailto:{{email}}">{{email}}</a>
	</email>

	</textarea>
	</section>
	<section>
	HTML (element)::
	<textarea id="element" cols="80" rows="6">
	<x-gra></x-gra>
	</textarea>
	</section>
	<section>
	Model ::
	<textarea id="model" cols="80" rows="6">
	{ "email": "saurshaz@gmail.com", "md5": "" }
	</textarea>
	</section>

	<section>
	<button id="build">build</button>
	</section>
	<section id="elements">

	</section>
	</body>

	</html>