Fix styles in CSL Preview window (#3873)

This commit is contained in:
Tom Najdek 2024-03-24 10:56:23 +01:00 committed by GitHub
parent 65db66eb33
commit a0658b5ada
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 32 deletions

View file

@ -24,25 +24,27 @@
Contributed by Julian Onions Contributed by Julian Onions
*/ */
var Zotero_CSL_Preview = new function() { // eslint-disable-next-line no-unused-vars
this.init = init; var Zotero_CSL_Preview = new function () {
this.refresh = refresh; this.lastContent = null;
this.generateBibliography = generateBibliography;
function init() { this.init = function () {
var menulist = document.getElementById("locale-menu"); var menulist = document.getElementById("locale-menu");
Zotero.Styles.populateLocaleList(menulist); Zotero.Styles.populateLocaleList(menulist);
menulist.value = Zotero.Prefs.get('export.lastLocale');; menulist.value = Zotero.Prefs.get('export.lastLocale');
var iframe = document.getElementById('zotero-csl-preview-box'); this.updateIframe(Zotero.getString('styles.preview.instructions'));
iframe.contentDocument.documentElement.innerHTML = '<html><head><title></title></head><body><p>' + Zotero.getString('styles.preview.instructions') + '</p></body></html>';
} window.matchMedia('(prefers-color-scheme: dark)').addEventListener("change", () => {
function refresh() { this.updateIframe(this.lastContent.content, this.lastContent.containerClass);
var iframe = document.getElementById('zotero-csl-preview-box'); });
};
this.refresh = function () {
var items = Zotero.getActiveZoteroPane().getSelectedItems(); var items = Zotero.getActiveZoteroPane().getSelectedItems();
if (items.length === 0) { if (items.length === 0) {
iframe.contentDocument.documentElement.innerHTML = '<html><head><title></title></head><body><p style="color: red">' + Zotero.getString('styles.editor.warning.noItems') + '</p></body></html>'; this.updateIframe(Zotero.getString('styles.editor.warning.noItems'), 'warning');
return; return;
} }
var progressWin = new Zotero.ProgressWindow(); var progressWin = new Zotero.ProgressWindow();
@ -52,11 +54,12 @@ var Zotero_CSL_Preview = new function() {
progressWin.addLines(document.title, icon); progressWin.addLines(document.title, icon);
progressWin.show(); progressWin.show();
progressWin.startCloseTimer(); progressWin.startCloseTimer();
var f = function() { // Give progress window time to appear
setTimeout(() => {
var d = new Date(); var d = new Date();
var styles = Zotero.Styles.getVisible(); var styles = Zotero.Styles.getVisible();
// XXX needs its own string really for the title! // XXX needs its own string really for the title!
var str = '<html><head><title></title></head><body>'; var str = '<div>';
for (let style of styles) { for (let style of styles) {
if (style.source) { if (style.source) {
continue; continue;
@ -65,7 +68,7 @@ var Zotero_CSL_Preview = new function() {
let bib; let bib;
let err = false; let err = false;
try { try {
bib = generateBibliography(style); bib = this.generateBibliography(style);
} }
catch (e) { catch (e) {
err = e; err = e;
@ -77,19 +80,15 @@ var Zotero_CSL_Preview = new function() {
str += '<hr>'; str += '<hr>';
} }
} }
str += '</body></html>'; str += '</div>';
iframe.contentDocument.documentElement.innerHTML = str; this.updateIframe(str);
Zotero.debug(`Generated previews in ${new Date() - d} ms`); Zotero.debug(`Generated previews in ${new Date() - d} ms`);
}; }, 100);
// Give progress window time to appear };
setTimeout(f, 100);
}
function generateBibliography(style) { this.generateBibliography = function (style) {
var iframe = document.getElementById('zotero-csl-preview-box');
var items = Zotero.getActiveZoteroPane().getSelectedItems(); var items = Zotero.getActiveZoteroPane().getSelectedItems();
if (items.length === 0) { if (items.length === 0) {
return ''; return '';
@ -115,7 +114,7 @@ var Zotero_CSL_Preview = new function() {
// Generate bibliography // Generate bibliography
var bibliography = ''; var bibliography = '';
if(style.hasBibliography) { if (style.hasBibliography) {
styleEngine.updateItems(items.map(item => item.id)); styleEngine.updateItems(items.map(item => item.id));
bibliography = Zotero.Cite.makeFormattedBibliography(styleEngine, "html"); bibliography = Zotero.Cite.makeFormattedBibliography(styleEngine, "html");
} }
@ -123,7 +122,23 @@ var Zotero_CSL_Preview = new function() {
styleEngine.free(); styleEngine.free();
return '<p>' + citations + '</p>' + bibliography; return '<p>' + citations + '</p>' + bibliography;
} };
this.updateIframe = function (content, containerClass = 'preview') {
this.lastContent = { content, containerClass };
const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
let iframe = document.getElementById('zotero-csl-preview-box');
iframe.contentDocument.documentElement.innerHTML = `<html>
<head>
<title></title>
<link rel="stylesheet" href="chrome://zotero-platform/content/zotero.css">
<style>
html {
color-scheme: ${isDarkMode ? "dark" : "light"};
}
</style>
</head>
<body id="csl-edit-preview"><div class="${containerClass} zotero-dialog">${content}</div></body>
</html>`;
};
}(); }();

View file

@ -25,7 +25,7 @@
Contributed by Julian Onions Contributed by Julian Onions
--> -->
<?xml-stylesheet href="chrome://global/skin/global.css"?> <?xml-stylesheet href="chrome://global/skin/global.css"?>
<?xml-stylesheet href="chrome://zotero/skin/zotero.css" type="text/css"?> <?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<!DOCTYPE window [ <!DOCTYPE window [
<!ENTITY % cslpreviewDTD SYSTEM "chrome://zotero/locale/cslpreview.dtd"> %cslpreviewDTD; <!ENTITY % cslpreviewDTD SYSTEM "chrome://zotero/locale/cslpreview.dtd"> %cslpreviewDTD;
@ -59,7 +59,7 @@
<menulist id="locale-menu" oncommand="Zotero.Prefs.set('export.lastLocale', this.value); Zotero_CSL_Preview.refresh()"/> <menulist id="locale-menu" oncommand="Zotero.Prefs.set('export.lastLocale', this.value); Zotero_CSL_Preview.refresh()"/>
</hbox> </hbox>
<iframe id="zotero-csl-preview-box" flex="1" style="padding: 0 1em; background:white;" overflow="auto" type="content"/> <iframe id="zotero-csl-preview-box" flex="1" overflow="auto" type="content"/>
</vbox> </vbox>
</window> </window>