Skip to content

Instantly share code, notes, and snippets.

@wsalesky

wsalesky/desc.xhtml

Last active March 8, 2024 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wsalesky/714678401aead851173c728b6f271c44 to your computer and use it in GitHub Desktop.
Save wsalesky/714678401aead851173c728b6f271c44 to your computer and use it in GitHub Desktop.
Download ZIP
TinyMCE XSLTForms nested repeats
Raw
desc.xhtml
<?xml-stylesheet href="xsl/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:rte="http://www.agencexml.com/xsltforms/rte" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsltforms="http://www.agencexml.com/xsltforms" lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"/>
<title>TinyMCE Support</title>
<style type="text/css">
.large-textarea textarea {
font-family: Courier, sans-serif;
height: 10em;
width: 500px;
}</style>
<script type="text/javascript" src="/exist/apps/xsltforms/scripts/tinymce_4.7.1/tinymce.min.js" data-uri="http://www.tinymce.com" data-version="4.7.1">/* */</script>
<model xmlns="http://www.w3.org/2002/xforms">
<schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.agencexml.com/xsltforms/rte">
<simpleType name="standardHTML">
<restriction xmlns:xforms="http://www.w3.org/2002/xforms" xforms:xmlns="http://www.w3.org/2002/xforms" base="xforms:HTMLFragment" xsltforms:rte="TinyMCE"/>
<annotation>
<appinfo> { plugins: [ "advlist autolink lists link image charmap print
preview anchor", "searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste" ], toolbar: "insertelema
insertelemb | insertfile undo redo | styleselect | bold italic |
alignleft aligncenter alignright alignjustify | bullist numlist outdent
indent | link image", custom_elements: "~elem-a,~elem-b", content_style:
"elem-a {color: red; border-style: solid;} elem-b {color: blue;
border-style: solid;}", valid_elements: "p,i,strong,em,elem-a,elem-b",
setup: function(editor) { function insertElem(gi) { var s = "&lt;" + gi
+ "&gt;" + editor.selection.getContent() + "&lt;/" + gi + "&gt;";
editor.insertContent(s); } editor.addButton("insertelema", { text:
"elem-a", onclick: function() { insertElem("elem-a"); }, tooltip:
"Insert elem-a (red)" }); editor.addButton("insertelemb", { text:
"elem-b", onclick: function() { insertElem("elem-b"); }, tooltip:
"Insert elem-b (blue)" }); } } </appinfo>
</annotation>
</simpleType>
</schema>
<xf:instance id="i-rec">
<data xmlns="http://www.tei-c.org/ns/1.0">
<div1>
<div2>
<desc>level2 Test desc Element</desc>
<desc>level2 Test desc Element</desc>
<div3>
<desc>level3 Test desc Element</desc>
<div4>
<desc> level4 Test desc Element</desc>
</div4>
</div3>
<div3>
<desc>level3 Test desc Element</desc>
</div3>
</div2>
</div1>
</data>
</xf:instance>
<xf:instance id="i-insert">
<data xmlns="http://www.tei-c.org/ns/1.0">
<desc>Test inserts</desc>
</data>
</xf:instance>
<bind nodeset="instance('i-rec')/descendant::*:desc" type="rte:standardHTML"/>
</model>
</head>
<body>
<h4>Test nested repeat</h4>
<xf:repeat xmlns="http://www.w3.org/2002/xforms" ref="instance('i-rec')//*:div1">
<xf:trigger xmlns="http://www.w3.org/2002/xforms" class="btn btn-outline-secondary btn-sm controls add" appearance="minimal">
<xf:label>
<i class="bi bi-plus"/> Add field level 1
</xf:label>
<xf:insert ev:event="DOMActivate" context="." at="." origin="instance('i-insert')//*:desc[1]" position="after"/>
</xf:trigger>
<h4 xmlns="http://www.w3.org/1999/xhtml">level 1</h4>
<xf:repeat xmlns="http://www.w3.org/2002/xforms" ref="*:desc">
<xf:textarea ref="." class="large-textarea" mediatype="application/xhtml+xml"/>
</xf:repeat>
<xf:repeat ref="*:div2">
<h4 xmlns="http://www.w3.org/1999/xhtml">level 2</h4>
<xf:trigger xmlns="http://www.w3.org/2002/xforms" class="btn btn-outline-secondary btn-sm controls add" appearance="minimal">
<xf:label>
<i class="bi bi-plus"/> Add field level 2
</xf:label>
<xf:insert ev:event="DOMActivate" context="." at="." origin="instance('i-insert')//*:desc[1]" position="after"/>
</xf:trigger>
<xf:repeat xmlns="http://www.w3.org/2002/xforms" ref="*:desc">
<xf:textarea ref="." class="large-textarea" mediatype="application/xhtml+xml"/>
</xf:repeat>
<xf:repeat ref="*:div3">
<h4 xmlns="http://www.w3.org/1999/xhtml">level 3</h4>
<xf:repeat xmlns="http://www.w3.org/2002/xforms" ref="*:desc">
<xf:textarea ref="." class="large-textarea" mediatype="application/xhtml+xml"/>
</xf:repeat>
</xf:repeat>
</xf:repeat>
</xf:repeat>
</body>
</html>
Raw
index.html
<?xml-stylesheet href="xsl/xsltforms.xsl" type="text/xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:rte="http://www.agencexml.com/xsltforms/rte"
xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsltforms="http://www.agencexml.com/xsltforms" lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover" />
<title>TinyMCE Subfrom</title>
<style type="text/css">
.large-textarea textarea {
font-family: Courier, sans-serif;
height: 10em;
width: 500px;
}</style>
<script type="text/javascript" src="/exist/apps/xsltforms/scripts/tinymce_4.7.1/tinymce.min.js" data-uri="http://www.tinymce.com" data-version="4.7.1">/* */</script>
<xf:model xmlns="http://www.w3.org/2002/xforms">
<xf:instance id="i-rec">
<data xmlns="http://www.tei-c.org/ns/1.0">
<div1>
<div2>
<summary>Summary 1</summary>
<summary>Summary 2</summary>
<desc>level2 Test desc Element</desc>
<desc>level2 Test desc Element</desc>
<div3>
<summary>Summary 1</summary>
<summary>Summary 2</summary>
<desc>level3 Test desc Element</desc>
<div4>
<desc> level4 Test desc Element</desc>
</div4>
</div3>
<div3>
<summary>Summary 1</summary>
<summary>Summary 2</summary>
<desc>level3 Test desc Element</desc>
</div3>
</div2>
</div1>
</data>
</xf:instance>
<xf:instance id="i-subforms">
<data>
<subform formName="desc" selected="false"/>
<subform formName="summary" selected="false"/>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<ul>
<li class="nav-item">
<xf:trigger xmlns="http://www.w3.org/2002/xforms" appearance="minimal"
ref="instance('i-subforms')//*:subform[@formName = 'desc']">
<xf:label>Load Desc Element subform</xf:label>
<xf:action ev:event="DOMActivate">
<xf:toggle case="view-data-entry"/>
<xf:unload targetid="subform"/>
<xf:setvalue
ref="instance('i-subforms')//*:subform[@selected = 'true']/@selected"
value="'false'"/>
<xf:load if="@selected != 'true'" show="embed" targetid="subform"
resource="form.xq?form=forms/desc.xhtml"/>
<xf:setvalue ref="@selected" value="'true'"/>
</xf:action>
</xf:trigger>
</li>
<li class="nav-item">
<xf:trigger xmlns="http://www.w3.org/2002/xforms" appearance="minimal"
ref="instance('i-subforms')//*:subform[@formName = 'summary']">
<xf:label>Load Summary Element subform</xf:label>
<xf:action ev:event="DOMActivate">
<xf:toggle case="view-data-entry"/>
<xf:unload targetid="subform"/>
<xf:setvalue
ref="instance('i-subforms')//*:subform[@selected = 'true']/@selected"
value="'false'"/>
<xf:load if="@selected != 'true'" show="embed" targetid="subform"
resource="form.xq?form=forms/summary.xhtml"/>
<xf:setvalue ref="@selected" value="'true'"/>
</xf:action>
</xf:trigger>
</li>
</ul>
<xf:group xmlns="http://www.w3.org/2002/xforms">
<xf:switch id="edit" class="mainContent panel">
<xf:case id="view-main-entry" selected="false()">
<h2 xmlns="http://www.w3.org/1999/xhtml">Load Subforms here</h2>
<p xmlns="http://www.w3.org/1999/xhtml">Space for subforms</p>
</xf:case>
<xf:case id="view-data-entry" selected="false()">
<xf:group ref="instance('i-rec')">
<xf:group id="subform"/>
</xf:group>
</xf:case>
</xf:switch>
</xf:group>
</body>
</html>
Raw
summary.xhtml
<?xml-stylesheet href="xsl/xsltforms.xsl" type="text/xsl"?><html xmlns="http://www.w3.org/1999/xhtml" xmlns:rte="http://www.agencexml.com/xsltforms/rte" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xsltforms="http://www.agencexml.com/xsltforms" lang="en">
<head>
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"/>
<title>TinyMCE Support</title>
<style type="text/css">
.large-textarea textarea {
font-family: Courier, sans-serif;
height: 10em;
width: 500px;
}</style>
<script type="text/javascript" src="/exist/apps/xsltforms/scripts/tinymce_4.7.1/tinymce.min.js" data-uri="http://www.tinymce.com" data-version="4.7.1">/* */</script>
<model xmlns="http://www.w3.org/2002/xforms">
<schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.agencexml.com/xsltforms/rte">
<simpleType name="standardHTML">
<restriction xmlns:xforms="http://www.w3.org/2002/xforms" xforms:xmlns="http://www.w3.org/2002/xforms" base="xforms:HTMLFragment" xsltforms:rte="TinyMCE"/>
<annotation>
<appinfo> { plugins: [ "advlist autolink lists link image charmap print
preview anchor", "searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste" ], toolbar: "insertelema
insertelemb | insertfile undo redo | styleselect | bold italic |
alignleft aligncenter alignright alignjustify | bullist numlist outdent
indent | link image", custom_elements: "~elem-a,~elem-b", content_style:
"elem-a {color: red; border-style: solid;} elem-b {color: blue;
border-style: solid;}", valid_elements: "p,i,strong,em,elem-a,elem-b",
setup: function(editor) { function insertElem(gi) { var s = "&lt;" + gi
+ "&gt;" + editor.selection.getContent() + "&lt;/" + gi + "&gt;";
editor.insertContent(s); } editor.addButton("insertelema", { text:
"elem-a", onclick: function() { insertElem("elem-a"); }, tooltip:
"Insert elem-a (red)" }); editor.addButton("insertelemb", { text:
"elem-b", onclick: function() { insertElem("elem-b"); }, tooltip:
"Insert elem-b (blue)" }); } } </appinfo>
</annotation>
</simpleType>
</schema>
<instance id="i-rec">
<data xmlns="http://www.tei-c.org/ns/1.0">
<summary>Summary 1</summary>
<summary>Summary 2</summary>
<div>
<summary>Div Summary 1</summary>
<div>
<summary>Div2 Summary 1</summary>
</div>
<p>Test P element</p>
<p>Test P2 element</p>
</div>
<desc>Test desc Element</desc>
</data>
</instance>
<bind nodeset="instance('i-rec')/descendant::*:p" type="rte:standardHTML"/>
<bind nodeset="instance('i-rec')/descendant::*:desc" type="rte:standardHTML"/>
<bind nodeset="instance('i-rec')/descendant::*:summary" type="rte:standardHTML"/>
</model>
</head>
<body>
<h4>Test summary element</h4>
<group xmlns="http://www.w3.org/2002/xforms">
<repeat ref="instance('i-rec')//*:summary">
<textarea ref="." class="large-textarea" mediatype="application/xhtml+xml"/>
</repeat>
</group>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment