Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Demos: Fix search navigation through keyboard #8406

Closed
wants to merge 3 commits into from
Closed

Demos: Fix search navigation through keyboard #8406

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
4e6f819
Demos: Fix search navigation through keyboard
apsdehal Mar 19, 2016
e4bb2c5
Demos: Fix jscs errors in search js
apsdehal Mar 20, 2016
9c6d7c6
Demos: Combine up and down key logic in one block
apsdehal Mar 20, 2016
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
4 changes: 4 additions & 0 deletions demos/_assets/css/jqm-demos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -968,6 +968,10 @@ li.jqm-3rd-party .ui-listview-item-button::before {
color: #333;
}

.jqm-search-list.ui-listview > .ui-listview-item-active {
background-color: #eee;
}

.jqm-search-list.ui-listview > .ui-listview-item > .ui-listview-item-button:focus {
-webkit-box-shadow: inset 0 0 1px #0e82a5;
-moz-box-shadow: inset 0 0 1px #0e82a5;
Expand Down
64 changes: 29 additions & 35 deletions demos/_assets/js/jqm-demos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,27 +312,37 @@ $( document ).on( "mobileinit", function() {
},
handleKeyUp: function( e ) {
var search,
input = this.element.prev("form").find( "input" );

if ( e.which === $.ui.keyCode.DOWN ) {
if ( this.element.find( "li.ui-button-active" ).length === 0 ) {
this.element.find( "li:first" ).toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
toBeHighlightled,
input = this.element.prev("form").find( "input" ),
isDownKeyUp = e.which === $.ui.keyCode.DOWN,
isUpKeyUp = e.which === $.ui.keyCode.UP;

if ( isDownKeyUp || isUpKeyUp ) {
if ( this.element.find( "li.ui-listview-item-active" ).length === 0 ) {
toBeHighlightled = this.element.find( "li" )
.not( ".ui-screen-hidden" )
[ isDownKeyUp ? "first" : "last" ]();
} else {
this.element.find( "li.ui-button-active a" ).toggleClass( "ui-button-active");
this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).next().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
this.element.find( "li.ui-listview-item-active a" )
.toggleClass( "ui-button-active");

toBeHighlightled = this.element.find( "li.ui-listview-item-active" )
.toggleClass( "ui-listview-item-active" )
[ isDownKeyUp ? "nextAll" : "prevAll" ]( "li" )
.not( ".ui-screen-hidden" )
.first();
}

this.highlightDown();
} else if ( e.which === $.ui.keyCode.UP ) {
if ( this.element.find( "li.ui-button-active" ).length !== 0 ) {
this.element.find( "li.ui-button-active a" ).toggleClass( "ui-button-active");
this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).prev().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
} else {
this.element.find( "li:last" ).toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
}
this.highlightUp();
// Highlight the selected list item
toBeHighlightled
.toggleClass( "ui-listview-item-active" )
.find( "a" )
.toggleClass( "ui-button-active" );
} else if ( e.which === $.ui.keyCode.ENTER ) {
this.submitHandler();
} else if ( typeof e.which !== "undefined" ) {
this.element.find( "li.ui-button-active" ).removeClass( "ui-button-active" );
this.element.find( "li.ui-listview-item-active" )
.removeClass( "ui-listview-item-active" );

if ( this.options.highlight ) {
search = input.val();
Expand All @@ -345,8 +355,8 @@ $( document ).on( "mobileinit", function() {
}
},
submitHandler: function() {
if ( this.element.find( "li.ui-button-active" ).length !== 0 ) {
var href = this.element.find( "li.ui-button-active a" ).attr( "href" );
if ( this.element.find( "li.ui-listview-item-active" ).length !== 0 ) {
var href = this.element.find( "li.ui-listview-item-active a" ).attr( "href" );

$( ":mobile-pagecontainer" ).pagecontainer( "change", href );
return false;
Expand All @@ -355,22 +365,6 @@ $( document ).on( "mobileinit", function() {
if ( this.options.submitTo ) {
this.submitTo();
}
},
highlightDown: function() {
if ( this.element.find( "li.ui-button-active" ).hasClass( "ui-screen-hidden" ) ) {
this.element.find( "li.ui-button-active" ).find("a").toggleClass( "ui-button-active" );
this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).next().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
this.highlightDown();
}
return;
},
highlightUp: function() {
if ( this.element.find( "li.ui-button-active" ).hasClass( "ui-screen-hidden" ) ) {
this.element.find( "li.ui-button-active" ).find("a").toggleClass( "ui-button-active" );
this.element.find( "li.ui-button-active" ).toggleClass( "ui-button-active" ).prev().toggleClass( "ui-button-active" ).find("a").toggleClass( "ui-button-active" );
this.highlightUp();
}
return;
}
});
})( jQuery );
Expand Down