diff --git a/css/zoostyle.css b/css/zoostyle.css index f259c602..5130d5b3 100644 --- a/css/zoostyle.css +++ b/css/zoostyle.css @@ -1140,3 +1140,18 @@ div.toggle-time-entry div { background: #ccc; border-color: transparent; } +/* make autocomplete mobile ui more consistent with mobile datalist */ +@media (max-width: 1024px) { + .ui-autocomplete { + max-height: 500px; + max-width: 100%; + } + .ui-autocomplete.ui-widget.ui-widget-content { + border-radius: 8px; + font-size: 16px; + } + .ui-autocomplete.ui-widget .ui-menu-item { + padding: 8px; + border-top: 1px solid gray; + } +} diff --git a/js/playlists.track.js b/js/playlists.track.js index 2d7ef1b0..199f459b 100644 --- a/js/playlists.track.js +++ b/js/playlists.track.js @@ -47,7 +47,6 @@ $().ready(function(){ function clearUserInput(clearArtistList) { $("#manual-entry input").removeClass('invalid-input').val(''); $("#comment-entry textarea").val(''); - $("#track-title").attr('list',''); // webkit hack $("#track-titles").empty(); $("#error-msg").text(''); $("#tag-status").text(''); @@ -140,18 +139,6 @@ $().ready(function(){ "' value='" + htmlify((i+1) + ". " + artist + track.track) + "'>"; } $("#track-titles").html(options); - $("#track-title").attr('list','track-titles'); // webkit hack - if(navigator.userAgent.match(/firefox/i) && - $("#track-title").is(":focus")) { - // fx hack for Bugzilla 1351483 - // - // if focused, we have to lose and regain focus for - // the element to pick up the refreshed datalist - // - // probably safe everywhere, but scope to firefox - // for now, to avoid surprises with other browsers - $("#track-title").blur().focus(); - } $("#track-artist").val(diskInfo.attributes.artist); $("#track-label").val(diskInfo.relationships != null && diskInfo.relationships.label != null ? @@ -182,12 +169,6 @@ $().ready(function(){ if(refTitle) setAddButtonState(true); - else - setTimeout(function() { - // change focus asynchronously to avoid double tab - // on tab-initiated focus change - $("#track-title").focus(); - }, 0); }).fail(function (jqXHR, textStatus, errorThrown) { var json = JSON.parse(jqXHR.responseText); if (json && json.errors) { @@ -233,7 +214,7 @@ $().ready(function(){ } }); - $("#manual-entry input").on('input', function() { + $("#manual-entry input").on('input autocomplete', function() { var haveAll = haveAllUserInput(); setAddButtonState(haveAll); }); @@ -695,9 +676,7 @@ $().ready(function(){ if(tagId > 0) { tagId = 0; $("#track-title").val(""); - $("#track-title").attr('list',''); // webkit hack $("#track-titles").empty(); - $("#track-title").attr('list','track-titles'); // webkit hack $("#track-album").val(""); $("#track-label").val(""); } @@ -723,10 +702,10 @@ $().ready(function(){ } }); - $("#track-title").click(function() { - $("#track-titles").show().hide(); - }).on('change textInput input', function() { - var title = $("#track-title").val(); + $("#track-title").on('click', function() { + $(this).autocomplete('search', ''); + }).on('change textInput input autocomplete', function() { + var title = this.value; var opt = $("#track-titles option[value='" + escQuote(title) + "']"); if(opt.length > 0) { var artist = opt.data("artist"); @@ -734,6 +713,20 @@ $().ready(function(){ $("#track-artist").val(artist); $("#track-title").val(opt.data("track")); } + }).autocomplete({ + minLength: 0, + source: function(rq, rs) { + rs($("#track-titles option").map(function() { + return this.value; + })); + }, + select: function(event, ui) { + $(this).val(ui.item.value).trigger('autocomplete'); + event.preventDefault(); + }, + open: function() { + $(".ui-menu").scrollTop(0); + } }); $("#track-album, #track-label").on('change', function() { diff --git a/ui/Playlists.php b/ui/Playlists.php index 62b355ec..344e5486 100644 --- a/ui/Playlists.php +++ b/ui/Playlists.php @@ -854,7 +854,7 @@ private function emitTrackAdder($playlistId, $playlist, $editTrack = false) {
- autocomplete='off'/> + autocomplete='off'/>