mirror of
https://github.com/SuperBFG7/ympd
synced 2024-12-26 11:00:27 +00:00
Rmeoves onclick handler - replace with data-href attribute
This commit is contained in:
jcorporation
parent
80eee8c2b1
commit
ab9ce46239
@ -200,10 +200,12 @@ div#alertBox {
|
||||
opacity:0;
|
||||
visibility:visible;
|
||||
transition:opacity 0.5s ease-in;
|
||||
display:none;
|
||||
}
|
||||
|
||||
div.alertBoxActive {
|
||||
opacity:1 !important;
|
||||
visibility:visible !important;
|
||||
transition:opacity 0.5s ease-in;
|
||||
display:block !important;
|
||||
}
|
||||
@ -26,24 +26,24 @@
|
||||
</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-updatedb" class="dropdown-item text-light bg-dark" href="#">Update Database</a>
|
||||
<a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown">Local Player</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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-toolbar col-auto pl-0 pr-0" role="toolbar">
|
||||
<div class="btn-group mr-2" role="group" id="playControlBtns">
|
||||
<button id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
<button data-href="{'cmd':'clickPrev','options':[]}" id="btnPrev" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
skip_previous
|
||||
</button>
|
||||
<button id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
<button data-href="{'cmd':'clickStop','options':[]}" id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
stop
|
||||
</button>
|
||||
<button id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
<button data-href="{'cmd':'clickPlay','options':[]}" id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
pause
|
||||
</button>
|
||||
<button id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
<button data-href="{'cmd':'clickNext','options':[]}" id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
|
||||
skip_next
|
||||
</button>
|
||||
</div>
|
||||
@ -55,11 +55,11 @@
|
||||
<h2 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h2>
|
||||
<form class="px-4 py-0 pb-3" id="volumeControl">
|
||||
<div class="btn-group" role="group">
|
||||
<input id="chVolumeMinus" type="button" class="btn btn-secondary" value="−"/>
|
||||
<button data-href="{'cmd':'chVolume','options':[-5]}" class="btn btn-secondary">−</button>
|
||||
<div class="btn btn-secondary">
|
||||
<input type="range" min="0" max="100" step="1" class="form-control-range" id="volumeBar">
|
||||
</div>
|
||||
<input id="chVolumePlus" type="button" class="btn btn-secondary" value="+"/>
|
||||
<button data-href="{'cmd':'chVolume','options':[5]}" id="chVolumePlus" class="btn btn-secondary">+</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="dropdown-divider"></div>
|
||||
@ -99,10 +99,10 @@
|
||||
<div class="card-body">
|
||||
<div class="btn-toolbar collapse show card-toolbar" id="queue-buttons" role="toolbar">
|
||||
<div id="queue-actions" class="btn-group mr-2">
|
||||
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SEND_SHUFFLE');" title="Shuffle queue">
|
||||
<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>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue">
|
||||
<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">
|
||||
@ -128,13 +128,13 @@
|
||||
</div>
|
||||
</form>
|
||||
<div id="QueuePaginationTop" class="btn-group mr-2">
|
||||
<button onclick="gotoPage('prev')" id="QueuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="QueuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="QueuePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="QueuePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationTopPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -162,18 +162,18 @@
|
||||
</div>
|
||||
<div class="btn-toolbar" id="QueueButtonsBottom" role="toolbar">
|
||||
<div class="btn-group mr-2">
|
||||
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
||||
<button type="button" class="btn btn-secondary" data-href="{'cmd':'scrollToTop','options':[]}" title="To top">
|
||||
<span class="material-icons">keyboard_arrow_up</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="QueuePaginationBottom" class="btn-group mr-2 dropup">
|
||||
<button onclick="gotoPage('prev')" id="QueuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="QueuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="QueuePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="QueuePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="QueuePaginationBottomPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="QueuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="QueuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -183,13 +183,13 @@
|
||||
<div class="card-header" id="panel-heading-browse">
|
||||
<ul class="nav nav-tabs card-header-tabs">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a>
|
||||
<a data-href="{'cmd': 'appGoto', 'options': ['Browse','Database']}" class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a>
|
||||
<a data-href="{'cmd': 'appGoto', 'options': ['Browse','Playlists']}" class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a>
|
||||
<a data-href="{'cmd': 'appGoto', 'options': ['Browse','Filesystem']}" class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -202,13 +202,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2">
|
||||
<button onclick="gotoPage('prev')" id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="BrowsePlaylistsPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="BrowsePlaylistsPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationTopPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -232,18 +232,18 @@
|
||||
</div>
|
||||
<div class="btn-toolbar" id="BrowsePlaylistsButtonsBottom" role="toolbar">
|
||||
<div class="btn-group mr-2">
|
||||
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
||||
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
|
||||
<span class="material-icons">keyboard_arrow_up</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="BrowsePlaylistsPaginationBottom" class="btn-group mr-2 dropup">
|
||||
<button onclick="gotoPage('prev')" id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="BrowsePlaylistsPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="BrowsePlaylistsPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="BrowsePlaylistsPaginationBottomPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="BrowsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -252,7 +252,7 @@
|
||||
|
||||
<div class="btn-toolbar collapse show card-toolbar" id="BrowseDatabaseButtons" role="toolbar">
|
||||
<div class="btn-group mr-2">
|
||||
<button id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">« Artists</button>
|
||||
<button data-href="{'cmd': 'appGoto', 'options': ['Browse','Database','Artist']}" id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">« Artists</button>
|
||||
</div>
|
||||
<div class="btn-group mr-2">
|
||||
<button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
|
||||
@ -260,13 +260,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="BrowseDatabasePaginationTop" class="btn-group mr-2">
|
||||
<button onclick="gotoPage('prev')" id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="BrowseDatabasePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="BrowseDatabasePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationTopPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="BrowseDatabasePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseDatabasePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -291,18 +291,18 @@
|
||||
|
||||
<div class="btn-toolbar" id="BrowseDatabaseButtonsBottom" role="toolbar">
|
||||
<div class="btn-group mr-2">
|
||||
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
||||
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
|
||||
<span class="material-icons">keyboard_arrow_up</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="BrowseDatabasePaginationBottom" class="btn-group mr-2 dropup">
|
||||
<button onclick="gotoPage('prev')" id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseDatabasePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="BrowseDatabasePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="BrowseDatabasePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseDatabasePaginationBottomPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="BrowseDatabasePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseDatabasePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -311,7 +311,7 @@
|
||||
<div class="card-body hide" id="cardBrowseFilesystem">
|
||||
<div class="btn-toolbar collapse show card-toolbar" id="BrowseFilesystemButtons" role="toolbar">
|
||||
<div class="btn-group mr-2 pull-right">
|
||||
<button id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
|
||||
<button data-href="{'cmd': 'addAllFromBrowse', 'options': []}" id="BrowseFilesystemAddAllSongs" class="btn btn-secondary">Add all</button>
|
||||
</div>
|
||||
<div class="btn-group mr-2">
|
||||
<button id="BrowseFilesystemFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
|
||||
@ -319,13 +319,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="BrowseFilesystemPaginationTop" class="btn-group mr-2">
|
||||
<button onclick="gotoPage('prev')" id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseFilesystemPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="BrowseFilesystemPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="BrowseFilesystemPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationTopPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="BrowseFilesystemPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseFilesystemPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -356,18 +356,18 @@
|
||||
</div>
|
||||
<div class="btn-toolbar" id="BrowseFilesystemButtonsBottom" role="toolbar">
|
||||
<div class="btn-group mr-2">
|
||||
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
||||
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
|
||||
<span class="material-icons">keyboard_arrow_up</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="BrowseFilesystemPaginationBottom" class="btn-group mr-2 dropup">
|
||||
<button onclick="gotoPage('prev')" id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="BrowseFilesystemPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="BrowseFilesystemPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="BrowseFilesystemPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="BrowseFilesystemPaginationBottomPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="BrowseFilesystemPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="BrowseFilesystemPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -398,16 +398,16 @@
|
||||
</div>
|
||||
</form>
|
||||
<div class="btn-group mr-2 pull-right">
|
||||
<button id="searchAddAllSongs" class="btn btn-secondary" onclick="addAllFromSearch();">Add all</button>
|
||||
<button id="searchAddAllSongs" class="btn btn-secondary" data-href="{'cmd': 'addAllFromSearch', 'options': []}">Add all</button>
|
||||
</div>
|
||||
<div id="AearchPaginationTop" class="btn-group mr-2">
|
||||
<button onclick="gotoPage('prev')" id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="SearchPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="SearchPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="SearchPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationTopPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="SearchPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="SearchPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-responsive-md">
|
||||
@ -434,18 +434,18 @@
|
||||
</div>
|
||||
<div class="btn-toolbar" id="SearchButtonsBottom" role="toolbar">
|
||||
<div class="btn-group mr-2">
|
||||
<button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
|
||||
<button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
|
||||
<span class="material-icons">keyboard_arrow_up</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="SearchPaginationBottom" class="btn-group mr-2 dropup">
|
||||
<button onclick="gotoPage('prev')" id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['prev']}" id="SearchPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">«</button>
|
||||
<div class="input-group-append">
|
||||
<button id="SearchPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
|
||||
<button id="SearchPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">1 / 1</button>
|
||||
<div class="dropdown-menu bg-dark px-2 pages" id="SearchPaginationBottomPages">
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="gotoPage('next')" id="SearchPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
<button data-href="{'cmd': 'gotoPage', 'options': ['next']}" id="SearchPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">»</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -455,10 +455,10 @@
|
||||
<footer class="footer">
|
||||
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
|
||||
<div class="d-flex flex-fill navbar-nav" id="navbar-bottom">
|
||||
<div class="nav-item flex-fill text-center" id="navPlayback"><a class="nav-link" href="#">Playback</a></div>
|
||||
<div class="nav-item flex-fill text-center" id="navQueue"><a class="nav-link" href="#">Queue</a></div>
|
||||
<div class="nav-item flex-fill text-center" id="navBrowse"><a class="nav-link" href="#">Browse</a></div>
|
||||
<div class="nav-item flex-fill text-center" id="navSearch"><a class="nav-link" href="#">Search</a></div>
|
||||
<div id="navPlayback" class="nav-item flex-fill text-center"><a data-href="{'cmd': 'appGoto', 'options': ['Playback']}" class="nav-link" href="#">Playback</a></div>
|
||||
<div id="navQueue" class="nav-item flex-fill text-center"><a data-href="{'cmd': 'appGoto', 'options': ['Queue']}" class="nav-link" href="#">Queue</a></div>
|
||||
<div class="nav-item flex-fill text-center" id="navBrowse"><a data-href="{'cmd': 'appGoto', 'options': ['Browse']}" class="nav-link" href="#">Browse</a></div>
|
||||
<div class="nav-item flex-fill text-center" id="navSearch"><a data-href="{'cmd': 'appGoto', 'options': ['Search']}" class="nav-link" href="#">Search</a></div>
|
||||
</div>
|
||||
</nav>
|
||||
</footer>
|
||||
@ -569,7 +569,7 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success" onclick="confirmSettings();">Save</button>
|
||||
<button type="button" class="btn btn-success" data-href="{'cmd': 'confirmSettings', 'options': []}">Save</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
@ -640,7 +640,7 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success" onclick="addStream();">Add Stream</button>
|
||||
<button type="button" class="btn btn-success" data-href="{'cmd': 'addStream', 'options': []}">Add Stream</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
@ -667,7 +667,7 @@
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-success" onclick="saveQueue();">Save Queue</button>
|
||||
<button type="button" class="btn btn-success" data-href="{'cmd': 'saveQueue', 'options': []}">Save Queue</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
|
||||
166
htdocs/js/mpd.js
166
htdocs/js/mpd.js
@ -68,7 +68,7 @@ domCache.volumeBar = document.getElementById('volumeBar');
|
||||
domCache.outputs = document.getElementById('outputs');
|
||||
domCache.alertBox = document.getElementById('alertBox');
|
||||
|
||||
app.prepare=function() {
|
||||
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
|
||||
for ( var i = 0; i < domCache.navbarBottomBtnsLen; i ++) {
|
||||
@ -94,7 +94,7 @@ app.prepare=function() {
|
||||
}
|
||||
}
|
||||
|
||||
app.goto=function(a,t,v,s) {
|
||||
function appGoto(a,t,v,s) {
|
||||
var hash='';
|
||||
if (app.apps[a].tabs) {
|
||||
if (t == undefined)
|
||||
@ -112,7 +112,7 @@ app.goto=function(a,t,v,s) {
|
||||
location.hash=hash;
|
||||
}
|
||||
|
||||
app.route=function() {
|
||||
function appRoute() {
|
||||
var hash = decodeURI(location.hash);
|
||||
if (params=hash.match(/^\#\/(\w+)\/?(\w+)?\/?(\w+)?\!((\d+)\/([^\/]+)\/(.*))$/)) {
|
||||
app.current.app = params[1];
|
||||
@ -134,11 +134,11 @@ app.route=function() {
|
||||
app.current.filter = params[6];
|
||||
app.current.search = params[7];
|
||||
} else {
|
||||
app.goto('Playback');
|
||||
appGoto('Playback');
|
||||
return;
|
||||
}
|
||||
|
||||
app.prepare();
|
||||
appPrepare();
|
||||
|
||||
if (app.current.app == 'Playback') {
|
||||
sendAPI({"cmd":"MPD_API_GET_CURRENT_SONG"}, songChange);
|
||||
@ -198,7 +198,7 @@ app.route=function() {
|
||||
var breadcrumbItemsLen = breadcrumbItems.length;
|
||||
for (var i = 0; i < breadcrumbItemsLen; i ++) {
|
||||
breadcrumbItems[i].addEventListener('click', function() {
|
||||
app.goto('Browse', 'Filesystem', undefined, '0/' + app.current.filter + '/' + this.getAttribute('data-uri'));
|
||||
appGoto('Browse', 'Filesystem', undefined, '0/' + app.current.filter + '/' + this.getAttribute('data-uri'));
|
||||
}, false);
|
||||
}
|
||||
doSetFilterLetter('BrowseFilesystemFilter');
|
||||
@ -235,7 +235,7 @@ app.route=function() {
|
||||
}
|
||||
}
|
||||
else {
|
||||
app.goto("Playback");
|
||||
appGoto("Playback");
|
||||
}
|
||||
|
||||
app.last.app = app.current.app;
|
||||
@ -263,15 +263,15 @@ $(document).ready(function(){
|
||||
}, false);
|
||||
|
||||
$('#about').on('shown.bs.modal', function () {
|
||||
sendAPI({"cmd": "MPD_API_GET_STATS"},parseStats);
|
||||
sendAPI({"cmd": "MPD_API_GET_STATS"}, parseStats);
|
||||
})
|
||||
|
||||
$('#settings').on('shown.bs.modal', function () {
|
||||
sendAPI({"cmd": "MPD_API_GET_SETTINGS"},parseSettings);
|
||||
document.getElementById('settingsFrm').classList.remove('was-validated');
|
||||
document.getElementById('inputCrossfade').classList.remove('is-invalid');
|
||||
document.getElementById('inputMixrampdb').classList.remove('is-invalid');
|
||||
document.getElementById('inputMixrampdelay').classList.remove('is-invalid');
|
||||
getSettings();
|
||||
document.getElementById('settingsFrm').classList.remove('was-validated');
|
||||
document.getElementById('inputCrossfade').classList.remove('is-invalid');
|
||||
document.getElementById('inputMixrampdb').classList.remove('is-invalid');
|
||||
document.getElementById('inputMixrampdelay').classList.remove('is-invalid');
|
||||
})
|
||||
|
||||
$('#addstream').on('shown.bs.modal', function () {
|
||||
@ -292,6 +292,25 @@ $(document).ready(function(){
|
||||
addFilterLetter('BrowseDatabaseFilterLetters');
|
||||
addFilterLetter('BrowsePlaylistsFilterLetters');
|
||||
|
||||
var hrefs = document.querySelectorAll('button[data-href], a[data-href]');
|
||||
var hrefsLen = hrefs.length;
|
||||
for (var i = 0; i < hrefsLen; i ++) {
|
||||
hrefs[i].addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var cmd = JSON.parse(this.getAttribute('data-href').replace(/\'/g,'"'));
|
||||
if (typeof window[cmd.cmd] === 'function') {
|
||||
switch(cmd.cmd) {
|
||||
case 'sendAPI':
|
||||
sendAPI(... cmd.options);
|
||||
break;
|
||||
default:
|
||||
window[cmd.cmd](... cmd.options);
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
}
|
||||
|
||||
var pd = document.querySelectorAll('.pages');
|
||||
var pdLen = pd.length;
|
||||
for (var i = 0; i < pdLen; i ++) {
|
||||
@ -304,6 +323,7 @@ $(document).ready(function(){
|
||||
|
||||
document.getElementById('outputs').addEventListener('click', function(event) {
|
||||
if (event.target.nodeName == 'BUTTON')
|
||||
event.stopPropagation();
|
||||
sendAPI({"cmd": "MPD_API_TOGGLE_OUTPUT", "data": {"output": event.target.getAttribute('data-output-id'), "state": (event.target.classList.contains('active') ? 0 : 1)}});
|
||||
}, false);
|
||||
|
||||
@ -320,7 +340,7 @@ $(document).ready(function(){
|
||||
if (event.target.nodeName == 'TD') {
|
||||
switch(event.target.parentNode.getAttribute('data-type')) {
|
||||
case 'dir':
|
||||
app.goto('Browse', 'Filesystem', undefined, '0/' + app.current.filter +'/' + decodeURI(event.target.parentNode.getAttribute("data-uri")));
|
||||
appGoto('Browse', 'Filesystem', undefined, '0/' + app.current.filter +'/' + decodeURI(event.target.parentNode.getAttribute("data-uri")));
|
||||
break;
|
||||
case 'song':
|
||||
appendQueue('song', decodeURI(this.getAttribute("data-uri")), event.target.parentNode.getAttribute("data-name"));
|
||||
@ -348,7 +368,7 @@ $(document).ready(function(){
|
||||
|
||||
document.getElementById('BrowseDatabaseArtistList').addEventListener('click', function(event) {
|
||||
if (event.target.nodeName == 'TD') {
|
||||
app.goto('Browse', 'Database', 'Album', '0/-/' + event.target.parentNode.getAttribute('data-uri'));
|
||||
appGoto('Browse', 'Database', 'Album', '0/-/' + event.target.parentNode.getAttribute('data-uri'));
|
||||
}
|
||||
}, false);
|
||||
|
||||
@ -362,99 +382,18 @@ $(document).ready(function(){
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.getElementById('BrowseFilesystemAddAllSongs').addEventListener('click', function() {
|
||||
sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": { "uri": app.current.search}});
|
||||
},false);
|
||||
|
||||
document.getElementById('nav-updatedb').addEventListener('click', function(event) {
|
||||
updateDB(event);
|
||||
},false);
|
||||
|
||||
document.getElementById('nav-localplayer').addEventListener('click', function(event) {
|
||||
window.open('/player.html#' + settings.mpdstream, 'LocalPlayer');
|
||||
},false);
|
||||
|
||||
document.getElementById('playControlBtns').addEventListener('click', function(event) {
|
||||
if (event.target.nodeName == 'BUTTON') {
|
||||
switch (event.target.getAttribute('id')) {
|
||||
case 'btnPrev':
|
||||
clickPrev();
|
||||
break;
|
||||
case 'btnStop':
|
||||
clickStop();
|
||||
break;
|
||||
case 'btnPlay':
|
||||
clickPlay();
|
||||
break;
|
||||
case 'btnNext':
|
||||
clickNext();
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.getElementById('chVolumeMinus').addEventListener('click', function(event) {
|
||||
chVolume(-5)
|
||||
},false);
|
||||
|
||||
document.getElementById('chVolumePlus').addEventListener('click', function(event) {
|
||||
chVolume(5)
|
||||
},false);
|
||||
|
||||
document.getElementById('panel-heading-browse').addEventListener('click', function(event) {
|
||||
if (event.target.nodeName == 'A') {
|
||||
event.preventDefault();
|
||||
switch (event.target.getAttribute('id')) {
|
||||
case 'cardBrowseNavDatabase':
|
||||
app.goto('Browse','Database');
|
||||
break;
|
||||
case 'cardBrowseNavPlaylists':
|
||||
app.goto('Browse','Playlists');
|
||||
break;
|
||||
case 'cardBrowseNavFilesystem':
|
||||
app.goto('Browse','Filesystem');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.getElementById('btnBrowseDatabaseArtist').addEventListener('click', function (event) {
|
||||
app.goto('Browse','Database','Artist');
|
||||
event.preventDefault();
|
||||
}, false);
|
||||
|
||||
document.getElementById('navbar-bottom').addEventListener('click', function(event) {
|
||||
if (event.target.nodeName == 'A') {
|
||||
event.preventDefault();
|
||||
switch (event.target.parentNode.getAttribute('id')) {
|
||||
case 'navPlayback':
|
||||
app.goto('Playback');
|
||||
break;
|
||||
case 'navQueue':
|
||||
app.goto('Queue');
|
||||
break;
|
||||
case 'navBrowse':
|
||||
app.goto('Browse');
|
||||
break;
|
||||
case 'navSearch':
|
||||
app.goto('Search');
|
||||
break;
|
||||
}
|
||||
}
|
||||
}, false);
|
||||
|
||||
document.getElementById('searchtags2').addEventListener('click', function(event) {
|
||||
if (event.target.nodeName == 'BUTTON')
|
||||
app.goto(app.current.app, app.current.tab, app.current.view, '0/' + event.target.innerText + '/' + app.current.search);
|
||||
appGoto(app.current.app, app.current.tab, app.current.view, '0/' + event.target.innerText + '/' + app.current.search);
|
||||
}, false);
|
||||
|
||||
document.getElementById('searchqueuestr').addEventListener('keyup', function(event) {
|
||||
app.goto(app.current.app, app.current.tab, app.current.view, '0/' + app.current.filter + '/' + this.value);
|
||||
appGoto(app.current.app, app.current.tab, app.current.view, '0/' + app.current.filter + '/' + this.value);
|
||||
}, false);
|
||||
|
||||
document.getElementById('searchqueuetag').addEventListener('click', function (event) {
|
||||
if (event.target.nodeName == 'BUTTON')
|
||||
app.goto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + event.target.innerText + '/' + app.current.search);
|
||||
appGoto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + event.target.innerText + '/' + app.current.search);
|
||||
}, false);
|
||||
|
||||
document.getElementById('inputSearch').addEventListener('keypress', function (event) {
|
||||
@ -463,7 +402,7 @@ $(document).ready(function(){
|
||||
}, false);
|
||||
|
||||
document.getElementById('search').addEventListener('submit', function () {
|
||||
app.goto('Search', undefined, undefined, app.current.page + '/Any Tag/' + document.getElementById('inputSearch').value);
|
||||
appGoto('Search', undefined, undefined, app.current.page + '/Any Tag/' + document.getElementById('inputSearch').value);
|
||||
return false;
|
||||
}, false);
|
||||
|
||||
@ -476,15 +415,15 @@ $(document).ready(function(){
|
||||
}, false);
|
||||
|
||||
document.getElementById('searchstr2').addEventListener('keyup', function (event) {
|
||||
app.goto('Search', undefined, undefined, '0/' + app.current.filter + '/' + this.value);
|
||||
appGoto('Search', undefined, undefined, '0/' + app.current.filter + '/' + this.value);
|
||||
}, false);
|
||||
|
||||
window.addEventListener('hashchange', app.route, false);
|
||||
window.addEventListener('hashchange', appRoute, false);
|
||||
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.target.tagName == 'INPUT')
|
||||
return;
|
||||
switch (e.which) {
|
||||
switch (event.which) {
|
||||
case 37: //left
|
||||
clickPrev();
|
||||
break;
|
||||
@ -509,7 +448,7 @@ function webSocketConnect() {
|
||||
console.log("connected");
|
||||
showNotification('Connected to myMPD','','','success');
|
||||
$('#modalConnectionError').modal('hide');
|
||||
app.route();
|
||||
appRoute();
|
||||
}
|
||||
|
||||
socket.onmessage = function got_packet(msg) {
|
||||
@ -1147,16 +1086,19 @@ function sendAPI(request, callback) {
|
||||
ajaxRequest.setRequestHeader('Content-type', 'application/json');
|
||||
ajaxRequest.onreadystatechange = function() {
|
||||
if (ajaxRequest.readyState == 4)
|
||||
if (callback != undefined && typeof callback == 'function')
|
||||
if (callback != undefined && typeof(callback) == 'function')
|
||||
callback(JSON.parse(ajaxRequest.responseText));
|
||||
};
|
||||
ajaxRequest.send(JSON.stringify(request));
|
||||
}
|
||||
|
||||
function updateDB(event) {
|
||||
function openLocalPlayer() {
|
||||
window.open('/player.html#' + settings.mpdstream, 'LocalPlayer');
|
||||
}
|
||||
|
||||
function updateDB() {
|
||||
sendAPI({"cmd": "MPD_API_UPDATE_DB"});
|
||||
showNotification('Updating MPD Database...', '', '', 'success');
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function clickPlay() {
|
||||
@ -1178,6 +1120,7 @@ function clickNext() {
|
||||
sendAPI({"cmd": "MPD_API_SET_NEXT"});
|
||||
}
|
||||
|
||||
|
||||
function delQueueSong(tr,event) {
|
||||
event.stopPropagation();
|
||||
if ( $('#btntrashmodeup').hasClass('active') )
|
||||
@ -1246,6 +1189,11 @@ function confirmSettings() {
|
||||
}
|
||||
}
|
||||
|
||||
function addAllFromBrowse() {
|
||||
sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": { "uri": app.current.search}});
|
||||
showNotification('Added all songs','','','success');
|
||||
}
|
||||
|
||||
function addAllFromSearch() {
|
||||
if (app.current.search.length >= 2) {
|
||||
sendAPI({"cmd":"MPD_API_SEARCH_ADD","data":{"filter": app.current.filter, "searchstr": + app.current.search}});
|
||||
@ -1271,7 +1219,7 @@ function gotoPage(x) {
|
||||
default:
|
||||
app.current.page = x;
|
||||
}
|
||||
app.goto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + app.current.filter + '/' + app.current.search);
|
||||
appGoto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + app.current.filter + '/' + app.current.search);
|
||||
}
|
||||
|
||||
function addStream() {
|
||||
@ -1391,7 +1339,7 @@ function addFilterLetter(x) {
|
||||
default:
|
||||
filter = event.target.innerText;
|
||||
}
|
||||
app.goto(app.current.app, app.current.tab, app.current.view, '0/' + filter + '/' + app.current.search);
|
||||
appGoto(app.current.app, app.current.tab, app.current.view, '0/' + filter + '/' + app.current.search);
|
||||
}, false);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user