xurenlu/react-boot-markup.html

## react-boot-markup.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--<script src="bower_components/requirejs/require.js"></script>-->
    <script src="./bower_components/jquery/dist/jquery.js"></script>
    <script src="./bower_components/react/react-with-addons.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
    <script src="bower_components/react-bootstrap/react-bootstrap.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css"/>

</head>
<body>


<root class="Alert">

    <Alert onDismiss="h">
        cute
    </Alert>

</root>
<boot class="Button">
    Click b
</boot>
<ProgressBar now=60 label='%(percent)s%' ></ProgressBar>
<Button>
    hi
</Button>


<div id="test"></div>
<script type="text/jsx">
    var alert = ReactBootstrap.Alert;
    ReactBootstrap.render(alert,
            {
                onDismiss:"yes",
                onClick:function(){alert("click");}
            });
</script>


<script>
    var cmaps = {
        BUTTON:"Button",
        ICON:"Glyphicon",
        PROGRESSBAR:"ProgressBar",
        ALERT:"Alert",
        ondismiss:"onDismiss"

    };
    function find(selector){
        return document.querySelectorAll(selector);
    }
    function _extend(obj1,obj2){
        var obj3 = {};
        for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
        for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
        var obj4 = {};
        for(var index in obj3){
            if(cmaps[index]){
                obj4[cmaps[index]] = obj3[index];
            }else{
                obj4[index] = obj3[index];
            }
        }
        return obj4;
    }
    function allProperties(node){
        var atts = {};
        var attrMap = node.attributes;

        for(var i = 0; i < attrMap.length; i++){
            console.log(attrMap[i].nodeName);
            atts[attrMap[i].nodeName] =  attrMap[i].nodeValue;
        }
        return atts;
    }
    function genNode(node){

        var children = node.children;
        var nodes = [];
        for(var i=0;i<children.length;i++){
            var ret = genNode(node.children[i]);
            if(ret!="") {
                nodes.push(ret);
            }
        }

        var className="div";

        try {
            if (node.tagName.toUpperCase() == "BOOT") {
                // className = node.tagName || "div";
                className = node.getAttribute("class");

            } else {
                if(node.tagName.toUpperCase()=="ROOT"){
                    className = "div";
                }else {
                    className = node.tagName;
                }

            }
        }catch(e){
            console.log('[90]got errror:');
            console.log(e);
        }


        if(
        node.tagName.toUpperCase()=="ROOT")
        {


            //说就就是一种没有子节点,只有父节点的情况;
            return  React.createElement("div",{children:nodes});//, {children: nodes});
        }
        else {
            if(cmaps[className]) {
                className = cmaps[className];
            }
            if (nodes.length == 0 && node.innerHTML.length > 0) {
               // console.log("the ctagName:"+node.tagName);
                var _atts = allProperties(node);
                var props = _extend(_atts,{children: node.innerHTML});
                console.log(props);
                return  createNode(className, props);


                return res;
            } else {
                var _atts = allProperties(node);
                var props = _extend(_atts,{children: node.innerHTML});
                console.log(props);
                var res =  createNode(className, props);

                return res;
            }
        }

    }
    function createNode(arg1,arg2){
        //return React.createElement(ReactBootstrap[arg1],arg2);
//        console.log("call arg1:");
//        console.log(arg1);
//        console.log("call arg2:");
//        console.log(arg2);
        try{
            var ret =  React.createElement(ReactBootstrap[arg1],arg2);
//            console.log("normally return");
//            console.log(ret);
            //console.log(ret.type());
            return ret;
        }catch(e){
           // console.log(e);
            return "";
        }
    }
    function mount(){
        var nodes = find("root[class]");
        for(var i =0;i<nodes.length;i++){
            var node = nodes[i];

            React.render(genNode(node),node);
        }
    }
    $(document).ready(function(){
//        var constructor = ReactBootstrap.Button;
//        var allProperties = {name:"renlu",children:"html1"};
//        React.render(React.createElement(constructor, allProperties), $("#kk")[0]);
            mount();
    });
    var j = $("boot")[0].attributes;

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<!--<script src="bower_components/requirejs/require.js"></script>-->
	<script src="./bower_components/jquery/dist/jquery.js"></script>
	<script src="./bower_components/react/react-with-addons.js"></script>
	<script src="bower_components/react/JSXTransformer.js"></script>
	<script src="bower_components/react-bootstrap/react-bootstrap.js"></script>
	<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
	<link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css"/>

	</head>
	<body>



	<root class="Alert">

	<Alert onDismiss="h">
	cute
	</Alert>

	</root>
	<boot class="Button">
	Click b
	</boot>
	<ProgressBar now=60 label='%(percent)s%' ></ProgressBar>
	<Button>
	hi
	</Button>


	<div id="test"></div>
	<script type="text/jsx">
	var alert = ReactBootstrap.Alert;
	ReactBootstrap.render(alert,
	{
	onDismiss:"yes",
	onClick:function(){alert("click");}
	});
	</script>


	<script>
	var cmaps = {
	BUTTON:"Button",
	ICON:"Glyphicon",
	PROGRESSBAR:"ProgressBar",
	ALERT:"Alert",
	ondismiss:"onDismiss"

	};
	function find(selector){
	return document.querySelectorAll(selector);
	}
	function _extend(obj1,obj2){
	var obj3 = {};
	for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
	for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
	var obj4 = {};
	for(var index in obj3){
	if(cmaps[index]){
	obj4[cmaps[index]] = obj3[index];
	}else{
	obj4[index] = obj3[index];
	}
	}
	return obj4;
	}
	function allProperties(node){
	var atts = {};
	var attrMap = node.attributes;

	for(var i = 0; i < attrMap.length; i++){
	console.log(attrMap[i].nodeName);
	atts[attrMap[i].nodeName] = attrMap[i].nodeValue;
	}
	return atts;
	}
	function genNode(node){

	var children = node.children;
	var nodes = [];
	for(var i=0;i<children.length;i++){
	var ret = genNode(node.children[i]);
	if(ret!="") {
	nodes.push(ret);
	}
	}

	var className="div";

	try {
	if (node.tagName.toUpperCase() == "BOOT") {
	// className = node.tagName \|\| "div";
	className = node.getAttribute("class");

	} else {
	if(node.tagName.toUpperCase()=="ROOT"){
	className = "div";
	}else {
	className = node.tagName;
	}

	}
	}catch(e){
	console.log('[90]got errror:');
	console.log(e);
	}



	if(
	node.tagName.toUpperCase()=="ROOT")
	{


	//说就就是一种没有子节点,只有父节点的情况;
	return React.createElement("div",{children:nodes});//, {children: nodes});
	}
	else {
	if(cmaps[className]) {
	className = cmaps[className];
	}
	if (nodes.length == 0 && node.innerHTML.length > 0) {
	// console.log("the ctagName:"+node.tagName);
	var _atts = allProperties(node);
	var props = _extend(_atts,{children: node.innerHTML});
	console.log(props);
	return createNode(className, props);


	return res;
	} else {
	var _atts = allProperties(node);
	var props = _extend(_atts,{children: node.innerHTML});
	console.log(props);
	var res = createNode(className, props);

	return res;
	}
	}

	}
	function createNode(arg1,arg2){
	//return React.createElement(ReactBootstrap[arg1],arg2);
	// console.log("call arg1:");
	// console.log(arg1);
	// console.log("call arg2:");
	// console.log(arg2);
	try{
	var ret = React.createElement(ReactBootstrap[arg1],arg2);
	// console.log("normally return");
	// console.log(ret);
	//console.log(ret.type());
	return ret;
	}catch(e){
	// console.log(e);
	return "";
	}
	}
	function mount(){
	var nodes = find("root[class]");
	for(var i =0;i<nodes.length;i++){
	var node = nodes[i];

	React.render(genNode(node),node);
	}
	}
	$(document).ready(function(){
	// var constructor = ReactBootstrap.Button;
	// var allProperties = {name:"renlu",children:"html1"};
	// React.render(React.createElement(constructor, allProperties), $("#kk")[0]);
	mount();
	});
	var j = $("boot")[0].attributes;

	</script>
	</body>
	</html>