json-object-editor
Version:
JOE the Json Object Editor | Platform Edition
204 lines (171 loc) • 4.88 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>JOE Test</title>
<script src="http://s3.amazonaws.com/Craydent/JOE/craydent-joe.js" type="text/javascript"></script>
<style>
#testEditableRegion{
margin:5px;
padding:5px;
border:1px solid #007ac2;
color:#444;
cursor:pointer;
}
#testEditableRegion:hover{
background:#eee;
}
#htmlInput {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div>Json Object Editor Demo Page</div>
<h2></h2>
<div>
<h3>Animal Objects</h3>
<a href="javascript:_joe.show();">Show JOE</a><br/>
<a href="javascript:_joe.show(cat);">edit Cat</a><br/>
<a href="javascript:_joe.show(cat,{schema:'animal'});">edit Cat(animal)</a><br/>
<a href="javascript:_joe.show(dog,{schema:'thing', title:'Thing with Rendering'});">edit Dog(thing)</a><br/>
<a href="javascript:_joe.show(animals,{schema:'animal',subsets:[{name:'Two-Legged',filter:{legs:2}}]});">edit Animals</a><br/>
<a href="javascript:_joe.show({},{schema:'animal',callback:addAnimal});">Add Animal</a><br/>
<div>
<p>City with geo + multiselect</p>
<a href="javascript:_joe.show({},{schema:'city',callback:addCity});">Add City</a><br/>
<a href="javascript:goJoe(cities,{schema:'city'});">View Cities</a><br/>
</div>
<h3>Editing html Renderings</h3>
<div id="testEditableRegion" onclick="JOE.replaceRendering(this)">
<h3>This div is editable</h3>
<p>You can change any of the specs.</p>
<p> On save, it will replace the current div.</p>
<p>The shortcut function is replaceRendering(domElement,specs)</p>
</div>
<p>Text field</p>
<input onkeyup="alert($(this).val());" />
</div>
<script>
Craydent.DEBUG_MODE =true;
var cat =
{ name:'tom',
legs:4,
species:'cat',
id:cuid(),
hiddenizer:'the hidden field'
};
var dog =
{ name:'rover',
legs:4,
species:'dog',
id:cuid()
};
var rat =
{ name:'jerry',
legs:4,
species:'rat',
weight:3.5,
id:cuid()
};
var monkey =
{ name:'Chimp',
legs:2,
species:'monkey',
weight:12,
id:cuid()
};
var animals =[cat,dog,rat,monkey];
var animalLinks = ['cat','dog','rat'];
var cities =[];
function addAnimal(obj){
animals.push(obj);
}
function addCity(obj){
cities.push(obj);
}
function getAnimals(obj){
return animalLinks.filter(function(a){return a != obj.species;})
}
function adjustSchema(dom){
var species = $(dom).val();
if(species == "thing"){
JOE.resetSchema('thing')
}
else{
JOE.resetSchema('animal')
}
}
function logValue(dom){
logit($(dom).val());
}
var animalschema =
{
_title:'Animal',
fields:['id','name','legs','species','weight','color','gender','animalLink','birthday','pict'],
_listID:'id',
_listTitle:'${name} ${species}',
/*callback:function(obj){
alert(obj.name);
},*/
onblur:logit
}
var thingschema =
{
_title:'Thing',
fields:['id','name','thingType','legs','species','weight','color','gender','html','friends'],
_listID:'id',
_listTitle:'${name} ${species}'
}
var citySchema =
{
_title:'City',
fields:['id','name','city_css','geo','city_demos','isChecked'],
_listID:'id',
_listTitle:'${name} <br/>${geo}'
}
var specs = {
/* defaultProfile:{
lockedFields:['joeUpdated','id'],
hiddenFields:[]
},*/
fields:{
species:{label:'Species',type:'select', values:['cat','dog','rat','thing'], onchange:adjustSchema},
friends:{label:'Friends - multi',type:'select', values:['cat','dog','rat','thing'], multiple:true},
gender:{type:'select', values:['male','female']},
legs:{label:'# of Legs',type:'int', onblur:logit, value:4},
weight:{label:' Weight (lbs)',type:'number', onblur:logit},
name:{label:'Name', onkeyup:logValue, value:"Unnamed"},
birthday:{label:'birthday', type:'date'},
geo:{label:'Geography [lat,lon]', type:'geo'},
city_demos:{label:'City Demographics', type:'select', multiple:true,values:['Business','Residential','Metropolis','Agricultural']},
city_css:{type:'text',autocomplete:true,values:['happy','sad','frivilous','distinguished']},
isChecked:{type:'boolean'},
pict:{type:'image'},
//id:{label:'ID',type:'text', locked:true},
id:{label:'ID',type:'guid'},
//rendering
html:{label:'HTML Rendering', type:'rendering'},
//example of select that takes function (function is passed item)
animalLink:{label:'Link to other animal',type:'select', values:getAnimals},
hiddenizer:{hidden:true}
},
schemas:{
animal:animalschema,
thing:thingschema,
city:citySchema
},
compact:false
}
var JOE = new JsonObjectEditor(specs);
JOE.init();
var JOE2 = new JsonObjectEditor({compact:true});
JOE2.init();
function keyboardTracker(evt){
logit(evt);
}
//$(window).keypress(keyboardTracker);
</script>
</body>
</html>