No images in this repository’s iceberg at this time
Download raw (4.8 KB)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Notation W</title>
<style>
body{
font-size:0.9em;
}
#input{
height:120px;
width:500px;
}
.axis_attribute{
margin:5px;
}
.titre{
/*background:pink;*/
color:black;
font-weight:bold;
}
</style>
</head>
<body>
<div class="container"></div>
<div id="input_container"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<script type="text/template" id="input_template">
<p class="desc">
<label><%= titrelabel %></label>
<textarea id="input">{"titre":"Mon titre", "children":[{"titre":"titre enfant","children":[{"titre":"Petit enfant"}]},{"titre":"titre enfant2"}]}</textarea></p>
<p><input type="button" id="parse" value="parse"></p>
<p id="desc">éléments décodés</p>
<p id="output"></p>
</script>
<script charset="utf-8">
var colors=[{"r":114,"g":147,"b":203},{"r":225,"g":151,"b":76},{"r":132,"g":186,"b":91},{"r":211,"g":94,"b":96},{"r":128,"g":133,"b":133},{"r":144,"g":103,"b":167},{"r":171,"g":104,"b":87},{"r":204,"g":194,"b":16}];
// var depth=0;
function inspectModel(md, depth){
var str_inspect='<ul>';
//var col=colors.shift();
var str_axis='<li style="background:rgb('+colors[depth].r+','+colors[depth].g+','+colors[depth].b+');">';
var str_children=false;
for(var key in md.attributes){
if(key=="children"){
depth++;
str_children='';
for(var i=0;i<md.attributes[key].length;i++){
var tempObj=new model(md.attributes[key][i]);
str_children+="<li>" +inspectModel(tempObj,depth)+ "</li>";
}
}else{
str_axis+= "<span class='axis_attribute "+key+"''>" + key + ": " + md.attributes[key] + "</span>";
}
}
str_axis+='</li>';
str_inspect+=str_axis;
if(str_children){str_inspect+=str_children;}
str_inspect+="</ul>";
return str_inspect;
}
var model = Backbone.Model.extend({
initialize: function(){
// console.log("Nouvel axe");
// console.log(this.get('titre'));
// console.log(this.attributes);
// var str_inspect='<ul>';
// for(var key in this.attributes){
// if(key=="children"){
// for(var i=0;i<this.attributes[key].length;i++){
// var tempObj=new model(this.attributes[key][i]);
// }
// }else{
// str_inspect+= "<li>" + key + ": " + this.attributes[key] + "</li>";
// }
// }
// $.each(this.attributes, function( key, value ) {
// str_inspect+= "<li>" + key + ": " + value + "</li>";
// });
// str_inspect+="</ul>";
// $("#output").append(str_inspect);
},
defaults: {
id:'',
titre:'Sans titre', //(uniq)
contingent:false,
module_:false,
aspect:'', //choix dans un array (duratif, itératif, sémelfactif)
indications:'',
piece_jointe:'', //url qui pointe vers un document
terme:'', //(str)
boucle:'', //de n à p
alternative:'', //choix dans un array (exclusive, inclusive, conditionnelle) Validation importante des conditions dans une boucle inclusive
condition:'', //(voir validation ci-dessus)
tag:'', //Validation: peut avoir un tag seulement si l'axe n'est pas principal, de plus le tag doit être le même pour ses siblings. Succession ordonnée, sans ordre, simultaméité, accumulation
goto:null //reference de l'axe vers lequel il renvoie
}
});
var inputView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function(){
//Pass variables in using Underscore.js Template
var variables = { titrelabel : "JSON" };
// var variables={};
// Compile the template using underscore
var template = _.template( $("#input_template").html()) (variables );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
},
events: {
"click input[type=button]": "doParse"
},
doParse: function( event ){
// Button clicked, you can access the element that was clicked with event.currentTarget
console.log( "à parser " + $("#input").val() );
var json=$("#input").val().replace(/\n/g, "");
console.log(json);
z=new model(JSON.parse(json));
console.log(z.get('titre'));
depth=0;
this.lst=inspectModel(z,0) ;
$("#output").html(this.lst);
}
});
var z;
var input_view = new inputView({ el: $("#input_container") });
</script>
</body>
</html>