Merge pull request #174 from jcass77/fix/113_replace_javascript_dialogs

Various fixes to UI dialogs and buttons.
This commit is contained in:
John Cass 2016-02-29 20:44:07 +02:00
commit 3de53a0a1b
5 changed files with 131 additions and 30 deletions

View File

@ -79,6 +79,9 @@ v2.2.0 (UNRELEASED)
- No longer interferes with changes to Mopidy's volume levels that are triggered externally. (Fixes: `#162 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/162>`_).
- Volume slider now works with Mopidy-ALSAMixer again. (Fixes: `#168 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/168>`_).
- Now falls back to track artist if album artist is not available for rendering cover art. (Fixes: `#128 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/128>`_).
- Replace Javascript prompt with jQuery Mobile equivalent. (Fixes: `#113 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/113>`_).
- Fix playlist refresh button. (Fixes: `#173 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/173>`_).
- Update save queue functionality to use 'm3u' format. (Fixes: `#177 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/177>`_).
v2.1.1 (2016-02-04)
-------------------

View File

@ -378,6 +378,10 @@
border: 1px solid #aaa;
}
.popupDialog {
padding: 10px;
}
/*dont hide clear buttons in text input */
.ui-input-clear-hidden {
display: block !important;

View File

@ -207,6 +207,37 @@
</div>
<div data-role="popup" data-theme="b" id="popupSave" class="popupDialog">
<form>
<p>Save current queue to a playlist.
<input id="saveinput" placeholder="Playlist name" class="span2" data-clear-btn="true"
onkeypress="return savePressed(event.keyCode);" type="text"/>
<div data-role="controlgroup" data-type="horizontal" align="center">
<button class="btn" type="button" onclick="return saveQueue();">
Ok
</button>
<button class="btn" type="button" onclick="return $('#popupSave').popup('close');">
Cancel
</button>
</div>
</form>
</div>
<!--/save queue to playlist-->
<div data-role="popup" data-theme="b" id="popupOverwrite" class="popupDialog">
<form>
<p>Overwrite existing playlist with same name?
<div data-role="controlgroup" data-type="horizontal" align="center">
<button class="btn" type="button" id="overwriteConfirmBtn">
Ok
</button>
<button class="btn" type="button" onclick="$('#popupOverwrite').popup('close'); return $('#popupSave').popup('open');">
Cancel
</button>
</div>
</form>
</div><!--/overwrite existing playlist-->
<div data-role="header" data-tap-toggle="false" id="header" data-position="fixed" class="header-breakpoint headerbtn">
<a id="headermenubtn" href="#panel"><i class="fa fa-align-justify"></i></a>
@ -297,8 +328,16 @@
<!-- /nowplaying -->
<div data-role="content" id="playlistspane" class="pane">
<a style="float:right; padding: 1.2em 10px" onclick="return refreshPlaylists();"><i class="fa fa-refresh"></i></a>
<div class="ui-grid-a">
<div class="ui-block-a">
<h4>Playlists</h4>
</div>
<div align="right" class="ui-block-b" data-role="controlgroup" data-type="horizontal">
<button class="btn" type="button" title="Refresh playlists" onclick="return refreshPlaylists();">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>
<div class="ui-grid-a pl-breakpoint">
<div class="ui-block-a scroll" id="playlistslistdiv">
<ul id="playlistslist" class="table"></ul>
@ -307,10 +346,12 @@
<div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;">
<a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a>
</div>
<div>
<ul class="table" id="playlisttracks"></ul>
</div>
</div>
</div>
</div>
<!--/playlistspane-->
<div data-role="content" id="browsepane" class="pane">
@ -321,12 +362,23 @@
<!--/browsepane-->
<div data-role="content" class="pane" id="currentpane">
<a style="float:right" onclick="return clearQueue();" data-role="button">Clear</a>
<a style="float:right; margin-right: 0.5em" onclick="return saveQueue();" data-role="button">Save</a><h4>Play Queue</h4>
<!-- <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
<ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul> -->
<div class="ui-grid-a">
<div class="ui-block-a">
<h4>Play Queue</h4>
</div>
<div align="right" class="ui-block-b" data-role="controlgroup" data-type="horizontal">
<button class="btn" type="button" title="Save queue to playlist" onclick="return showSavePopup();">
<i class="fa fa-floppy-o"></i>
</button>
<button class="btn" type="button" title="Clear queue" onclick="return clearQueue();">
<i class="fa fa-trash-o"></i>
</button>
</div>
</div>
<div class="ui-grid">
<ul class="table" id="currenttable"></ul>
</div>
</div>
<div data-role="content" class="pane" id="albumspane">
<a href="#coverpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="albumviewcover" alt="Album cover"/></a>

View File

@ -207,39 +207,67 @@ function removeTrack() {
}
function clearQueue() {
mopidy.playback.stop();
resetSong();
mopidy.tracklist.clear();
resetSong();
mopidy.tracklist.clear().then(
resetSong()
);
return false;
}
function savePressed(key) {
if (key == 13) {
saveQueue();
return false;
}
return true;
}
function showSavePopup(){
mopidy.tracklist.getTracks().then(function(tracks) {
if (tracks.length > 0) {
$('#saveinput').val('');
$('#popupSave').popup('open');
}
});
}
function saveQueue() {
mopidy.tracklist.getTracks().then(function(tracks) {
if (tracks.length > 0) {
var plname = window.prompt("Playlist name:", "").trim();
if (plname != null && plname != "") {
mopidy.playlists.filter({"name": plname}).then(function(existing) {
var exists = false;
for (var i = 0; i < existing.length; i++) {
exists = exists || existing[i].uri.indexOf("m3u:") == 0 || existing[i].uri.indexOf("local:") == 0;
}
if (!exists || window.confirm("Overwrite existing playlist \"" + plname + "\"?")) {
mopidy.playlists.create({'name': plname, 'uri_scheme': "local"}).then(function(playlist) {
playlist.tracks = tracks;
mopidy.playlists.save({'playlist': playlist}).then();
getPlaylists();
var playlistName = $('#saveinput').val().trim();
if (playlistName != null && playlistName != "") {
getPlaylistByName(playlistName, 'm3u', false).then(function(exists) {
if (exists) {
$('#popupSave').popup('close');
$('#popupOverwrite').popup('open');
$('#overwriteConfirmBtn').click(function() {
initSave(playlistName, tracks);
});
} else {
initSave(playlistName, tracks);
}
});
}
}
});
return false;
}
function initSave(playlistName, tracks) {
$('#popupOverwrite').popup('close');
$('#popupSave').popup('close');
$('#saveinput').val('');
toast('Saving...');
mopidy.playlists.create({'name': playlistName, 'uri_scheme': "m3u"}).then(function(playlist) {
playlist.tracks = tracks;
mopidy.playlists.save({'playlist': playlist}).then();
});
}
function refreshPlaylists() {
mopidy.playlists.refresh();
mopidy.playlists.refresh().then(function() {
playlists = {};
$('#playlisttracksdiv').hide();
$('#playlistslistdiv').show();
});
return false;
}

View File

@ -259,6 +259,20 @@ function initSocketevents() {
getPlaylists();
});
mopidy.on("event:playlistChanged", function(data) {
$('#playlisttracksdiv').hide();
$('#playlistslistdiv').show();
delete playlists[data["playlist"].uri];
getPlaylists();
});
mopidy.on("event:playlistDeleted", function(data) {
$('#playlisttracksdiv').hide();
$('#playlistslistdiv').show();
delete playlists[data["uri"]];
getPlaylists();
});
mopidy.on("event:volumeChanged", function(data) {
setVolume(data.volume);
});