From 5582eca9169de74a4d7487677756a0e7830b8df2 Mon Sep 17 00:00:00 2001 From: Harald Wolff Date: Fri, 24 May 2019 14:08:19 +0200 Subject: [PATCH] WIP --- frame.html | 9 ++- sky.controls.css | 4 +- sky.controls.js | 125 ++++++++++++++++++++++++++++++++--------- sky.types.reference.js | 3 +- 4 files changed, 108 insertions(+), 33 deletions(-) diff --git a/frame.html b/frame.html index d4a0843..5425985 100644 --- a/frame.html +++ b/frame.html @@ -57,13 +57,13 @@ var personen = [ { ID: "HWO", - Name: "Harald", + Name: "Harald Wolff-Thobaben", Beruf: "Entwickler", Alter: 39 }, { ID: "HWI", - Name: "Holger", + Name: "Holger Witt", Beruf: "fast Chemiker", Alter: 38 } @@ -84,7 +84,10 @@ } var typePerson = new SKY.prototypes.SKYReferencingType("person",{ 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}`; } }); diff --git a/sky.controls.css b/sky.controls.css index 75c9d4a..3929c05 100644 --- a/sky.controls.css +++ b/sky.controls.css @@ -19,12 +19,12 @@ padding-right: 4px; cursor: pointer; } -.skyselect-item[selected] { +.skyselect-item.selected { background-color: blue; color: white; } -.skyselect-item:hover { +.skyselect-item:hover, .skyselect-item.active { background-color: #B0B0B0; } diff --git a/sky.controls.js b/sky.controls.js index 68dfb6f..56882f1 100644 --- a/sky.controls.js +++ b/sky.controls.js @@ -25,13 +25,19 @@ .addClass("skyselect-popup") .appendTo(this.wrap); - 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); } ); + this.element + .on("keydown", function(ev){ self.onKeyDown(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.selectedItem = null; + this.activeItem = null; this.timer = null; } html(){ return this.wrap; } @@ -45,18 +51,48 @@ this.popup.hide(); this.isOpen = false; - this.element.attr( - "value", + this.element.val( this.selectedItem ? this.options.render(this.selectedItem) : "" ); + + this.activeItem = null; } 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){ this.close(); this.selectedItem = item; - this.element.attr("value", this.options.type.render(item)); + this.element.val(this.options.type.render(item)); + this.markCurrentSelected(); } items(items){ @@ -64,16 +100,19 @@ this.popup.empty(); $.each( items, function(){ var item = this; - self.popup.append( - $("
") - .addClass("skyselect-item") - .append(self.options.type.render(this)) - .data("skyselect-item", this) - .on("click", function(ev){ - self.select( item ); - } ) - ); + var li = $("
") + .addClass("skyselect-item") + .append(self.options.type.render(this)) + .data("skyselect-item", this) + .on("click", function(ev){ + self.select( item ); + } ) + .on("hover", function(ev){ + self.markActive(item); + }); + self.popup.append(li); }) + this.markCurrentSelected(); } onKeyDown(ev){ @@ -84,23 +123,55 @@ case 27: // ESC this.close(); 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 - 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; default: console.log("ev.which=" + ev.which); - clearInterval(this.timer); - this.timer = setInterval( function(){ - self.options.lookup( - self.element.attr("value"), - function(items){ - self.items(items); - self.open(); - } - ) - }, 250); + if (ev.which >= 32) + { + clearInterval(this.timer); + this.timer = setInterval( function(){ + self.options.lookup( + self.element.val(), + function(items){ + self.items(items); + } + ) + }, 250); + this.open(); + } break; } @@ -110,7 +181,7 @@ } onFocusOut(ev){ var self = this; - //setTimeout( function(){ self.close(); }, 100 ); + setTimeout( function(){ self.close(); }, 100 ); } } diff --git a/sky.types.reference.js b/sky.types.reference.js index 2c3d055..b663031 100644 --- a/sky.types.reference.js +++ b/sky.types.reference.js @@ -12,7 +12,7 @@ lookup: function(pattern,response){}, render: function(o){ return o; }, parse: function(src){ return src; }, - id: function(o){ return o; }, + identity:function(o){ return o; }, } class SKYReferenceSelector extends SKY.prototypes.SKYSelector { @@ -79,6 +79,7 @@ render(value){ return this.options.render(value); } parse(src){ return this.options.parse(src); } lookup(pattern,response){ this.options.lookup(pattern,response); } + identity(value){ return this.options.identity(value); } } SKY.prototypes.SKYReferencingType = SKYReferencingType;