Improve style editor dialog

This commit is contained in:
Tom Najdek 2024-01-16 14:22:48 +01:00 committed by Dan Stillman
parent c514f92f9b
commit a54ed665bf
4 changed files with 123 additions and 63 deletions

View file

@ -25,7 +25,7 @@
import FilePicker from 'zotero/modules/filePicker'; import FilePicker from 'zotero/modules/filePicker';
var Zotero_CSL_Editor = new function() { var Zotero_CSL_Editor = new function () {
let monaco, editor; let monaco, editor;
this.init = init; this.init = init;
@ -86,7 +86,7 @@ var Zotero_CSL_Editor = new function() {
}); });
} }
this.onStyleSelected = function(styleID) { this.onStyleSelected = function (styleID) {
Zotero.Prefs.set('export.lastStyle', styleID); Zotero.Prefs.set('export.lastStyle', styleID);
let style = Zotero.Styles.get(styleID); let style = Zotero.Styles.get(styleID);
Zotero.Styles.updateLocaleList( Zotero.Styles.updateLocaleList(
@ -97,11 +97,11 @@ var Zotero_CSL_Editor = new function() {
loadCSL(style.styleID); loadCSL(style.styleID);
this.refresh(); this.refresh();
} };
this.refresh = function() { this.refresh = function () {
this.generateBibliography(this.loadStyleFromEditor()); this.generateBibliography(this.loadStyleFromEditor());
} };
this.refreshDebounced = Zotero.Utilities.debounce(this.refresh, 250); this.refreshDebounced = Zotero.Utilities.debounce(this.refresh, 250);
@ -134,22 +134,20 @@ var Zotero_CSL_Editor = new function() {
document.getElementById('zotero-csl-list').value = cslID; document.getElementById('zotero-csl-list').value = cslID;
} }
this.loadStyleFromEditor = function() { this.loadStyleFromEditor = function () {
var styleObject; var styleObject;
try { try {
styleObject = new Zotero.Style( styleObject = new Zotero.Style(
editor.getValue() editor.getValue()
); );
} catch(e) { }
document.getElementById('zotero-csl-preview-box') catch (e) {
.contentDocument.documentElement.innerHTML = '<div>' this.updateIframe(Zotero.getString('styles.editor.warning.parseError') + '<div>' + e + '</div>', 'error');
+ Zotero.getString('styles.editor.warning.parseError')
+ '</div><div>' + e + '</div>';
throw e; throw e;
} }
return styleObject; return styleObject;
} };
this.onStyleModified = function () { this.onStyleModified = function () {
let xml = editor.getValue(); let xml = editor.getValue();
@ -171,17 +169,12 @@ var Zotero_CSL_Editor = new function() {
Zotero.Prefs.get('export.lastLocale') Zotero.Prefs.get('export.lastLocale')
); );
Zotero_CSL_Editor.generateBibliography(styleObject); Zotero_CSL_Editor.generateBibliography(styleObject);
} };
this.generateBibliography = function(style) {
var iframe = document.getElementById('zotero-csl-preview-box');
this.generateBibliography = function (style) {
var items = Zotero.getActiveZoteroPane().getSelectedItems(); var items = Zotero.getActiveZoteroPane().getSelectedItems();
if (items.length == 0) { if (items.length == 0) {
iframe.contentDocument.documentElement.innerHTML = this.updateIframe(Zotero.getString('styles.editor.warning.noItems'), 'warning');
'<html><head><title></title></head><body><p style="color: red">'
+ Zotero.getString('styles.editor.warning.noItems')
+ '</p></body></html>';
return; return;
} }
@ -189,8 +182,9 @@ var Zotero_CSL_Editor = new function() {
var styleEngine; var styleEngine;
try { try {
styleEngine = style.getCiteProc(style.locale || selectedLocale, 'html'); styleEngine = style.getCiteProc(style.locale || selectedLocale, 'html');
} catch(e) { }
iframe.contentDocument.documentElement.innerHTML = '<div>' + Zotero.getString('styles.editor.warning.parseError') + '</div><div>'+e+'</div>'; catch (e) {
this.updateIframe(Zotero.getString('styles.editor.warning.parseError') + '<div>' + e + '</div>');
throw e; throw e;
} }
@ -203,8 +197,8 @@ var Zotero_CSL_Editor = new function() {
citation.citationItems = []; citation.citationItems = [];
citation.properties = {}; citation.properties = {};
citation.properties.noteIndex = 1; citation.properties.noteIndex = 1;
for (var i = 0, ilen = items.length; i < ilen; i += 1) { for (let i = 0, ilen = items.length; i < ilen; i += 1) {
citation.citationItems.push({id:itemIds[i]}); citation.citationItems.push({ id: itemIds[i] });
} }
// Generate single citations // Generate single citations
@ -213,7 +207,7 @@ var Zotero_CSL_Editor = new function() {
var loc = document.getElementById('zotero-csl-page-type'); var loc = document.getElementById('zotero-csl-page-type');
var pos = document.getElementById('zotero-ref-position').selectedItem.value; var pos = document.getElementById('zotero-ref-position').selectedItem.value;
var citations = '<h3>' + Zotero.getString('styles.editor.output.individualCitations') + '</h3>'; var citations = '<h3>' + Zotero.getString('styles.editor.output.individualCitations') + '</h3>';
for (var i=0; i<citation.citationItems.length; i++) { for (let i = 0; i < citation.citationItems.length; i++) {
citation.citationItems[i]['suppress-author'] = author; citation.citationItems[i]['suppress-author'] = author;
if (search.value !== '') { if (search.value !== '') {
citation.citationItems[i].locator = search.value; citation.citationItems[i].locator = search.value;
@ -225,29 +219,29 @@ var Zotero_CSL_Editor = new function() {
citation.citationItems[i]["near-note"] = true; citation.citationItems[i]["near-note"] = true;
} }
else { else {
citation.citationItems[i].position = parseInt(pos, 10); citation.citationItems[i].position = parseInt(pos);
} }
var subcitation = [citation.citationItems[i]]; var subcitation = [citation.citationItems[i]];
citations += styleEngine.makeCitationCluster(subcitation) + '<br />'; citations += styleEngine.makeCitationCluster(subcitation) + '<br />';
} }
try { try {
var multCitations = '<hr><h3>' + Zotero.getString('styles.editor.output.singleCitation') + '</h3>' + var multCitations = '<hr><h3>' + Zotero.getString('styles.editor.output.singleCitation') + '</h3>'
styleEngine.previewCitationCluster(citation, [], [], "html"); + styleEngine.previewCitationCluster(citation, [], [], "html");
// Generate bibliography // Generate bibliography
styleEngine.updateItems(itemIds); styleEngine.updateItems(itemIds);
var bibliography = '<hr/><h3>' + Zotero.getString('styles.bibliography') + '</h3>' + var bibliography = '<hr/><h3>' + Zotero.getString('styles.bibliography') + '</h3>'
Zotero.Cite.makeFormattedBibliography(styleEngine, "html"); + Zotero.Cite.makeFormattedBibliography(styleEngine, "html");
iframe.contentDocument.documentElement.innerHTML = this.updateIframe(citations + multCitations + bibliography);
'<div>' + citations + multCitations + bibliography + '</div>'; }
} catch(e) { catch (e) {
iframe.contentDocument.documentElement.innerHTML = '<div>' + Zotero.getString('styles.editor.warning.renderError') + '</div><div>'+e+'</div>'; this.updateIframe(Zotero.getString('styles.editor.warning.renderError') + '<div>' + e + '</div>', 'error');
throw e; throw e;
} }
styleEngine.free(); styleEngine.free();
} };
this.updateMarkers = function (rawErrors) { this.updateMarkers = function (rawErrors) {
let model = editor.getModel(); let model = editor.getModel();
@ -270,4 +264,15 @@ var Zotero_CSL_Editor = new function() {
}).filter(Boolean); }).filter(Boolean);
monaco.editor.setModelMarkers(model, 'csl-validator', markers); monaco.editor.setModelMarkers(model, 'csl-validator', markers);
}; };
this.updateIframe = function (content, containerClass = 'preview') {
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">
</head>
<body id="csl-edit-preview"><div class="${containerClass}">${content}</div></body>
</html>`;
};
}(); }();

View file

@ -24,7 +24,7 @@
***** END LICENSE BLOCK ***** ***** END LICENSE BLOCK *****
--> -->
<?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 % csleditDTD SYSTEM "chrome://zotero/locale/csledit.dtd"> %csleditDTD; <!ENTITY % csleditDTD SYSTEM "chrome://zotero/locale/csledit.dtd"> %csleditDTD;
@ -43,13 +43,17 @@
<script src="csledit.js"/> <script src="csledit.js"/>
<vbox flex="1"> <vbox flex="1">
<hbox align="center"> <vbox class="csl-edit-toolbars">
<hbox class="csl-edit-toolbar">
<button id="preview-refresh-button" label="&zotero.general.refresh;" oncommand="Zotero_CSL_Editor.refresh()"/> <button id="preview-refresh-button" label="&zotero.general.refresh;" oncommand="Zotero_CSL_Editor.refresh()"/>
<button id="zotero-csl-save" label="&zotero.general.saveAs;" oncommand="Zotero_CSL_Editor.save()"/> <button id="zotero-csl-save" label="&zotero.general.saveAs;" oncommand="Zotero_CSL_Editor.save()"/>
<menulist id="zotero-csl-page-type" style="min-height: 1.6em; min-width: 50px" oncommand="Zotero_CSL_Editor.refresh()" native="true" /> <html:div class="divider" />
<menulist id="zotero-csl-page-type" oncommand="Zotero_CSL_Editor.refresh()" native="true" />
<label value=":" /> <label value=":" />
<html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()"/> <html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()"/>
<html:div class="divider" />
<checkbox oncommand="Zotero_CSL_Editor.refresh()" id="preview-suppress-author" label="&zotero.citation.suppressAuthor.label;" native="true" /> <checkbox oncommand="Zotero_CSL_Editor.refresh()" id="preview-suppress-author" label="&zotero.citation.suppressAuthor.label;" native="true" />
<html:div class="divider" />
<label value="&styles.editor.citePosition;" /> <label value="&styles.editor.citePosition;" />
<menulist id="zotero-ref-position" oncommand="Zotero_CSL_Editor.refresh()" native="true"> <menulist id="zotero-ref-position" oncommand="Zotero_CSL_Editor.refresh()" native="true">
<menupopup> <menupopup>
@ -60,17 +64,18 @@
<menuitem label="near-note" value="4"/> <menuitem label="near-note" value="4"/>
</menupopup> </menupopup>
</menulist> </menulist>
<menulist id="locale-menu" oncommand="Zotero.Prefs.set('export.lastLocale', this.value); Zotero_CSL_Editor.refresh()" native="true"/>
</hbox> </hbox>
<hbox align="center"> <hbox class="csl-edit-toolbar">
<menulist id="zotero-csl-list" style="margin-left: 7px; min-height: 1.6em; min-width: 100px" oncommand="Zotero_CSL_Editor.onStyleSelected(this.value)" native="true"/> <menulist id="zotero-csl-list" oncommand="Zotero_CSL_Editor.onStyleSelected(this.value)" native="true"/>
<menulist id="locale-menu" oncommand="Zotero.Prefs.set('export.lastLocale', this.value); Zotero_CSL_Editor.refresh()" native="true" />
</hbox> </hbox>
</vbox>
<iframe id="zotero-csl-editor-iframe" src="chrome://scaffold/content/monaco/monaco.html" flex="1" <iframe id="zotero-csl-editor-iframe" src="chrome://scaffold/content/monaco/monaco.html" flex="1"
onmousedown="this.focus()"/> onmousedown="this.focus()"/>
<splitter id="csledit-splitter" collapse="before" persist="state"> <splitter id="csledit-splitter" collapse="before" persist="state" orient="vertical">
<grippy/> <grippy/>
</splitter> </splitter>
<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>
<keyset> <keyset>

View file

@ -27,6 +27,7 @@
@import "components/contextPane"; @import "components/contextPane";
@import "components/collection-tree"; @import "components/collection-tree";
@import "components/createParent"; @import "components/createParent";
@import "components/csledit";
@import "components/dictionaryManager"; @import "components/dictionaryManager";
@import "components/editable"; @import "components/editable";
@import "components/exportOptions"; @import "components/exportOptions";

View file

@ -0,0 +1,49 @@
#csl-edit {
font-size: 12px;
#csledit-splitter, #zotero-csl-editor-iframe {
border-top: var(--material-panedivider);
}
.divider {
border-left: var(--material-border-quinary);
width: 1px;
height: 16px;
}
.csl-edit-toolbars {
padding: 8px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.csl-edit-toolbar {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
menulist {
min-width: 80px;
}
button, menulist {
margin: 0;
}
}
.checkbox-label-box {
white-space: nowrap;
}
}
#csl-edit-preview {
font-size: 12px;
background: var(--material-background);
margin: 11px 16px 16px 16px; // splitter adds 5px of visual padding at the top. Using margin here so it collapses with the margin of the first header in the preview.
.error, .warning {
color: var(--accent-red)
}
}