Bug 43260: (follow-up) Move debug menu JS into js_includes.inc
The _() function isn't available to JS in intranet-bottom.inc. To test, apply the patch and test that the correct strings are translatable. In this example I'm testing fr-FR: - Update a translation: > gulp po:update > cd misc/translator > perl translate update fr-FR - Open the corresponding .po file for the strings pulled from the template e.g. misc/translator/po/fr-FR-staff-prog.po - Locate strings pulled from includes/js_includes.inc for translation, e.g.: #: koha-tmpl/intranet-tmpl/prog/en/includes/js_includes.inc:105 #, fuzzy msgid "Disable custom CSS" msgstr "Désactiver " - Remove the "fuzzy" line. - Edit the "msgstr" string however you want (it's just for testing) - Install the updated translation: > perl translate install fr-FR Log in to the staff interface as a user with debug permission. Test the debug menu in the header, confirming that the strings look correct and that the toggles work correctly. Switch to your translated templates and test again. Sponsored-by: Athens County Public Libraries Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de> Signed-off-by: Pedro Amorim <pedro.amorim@openfifth.co.uk>
This commit is contained in:
Owen Leonard
Pedro Amorim
parent
b567a5589f
commit
813fb3d143
|
|
@ -186,108 +186,6 @@
|
|||
[% END %]
|
||||
[% END %]
|
||||
|
||||
[% IF Koha.debug_flag %]
|
||||
<script nonce="[% Koha.CSPNonce | $raw %]">
|
||||
(function () {
|
||||
function getURLParams() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params;
|
||||
}
|
||||
|
||||
function toggleURLParams(paramsToToggle) {
|
||||
const url = new URL(window.location.href);
|
||||
const params = url.searchParams;
|
||||
|
||||
// Check if all params are currently set
|
||||
const allSet = paramsToToggle.every(param => params.get(param) === "yes");
|
||||
|
||||
if (allSet) {
|
||||
// Remove all params
|
||||
paramsToToggle.forEach(param => params.delete(param));
|
||||
} else {
|
||||
// Add all params
|
||||
paramsToToggle.forEach(param => params.set(param, "yes"));
|
||||
}
|
||||
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
|
||||
function updateButtonText() {
|
||||
const params = getURLParams();
|
||||
|
||||
// User CSS button
|
||||
const cssDisabled = params.get("DISABLE_SYSPREF_IntranetUserCSS") === "yes" && params.get("DISABLE_SYSPREF_OPACUserCSS") === "yes";
|
||||
const cssToggle = document.getElementById("toggleUserCSS");
|
||||
if (cssToggle) {
|
||||
const cssText = cssToggle.querySelector(".toggle-text");
|
||||
if (cssText) cssText.textContent = cssDisabled ? _("Enable custom CSS") : _("Disable custom CSS");
|
||||
}
|
||||
|
||||
// User JS button
|
||||
const jsDisabled = params.get("DISABLE_SYSPREF_IntranetUserJS") === "yes" && params.get("DISABLE_SYSPREF_OPACUserJS") === "yes";
|
||||
const jsToggle = document.getElementById("toggleUserJS");
|
||||
if (jsToggle) {
|
||||
const jsText = jsToggle.querySelector(".toggle-text");
|
||||
if (jsText) jsText.textContent = jsDisabled ? _("Enable custom JS") : _("Disable custom JS");
|
||||
}
|
||||
|
||||
// Stylesheets button
|
||||
const stylesheetsDisabled =
|
||||
params.get("DISABLE_SYSPREF_OpacAdditionalStylesheet") === "yes" &&
|
||||
params.get("DISABLE_SYSPREF_opaclayoutstylesheet") === "yes" &&
|
||||
params.get("DISABLE_SYSPREF_intranetcolorstylesheet") === "yes" &&
|
||||
params.get("DISABLE_SYSPREF_intranetstylesheet") === "yes";
|
||||
const stylesheetsToggle = document.getElementById("toggleStylesheets");
|
||||
if (stylesheetsToggle) {
|
||||
const stylesheetsText = stylesheetsToggle.querySelector(".toggle-text");
|
||||
if (stylesheetsText) stylesheetsText.textContent = stylesheetsDisabled ? _("Enable custom stylesheets") : _("Disable custom stylesheets");
|
||||
}
|
||||
|
||||
// Update icon color based on whether any toggles are active
|
||||
const anyDisabled = cssDisabled || jsDisabled || stylesheetsDisabled;
|
||||
const debugIcon = document.getElementById("debug-icon");
|
||||
if (debugIcon) {
|
||||
if (anyDisabled) {
|
||||
debugIcon.style.color = "#ffc107"; // Warning/amber color
|
||||
} else {
|
||||
debugIcon.style.color = ""; // Default color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update button text on page load
|
||||
updateButtonText();
|
||||
|
||||
// User CSS toggle
|
||||
const cssToggle = document.getElementById("toggleUserCSS");
|
||||
if (cssToggle) {
|
||||
cssToggle.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
toggleURLParams(["DISABLE_SYSPREF_IntranetUserCSS", "DISABLE_SYSPREF_OPACUserCSS"]);
|
||||
});
|
||||
}
|
||||
|
||||
// User JS toggle
|
||||
const jsToggle = document.getElementById("toggleUserJS");
|
||||
if (jsToggle) {
|
||||
jsToggle.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
toggleURLParams(["DISABLE_SYSPREF_IntranetUserJS", "DISABLE_SYSPREF_OPACUserJS"]);
|
||||
});
|
||||
}
|
||||
|
||||
// Stylesheets toggle
|
||||
const stylesheetsToggle = document.getElementById("toggleStylesheets");
|
||||
if (stylesheetsToggle) {
|
||||
stylesheetsToggle.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
toggleURLParams(["DISABLE_SYSPREF_OpacAdditionalStylesheet", "DISABLE_SYSPREF_opaclayoutstylesheet", "DISABLE_SYSPREF_intranetcolorstylesheet", "DISABLE_SYSPREF_intranetstylesheet"]);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
[% END # IF %]
|
||||
|
||||
[% IF ( footerjs ) %]
|
||||
[% INCLUDE js_includes.inc %]
|
||||
[% jsinclude | $raw # Parse the page template's JavaScript block if necessary %]
|
||||
|
|
|
|||
|
|
@ -100,4 +100,106 @@
|
|||
[% IF Koha.Preference( 'CookieConsent' ) %]
|
||||
[% Asset.js("js/cookieconsent.js") | $raw %]
|
||||
[% END %]
|
||||
|
||||
[% IF Koha.debug_flag %]
|
||||
<script nonce="[% Koha.CSPNonce | $raw %]">
|
||||
(function () {
|
||||
function getURLParams() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params;
|
||||
}
|
||||
|
||||
function toggleURLParams(paramsToToggle) {
|
||||
const url = new URL(window.location.href);
|
||||
const params = url.searchParams;
|
||||
|
||||
// Check if all params are currently set
|
||||
const allSet = paramsToToggle.every(param => params.get(param) === "yes");
|
||||
|
||||
if (allSet) {
|
||||
// Remove all params
|
||||
paramsToToggle.forEach(param => params.delete(param));
|
||||
} else {
|
||||
// Add all params
|
||||
paramsToToggle.forEach(param => params.set(param, "yes"));
|
||||
}
|
||||
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
|
||||
function updateButtonText() {
|
||||
const params = getURLParams();
|
||||
|
||||
// User CSS button
|
||||
const cssDisabled = params.get("DISABLE_SYSPREF_IntranetUserCSS") === "yes" && params.get("DISABLE_SYSPREF_OPACUserCSS") === "yes";
|
||||
const cssToggle = document.getElementById("toggleUserCSS");
|
||||
if (cssToggle) {
|
||||
const cssText = cssToggle.querySelector(".toggle-text");
|
||||
if (cssText) cssText.textContent = cssDisabled ? _("Enable custom CSS") : _("Disable custom CSS");
|
||||
}
|
||||
|
||||
// User JS button
|
||||
const jsDisabled = params.get("DISABLE_SYSPREF_IntranetUserJS") === "yes" && params.get("DISABLE_SYSPREF_OPACUserJS") === "yes";
|
||||
const jsToggle = document.getElementById("toggleUserJS");
|
||||
if (jsToggle) {
|
||||
const jsText = jsToggle.querySelector(".toggle-text");
|
||||
if (jsText) jsText.textContent = jsDisabled ? _("Enable custom JS") : _("Disable custom JS");
|
||||
}
|
||||
|
||||
// Stylesheets button
|
||||
const stylesheetsDisabled =
|
||||
params.get("DISABLE_SYSPREF_OpacAdditionalStylesheet") === "yes" &&
|
||||
params.get("DISABLE_SYSPREF_opaclayoutstylesheet") === "yes" &&
|
||||
params.get("DISABLE_SYSPREF_intranetcolorstylesheet") === "yes" &&
|
||||
params.get("DISABLE_SYSPREF_intranetstylesheet") === "yes";
|
||||
const stylesheetsToggle = document.getElementById("toggleStylesheets");
|
||||
if (stylesheetsToggle) {
|
||||
const stylesheetsText = stylesheetsToggle.querySelector(".toggle-text");
|
||||
if (stylesheetsText) stylesheetsText.textContent = stylesheetsDisabled ? _("Enable custom stylesheets") : _("Disable custom stylesheets");
|
||||
}
|
||||
|
||||
// Update icon color based on whether any toggles are active
|
||||
const anyDisabled = cssDisabled || jsDisabled || stylesheetsDisabled;
|
||||
const debugIcon = document.getElementById("debug-icon");
|
||||
if (debugIcon) {
|
||||
if (anyDisabled) {
|
||||
debugIcon.style.color = "#ffc107"; // Warning/amber color
|
||||
} else {
|
||||
debugIcon.style.color = ""; // Default color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update button text on page load
|
||||
updateButtonText();
|
||||
|
||||
// User CSS toggle
|
||||
const cssToggle = document.getElementById("toggleUserCSS");
|
||||
if (cssToggle) {
|
||||
cssToggle.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
toggleURLParams(["DISABLE_SYSPREF_IntranetUserCSS", "DISABLE_SYSPREF_OPACUserCSS"]);
|
||||
});
|
||||
}
|
||||
|
||||
// User JS toggle
|
||||
const jsToggle = document.getElementById("toggleUserJS");
|
||||
if (jsToggle) {
|
||||
jsToggle.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
toggleURLParams(["DISABLE_SYSPREF_IntranetUserJS", "DISABLE_SYSPREF_OPACUserJS"]);
|
||||
});
|
||||
}
|
||||
|
||||
// Stylesheets toggle
|
||||
const stylesheetsToggle = document.getElementById("toggleStylesheets");
|
||||
if (stylesheetsToggle) {
|
||||
stylesheetsToggle.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
toggleURLParams(["DISABLE_SYSPREF_OpacAdditionalStylesheet", "DISABLE_SYSPREF_opaclayoutstylesheet", "DISABLE_SYSPREF_intranetcolorstylesheet", "DISABLE_SYSPREF_intranetstylesheet"]);
|
||||
});
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
[% END # IF %]
|
||||
<!-- / js_includes.inc -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue