From db2eb99b1ed36ade675d5f1c348cc707a7271384 Mon Sep 17 00:00:00 2001
From: Frank Steinberg <steinberg@ibr.cs.tu-bs.de>
Date: Mon, 7 Oct 2019 15:24:15 +0200
Subject: [PATCH] Improvements to online editor. Improved "make status".
---
Makefile | 5 ++-
de/1.xml | 3 +-
web/bjcp-styleguide.css | 11 +++++
web/edit.css | 13 ++++++
web/edit.js | 70 ++++++++++++++++++++++-------
web/pell.js | 6 ++-
xsl/bjcp-2015-styleguide-html.xsl | 22 ++++++++-
xsl/bjcp-2015-styleguide-status.xsl | 43 ++++++++++++++++--
8 files changed, 149 insertions(+), 24 deletions(-)
diff --git a/Makefile b/Makefile
index b2b6a64..6908900 100644
--- a/Makefile
+++ b/Makefile
@@ -33,7 +33,7 @@ bjcp-2015-styleguide-de.html: xsl/bjcp-2015-styleguide-html.xsl bjcp-2015-styleg
@echo "built $@"
bjcp-2015-styleguide-de-edit.html: xsl/bjcp-2015-styleguide-html.xsl bjcp-2015-styleguide-de.xml
- @xsltproc --stringparam edit yes xsl/bjcp-2015-styleguide-html.xsl bjcp-2015-styleguide-de.xml > bjcp-2015-styleguide-de-edit.html
+ @xsltproc --stringparam edit yes --stringparam orig bjcp-2015-styleguide-orig.xml xsl/bjcp-2015-styleguide-html.xsl bjcp-2015-styleguide-de.xml > bjcp-2015-styleguide-de-edit.html
@echo "built $@"
format:
@@ -48,6 +48,9 @@ check: bjcp-2015-styleguide-orig.xml bjcp-2015-styleguide-de.xml
@xmllint --noout --schema xsd/bjcp-styleguide-2015.xsd bjcp-2015-styleguide-orig.xml
@xmllint --noout --schema xsd/bjcp-styleguide-2015.xsd bjcp-2015-styleguide-de.xml
+install: bjcp-2015-styleguide-de-edit.html
+ scp bjcp-2015-styleguide-de-edit.html web/bjcp-styleguide.css web/edit-bjcp.js web/edit.css web/edit.js web/pell.css web/pell.js z:/var/www/bjcp-styleguide/
+
clean:
@rm -rf orig
@rm -f bjcp-2015-styleguide-orig.xml
diff --git a/de/1.xml b/de/1.xml
index 2949761..087f6cc 100644
--- a/de/1.xml
+++ b/de/1.xml
@@ -3,8 +3,7 @@
<category id="1">
<name>Standard American Beer</name>
<description>
- <p>Diese Kathegorie beschreibt weit verbreitete Amerikanische "every day" Biere. Mit sowol Ales als auch Lager, sind Biere dieser Kathegorie typischer weise nicht komplex und haben weiche u. gefällige Aromen. Die Ales sind in der Regel Lager ähnlich, oder designed um den Massenmarkt-Lagerbier-Trinker als crossover Bier zu gefallen. Massen-Markt Biere mit internationalem Geschmack oder Herkunft sind in der Kathegorie International Lager beschrieben.
- </p>
+ <p>Diese Kathegorie beschreibt weit verbreitete Amerikanische "every day" Biere. Mit sowol Ales als auch Lager, sind Biere dieser Kathegorie typischer weise nicht komplex und haben weiche u. gefällige Aromen. Die Ales sind in der Regel Lager ähnlich, oder designed um den Massenmarkt-Lagerbier-Trinker als crossover Bier zu gefallen. Massen-Markt Biere mit internationalem Geschmack oder Herkunft sind in der Kathegorie International Lager beschrieben.</p>
</description>
</category>
</styleguide>
diff --git a/web/bjcp-styleguide.css b/web/bjcp-styleguide.css
index cef49fb..3fa418e 100644
--- a/web/bjcp-styleguide.css
+++ b/web/bjcp-styleguide.css
@@ -1,11 +1,15 @@
styleguide {
font-family: Helvetica, Arial, Geneva, sans-serif;
+/*
font-size: 8pt;
+*/
}
styleguide chapter table {
+/*
font-size: 8pt;
+*/
}
styleguide p.list-item {
@@ -13,7 +17,9 @@ styleguide p.list-item {
}
styleguide category, styleguide subcategory {
+/*
font-size: 9pt;
+*/
margin-top:1em;
margin-bottom:1em;
margin-left:0em;
@@ -45,7 +51,9 @@ styleguide name {
margin-bottom:1em;
}
styleguide description {
+/*
font-size: 8pt;
+*/
margin-left:1em;
display: block;
}
@@ -113,7 +121,9 @@ styleguide strength-classifications {
position: relative;
margin-left: 1em;
display: block;
+/*
font-size: 8pt;
+*/
}
styleguide overall-impression:before,
styleguide aroma:before,
@@ -151,6 +161,7 @@ styleguide specs div {
display: inline-block;
}
styleguide specs div * {
+ padding: 1px 4px;
border: 1px solid;
display: inline-block;
width: 9em;
diff --git a/web/edit.css b/web/edit.css
index 5d9a0af..96e48d4 100644
--- a/web/edit.css
+++ b/web/edit.css
@@ -16,7 +16,9 @@ div#editor {
right: 0;
text-align: center;
font-family: Helvetica, Arial, Geneva, sans-serif;
+/*
font-size: 8pt;
+*/
}
div#editor-inner {
text-align: left;
@@ -32,12 +34,23 @@ div#editor-inner input {
}
div#markup {
font-family: courier;
+/*
font-size: 7pt;
+*/
}
div#render {
+/*
font-size: 7pt;
+*/
+}
+div#original {
+ margin:10px;
}
*[onclick] {
cursor: pointer;
}
+
+*[orig='true'] {
+ display:none;
+}
\ No newline at end of file
diff --git a/web/edit.js b/web/edit.js
index 5ad2141..4d1ed6f 100644
--- a/web/edit.js
+++ b/web/edit.js
@@ -2,10 +2,15 @@
const editor = document.getElementById("editor");
const pell = window.pell;
const pelleditor = document.getElementById("pelleditor");
+const original = document.getElementById("original");
const markup = document.getElementById("markup");
+const render = document.getElementById("render");
+
+var tagname;
pell.init({
element: pelleditor,
+ defaultParagraphSeparator: "p",
actions: [
'bold',
'italic',
@@ -17,10 +22,9 @@ pell.init({
if (idref) {
var selection = document.getSelection();
if (selection == "") {
- text = window.prompt('Enter link text (optional)');
+ text = window.prompt('Enter visible link text');
pell.exec('insertHTML', '<a href="#' + idref + '">' + text + '</a>');
} else {
- //pell.exec('insertHTML', '<a idref="#' + idref + '">' + text + '</a>');
pell.exec('createLink', "#" + idref);
}
}
@@ -31,7 +35,7 @@ pell.init({
icon: '<div style="background-color:pink;">save</div>',
title: 'save',
result: () => {
- editor.style.display = "none";
+ dosave();
}
},
{
@@ -39,26 +43,60 @@ pell.init({
icon: '<div style="background-color:pink;">cancel</div>',
title: 'cancel',
result: () => {
- editor.style.display = "none";
+ docancel();
}
},
],
onChange: (html) => {
- x = html;
- x = x.replace(/ /g, " ");
- x = x.replace(/<div>/g, " ");
- x = x.replace(/<\/div>/g, " ");
- x = x.replace(/<br>/g, " ");
- x = x.replace(/ */g, " ");
- markup.innerText = x;
- render.innerHTML = x;
+ x = html;
+ x = x.replace(/ /g, " ");
+ if (tagname != "description") {
+ x = x.replace(/<p>/g, " ");
+ x = x.replace(/<\/p>/g, " ");
+ }
+ x = x.replace(/<br>/g, " ");
+ x = x.replace(/ */g, " ");
+ x = x.replace(/^ */,"");
+ x = x.replace(/ *$/,"");
+ if (markup) {
+ markup.innerText = x;
+ }
+ if (render) {
+ render.innerHTML = x;
+ }
}
})
function doedit(elem) {
- pelleditor.content.innerHTML = elem.innerHTML;
- editor.style.display = "block";
- markup.innerText = elem.innerHTML;
- render.innerHTML = elem.innerHTML;
+ tagname = elem.tagName.toLowerCase();
+ t = elem.innerHTML;
+ t = t.replace(/^ */,"");
+ t = t.replace(/ *$/,"");
+ t = t.replace(/ */g, " ");
+ if (tagname != "description") {
+ t = t.replace(/<p>/g, " ");
+ t = t.replace(/<\/p>/g, " ");
+ }
+ pelleditor.content.innerHTML = t;
+ origelem = elem.nextSibling;
+ if (origelem) {
+ original.innerHTML = origelem.innerHTML;
+ }
+ if (markup) {
+ markup.innerText = elem.innerHTML;
+ }
+ if (render) {
+ render.innerHTML = elem.innerHTML;
+ }
+ editor.style.display = "block";
+ pelleditor.content.focus();
+
+}
+
+function docancel() {
+ editor.style.display = "none";
}
+function dosave() {
+ editor.style.display = "none";
+}
\ No newline at end of file
diff --git a/web/pell.js b/web/pell.js
index 36e2c22..c4f9024 100644
--- a/web/pell.js
+++ b/web/pell.js
@@ -173,10 +173,14 @@ var init = function init(settings) {
content.oninput = function (_ref) {
var firstChild = _ref.target.firstChild;
- if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
+ //if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
+ if (content.innerHTML === '<br>') content.innerHTML = '';
settings.onChange(content.innerHTML);
};
content.onkeydown = function (event) {
+ if (event.key === "Escape") {
+ docancel();
+ }
if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
setTimeout(function () {
return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
diff --git a/xsl/bjcp-2015-styleguide-html.xsl b/xsl/bjcp-2015-styleguide-html.xsl
index 12483af..d7854c3 100644
--- a/xsl/bjcp-2015-styleguide-html.xsl
+++ b/xsl/bjcp-2015-styleguide-html.xsl
@@ -8,6 +8,7 @@
<xsl:param name="edit">no</xsl:param>
+ <xsl:param name="orig"></xsl:param>
@@ -44,11 +45,16 @@
<xsl:if test="not($edit = 'no')">
<div id="editor">
<div id="editor-inner">
+ <div>You are editing the translation of the following original text:
+ <div id="original"></div>
+ </div>
Your Author ID: <input type="text" name="author" id="author" />
<div id="pelleditor"></div>
</div>
<div>Markup:<div id="markup"></div></div>
+ <!--
<div>Preview:<div id="render"></div></div>
+ -->
</div>
<div/>
<xsl:element name="script">
@@ -167,7 +173,13 @@
<xsl:template match="bjcp:name|bjcp:description|bjcp:overall-impression|bjcp:aroma|bjcp:appearance|bjcp:flavor|bjcp:mouthfeel|bjcp:comments|bjcp:history|bjcp:characteristic-ingredients|bjcp:style-comparison|bjcp:entry-instructions|bjcp:commercial-examples" mode="copy">
- <xsl:element name="{local-name(.)}">
+ <xsl:variable name="name">
+ <xsl:value-of select="local-name(.)"/>
+ </xsl:variable>
+ <xsl:variable name="idref">
+ <xsl:value-of select="../@id"/>
+ </xsl:variable>
+ <xsl:element name="{$name}">
<xsl:apply-templates select="@*" mode="copy"/>
<xsl:if test="not($edit = 'no')">
<xsl:attribute name="onclick">
@@ -176,6 +188,14 @@
</xsl:if>
<xsl:apply-templates mode="copy"/>
</xsl:element>
+ <xsl:if test="$orig">
+ <xsl:variable name="orignode" select="document(concat('../',$orig))/bjcp:styleguide//bjcp:*[@id=$idref]/bjcp:*[local-name(.) = $name]"/>
+ <xsl:element name="{$name}">
+ <xsl:apply-templates select="$orignode/@*" mode="copy"/>
+ <xsl:attribute name="orig">true</xsl:attribute>
+ <xsl:apply-templates select="$orignode/* | $orignode/text()" mode="copy"/>
+ </xsl:element>
+ </xsl:if>
</xsl:template>
diff --git a/xsl/bjcp-2015-styleguide-status.xsl b/xsl/bjcp-2015-styleguide-status.xsl
index 22cf224..72ea8e5 100644
--- a/xsl/bjcp-2015-styleguide-status.xsl
+++ b/xsl/bjcp-2015-styleguide-status.xsl
@@ -5,11 +5,13 @@
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:exsl="http://exslt.org/common"
xmlns:dyn="http://exslt.org/dynamic"
- extension-element-prefixes="exsl dyn">
+ xmlns:str="http://exslt.org/strings"
+ extension-element-prefixes="exsl dyn str">
<xsl:param name="lang">de</xsl:param>
+ <xsl:param name="details">yes</xsl:param>
@@ -24,6 +26,41 @@
+ <xsl:template match="bjcp:styleguide">
+ <xsl:if test="$details = 'yes'">
+ <xsl:apply-templates select="@*"/>
+ <xsl:apply-templates/>
+ </xsl:if>
+
+ <xsl:variable name="list">
+ <xsl:apply-templates/>
+ </xsl:variable>
+ <xsl:variable name="total">
+ <xsl:value-of select="translate($list,'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789:- 
','')"/>
+ </xsl:variable>
+ <xsl:variable name="done">
+ <xsl:value-of select="translate($total,'_','')"/>
+ </xsl:variable>
+ <xsl:variable name="files">
+ <xsl:value-of select="translate($list,'
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789:- #_','*')"/>
+ </xsl:variable>
+ <xsl:text>
+Translated </xsl:text>
+ <xsl:value-of select="string-length($done)"/>
+ <xsl:text> of </xsl:text>
+ <xsl:value-of select="string-length($total)"/>
+ <xsl:text> elements (</xsl:text>
+ <xsl:value-of select="round(string-length($done) div string-length($total) * 100)"/>
+ <xsl:text>%) in </xsl:text>
+ <xsl:value-of select="string-length($files)"/>
+ <xsl:text> files.
+</xsl:text>
+ <xsl:value-of select="$filesdone"/>
+
+ </xsl:template>
+
+
+
<xsl:template match="bjcp:chapter">
<xsl:variable name="d">
<xsl:text>../</xsl:text>
@@ -163,11 +200,11 @@
<xsl:apply-templates select="@*"/>
<xsl:choose>
<xsl:when test="dyn:evaluate($p)">
- <xsl:text>+</xsl:text>
+ <xsl:text>#</xsl:text>
<xsl:apply-templates select="dyn:evaluate($p)/* | dyn:evaluate($p)/text()"/>
</xsl:when>
<xsl:otherwise>
- <xsl:text>-</xsl:text>
+ <xsl:text>_</xsl:text>
<xsl:apply-templates/>
</xsl:otherwise>
</xsl:choose>
--
GitLab