replicate template changes, fix bugs

- fixes QR code height introducing space even when hidden in page layout - fix modals in bootstrap 5 (modal syntax changed heavily, no longer jQuery integrated) - hide and show tab-toggle depending on application state - don't encode HTML entities in translated messages containing kbd tags (in addition to links)
2024-12-24 06:49:29 -05:00 · 2024-11-24 15:42:38 +01:00 · 2024-11-24 15:42:38 +01:00 · c7195aaf9a
commit c7195aaf9a
parent 9028ddbb97
9 changed files with 84 additions and 26 deletions
--- a/css/bootstrap5/privatebin.css
+++ b/css/bootstrap5/privatebin.css
@ -18,6 +18,10 @@
 	--bs-dropdown-min-width: 23rem;
 }

+pre {
+	margin-bottom: 0;
+}
+
 [data-bs-theme=light] pre, [data-bs-theme=light] .card {
 	background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
 }
--- a/css/common.css
+++ b/css/common.css
@ -53,7 +53,6 @@

 #qrcode-display {
 	width: 200px;
-	height: 200px;
 	margin: auto;
 }

--- a/css/privatebin.css
+++ b/css/privatebin.css
@ -125,7 +125,7 @@ h3.title {

 #pasteresult button { margin-left: 11px; }

-#toolbar, #status { margin-bottom: 5px; }
+#message, #plaintext, #prettymessage, #toolbar, #status { margin-bottom: 5px; }

 #copyhint { color: #666; font-size: 0.85em }

--- a/js/privatebin.js
+++ b/js/privatebin.js
@ -2257,7 +2257,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
            password = $passwordDecrypt.val();

            // hide modal
-            $passwordModal.modal('hide');
+            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                (new bootstrap.Modal($passwordModal[0])).hide();
+            } else {
+                $passwordModal.modal('hide');
+            }

            PasteDecrypter.run();
        }
@ -2278,7 +2282,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                const $loadconfirmClose = $loadconfirmmodal.find('.close');
                $loadconfirmClose.off('click.close');
                $loadconfirmClose.on('click.close', Controller.newPaste);
-                $loadconfirmmodal.modal('show');
+                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                    (new bootstrap.Modal($loadconfirmmodal[0])).show();
+                } else {
+                    $loadconfirmmodal.modal('show');
+                }
            } else {
                if (window.confirm(
                    I18n._('This secret message can only be displayed once. Would you like to see it now?')
@ -2300,11 +2308,18 @@ jQuery.PrivateBin = (function($, RawDeflate) {
        {
            // show new bootstrap method (if available)
            if ($passwordModal.length !== 0) {
-                $passwordModal.modal({
-                    backdrop: 'static',
-                    keyboard: false
-                });
-                $passwordModal.modal('show');
+                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                    (new bootstrap.Modal($passwordModal[0]), {
+                        backdrop: 'static',
+                        keyboard: false
+                    }).show();
+                } else {
+                    $passwordModal.modal({
+                        backdrop: 'static',
+                        keyboard: false
+                    });
+                    $passwordModal.modal('show');
+                }
                // focus password input
                $passwordDecrypt.focus();
                // then re-focus it, when modal causes it to loose focus again
@ -2393,6 +2408,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
            $messageEditParent,
            $messagePreview,
            $messagePreviewParent,
+            $messageTab,
+            $messageTabParent,
            $message,
            isPreview = false,
            isTabSupported = true;
@ -2410,7 +2427,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
            // support disabling tab support using [Esc] and [Ctrl]+[m]
            if (event.key === 'Escape' || (event.ctrlKey && event.key === 'm')) {
                toggleTabSupport();
-                document.getElementById('message-tab').checked = isTabSupported;
+                $messageTab[0].checked = isTabSupported;
                event.preventDefault();
            }
            // tab was pressed
@ -2462,6 +2479,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {

            // reshow input
            $message.removeClass('hidden');
+            $messageTabParent.removeClass('hidden');

            me.focusInput();

@ -2494,6 +2512,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {

            // hide input as now preview is shown
            $message.addClass('hidden');
+            $messageTabParent.addClass('hidden');

            // show preview
            PasteViewer.setText($message.val());
@ -2552,6 +2571,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
        me.show = function()
        {
            $message.removeClass('hidden');
+            $messageTabParent.removeClass('hidden');
            $editorTabs.removeClass('hidden');
        };

@ -2564,6 +2584,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
        me.hide = function()
        {
            $message.addClass('hidden');
+            $messageTabParent.addClass('hidden');
            $editorTabs.addClass('hidden');
        };

@ -2603,7 +2624,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
        };

        /**
-         * init status manager
+         * init editor
         *
         * preloads jQuery elements
         *
@ -2614,10 +2635,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
        {
            $editorTabs = $('#editorTabs');
            $message = $('#message');
+            $messageTab = $('#messagetab');
+            $messageTabParent = $messageTab.parent();

            // bind events
            $message.keydown(supportTabs);
-            $('#message-tab').change(toggleTabSupport);
+            $messageTab.change(toggleTabSupport);

            // bind click events to tab switchers (a), and save parents (li)
            $messageEdit = $('#messageedit').click(viewEditor);
@ -2638,7 +2661,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
    const PasteViewer = (function () {
        const me = {};

-        let $placeholder,
+        let $messageTabParent,
+            $placeholder,
            $prettyMessage,
            $prettyPrint,
            $plainText,
@ -2718,6 +2742,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
            }
            // otherwise hide the placeholder
            $placeholder.addClass('hidden');
+            $messageTabParent.addClass('hidden');

            if (format === 'markdown') {
                $plainText.removeClass('hidden');
@ -2856,6 +2881,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         */
        me.init = function()
        {
+            $messageTabParent = $('#messagetab').parent();
            $placeholder = $('#placeholder');
            $plainText = $('#plaintext');
            $prettyMessage = $('#prettymessage');
@ -3960,8 +3986,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
            });
            $('#qrcode-display').html(qrCanvas);
            // only necessary for bootstrap 5, other templates won't have this
-            if (bootstrap.Tooltip.VERSION) {
-                $('#qrcodemodal').modal('show');
+            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                (new bootstrap.Modal('#qrcodemodal')).show();
            }
        }

@ -4054,7 +4080,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                    $emailconfirmTimezoneCurrent.off('click.sendEmailCurrentTimezone');
                    $emailconfirmTimezoneCurrent.on('click.sendEmailCurrentTimezone', () => {
                        const emailBody = templateEmailBody(expirationDateRoundedToSecond.toLocaleString(), isBurnafterreading);
-                        $emailconfirmmodal.modal('hide');
+                        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                            (new bootstrap.Modal($emailconfirmmodal[0])).hide();
+                        } else {
+                            $emailconfirmmodal.modal('hide');
+                        }
                        triggerEmailSend(emailBody);
                    });
                    $emailconfirmTimezoneUtc.off('click.sendEmailUtcTimezone');
@ -4064,10 +4094,18 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                            // we don't use Date.prototype.toUTCString() because we would like to avoid GMT
                            { timeZone: 'UTC', dateStyle: 'long', timeStyle: 'long' }
                        ), isBurnafterreading);
-                        $emailconfirmmodal.modal('hide');
+                        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                            (new bootstrap.Modal($emailconfirmmodal[0])).hide();
+                        } else {
+                            $emailconfirmmodal.modal('hide');
+                        }
                        triggerEmailSend(emailBody);
                    });
-                    $emailconfirmmodal.modal('show');
+                    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                        (new bootstrap.Modal($emailconfirmmodal[0])).show();
+                    } else {
+                        $emailconfirmmodal.modal('show');
+                    }
                } else {
                    triggerEmailSend(templateEmailBody(null, isBurnafterreading));
                }
--- a/lib/Configuration.php
+++ b/lib/Configuration.php
@ -108,7 +108,7 @@ class Configuration
            'js/kjua-0.9.0.js'       => 'sha512-CVn7af+vTMBd9RjoS4QM5fpLFEOtBCoB0zPtaqIDC7sF4F8qgUSRFQQpIyEDGsr6yrjbuOLzdf20tkHHmpaqwQ==',
            'js/legacy.js'           => 'sha512-LYos+qXHIRqFf5ZPNphvtTB0cgzHUizu2wwcOwcwz/VIpRv9lpcBgPYz4uq6jx0INwCAj6Fbnl5HoKiLufS2jg==',
            'js/prettify.js'         => 'sha512-puO0Ogy++IoA2Pb9IjSxV1n4+kQkKXYAEUtVzfZpQepyDPyXk8hokiYDS7ybMogYlyyEIwMLpZqVhCkARQWLMg==',
-            'js/privatebin.js'       => 'sha512-Tit/JkrOoSGSvbDmnWmvK7utnjzHaErYPRrQYlGf0PEQZPYWFVYCKkV+HkNJzFXAXKWqqpA8b16TU38R/wgpRg==',
+            'js/privatebin.js'       => 'sha512-rbfSVRLvLB7zcmnDGOopePCL0BUEDH10Yd1sZig/l44MaxQGcMaAG/T5Zeln3it/0LxMOIujZV/By+0ShhwysQ==',
            'js/purify-3.1.7.js'     => 'sha512-LegvqULiMtOfboJZw9MpETN/b+xnLRXZI90gG7oIFHW+yAeHmKvRtEUbiMFx2WvUqQoL9XB3gwU+hWXUT0X+8A==',
            'js/rawinflate-0.3.js'   => 'sha512-g8uelGgJW9A/Z1tB6Izxab++oj5kdD7B4qC7DHwZkB6DGMXKyzx7v5mvap2HXueI2IIn08YlRYM56jwWdm2ucQ==',
            'js/showdown-2.1.0.js'   => 'sha512-WYXZgkTR0u/Y9SVIA4nTTOih0kXMEd8RRV6MLFdL6YU8ymhR528NLlYQt1nlJQbYz4EW+ZsS0fx1awhiQJme1Q==',
--- a/lib/I18n.php
+++ b/lib/I18n.php
@ -127,12 +127,19 @@ class I18n
        } else {
            $args[0] = self::$_translations[$messageId];
        }
-        // encode any non-integer arguments and the message ID, if it doesn't contain a link
+        // encode any non-integer arguments and the message ID, if it doesn't contain a link or keyboard input
        $argsCount = count($args);
        for ($i = 0; $i < $argsCount; ++$i) {
-            if ($i > 0 ? !is_int($args[$i]) : strpos($args[0], '<a') === false) {
-                $args[$i] = self::encode($args[$i]);
+            if ($i === 0) {
+                if (strpos($args[0], '<a') !== false || strpos($args[0], '<kbd>') !== false) {
+                    continue;
+                }
+            } else {
+                if (is_int($args[$i])) {
+                    continue;
+                }
            }
+            $args[$i] = self::encode($args[$i]);
        }
        return call_user_func_array('sprintf', $args);
    }
--- a/tpl/bootstrap.php
+++ b/tpl/bootstrap.php
@ -584,6 +584,12 @@ endif;
 					</div>
 					<div id="plaintext" class="col-md-12 hidden"></div>
 					<p class="col-md-12"><textarea id="message" name="message" cols="80" rows="25" class="form-control hidden"></textarea></p>
+					<p class="col-md-12 checkbox">
+						<label>
+							<input id="messagetab" type="checkbox" checked="checked" />
+							<?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'), PHP_EOL; ?>
+						</label>
+					</p>
 				</article>
 			</section>
 			<section class="container">
--- a/tpl/bootstrap5.php
+++ b/tpl/bootstrap5.php
@ -440,10 +440,10 @@ endif;
 					</div>
 					<div id="plaintext" class="col-md-12 hidden"></div>
 					<p class="col-md-12"><textarea id="message" name="message" cols="80" rows="25" aria-label="<?php echo I18n::_('Paste text'); ?>" class="form-control hidden"></textarea></p>
-					<p class="col-md-12" id="message-controls">
-						<input id="message-tab" type="checkbox" class="form-check-input" checked="checked" />
-						<label for="message-tab" class="form-check-label">
-							<?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'); ?>
+					<p class="col-md-12 form-check form-switch">
+						<input id="messagetab" type="checkbox" class="form-check-input" checked="checked" />
+						<label for="messagetab" class="form-check-label">
+							<?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'), PHP_EOL; ?>
 						</label>
 					</p>
 				</article>
--- a/tpl/page.php
+++ b/tpl/page.php
@ -264,6 +264,10 @@ endif;
 				</div>
 				<div id="plaintext" class="hidden"></div>
 				<textarea id="message" name="message" cols="80" rows="25" class="hidden"></textarea>
+				<div class="button">
+					<input id="messagetab" type="checkbox" checked="checked" />
+					<label for="messagetab"><?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'); ?></label>
+				</div>
 			</article>
 		</section>
 		<section>