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 <[email protected]> AuthorDate: Thu Dec 27 11:02:02 2018 -0200 Commit: Olivier Hallot <[email protected]> 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 <[email protected]> Tested-by: Olivier Hallot <[email protected]> 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 ',@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 ',@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; } _______________________________________________ Libreoffice-commits mailing list [email protected] https://lists.freedesktop.org/mailman/listinfo/libreoffice-commits
