WIP
Harald Wolff
parent
7cd527e3af
commit
fc0a451fbb
18
frame.html
18
frame.html
|
|
@ -5,13 +5,17 @@
|
|||
<title>Sky.JS</title>
|
||||
|
||||
<link href="jquery-ui.min.css" rel="stylesheet" />
|
||||
<link href="chosen.min.css" rel="stylesheet" />
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
<link href="sky.base.css" rel="stylesheet" />
|
||||
<link href="sky.controls.css" rel="stylesheet" />
|
||||
<link href="sky.tables.css" rel="stylesheet" />
|
||||
|
||||
<script type="text/javascript" src="jquery.min.js"></script>
|
||||
<script type="text/javascript" src="jquery-ui.min.js"></script>
|
||||
<script type="text/javascript" src="chosen.jquery.min.js"></script>
|
||||
<script type="text/javascript" src="sky.base.js"></script>
|
||||
<script type="text/javascript" src="sky.controls.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>
|
||||
|
|
@ -65,6 +69,12 @@
|
|||
}
|
||||
];
|
||||
|
||||
function lookupPersonen(q){
|
||||
return $.grep( personen, function(item,index){
|
||||
return (item.ID.search(q)!=-1) || (item.Name.search(q)!=-1) || (item.Beruf.search(q)!=-1);
|
||||
});
|
||||
}
|
||||
|
||||
var dscPerson = {
|
||||
fields: [
|
||||
{ name: "Name", type: null, },
|
||||
|
|
@ -72,12 +82,10 @@
|
|||
{ name: "Beruf", type: null, },
|
||||
],
|
||||
}
|
||||
var typePerson = new SKY.prototypes.SKYReferencingType({
|
||||
var typePerson = new SKY.prototypes.SKYReferencingType("person",{
|
||||
referencedType: dscPerson,
|
||||
lookup: function(p){ return $.grep( personen, function(i){
|
||||
return (i.ID.search(p) != -1) || (i.Name.search(p) != -1) || (i.Beruf.search(p) != -1);
|
||||
}
|
||||
) }
|
||||
lookup: function(p,response){ response(lookupPersonen(p)); },
|
||||
render: function(v){ return `[${v.ID}] ${v.Name}`; }
|
||||
});
|
||||
|
||||
var demoDescriptor = {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
|
||||
.skyselect-popup {
|
||||
display: none;
|
||||
position: absolute;
|
||||
min-width: 120px;
|
||||
min-height: 28px;
|
||||
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
|
||||
z-index: 999;
|
||||
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.skyselect-item {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.skyselect-item[selected] {
|
||||
background-color: blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.skyselect-item:hover {
|
||||
background-color: #B0B0B0;
|
||||
}
|
||||
|
||||
246
sky.controls.js
246
sky.controls.js
|
|
@ -1,165 +1,131 @@
|
|||
(function(SKY){
|
||||
|
||||
(function(SKY,$){
|
||||
|
||||
class SKYControl extends SKY.prototypes.SKYBase {
|
||||
constructor(typeName){
|
||||
super();
|
||||
this.typeName = typeName;
|
||||
var defOptions = {
|
||||
type: null,
|
||||
|
||||
lookup: function(pattern,response){}
|
||||
|
||||
};
|
||||
|
||||
class SkySelect {
|
||||
constructor(element,options){
|
||||
this.options = Object.assign({},defOptions);
|
||||
Object.assign(this.options, options);
|
||||
|
||||
var self = this;
|
||||
|
||||
element = $(element);
|
||||
element.data("skySelect", this);
|
||||
|
||||
}
|
||||
this.element = element;
|
||||
this.wrap = $("<div></div>");
|
||||
this.element.appendTo(this.wrap);
|
||||
this.popup = $("<div></div>")
|
||||
.addClass("skyselect-popup")
|
||||
.appendTo(this.wrap);
|
||||
|
||||
getIdentity(o){
|
||||
return null;
|
||||
}
|
||||
render(o){
|
||||
return o.toString();
|
||||
}
|
||||
editor(){
|
||||
return null;
|
||||
}
|
||||
createSelector(){
|
||||
return this.createEditor();
|
||||
}
|
||||
}
|
||||
this.element.on("keydown", function(ev){ self.onKeyDown(ev); } );
|
||||
this.element.on("focusin", function(ev){ self.onFocusIn(ev); } );
|
||||
this.element.on("focusout", function(ev){ self.onFocusOut(ev); } );
|
||||
|
||||
SKY.prototypes.SKYControl = SKYControl;
|
||||
this.type = SKY.type(this.options.type);
|
||||
|
||||
}(SKY));
|
||||
|
||||
(function(SKY){
|
||||
|
||||
class StringEditor extends SKY.prototypes.SKYEditor{
|
||||
constructor(){
|
||||
this.html(
|
||||
$("<input>")
|
||||
.attr("type","text")
|
||||
.data("sky-editor", this)
|
||||
.addClass("skyeditor skyeditor-string")
|
||||
.on("change", function(e){
|
||||
$(this).data("sky-editor").changed(true);
|
||||
})
|
||||
);
|
||||
this.selectedItem = null;
|
||||
this.timer = null;
|
||||
}
|
||||
value(val){
|
||||
if (arguments.length)
|
||||
html(){ return this.wrap; }
|
||||
|
||||
open(){ this.popup.slideDown(); this.isOpen = true; return this; }
|
||||
close(){
|
||||
if (this.isOpen)
|
||||
{
|
||||
this.html().val( val );
|
||||
this.changed(false);
|
||||
return this;
|
||||
clearInterval(this.timer);
|
||||
|
||||
this.popup.hide();
|
||||
this.isOpen = false;
|
||||
|
||||
this.element.attr(
|
||||
"value",
|
||||
this.selectedItem ? this.options.render(this.selectedItem) : ""
|
||||
);
|
||||
}
|
||||
return this.html().val();
|
||||
return this;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
class StringType extends SKY.prototypes.SKYControl {
|
||||
constructor(){
|
||||
super("string")
|
||||
select(item){
|
||||
this.close();
|
||||
this.selectedItem = item;
|
||||
this.element.attr("value", this.options.type.render(item));
|
||||
}
|
||||
|
||||
createEditor(){
|
||||
return new StringEditor();
|
||||
items(items){
|
||||
var self = this;
|
||||
this.popup.empty();
|
||||
$.each( items, function(){
|
||||
var item = this;
|
||||
self.popup.append(
|
||||
$("<div></div>")
|
||||
.addClass("skyselect-item")
|
||||
.append(self.options.type.render(this))
|
||||
.data("skyselect-item", this)
|
||||
.on("click", function(ev){
|
||||
self.select( item );
|
||||
} )
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
onKeyDown(ev){
|
||||
var self = this;
|
||||
|
||||
new StringType();
|
||||
switch (ev.which)
|
||||
{
|
||||
case 27: // ESC
|
||||
this.close();
|
||||
break;
|
||||
case 40: // DOWN
|
||||
this.open();
|
||||
break;
|
||||
default:
|
||||
console.log("ev.which=" + ev.which);
|
||||
|
||||
}(SKY));
|
||||
clearInterval(this.timer);
|
||||
this.timer = setInterval( function(){
|
||||
self.options.lookup(
|
||||
self.element.attr("value"),
|
||||
function(items){
|
||||
self.items(items);
|
||||
self.open();
|
||||
}
|
||||
)
|
||||
}, 250);
|
||||
|
||||
|
||||
(function($){
|
||||
$.extend($, { sky: {} } );
|
||||
$.extend($.sky, { controls: {} });
|
||||
|
||||
$.widget( "sky.IPPool", {
|
||||
options: {
|
||||
url: "/DHCP/collections/IPPool",
|
||||
},
|
||||
|
||||
_create: function(){
|
||||
this.refresh();
|
||||
},
|
||||
|
||||
refresh: function(){
|
||||
var element = this.element;
|
||||
|
||||
$.ajax( this.options.url, {
|
||||
error: function(x,status,error){
|
||||
alert(`sky.IPPool: Error fetching list of IPPools from Server ${status} ${error}`);
|
||||
},
|
||||
success: function(data,status,x){
|
||||
data.forEach( function(e){
|
||||
$("<option></option>")
|
||||
.attr("value", e.Name)
|
||||
.text( e.Name )
|
||||
.appendTo( element );
|
||||
} );
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
_destroy: function(){
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
$.widget( "sky.IPv4", {
|
||||
options: {
|
||||
mask: '099.099.099.099',
|
||||
placeholder: '000.000.000.000',
|
||||
},
|
||||
|
||||
_create: function(){
|
||||
this.element.mask( this.options.mask, {
|
||||
placeholder: this.options.placeholder,
|
||||
} );
|
||||
},
|
||||
|
||||
value: function(v){
|
||||
if (arguments.length == 0){
|
||||
return this.element.val();
|
||||
break;
|
||||
}
|
||||
this.element.val(v);
|
||||
},
|
||||
}
|
||||
onFocusIn(ev){
|
||||
this.element.select();
|
||||
}
|
||||
onFocusOut(ev){
|
||||
var self = this;
|
||||
//setTimeout( function(){ self.close(); }, 100 );
|
||||
}
|
||||
|
||||
_destroy: function(){
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
$.fn.___IPPool = function( opts ){
|
||||
var select = this.filter("select")[0];
|
||||
|
||||
if (!select)
|
||||
throw "IPPool needs an <select> element to be instantiated on";
|
||||
|
||||
return $(select);
|
||||
}
|
||||
|
||||
$.fn.skySelect = function(options){
|
||||
$.each( this, function(index,item){
|
||||
var skySelect = $(item).data("skySelect");
|
||||
if (!skySelect)
|
||||
skySelect = new SkySelect(item,options);
|
||||
});
|
||||
if (this.length == 1)
|
||||
return $(this).data("skySelect");
|
||||
return this;
|
||||
}
|
||||
|
||||
me = function(opts){
|
||||
return this.filter("select").map( function(){
|
||||
var ctrl = this;
|
||||
var pools = skyapi().getJson("/DHCP/collections/IPPool");
|
||||
|
||||
ctrl.val = function(v){ alert(v); }
|
||||
|
||||
return ctrl;
|
||||
});
|
||||
}
|
||||
|
||||
$.sky.controls.IPPool = function(type,key){
|
||||
return $("<select></select>").attr( "id", key ).IPPool();
|
||||
};
|
||||
$.sky.controls.IPv4 = function(type,key){
|
||||
return $("<input></input>").attr( "id", key ).IPv4();
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
}( jQuery ));
|
||||
}( SKY, jQuery ));
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,10 +7,9 @@
|
|||
|
||||
var referenceDefaultOptions = {
|
||||
url: null,
|
||||
descriptor: null,
|
||||
|
||||
referencedType: null,
|
||||
|
||||
lookup: function(pattern){ return []; },
|
||||
lookup: function(pattern,response){},
|
||||
render: function(o){ return o; },
|
||||
parse: function(src){ return src; },
|
||||
id: function(o){ return o; },
|
||||
|
|
@ -25,13 +24,29 @@
|
|||
this.options = Object.assign({}, referenceSelectorDefaultOptions);
|
||||
Object.assign(this.options,options);
|
||||
|
||||
var html = $('<input type="text">');
|
||||
html
|
||||
var html = $('<input type="text">')
|
||||
.attr("id",this.options.id)
|
||||
.skySelect({
|
||||
type: this.options.referencedType,
|
||||
lookup: function(p,r){ self.options.referencedType.lookup(p,r); },
|
||||
render: function(v){ return self.options.referencedType.render(v); },
|
||||
})
|
||||
.html();
|
||||
/*
|
||||
.autocomplete({
|
||||
source: function(request, response){ response(self.options.referencedType.lookup(request.term)); },
|
||||
source: function(request, response){
|
||||
response(
|
||||
$.map(
|
||||
self.options.referencedType.lookup(request.term),
|
||||
function(item){ return self.options.referencedType.render(item); }
|
||||
)
|
||||
);
|
||||
},
|
||||
select: function( ev, ui ){
|
||||
alert(JSON.stringify(ui.item));
|
||||
},
|
||||
});
|
||||
|
||||
*/
|
||||
this.html( html );
|
||||
}
|
||||
|
||||
|
|
@ -63,7 +78,7 @@
|
|||
|
||||
render(value){ return this.options.render(value); }
|
||||
parse(src){ return this.options.parse(src); }
|
||||
lookup(pattern){ return this.options.lookup(pattern); }
|
||||
lookup(pattern,response){ this.options.lookup(pattern,response); }
|
||||
}
|
||||
|
||||
SKY.prototypes.SKYReferencingType = SKYReferencingType;
|
||||
|
|
|
|||
Loading…
Reference in New Issue