WIP
Harald Wolff
parent
a01c7e3f50
commit
1deed6f0c2
40
frame.html
40
frame.html
|
|
@ -11,6 +11,7 @@
|
|||
<script type="text/javascript" src="jquery.min.js"></script>
|
||||
<script type="text/javascript" src="sky.base.js"></script>
|
||||
<script type="text/javascript" src="sky.types.js"></script>
|
||||
<script type="text/javascript" src="sky.types.reference.js"></script>
|
||||
<script type="text/javascript" src="sky.form.js"></script>
|
||||
|
||||
<script type="text/javascript" src="sky.tables.js"></script>
|
||||
|
|
@ -46,6 +47,33 @@
|
|||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var personen = [
|
||||
{
|
||||
ID: "HWO",
|
||||
Name: "Harald",
|
||||
Beruf: "Entwickler",
|
||||
Alter: 39
|
||||
},
|
||||
{
|
||||
ID: "HWI",
|
||||
Name: "Holger",
|
||||
Beruf: "fast Chemiker",
|
||||
Alter: 38
|
||||
}
|
||||
];
|
||||
|
||||
var dscPerson = {
|
||||
fields: [
|
||||
{ name: "Name", type: null, },
|
||||
{ name: "Alter", type: "int", },
|
||||
{ name: "Beruf", type: null, },
|
||||
],
|
||||
}
|
||||
var typePerson = new SKY.prototypes.SKYReferencingType({
|
||||
referencedType: dscPerson,
|
||||
});
|
||||
|
||||
var demoDescriptor = {
|
||||
fields: [
|
||||
{ name: "Name", type: null },
|
||||
|
|
@ -54,6 +82,7 @@
|
|||
{ name: "IP", type: "ipv4" },
|
||||
{ name: "Network", type: "network4" },
|
||||
{ name: "TimeLeft", type: "timespan", label: "Übrige Zeit" },
|
||||
{ name: "colleague", type: typePerson, label: "Kollege" }
|
||||
]
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +93,8 @@
|
|||
Comment: "none",
|
||||
IP: "1.2.3.4",
|
||||
Network: "1.2.3.0/24",
|
||||
TimeLeft: 86870
|
||||
TimeLeft: 86870,
|
||||
colleague: null,
|
||||
},
|
||||
{
|
||||
Name: "Second Demo Item",
|
||||
|
|
@ -72,7 +102,8 @@
|
|||
Comment: "none",
|
||||
IP: "5.6.7.8",
|
||||
Network: "1.2.3.0/24",
|
||||
TimeLeft: 6324
|
||||
TimeLeft: 6324,
|
||||
colleague: null,
|
||||
},
|
||||
{
|
||||
Name: "Third Demo Item",
|
||||
|
|
@ -80,7 +111,8 @@
|
|||
Comment: "some",
|
||||
IP: "3.4.5.6",
|
||||
Network: "1.2.3.0/24",
|
||||
TimeLeft: 324
|
||||
TimeLeft: 324,
|
||||
colleague: null,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -88,7 +120,7 @@
|
|||
.form(demoDescriptor, demoObjects[0])
|
||||
.appendTo( $("#Types") );
|
||||
|
||||
$("#ValidButton").on("click",()=> alert("Form Editors are valid: " + testForm.valid()));
|
||||
$("#ValidButton").on("click",()=> alert("Valid: " + testForm.valid() + "\nChanged: " + testForm.changed() + "\nChanges: " + JSON.stringify(testForm.changes())));
|
||||
|
||||
$("#tableDemo").skyTable( {
|
||||
rows: demoObjects,
|
||||
|
|
|
|||
16
sky.base.js
16
sky.base.js
|
|
@ -14,6 +14,19 @@
|
|||
|
||||
class SKYBase
|
||||
{
|
||||
constructor(){
|
||||
this._html = $();
|
||||
}
|
||||
|
||||
html(html){
|
||||
if (arguments.length)
|
||||
{
|
||||
this._html = html;
|
||||
return this;
|
||||
}
|
||||
return this._html;
|
||||
}
|
||||
|
||||
on( evName, h ){
|
||||
if (!self[evName])
|
||||
self[evName] = [];
|
||||
|
|
@ -116,6 +129,9 @@
|
|||
case 0:
|
||||
return types;
|
||||
case 1:
|
||||
if (defaultType.isPrototypeOf(name))
|
||||
return name;
|
||||
|
||||
if ((name == null) || (!types[name]))
|
||||
return defaultType;
|
||||
return types[name];
|
||||
|
|
|
|||
24
sky.form.js
24
sky.form.js
|
|
@ -24,6 +24,30 @@
|
|||
}
|
||||
return true;
|
||||
}
|
||||
this.changed = function(){
|
||||
for (var name in this.editors){
|
||||
var editor = this.editors[name];
|
||||
|
||||
if (editor.changed())
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
this.changes = function(){
|
||||
if (this.changed()){
|
||||
var changes = {}
|
||||
for (var name in this.editors){
|
||||
var editor = this.editors[name];
|
||||
|
||||
if (editor.changed())
|
||||
{
|
||||
changes[editor.id()] = editor.value();
|
||||
}
|
||||
}
|
||||
return changes;
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
this.descriptor = descriptor;
|
||||
this.editors = {}
|
||||
|
|
|
|||
89
sky.types.js
89
sky.types.js
|
|
@ -1,29 +1,25 @@
|
|||
(function(SKY){
|
||||
|
||||
class SKYEditor{
|
||||
class SKYEditor extends SKY.prototypes.SKYBase {
|
||||
constructor(placeholder,pattern){
|
||||
super();
|
||||
this.html($('<input type="text">'));
|
||||
if (pattern)
|
||||
this._html.attr("pattern", pattern);
|
||||
this.html().attr("pattern", pattern);
|
||||
if (placeholder)
|
||||
this._html.attr("placeholder", placeholder);
|
||||
this.html().attr("placeholder", placeholder);
|
||||
|
||||
this._html.on("input", ()=>this.changed( this._html.data("value") != this._html.val() ) );
|
||||
this._html.data("value", null);
|
||||
}
|
||||
|
||||
html(html){
|
||||
if (arguments.length == 1)
|
||||
{
|
||||
this._html = $(html);
|
||||
return this;
|
||||
}
|
||||
return this._html;
|
||||
this.html().on("input", ()=>this.changed( this.html().data("value") != this.html().val() ) );
|
||||
this.html().data("value", null);
|
||||
}
|
||||
|
||||
id(id){
|
||||
this.html().attr("id", id);
|
||||
return this;
|
||||
if (arguments.length)
|
||||
{
|
||||
this.html().attr("id", id);
|
||||
return this;
|
||||
}
|
||||
return this.html().attr("id");
|
||||
}
|
||||
|
||||
value(value){
|
||||
|
|
@ -55,15 +51,51 @@
|
|||
}
|
||||
SKY.prototypes.SKYEditor = SKYEditor;
|
||||
|
||||
class SKYSelector extends SKY.prototypes.SKYBase {
|
||||
constructor(){
|
||||
super();
|
||||
}
|
||||
|
||||
value(value){
|
||||
if (arguments.length){
|
||||
return this;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
appendTo(parent){
|
||||
this.html().appendTo(parent);
|
||||
return this;
|
||||
}
|
||||
|
||||
enable(en){
|
||||
if (arguments.length)
|
||||
{
|
||||
this.enabled = en;
|
||||
if (en)
|
||||
this.html().removeAttr("disabled");
|
||||
else
|
||||
this.html().attr("disabled", "");
|
||||
|
||||
return this;
|
||||
}
|
||||
return this.enabled;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
SKY.prototypes.SKYSelector = SKYSelector;
|
||||
|
||||
|
||||
class SKYIntEditor extends SKYEditor {
|
||||
constructor(){
|
||||
super();
|
||||
this._html.attr("type","number");
|
||||
this._html.attr("type","number");
|
||||
}
|
||||
}
|
||||
class SKYTimeSpanEditor extends SKYEditor {
|
||||
constructor(){
|
||||
super("0d 00:00:00","^([0-9]{1,}d){0,1} {1,}[0-9]{1,2}:[0-9]{1,2}:[0-9]{1,2}$");
|
||||
super("0d 00:00:00","^([0-9]{1,}d){0,1} {0,}([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})$");
|
||||
}
|
||||
|
||||
value(value){
|
||||
|
|
@ -73,8 +105,8 @@
|
|||
.val(SKY.type("timespan").render(value))
|
||||
.data("value", value);
|
||||
return this;
|
||||
}
|
||||
return this._html.val();
|
||||
}
|
||||
return SKY.type("timespan").parse(this._html.val());
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -88,11 +120,20 @@
|
|||
editor(){
|
||||
return new SKYEditor();
|
||||
}
|
||||
|
||||
selector(){
|
||||
return null;
|
||||
}
|
||||
|
||||
render(value){
|
||||
return value;
|
||||
}
|
||||
|
||||
parse(value){
|
||||
return value;
|
||||
}
|
||||
}
|
||||
SKY.prototypes.SKYType = SKYType;
|
||||
|
||||
class SKYIntType extends SKYType
|
||||
{
|
||||
|
|
@ -159,7 +200,13 @@
|
|||
}
|
||||
|
||||
parse(t){
|
||||
|
||||
var tokens = t.match("^([0-9]{1,}d){0,1} {0,}([0-9]{1,2}):([0-9]{1,2}):([0-9]{1,2})$");
|
||||
var days,hours,minutes,seconds;
|
||||
days = tokens[1] ? tokens[1].substr(0,tokens[1].length-1) : 0;
|
||||
hours = tokens[2] || 0;
|
||||
minutes = tokens[3] || 0;
|
||||
seconds = tokens[4] || 0;
|
||||
return parseInt(days * 86400) + parseInt(hours * 3600) + parseInt(minutes * 60) + parseInt(seconds);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
(function(SKY){
|
||||
|
||||
var referenceSelectorDefaultOptions = {
|
||||
id: null,
|
||||
referencedType: null,
|
||||
}
|
||||
|
||||
var referenceDefaultOptions = {
|
||||
url: null,
|
||||
|
||||
referencedType: null,
|
||||
|
||||
lookup: function(pattern){ return []; },
|
||||
render: function(o){ return o; },
|
||||
parse: function(src){ return src; },
|
||||
id: function(o){ return o; },
|
||||
}
|
||||
|
||||
class SKYReferenceSelector extends SKY.prototypes.SKYSelector {
|
||||
constructor(options){
|
||||
super();
|
||||
|
||||
this.options = Object.assign({}, referenceSelectorDefaultOptions);
|
||||
Object.assign(this.options,options);
|
||||
|
||||
var html = $('<input type="text">');
|
||||
html
|
||||
.attr(id,this.options.id);
|
||||
|
||||
this.html( html );
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
SKY.prototypes.SKYReferenceSelector = SKYReferenceSelector;
|
||||
|
||||
class SKYReferencingType extends SKY.prototypes.SKYType {
|
||||
|
||||
constructor(name,options){
|
||||
super(name);
|
||||
|
||||
this.options = Object.assign({}, referenceDefaultOptions);
|
||||
Object.assign(this.options, options);
|
||||
|
||||
}
|
||||
|
||||
editor(){
|
||||
return new SKY.prototypes.SKYEditor();
|
||||
}
|
||||
|
||||
selector(){
|
||||
return null;
|
||||
}
|
||||
|
||||
render(value){ return this.options.render(value); }
|
||||
parse(src){ return this.options.parse(src); }
|
||||
lookup(pattern){ return this.options.lookup(pattern); }
|
||||
}
|
||||
|
||||
SKY.prototypes.SKYReferencingType = SKYReferencingType;
|
||||
}(SKY));
|
||||
Loading…
Reference in New Issue