[Libreoffice-commits] dev-tools.git: help3/html
Libreoffice Gerrit user
logerrit at kemper.freedesktop.org
Thu Dec 27 18:30:24 UTC 2018
help3/html/README-EDITOR.txt | 66 ++++++++++++++++++++++++++++++++++++
help3/html/ed_transform.xsl | 78 ++++++++++++++++++++++---------------------
help3/html/index.php | 51 +++++++++++++++-------------
help3/html/snippets.js | 52 +++++++++++++++++++++++++---
help3/html/xhpeditor.css | 30 +++++++++++-----
5 files changed, 202 insertions(+), 75 deletions(-)
New commits:
commit 0276c488c95aa81c560945a154bc73692374bd5c
Author: Olivier Hallot <olivier.hallot at libreoffice.org>
AuthorDate: Thu Dec 27 11:02:02 2018 -0200
Commit: Olivier Hallot <olivier.hallot at libreoffice.org>
CommitDate: Thu Dec 27 19:30:07 2018 +0100
XLST and CSS adjustments for XHP-editor
based on recent developments of main Help
Change-Id: Ic36d7846d4222b531a3239bf5354be2e34ec22d1
Reviewed-on: https://gerrit.libreoffice.org/65641
Reviewed-by: Olivier Hallot <olivier.hallot at libreoffice.org>
Tested-by: Olivier Hallot <olivier.hallot at libreoffice.org>
diff --git a/help3/html/README-EDITOR.txt b/help3/html/README-EDITOR.txt
new file mode 100644
index 0000000..cedbb3f
--- /dev/null
+++ b/help3/html/README-EDITOR.txt
@@ -0,0 +1,66 @@
+This file explains how to install the XHP online editor and give some hints
+
+To clone the editor
+-------------------
+git clone https://gerrit.libreoffice.org/dev-tools dev-tools
+
+The editor is in folder
+
+dev-tools/help3/html/
+
+To clone the HelpContents2 submodule
+-------------------------------------
+git clone https://gerrit.libreoffice.org/help helpcontent2
+
+all help files are in helpcontent2/ folder
+
+Other services
+--------------
+A) A working apache or nginx webserver at http://localhost
+b) PHP support for apache
+
+Setup
+-----
+
+1) change to the editor folder
+
+cd <location>/dev-tools/help3/html
+
+2) Set a symbolic link to helpcontent2
+
+ln -s <location>/helcontent2 hc2
+
+this will make a symbolic link between hc2 -> <location>/helpcontent2
+
+3) Set a symbolic link to the core repo
+
+ln -s <location>/core core
+
+This will make a symbolic link between core -> <location>/core
+Note: the core/ link is needed to get the colibre_svg/ icon theme
+
+4) Web server
+
+As root/admin execute a symbolic link
+
+cd /var/www/html
+ln -s <location>/dev-tools/help3/html ed
+
+this will create a symbolic link /var/www/html/ed -> <location>/dev-tools/help3/html
+
+Running the editor
+------------------
+
+point the browser to
+
+http://localhost/ed/index.php
+
+Open XHP file
+-------------
+
+type 'source/text/shared/main0108.xhp' and click Open file to load the file in the editor
+
+Render the edited XHP
+--------------------
+
+click on 'Render file' to see the XHP page rendered on the right pane.
diff --git a/help3/html/ed_transform.xsl b/help3/html/ed_transform.xsl
index d2223d1..8e045cb 100644
--- a/help3/html/ed_transform.xsl
+++ b/help3/html/ed_transform.xsl
@@ -135,15 +135,6 @@
<html lang="{$lang}">
<head>
<base href="{$install}"/>
- <link rel="shortcut icon" href="{$source}media/navigation/favicon.ico" />
- <link type="text/css" href="{$source}help3xsl/normalize.css" rel="Stylesheet" />
- <link type="text/css" href="{$source}help3xsl/default.css" rel="Stylesheet" />
- <link type="text/css" href="{$source}help3xsl/prism.css" rel="Stylesheet" />
- <script type="text/javascript" src="{$source}help3xsl/help2.js"></script>
-
- <script type="text/javascript" src="{$source}help3xsl/fuzzysort.js"></script>
- <script type="text/javascript" src="{$source}help3xsl/paginathing.js"></script>
- <script type="text/javascript" src="{$source}help3xsl/prism.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
</head>
<body itemscope="true" itemtype="http://schema.org/TechArticle">
@@ -169,7 +160,6 @@
</div>
</footer>
</div>
- <script type="text/javascript" src="{$target}help.js"/>
<xsl:choose>
<xsl:when test="$online">
<script type="text/javascript">
@@ -371,35 +361,35 @@
<!-- LIST -->
<xsl:template match="list">
- <xsl:choose>
- <xsl:when test="@type='ordered'">
- <ol>
- <xsl:if test="@startwith">
- <xsl:attribute name="start"><xsl:value-of select="@startwith"/></xsl:attribute>
- </xsl:if>
- <xsl:apply-templates />
- </ol>
- </xsl:when>
- <xsl:otherwise>
- <ul><xsl:apply-templates /></ul>
- </xsl:otherwise>
- </xsl:choose>
+ <xsl:choose>
+ <xsl:when test="@type='ordered'">
+ <ol>
+ <xsl:if test="@startwith">
+ <xsl:attribute name="start"><xsl:value-of select="@startwith"/></xsl:attribute>
+ </xsl:if>
+ <xsl:apply-templates />
+ </ol>
+ </xsl:when>
+ <xsl:otherwise>
+ <ul><xsl:apply-templates /></ul>
+ </xsl:otherwise>
+ </xsl:choose>
</xsl:template>
<xsl:template match="list" mode="embedded">
- <xsl:choose>
- <xsl:when test="@type='ordered'">
- <ol>
- <xsl:if test="@startwith">
- <xsl:attribute name="start"><xsl:value-of select="@startwith"/></xsl:attribute>
- </xsl:if>
- <xsl:apply-templates mode="embedded"/>
- </ol>
- </xsl:when>
- <xsl:otherwise>
- <ul><xsl:apply-templates mode="embedded"/></ul>
- </xsl:otherwise>
- </xsl:choose>
+ <xsl:choose>
+ <xsl:when test="@type='ordered'">
+ <ol>
+ <xsl:if test="@startwith">
+ <xsl:attribute name="start"><xsl:value-of select="@startwith"/></xsl:attribute>
+ </xsl:if>
+ <xsl:apply-templates mode="embedded"/>
+ </ol>
+ </xsl:when>
+ <xsl:otherwise>
+ <ul><xsl:apply-templates mode="embedded"/></ul>
+ </xsl:otherwise>
+ </xsl:choose>
</xsl:template>
<!-- LISTITEM -->
@@ -436,7 +426,7 @@
</xsl:call-template>
</xsl:when>
- <xsl:when test="contains(' note warning tip ', at role)">
+ <xsl:when test="@role='note' or @role='tip' or @role='warning'">
<xsl:call-template name="insertnote">
<xsl:with-param name="type" select="@role" />
</xsl:call-template>
@@ -450,6 +440,10 @@
<xsl:value-of select="." />
</xsl:when>
+ <xsl:when test="@role='smathcode'">
+ <p id="{@id}" class="smathcode"><span class="input" data-tooltip="{$ui_copyclip}"><xsl:apply-templates /></span></p>
+ </xsl:when>
+
<xsl:when test="@role='logocode'">
<xsl:call-template name="insertlogocode" />
</xsl:when>
@@ -477,7 +471,7 @@
</xsl:call-template>
</xsl:when>
- <xsl:when test="contains(' note warning tip ', at role)">
+ <xsl:when test="@role='note' or @role='tip' or @role='warning'">
<xsl:call-template name="insertnote">
<xsl:with-param name="type" select="@role" />
</xsl:call-template>
@@ -487,6 +481,14 @@
<xsl:apply-templates />
</xsl:when>
+ <xsl:when test="@role='bascode' or @role='pycode'">
+ <xsl:value-of select="." />
+ </xsl:when>
+
+ <xsl:when test="@role='smathcode'">
+ <p id="{@id}" class="smathcode"><span class="input" data-tooltip="{$ui_copyclip}"><xsl:apply-templates /></span></p>
+ </xsl:when>
+
<xsl:otherwise>
<xsl:call-template name="insertpara" />
</xsl:otherwise>
diff --git a/help3/html/index.php b/help3/html/index.php
index 1c549cb..a92aca1 100644
--- a/help3/html/index.php
+++ b/help3/html/index.php
@@ -14,6 +14,8 @@
<link rel="stylesheet" href="xhpeditor.css">
<link rel="stylesheet" href="lib/codemirror.css">
<link rel="stylesheet" href="addon/hint/show-hint.css">
+ <link rel="stylesheet" href="/ed/hc2/help3xsl/normalize.css">
+ <link rel="stylesheet" href="/ed/hc2/help3xsl/prism.css">
<script type="text/javascript" src="lib/codemirror.js"></script>
<script type="text/javascript" src="addon/hint/show-hint.js"></script>
@@ -21,6 +23,7 @@
<script type="text/javascript" src="mode/xml/xml.js"></script>
<script type="text/javascript" src="xhp2html.js"></script>
<script type="text/javascript" src="/ed/hc2/help3xsl/help2.js"></script>
+ <script type="text/javascript" src="/ed/hc2/help3xsl/prism.js"></script>
</head>
<body style="font-family:sans-serif;">
@@ -30,67 +33,70 @@
<textarea id="xhpeditor"></textarea>
</form>
<br />
- <div><div class="snip_div">Actions:</div>
+ <div class="snip_heading"><div class="snip_div">Actions:</div>
<p>File name: <input type="text" id="01" name="filename" value="test.xhp"/><button onclick="loadText(document.getElementById('01').value);">Open File</button></p>
<p>File name: <input type="text" id="02" name="filename" value="test.xhp"/><button onclick="alert('Not yet implemented');">Save Changes</button><button onclick="displayResult()">Render page</button></p>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Edit:</div>
+ <div class="snip_heading"><div class="snip_div">Edit:</div>
<button onclick="editor.undo()">Undo</button>
<button onclick="editor.redo()">Redo</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Document:</div>
+ <div class="snip_heading"><div class="snip_div">Document:</div>
<button onclick="startNewXHPDoc()" class="snip_buttons">Start new XHP document</button>
<button onclick="docHeading()" class="snip_buttons">DocHeading</button>
<button onclick="snippet7()" class="snip_buttons">ahelp</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Bookmarks:</div>
- <button onclick="bookmarkValue()" class="snip_buttons">bookmark-value</button>
- <button onclick="bookmarkBranch()" class="snip_buttons">bookmark-hid</button>
- <button onclick="bookmarkIndex()" class="snip_buttons">bookmark-index</button>
- <button onclick="bookmarkNoWidget()" class="snip_buttons">bookmark-nowidget</button>
+ <div class="snip_heading"><div class="snip_div">Bookmarks: </div>
+ <button onclick="bookmarkValue()" class="snip_buttons">bk-value</button>
+ <button onclick="bookmarkBranch()" class="snip_buttons">bk-hid</button>
+ <button onclick="bookmarkIndex()" class="snip_buttons">bk-index</button>
+ <button onclick="bookmarkNoWidget()" class="snip_buttons">bk-nowidget</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Sections:</div>
+ <div class="snip_heading"><div class="snip_div">Sections: </div>
+ <button onclick="section_div()" class="snip_buttons">Section</button>
<button onclick="related_topics()" class="snip_buttons">Related Topics</button>
<button onclick="howtoget()" class="snip_buttons">How to get</button>
<button onclick="bascode_div()" class="snip_buttons">bascode div</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Tables:</div>
+ <div class="snip_heading"><div class="snip_div">Tables:</div>
<button onclick="table2R3C()" class="snip_buttons">Table Full</button>
<button onclick="tableRow()" class="snip_buttons">TableRow</button>
<button onclick="tableCell()" class="snip_buttons">Table Cell</button>
<button onclick="iconTable()" class="snip_buttons">Icon Table</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Paragraph:</div>
+ <div class="snip_heading"><div class="snip_div">Paragraph:</div>
<button onclick="paragraph('paragraph')" class="snip_buttons">paragraph</button>
- <button onclick="paragraph('note')" class="snip_buttons">note</button>
- <button onclick="paragraph('warning')" class="snip_buttons">warning</button>
- <button onclick="paragraph('tip')" class="snip_buttons">tip</button>
+ <button onclick="note()" class="snip_buttons">note</button>
+ <button onclick="warning()" class="snip_buttons">warning</button>
+ <button onclick="tip()" class="snip_buttons">tip</button>
<button onclick="bascode_par()" class="snip_buttons">bascode-par</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Characters:</div>
+ <div class="snip_heading"><div class="snip_div">Characters:</div>
<button onclick="emph()" class="snip_buttons">emph</button>
- <button onclick="item('menuitem')" class="snip_buttons">item menuitem</button>
- <button onclick="item('input')" class="snip_buttons">item input</button>
- <button onclick="item('literal')" class="snip_buttons">item literal</button>
+ <button onclick="c_menuitem()" class="snip_buttons">menuitem</button>
+ <button onclick="_input()" class="snip_buttons">input</button>
+ <button onclick="_literal()" class="snip_buttons">literal</button>
+ <button onclick="_keystroke()" class="snip_buttons">keystroke</button>
+ <button onclick="_widget()" class="snip_buttons">widget</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Headings:</div>
+ <div class="snip_heading"><div class="snip_div">Headings:</div>
<button onclick="heading('1')" class="snip_buttons">H1</button>
<button onclick="heading('2')" class="snip_buttons">H2</button>
<button onclick="heading('3')" class="snip_buttons">H3</button>
<button onclick="heading('4')" class="snip_buttons">H4</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Switches:</div>
+ <div class="snip_heading"><div class="snip_div">Switches:</div>
<button onclick="switchXHP('appl')" class="snip_buttons">Switch appl</button>
<button onclick="switchXHP('sys')" class="snip_buttons">Switch sys</button>
<button onclick="switchInline('appl')" class="snip_buttons">Switchinline appl</button>
<button onclick="switchInline('sys')" class="snip_buttons">Switchinline sys</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Lists:</div>
+ <div class="snip_heading"><div class="snip_div">Lists:</div>
<button onclick="tList('unordered')" class="snip_buttons">UL</button>
<button onclick="tList('ordered')" class="snip_buttons">OL</button>
<button onclick="listItem()" class="snip_buttons">List Item</button>
</div>
- <div style="margin-top:10px;"><div class="snip_div">Links:</div>
+ <div class="snip_heading"><div class="snip_div">Links:</div>
<button onclick="tVariable()" class="snip_buttons">Variable</button>
<button onclick="tEmbed()" class="snip_buttons">Embed</button>
<button onclick="tEmbedvar()" class="snip_buttons">Embedvar</button>
@@ -102,6 +108,7 @@
<div id="renderedpage"></div>
</div>
</body>
+<script type="text/javascript" src="/ed/hc2/help3xsl/help.js"></script>
<!--<script type="text/javascript" src="xhp2html.js"></script>-->
<script type="text/javascript" src="autocomplete.js"></script>
<script type="text/javascript" src="snippets.js"></script>
diff --git a/help3/html/snippets.js b/help3/html/snippets.js
index 891ae4e..c8d5309 100644
--- a/help3/html/snippets.js
+++ b/help3/html/snippets.js
@@ -27,19 +27,37 @@ function docHeading() {
// Paragraph
function paragraph(role) {
- var a0 = '<paragraph role="'+ role + '" id="' + random('par') + '" xml-lang="en-US">'
+ var a0 = '<paragraph role="'+ role + '" id="' + random('par') + '">'
var a1 = '</paragraph>\n';
editor.replaceSelection(a0 + editor.doc.getSelection() + a1,'');
}
+function note() {
+ var a0 = '<note id="' + random('par') + '">'
+ var a1 = '</note>\n';
+ editor.replaceSelection(a0 + editor.doc.getSelection() + a1,'');
+}
+
+function tip() {
+ var a0 = '<tip id="' + random('par') + '">'
+ var a1 = '</tip>\n';
+ editor.replaceSelection(a0 + editor.doc.getSelection() + a1,'');
+}
+
+function warning() {
+ var a0 = '<warning id="' + random('par') + '">'
+ var a1 = '</warning>\n';
+ editor.replaceSelection(a0 + editor.doc.getSelection() + a1,'');
+}
+
function heading(level) {
- var a0 = '<paragraph level="'+ level +'" role="heading" id="' + random('hd') + '" xml-lang="en-US">'
- var a1 = '</paragraph>\n';
+ var a0 = '<h'+ level +' id="' + random('hd') + '">'
+ var a1 = '</h' + level+'>\n';
editor.replaceSelection(a0 + editor.doc.getSelection() + a1,'');
}
function bascode_par() {
- var a1 = '<paragraph role="bascode" id="' + random('bas') + '" xml-lang="en-US">';
+ var a1 = '<paragraph role="bascode" id="' + random('bas') + '">';
var a2 = '</paragraph>\n';
editor.replaceSelection(a1 + editor.doc.getSelection() + a2,'');
}
@@ -47,13 +65,13 @@ function bascode_par() {
// Tables
// simple table cell
function tCell (role){
- return ' <tablecell>\n <paragraph id="' + random('par') + '" role="' + role + '" xml-lang="en-US" ></paragraph>\n </tablecell>\n';
+ return ' <tablecell>\n <paragraph id="' + random('par') + '" role="' + role + '"></paragraph>\n </tablecell>\n';
}
function iconTable() {
var a1 = '<table id="' + random('tab') + '">\n <tablerow>\n <tablecell>\n ';
- var a2 = '<paragraph id=" ' + random('par')+ '" lang="en-US" localize="false">\n ';
+ var a2 = '<paragraph id=" ' + random('par')+ '" localize="false">\n ';
var a3 = '<image >CHANGE ME</image>\n </paragraph>\n </tablecell>\n' + tCell();
var a4 = '\n </tablerow>\n</table>\n';
editor.replaceRange(a1 + a2 + a3 + a4, editor.doc.getCursor());
@@ -88,6 +106,13 @@ function bascode_div() {
editor.replaceRange('<bascode>\n \n</bascode>\n', editor.doc.getCursor());
}
+function pycode_div() {
+ editor.replaceRange('<pycode>\n \n</pycode>\n', editor.doc.getCursor());
+}
+
+function section_div() {
+ editor.replaceRange('<section id="CHANGE ME">\n \n</section>\n', editor.doc.getCursor());
+}
// Bookmarks
function aHelp() {
editor.replaceRange('<ahelp hid="HID PATH ME" visibility="hidden">'+ editor.doc.getSelection() +'</ahelp>', editor.doc.getCursor());
@@ -123,6 +148,21 @@ function item(type) {
editor.replaceSelection('<item type="'+ type + '">'+ editor.doc.getSelection() +'</item>','');
}
+function c_menuitem() {
+ editor.replaceSelection('<menuitem>'+ editor.doc.getSelection() +'</menuitem> ','');
+}
+function _literal() {
+ editor.replaceSelection('<literal>'+ editor.doc.getSelection() +'</literal>','');
+}
+function _keystroke() {
+ editor.replaceSelection('<keystroke>'+ editor.doc.getSelection() +'</keystroke>','');
+}
+function _input() {
+ editor.replaceSelection('<input>'+ editor.doc.getSelection() +'</input>','');
+}
+function _widget() {
+ editor.replaceSelection('<widget>'+ editor.doc.getSelection() +'</widget>','');
+}
// switches
function switchXHP(type) {
diff --git a/help3/html/xhpeditor.css b/help3/html/xhpeditor.css
index bff63de..542d2f2 100644
--- a/help3/html/xhpeditor.css
+++ b/help3/html/xhpeditor.css
@@ -19,6 +19,9 @@
display:inline-block;
width:5em;
}
+.snip_heading{
+ margin-top:10px;
+}
.leftside{
top: 0%;
@@ -39,10 +42,16 @@
border:1px solid grey;
}
-// Imported from default.css for DisplayArea
+/* Imported from default css for DisplayArea */
+
+#renderedpage {
+ background-color: gray;
+ margin: 10px;
+ line-height: normal;
+}
#DisplayArea {
- background-color: #FCFCFC;
+ background-color: white;
overflow: auto;
padding: 10px;
grid-area: main;
@@ -59,20 +68,17 @@
.listitem,
.listitemintable,
.paragraph,
-.tablecontent,
-.input {
+.tablecontent {
font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
}
.input {
+ background-color: rgba(0,0,0,0.04);
transition-property: background-color;
transition-duration: 150ms;
border-bottom: 1px dashed rgba(0,0,0,0.1);
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
}
-#renderedpage {
- background-color: #F4F7F7;
- margin: 10px;
- line-height: normal;
-}
+
#DisplayArea ::selection {
background: #BFFFB7;
}
@@ -99,6 +105,12 @@
padding: 1px 3px;
font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
}
+.smathcode {
+ border-radius: 2px;
+ padding: 1px 3px;
+ font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+}
+
.acronym {
font-weight: bold;
}
More information about the Libreoffice-commits
mailing list