1
0
mirror of https://github.com/SuperBFG7/ympd synced 2024-06-25 22:23:16 +00:00

Replaced bootstrap.bundle.min.js and jquery-3.3.1.min.js with bootstrap-native-v4.min.js

This commit is contained in:
jcorporation 2018-07-02 23:02:02 +01:00
parent 691b90a2c9
commit a9d4c0b5e9
7 changed files with 50 additions and 44 deletions

View File

@ -41,8 +41,7 @@ install(FILES mympd.1 DESTINATION ${CMAKE_INSTALL_PREFIX}/share/man/man1)
install(FILES htdocs/index.html DESTINATION share/${PROJECT_NAME}/htdocs/)
install(FILES htdocs/player.html DESTINATION share/${PROJECT_NAME}/htdocs/)
install(FILES htdocs/js/player.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/bootstrap.bundle.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/jquery-3.3.1.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/bootstrap-native-v4.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/js/mpd.min.js DESTINATION share/${PROJECT_NAME}/htdocs/js/)
install(FILES htdocs/css/bootstrap.min.css DESTINATION share/${PROJECT_NAME}/htdocs/css/)
install(FILES htdocs/css/mpd.min.css DESTINATION share/${PROJECT_NAME}/htdocs/css/)

View File

@ -13,7 +13,7 @@ UI Components
-------------
- Bootstrap 4: https://getbootstrap.com/
- Material Design Icons: https://material.io/tools/icons/?style=baseline
- jQuery: https://jquery.com/
- Bootstrap Native: http://thednp.github.io/bootstrap.native/
Backend
-------

View File

@ -25,11 +25,11 @@
<input id="inputSearch" type="text" class="form-control" placeholder="Search">
</form>
<div class="dropdown-divider"></div>
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
<a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAddstream">Add Stream</a>
<a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'updateDB','options':[]}">Update Database</a>
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}" data-toggle="dropdown">Local Player</a>
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings">Settings</a>
<a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#about">About</a>
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-href="{'cmd':'openLocalPlayer','options':[]}">Local Player</a>
<a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalSettings">Settings</a>
<a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#modalAbout">About</a>
</div>
</div>
<div class="btn-toolbar col-auto pl-0 pr-0" role="toolbar">
@ -93,11 +93,11 @@
<div class="card hide" id="cardQueue">
<div class="card-header">
<a href="#" data-toggle="collapse" data-target="#queue-buttons" class="text-dark">Queue</a>
<a href="#" data-target="#queue-buttons" class="text-dark">Queue</a>
<span id="panel-heading-queue" class="text pull-right"></span>
</div>
<div class="card-body">
<div class="btn-toolbar collapse show card-toolbar" id="queue-buttons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="queue-buttons" role="toolbar">
<div id="queue-actions" class="btn-group mr-2">
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_SEND_SHUFFLE'}]}" title="Shuffle queue">
<span class="material-icons">shuffle</span>
@ -105,7 +105,7 @@
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'sendAPI', 'options': [{'cmd':'MPD_API_RM_ALL'}]}" title="Clear queue">
<span class="material-icons">clear_all</span>
</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#savequeue" title="Save queue">
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalSavequeue" title="Save queue">
<span class="material-icons">save</span>
</button>
</div>
@ -195,7 +195,7 @@
</div>
<div class="card-body hide" id="cardBrowsePlaylists">
<div class="btn-toolbar collapse show card-toolbar" id="BrowsePlaylistsButtons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons" role="toolbar">
<div class="btn-group mr-2">
<button id="BrowsePlaylistsFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
<div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsFilterLetters">
@ -250,7 +250,7 @@
<div class="card-body hide" id="cardBrowseDatabase">
<div class="btn-toolbar collapse show card-toolbar" id="BrowseDatabaseButtons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="BrowseDatabaseButtons" role="toolbar">
<div class="btn-group mr-2">
<button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">&laquo; Artists</button>
</div>
@ -309,7 +309,7 @@
</div>
<div class="card-body hide" id="cardBrowseFilesystem">
<div class="btn-toolbar collapse show card-toolbar" id="BrowseFilesystemButtons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="BrowseFilesystemButtons" role="toolbar">
<div class="btn-group mr-2 pull-right">
<button data-href="{'cmd': 'addAllFromBrowse', 'options': []}" id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
</div>
@ -378,7 +378,7 @@
<span id="panel-heading-search" class="text pull-right"></span>
</div>
<div class="card-body">
<div class="btn-toolbar collapse show card-toolbar" id="SearchButtons" role="toolbar">
<div class="btn-toolbar card-toolbar" id="SearchButtons" role="toolbar">
<form id="search2" role="search">
<div class="input-group mr-2">
<input type="text" class="form-control" placeholder="Search" id="searchstr2"/>
@ -478,7 +478,7 @@
</div>
<!-- Modal -->
<div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal fade" id="modalSettings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -572,7 +572,7 @@
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal fade" id="modalAbout" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -615,7 +615,7 @@
</div><!-- /.modal -->
<!-- Modal -->
<div class="modal fade" id="addstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
<div class="modal fade" id="modalAddstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -625,7 +625,7 @@
</button>
</div>
<div class="modal-body">
<form>
<form id="addstreamFrm">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label" for="streamurl">Stream URL</label>
@ -642,7 +642,7 @@
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
<div class="modal fade" id="modalSavequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@ -668,8 +668,7 @@
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-native-v4.min.js"></script>
<script src="js/mpd.js"></script>
</body>
</html>

2
htdocs/js/bootstrap-native-v4.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -67,6 +67,12 @@ domCache.progressBar = document.getElementById('progressBar');
domCache.volumeBar = document.getElementById('volumeBar');
domCache.outputs = document.getElementById('outputs');
var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
var modalSettings = new Modal(document.getElementById('modalSettings'));
var modalAddstream = new Modal(document.getElementById('modalAddstream'));
var modalSavequeue = new Modal(document.getElementById('modalSavequeue'));
var mainMenu = new Dropdown(document.getElementById('mainMenu'));
function appPrepare() {
if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) {
//Hide all cards + nav
@ -261,11 +267,11 @@ function appInit() {
}
}, false);
$('#about').on('shown.bs.modal', function () {
document.getElementById('modalAbout').addEventListener('shown.bs.modal', function () {
sendAPI({"cmd": "MPD_API_GET_STATS"}, parseStats);
})
$('#settings').on('shown.bs.modal', function () {
document.getElementById('modalSettings').addEventListener('shown.bs.modal', function () {
getSettings();
document.getElementById('settingsFrm').classList.remove('was-validated');
document.getElementById('inputCrossfade').classList.remove('is-invalid');
@ -273,20 +279,24 @@ function appInit() {
document.getElementById('inputMixrampdelay').classList.remove('is-invalid');
})
$('#addstream').on('shown.bs.modal', function () {
document.getElementById('modalAddstream').addEventListener('shown.bs.modal', function () {
document.getElementById('streamurl').focus();
})
$('#addstream form').on('submit', function (e) {
document.getElementById('addstreamFrm').addEventListener('submit', function () {
addStream();
});
$('#mainMenu').on('shown.bs.dropdown', function () {
document.getElementById('mainMenu').addEventListener('shown.bs.dropdown', function () {
var si = document.getElementById('inputSearch');
si.value = '';
si.focus();
});
document.getElementById('inputSearch').addEventListener('click', function(event) {
event.stopPropagation();
});
addFilterLetter('BrowseFilesystemFilterLetters');
addFilterLetter('BrowseDatabaseFilterLetters');
addFilterLetter('BrowsePlaylistsFilterLetters');
@ -397,11 +407,13 @@ function appInit() {
document.getElementById('inputSearch').addEventListener('keypress', function (event) {
if ( event.which == 13 )
$('#mainMenu > a').dropdown('toggle');
mainMenu.toggle();
}, false);
document.getElementById('search').addEventListener('submit', function () {
appGoto('Search', undefined, undefined, app.current.page + '/Any Tag/' + document.getElementById('inputSearch').value);
var searchStr = document.getElementById('inputSearch').value;
appGoto('Search', undefined, undefined, app.current.page + '/Any Tag/' + searchStr);
document.getElementById('searchstr2').value = searchStr;
return false;
}, false);
@ -446,7 +458,7 @@ function webSocketConnect() {
socket.onopen = function() {
console.log("connected");
showNotification('Connected to myMPD','','','success');
$('#modalConnectionError').modal('hide');
modalConnectionError.hide();
appRoute();
}
@ -482,7 +494,7 @@ function webSocketConnect() {
socket.onclose = function(){
console.log('disconnected');
$('#modalConnectionError').modal('show');
modalConnectionError.show();
setTimeout(function() {
console.log('reconnect');
webSocketConnect();
@ -1045,7 +1057,7 @@ function appendQueue(type, uri, name) {
}
function showMenu(el) {
var type = el.parentNode.parentNode.getAttribute('data-type');
/* var type = el.parentNode.parentNode.getAttribute('data-type');
var uri = el.parentNode.parentNode.getAttribute('data-uri');
if ((app.current.app == 'Browse' && app.current.tab == 'Filesystem') || app.current.app == 'Search' ||
(app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Album')) {
@ -1077,6 +1089,7 @@ function showMenu(el) {
});
}
$(el).popover('show');
*/
}
function sendAPI(request, callback) {
@ -1122,12 +1135,13 @@ function clickNext() {
function delQueueSong(tr,event) {
event.stopPropagation();
if ( $('#btntrashmodeup').hasClass('active') )
/* if ( $('#btntrashmodeup').hasClass('active') )
sendAPI({"cmd": "MPD_API_RM_RANGE", "data": {"start":0, "end": (tr.index() + 1)}});
else if ( $('#btntrashmodesingle').hasClass('active') )
sendAPI({"cmd": "MPD_API_RM_TRACK", "data": { "track": tr.attr('trackid')}});
else if ( $('#btntrashmodedown').hasClass('active') )
sendAPI({"cmd": "MPD_API_RM_RANGE", "data": {"start": tr.index(), "end":-1}});
*/
}
function delPlaylist(tr) {
@ -1182,7 +1196,7 @@ function confirmSettings() {
"notificationWeb": (document.getElementById('btnnotifyWeb').classList.contains('active') ? 1 : 0),
"notificationPage": (document.getElementById('btnnotifyPage').classList.contains('active') ? 1 : 0)
}}, getSettings);
$('#settings').modal('hide');
modalSettings.hide();
} else {
document.getElementById('settingsFrm').classList.add('was-validated');
}
@ -1226,7 +1240,7 @@ function addStream() {
if (streamUrl.value != '')
sendAPI({"cmd": "MPD_API_ADD_TRACK","data": {"uri": streamUrl.value}});
streamUrl.value = '';
$('#addstream').modal('hide');
modalAddstream.hide();
}
function saveQueue() {
@ -1234,7 +1248,7 @@ function saveQueue() {
if (plName.value != '')
sendAPI({"cmd":"MPD_API_SAVE_QUEUE","data":{"plist": plName.value}});
plName.value = '';
$('#savequeue').modal('hide');
modalSavequeue.hide();
}
function showNotification(notificationTitle,notificationText,notificationHtml,notificationType) {