Improve style editor dialog
This commit is contained in:
parent
c514f92f9b
commit
a54ed665bf
4 changed files with 123 additions and 63 deletions
|
@ -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>`;
|
||||||
|
};
|
||||||
}();
|
}();
|
||||||
|
|
|
@ -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,34 +43,39 @@
|
||||||
<script src="csledit.js"/>
|
<script src="csledit.js"/>
|
||||||
|
|
||||||
<vbox flex="1">
|
<vbox flex="1">
|
||||||
<hbox align="center">
|
<vbox class="csl-edit-toolbars">
|
||||||
<button id="preview-refresh-button" label="&zotero.general.refresh;" oncommand="Zotero_CSL_Editor.refresh()"/>
|
<hbox class="csl-edit-toolbar">
|
||||||
<button id="zotero-csl-save" label="&zotero.general.saveAs;" oncommand="Zotero_CSL_Editor.save()"/>
|
<button id="preview-refresh-button" label="&zotero.general.refresh;" oncommand="Zotero_CSL_Editor.refresh()"/>
|
||||||
<menulist id="zotero-csl-page-type" style="min-height: 1.6em; min-width: 50px" oncommand="Zotero_CSL_Editor.refresh()" native="true" />
|
<button id="zotero-csl-save" label="&zotero.general.saveAs;" oncommand="Zotero_CSL_Editor.save()"/>
|
||||||
<label value=":" />
|
<html:div class="divider" />
|
||||||
<html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()"/>
|
<menulist id="zotero-csl-page-type" oncommand="Zotero_CSL_Editor.refresh()" native="true" />
|
||||||
<checkbox oncommand="Zotero_CSL_Editor.refresh()" id="preview-suppress-author" label="&zotero.citation.suppressAuthor.label;" native="true" />
|
<label value=":" />
|
||||||
<label value="&styles.editor.citePosition;" />
|
<html:input size="5" id="preview-pages" oninput="Zotero_CSL_Editor.refreshDebounced()"/>
|
||||||
<menulist id="zotero-ref-position" oncommand="Zotero_CSL_Editor.refresh()" native="true">
|
<html:div class="divider" />
|
||||||
<menupopup>
|
<checkbox oncommand="Zotero_CSL_Editor.refresh()" id="preview-suppress-author" label="&zotero.citation.suppressAuthor.label;" native="true" />
|
||||||
<menuitem label="first" value="0"/>
|
<html:div class="divider" />
|
||||||
<menuitem label="subsequent" value="1"/>
|
<label value="&styles.editor.citePosition;" />
|
||||||
<menuitem label="ibid" value="2"/>
|
<menulist id="zotero-ref-position" oncommand="Zotero_CSL_Editor.refresh()" native="true">
|
||||||
<menuitem label="ibid-with-locator" value="3"/>
|
<menupopup>
|
||||||
<menuitem label="near-note" value="4"/>
|
<menuitem label="first" value="0"/>
|
||||||
</menupopup>
|
<menuitem label="subsequent" value="1"/>
|
||||||
</menulist>
|
<menuitem label="ibid" value="2"/>
|
||||||
<menulist id="locale-menu" oncommand="Zotero.Prefs.set('export.lastLocale', this.value); Zotero_CSL_Editor.refresh()" native="true"/>
|
<menuitem label="ibid-with-locator" value="3"/>
|
||||||
</hbox>
|
<menuitem label="near-note" value="4"/>
|
||||||
<hbox align="center">
|
</menupopup>
|
||||||
<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>
|
||||||
</hbox>
|
</hbox>
|
||||||
|
<hbox class="csl-edit-toolbar">
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
|
|
@ -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";
|
||||||
|
|
49
scss/components/_csledit.scss
Normal file
49
scss/components/_csledit.scss
Normal 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)
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue