bootstrap 5 template function complete

current status:
- got expiration and format selections to work
- fixed modals (password, QR-code, etc.)
- replaced glyphicons with Bootstrap icons (needs CSP relaxation to work)
- tested the different settings and combinations
- got editor tabs to change active status

to be done:
- add "Dark Mode" to translation strings
- figure out how to change prettify theme when dark mode gets selected
- check tab alignment in HTML source

js/privatebin.js

@@ -2390,7 +2390,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
 
         let $editorTabs,
             $messageEdit,
+            $messageEditLi,
             $messagePreview,
+            $messagePreviewLi,
             $message,
             isPreview = false;
 
@@ -2431,10 +2433,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         {
             // toggle buttons
             $messageEdit.addClass('active');
+            $messageEditLi.addClass('active');
             $messagePreview.removeClass('active');
+            $messagePreviewLi.removeClass('active');
 
-            $('#messageedit').attr('aria-selected','true');
-            $('#messagepreview').attr('aria-selected','false');
+            $messageEdit.attr('aria-selected','true');
+            $messagePreview.attr('aria-selected','false');
 
             PasteViewer.hide();
 
@@ -2463,10 +2467,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         {
             // toggle buttons
             $messageEdit.removeClass('active');
+            $messageEditLi.removeClass('active');
             $messagePreview.addClass('active');
+            $messagePreviewLi.addClass('active');
 
-            $('#messageedit').attr('aria-selected','false');
-            $('#messagepreview').attr('aria-selected','true');
+            $messageEdit.attr('aria-selected','false');
+            $messagePreview.attr('aria-selected','true');
 
             // hide input as now preview is shown
             $message.addClass('hidden');
@@ -2594,10 +2600,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             // bind events
             $message.keydown(supportTabs);
 
-            // bind click events to tab switchers (a), but save parent of them
-            // (li)
-            $messageEdit = $('#messageedit').click(viewEditor).parent();
-            $messagePreview = $('#messagepreview').click(viewPreview).parent();
+            // bind click events to tab switchers (a), and save parents (li)
+            $messageEdit = $('#messageedit').click(viewEditor);
+            $messageEditLi = $messageEdit.parent();
+            $messagePreview = $('#messagepreview').click(viewPreview);
+            $messagePreviewLi = $messagePreview.parent();
         };
 
         return me;
@@ -2693,15 +2700,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             // otherwise hide the placeholder
             $placeholder.addClass('hidden');
 
-            switch (format) {
-                case 'markdown':
-                    $plainText.removeClass('hidden');
-                    $prettyMessage.addClass('hidden');
-                    break;
-                default:
-                    $plainText.addClass('hidden');
-                    $prettyMessage.removeClass('hidden');
-                    break;
+            if (format === 'markdown') {
+                $plainText.removeClass('hidden');
+                $prettyMessage.addClass('hidden');
+            } else {
+                $plainText.addClass('hidden');
+                $prettyMessage.removeClass('hidden');
             }
         }
 
@@ -2726,6 +2730,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
 
             format = newFormat;
             isChanged = true;
+
+            // update preview
+            if (Editor.isPreview()) {
+                PasteViewer.run();
+            }
+
         };
 
         /**
@@ -3712,11 +3722,6 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             $('#pasteFormatterDisplay').text($target.text());
             PasteViewer.setFormat(newFormat);
 
-            // update preview
-            if (Editor.isPreview()) {
-                PasteViewer.run();
-            }
-
             event.preventDefault();
         }
 
@@ -3921,6 +3926,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                 text: window.location.href
             });
             $('#qrcode-display').html(qrCanvas);
+            $('#qrcodemodal').modal('show');
         }
 
         /**
@@ -4360,7 +4366,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
          */
         me.getExpiration = function()
         {
-            return pasteExpiration;
+            return Model.getExpirationDefault() || pasteExpiration;
         };
 
         /**
@@ -4543,6 +4549,9 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             // bootstrap template drop downs
             $('ul.dropdown-menu li a', $('#expiration').parent()).click(updateExpiration);
             $('ul.dropdown-menu li a', $('#formatter').parent()).click(updateFormat);
+            $('#pasteFormatter').on('change', function() {
+                PasteViewer.setFormat(Model.getFormatDefault());
+            });
 
             // initiate default state of checkboxes
             changeBurnAfterReading();