master
Harald Wolff 2019-05-24 14:08:19 +02:00
parent fc0a451fbb
commit 5582eca916
4 changed files with 108 additions and 33 deletions

View File

@ -57,13 +57,13 @@
var personen = [ var personen = [
{ {
ID: "HWO", ID: "HWO",
Name: "Harald", Name: "Harald Wolff-Thobaben",
Beruf: "Entwickler", Beruf: "Entwickler",
Alter: 39 Alter: 39
}, },
{ {
ID: "HWI", ID: "HWI",
Name: "Holger", Name: "Holger Witt",
Beruf: "fast Chemiker", Beruf: "fast Chemiker",
Alter: 38 Alter: 38
} }
@ -84,7 +84,10 @@
} }
var typePerson = new SKY.prototypes.SKYReferencingType("person",{ var typePerson = new SKY.prototypes.SKYReferencingType("person",{
referencedType: dscPerson, referencedType: dscPerson,
lookup: function(p,response){ response(lookupPersonen(p)); }, lookup: function(p,response){
var matches = lookupPersonen(p);
response(matches);
},
render: function(v){ return `[${v.ID}] ${v.Name}`; } render: function(v){ return `[${v.ID}] ${v.Name}`; }
}); });

View File

@ -19,12 +19,12 @@
padding-right: 4px; padding-right: 4px;
cursor: pointer; cursor: pointer;
} }
.skyselect-item[selected] { .skyselect-item.selected {
background-color: blue; background-color: blue;
color: white; color: white;
} }
.skyselect-item:hover { .skyselect-item:hover, .skyselect-item.active {
background-color: #B0B0B0; background-color: #B0B0B0;
} }

View File

@ -25,13 +25,19 @@
.addClass("skyselect-popup") .addClass("skyselect-popup")
.appendTo(this.wrap); .appendTo(this.wrap);
this.element.on("keydown", function(ev){ self.onKeyDown(ev); } ); this.element
this.element.on("focusin", function(ev){ self.onFocusIn(ev); } ); .on("keydown", function(ev){ self.onKeyDown(ev); } )
this.element.on("focusout", function(ev){ self.onFocusOut(ev); } ); .on("focusin", function(ev){ self.onFocusIn(ev); } )
.on("focusout", function(ev){ self.onFocusOut(ev); } )
.on("dblclick", function(ev){
self.open();
} );
this.type = SKY.type(this.options.type); this.type = SKY.type(this.options.type);
this.selectedItem = null; this.selectedItem = null;
this.activeItem = null;
this.timer = null; this.timer = null;
} }
html(){ return this.wrap; } html(){ return this.wrap; }
@ -45,18 +51,48 @@
this.popup.hide(); this.popup.hide();
this.isOpen = false; this.isOpen = false;
this.element.attr( this.element.val(
"value",
this.selectedItem ? this.options.render(this.selectedItem) : "" this.selectedItem ? this.options.render(this.selectedItem) : ""
); );
this.activeItem = null;
} }
return this; return this;
} }
markCurrentSelected(){
var self = this;
var currentSelectedIdentity = self.options.type.identity(self.selectedItem);
this.popup.children(".skyselect-item").each(function(){
var li = $(this);
var item = li.data("skyselect-item");
if (self.options.type.identity(item) == currentSelectedIdentity)
li.addClass("selected");
else
li.removeClass("selected");
});
}
markActive(item){
var self = this;
var currentActiveIdentity = self.options.type.identity(item);
self.activeItem = item;
this.popup.children(".skyselect-item").each(function(){
var li = $(this);
var item = li.data("skyselect-item");
if (self.options.type.identity(item) == currentActiveIdentity)
li.addClass("active");
else
li.removeClass("active");
});
}
select(item){ select(item){
this.close(); this.close();
this.selectedItem = item; this.selectedItem = item;
this.element.attr("value", this.options.type.render(item)); this.element.val(this.options.type.render(item));
this.markCurrentSelected();
} }
items(items){ items(items){
@ -64,16 +100,19 @@
this.popup.empty(); this.popup.empty();
$.each( items, function(){ $.each( items, function(){
var item = this; var item = this;
self.popup.append( var li = $("<div></div>")
$("<div></div>") .addClass("skyselect-item")
.addClass("skyselect-item") .append(self.options.type.render(this))
.append(self.options.type.render(this)) .data("skyselect-item", this)
.data("skyselect-item", this) .on("click", function(ev){
.on("click", function(ev){ self.select( item );
self.select( item ); } )
} ) .on("hover", function(ev){
); self.markActive(item);
});
self.popup.append(li);
}) })
this.markCurrentSelected();
} }
onKeyDown(ev){ onKeyDown(ev){
@ -84,23 +123,55 @@
case 27: // ESC case 27: // ESC
this.close(); this.close();
break; break;
case 38: // UP
if (this.isOpen){
var currentActiveLi = $(".skyselect-item.active", this.popup);
if (currentActiveLi.length){
var nextLi = currentActiveLi.next(".skyselect-item");
if (nextLi.length)
{
}
} else {
var firstLi = this.popup.first("skyselect-item");
if (firstLi.length)
this.markActive(firstLi.data("skyselect-item"));
}
}
break;
case 40: // DOWN case 40: // DOWN
this.open(); if (this.isOpen){
var currentActiveLi = $(".skyselect-item.active", this.popup);
if (currentActiveLi.length){
var nextLi = currentActiveLi.next(".skyselect-item");
if (nextLi.length)
{
}
} else {
var firstLi = this.popup.first("skyselect-item");
if (firstLi.length)
this.markActive(firstLi.data("skyselect-item"));
}
} else {
this.open();
}
break; break;
default: default:
console.log("ev.which=" + ev.which); console.log("ev.which=" + ev.which);
clearInterval(this.timer); if (ev.which >= 32)
this.timer = setInterval( function(){ {
self.options.lookup( clearInterval(this.timer);
self.element.attr("value"), this.timer = setInterval( function(){
function(items){ self.options.lookup(
self.items(items); self.element.val(),
self.open(); function(items){
} self.items(items);
) }
}, 250); )
}, 250);
this.open();
}
break; break;
} }
@ -110,7 +181,7 @@
} }
onFocusOut(ev){ onFocusOut(ev){
var self = this; var self = this;
//setTimeout( function(){ self.close(); }, 100 ); setTimeout( function(){ self.close(); }, 100 );
} }
} }

View File

@ -12,7 +12,7 @@
lookup: function(pattern,response){}, lookup: function(pattern,response){},
render: function(o){ return o; }, render: function(o){ return o; },
parse: function(src){ return src; }, parse: function(src){ return src; },
id: function(o){ return o; }, identity:function(o){ return o; },
} }
class SKYReferenceSelector extends SKY.prototypes.SKYSelector { class SKYReferenceSelector extends SKY.prototypes.SKYSelector {
@ -79,6 +79,7 @@
render(value){ return this.options.render(value); } render(value){ return this.options.render(value); }
parse(src){ return this.options.parse(src); } parse(src){ return this.options.parse(src); }
lookup(pattern,response){ this.options.lookup(pattern,response); } lookup(pattern,response){ this.options.lookup(pattern,response); }
identity(value){ return this.options.identity(value); }
} }
SKY.prototypes.SKYReferencingType = SKYReferencingType; SKY.prototypes.SKYReferencingType = SKYReferencingType;