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

CMakeLists.txt

@@ -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/bootstrap-native-v4.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/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/)

README.md

@@ -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
 -------

htdocs/index.html

@@ -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-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="#settings">Settings</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="#about">About</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-native-v4.min.js"></script>
-  <script src="js/bootstrap.bundle.min.js"></script>
   <script src="js/mpd.js"></script>
  </body>
 </html>

htdocs/js/mpd.js

@@ -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) {