Skip to content

Various updates #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JAL9302 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Various updates #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ef6656c
added confirm on delete
Feb 24, 2012
cec580d
onde works better for schemas with additionalProperties at the top le…
Feb 24, 2012
547b1d2
top level additional properties now keep there schema, and can be del…
Feb 24, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 156 additions & 0 deletions samples/helloworld2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>JSON Editor</title>
<!-- The CSS, if you want nice looking things -->
<link rel="stylesheet" href="../src/onde.css" type="text/css"/>
</head>
<body>


<form id="data-entry-form" method="post">
<!-- The element where the generated form goes to. -->
<div class="onde-panel"></div>
<!-- The submit button. -->
<p class="actions"><button type="submit" name="submit">Give me my data</button></p>
</form>


<script type="application/javascript" src="assets/jquery-1.7.1.min.js"></script>
<script type="application/javascript" src="../src/onde.js"></script>
<script type="application/javascript">
$(document).ready(function () {
// The schema we use
var sampleSchema = {
type: "object",
additionalProperties: {
type: "object",
properties: {
namespace: {
type:"array",
required: true,
items: {type: "string"}
},
groups: {
type: "array",
required: true,
items: {type: "string"}
}
}
}
};

var sampleData = {
"Frontpage": {
"namespace": [
"Layouts",
"Frontpage"
],
"groups": [
"Top Headline",
"Breaking",
"Slideshow",
"Left Headlines",
"Right Headlines",
"Opinion",
"News",
"Sports",
"Recess",
"Towerview"
]
},
"News": {
"namespace": [
"Layouts",
"News"
],
"groups": [
"Featured",
"Right Headlines",
"Headlines",
"Stories"
]
},
"Sports": {
"namespace": [
"Layouts",
"Sports"
],
"groups": [
"Slideshow",
"Stories"
]
},
"Opinion": {
"namespace": [
"Layouts",
"Opinion"
],
"groups": [
"Featured"
]
},
"Recess": {
"namespace": [
"Layouts",
"Recess"
],
"groups": [
"Featured",
"Music",
"Film",
"Art",
"Stories"
]
},
"Towerview": {
"namespace": [
"Layouts",
"Towerview"
],
"groups": [
"Featured",
"Savvy",
"Wisdom",
"Editors Note",
"Prefix"
]
},
"Newsletter": {
"namespace": [
"Layouts",
"Newsletter"
],
"groups": [
"News",
"Sports",
"Opinion",
"Recess",
"Towerview"
]
}
};

// Instantiate Onde with our form above
var ondeSession = new onde.Onde($('#data-entry-form'));
// Render the form with the schema
ondeSession.render(sampleSchema, sampleData, { collapsedCollapsibles: true });

// Bind our form's submit event. We use this to get the data out from Onde
$('#data-entry-form').submit(function (evt) {
evt.preventDefault();
var outData = ondeSession.getData();
if (outData.errorCount) {
alert("Error");
} else {
console.log(JSON.stringify(outData.data, null, " "));
alert("Output is in your browser's console");
}
return false;
});
});
</script>

</body>
</html>
34 changes: 23 additions & 11 deletions src/onde.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,18 +104,22 @@ onde.Onde = function (formElement, schema, documentInst, opts) {
this.panelElement.find('.field-delete').live('click', function (evt) {
evt.preventDefault();
evt.stopPropagation(); //CHECK: Only if collapsible
$('#' + $(this).attr('data-id')).fadeOut('fast', function () {
// Change the item's and siblings' classes accordingly
//FIXME: This is unstable
if ($(this).hasClass('first')) {
$(this).next('li.field').addClass('first');
}
if ($(this).hasClass('last')) {
$(this).prev('li.field').addClass('last');
}
$(this).remove();
});

if (confirm("Are you sure you want to delete?")) {
$('#' + $(this).attr('data-id')).fadeOut('fast', function () {
// Change the item's and siblings' classes accordingly
//FIXME: This is unstable
if ($(this).hasClass('first')) {
$(this).next('li.field').addClass('first');
}
if ($(this).hasClass('last')) {
$(this).prev('li.field').addClass('last');
}
$(this).remove();
});
}
});

// Type selector
this.panelElement.find('.field-type-select').live('change', function (evt) {
evt.preventDefault();
Expand Down Expand Up @@ -159,6 +163,14 @@ onde.Onde.prototype.renderObject = function (schema, parentNode, namespace, data
sortedKeys.push(propName);
}
}
// Check for additional properties
if(schema.additionalProperties) {
for (var propName in data) {
sortedKeys.push(propName);
props[propName] = schema.additionalProperties;
props[propName]._deletable = true;
}
}
// Last property to be collected is the primary, if any.
if (schema.primaryProperty) {
sortedKeys.unshift(schema.primaryProperty);
Expand Down