Skip to content

Instantly share code, notes, and snippets.

@wsalesky

wsalesky/index.xhtml

Created January 15, 2024 16:14
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/d24ce3ebcbc00f673b3d4a44202cb83b to your computer and use it in GitHub Desktop.
Save wsalesky/d24ce3ebcbc00f673b3d4a44202cb83b to your computer and use it in GitHub Desktop.
Download ZIP
XSLTForms tinyMCE subforms example
Raw
index.xhtml
<!DOCTYPE html>
<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:srophe="https://srophe.app" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:local="http://syriaca.org/ns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:sc="http://www.ascc.net/xml/schematron" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsltforms="http://www.agencexml.com/xsltforms" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="shortcut icon" href="resources/images/hn/favicon-16.png"/>
<title>Edit MS TEI Records</title>
<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 id="m-mss">
<xf:instance id="i-rec">
<data xmlns="http://www.tei-c.org/ns/1.0">
<msContents>
<summary>Summary 1</summary>
<summary>Summary 2</summary>
</msContents>
<msIdentifier>
<desc>Test desc Element</desc>
<p>Test P element</p>
<p>Test P2 element</p>
</msIdentifier>
</data>
</xf:instance>
<xf:instance id="i-subforms">
<data>
<subform formName="msIdentifier" selected="false"/>
<subform formName="msContents" selected="false"/>
</data>
</xf:instance>
<xf:instance id="i-repeatIndex">
<data xmlns="">
<index>1</index>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<div class="container-fluid">
<main>
<ul class="nav flex-column">
<li class="nav-item">
<xf:trigger appearance="minimal" class="nav-link">
<xf:label><span data-feather="home"/> Main Page
</xf:label>
<xf:action ev:event="DOMActivate">
<xf:toggle case="view-main-entry"/>
</xf:action>
</xf:trigger>
</li>
<li class="nav-item">
<xf:trigger appearance="minimal" ref="instance('i-subforms')//*:subform[@formName = 'msIdentifier']" class="nav-link">
<xf:label>Identification</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="msIdentifier.xhtml"/>
<xf:setvalue ref="@selected" value="'true'"/>
<setvalue xmlns="http://www.w3.org/2002/xforms" ref="instance('i-repeatIndex')/index" value="1"/>
</xf:action>
</xf:trigger>
</li>
<li class="nav-item">
<xf:trigger appearance="minimal" ref="instance('i-subforms')//*:subform[@formName = 'msContents']" class="nav-link">
<xf:label>Content description</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="msContents.xhtml"/>
<xf:setvalue ref="@selected" value="'true'"/>
<setvalue xmlns="http://www.w3.org/2002/xforms" ref="instance('i-repeatIndex')/index" value="1"/>
</xf:action>
</xf:trigger>
</li>
</ul>
<xf:switch id="edit" class="mainContent panel">
<xf:case id="view-main-entry" selected="true()">
<h4>Main Page</h4>
<p>select from menu to see content</p>
</xf:case>
<xf:case id="view-data-entry">
<xf:group ref="instance('i-rec')">
<xf:group id="subform"/>
</xf:group>
</xf:case>
</xf:switch>
</main>
</div>
</body>
</html>
Raw
msContents.xhtml
<!DOCTYPE html>
<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:srophe="https://srophe.app" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:local="http://syriaca.org/ns" xmlns:sc="http://www.ascc.net/xml/schematron" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsltforms="http://www.agencexml.com/xsltforms" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Edit MS TEI Records</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 id="m-mss">
<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:bind nodeset="instance('i-rec')/descendant::*:p" type="rte:standardHTML"/>
<xf:bind nodeset="instance('i-rec')/descendant::*:desc" type="rte:standardHTML"/>
<xf:bind nodeset="instance('i-rec')/descendant::*:note" type="rte:standardHTML"/>
<xf:bind nodeset="instance('i-rec')/descendant::*:summary" type="rte:standardHTML"/>
<xf:bind nodeset="instance('i-rec')/descendant::*:quote" type="rte:standardHTML"/>
</xf:model>
</head>
<body>
<h2 class="h3 mainElement">Content description T5</h2>
<group namespace="http://www.w3.org/2002/xforms"
ref="instance('i-rec')//*:msContents[position() = instance('i-repeatIndex')/index]"
id="msContents-root">
<h3>Summary</h3>
<xf:repeat xmlns="http://www.w3.org/2002/xforms"
id="msContentsGrpRepeatLevel11" ref="descendant-or-self::*:summary">
<textarea ref="." class="large-textarea" mediatype="application/xhtml+xml"/>
</xf:repeat>
</group>
</body>
</html>
Raw
msIdentifier.xhtml
<!DOCTYPE html>
<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:srophe="https://srophe.app" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:local="http://syriaca.org/ns" xmlns:sc="http://www.ascc.net/xml/schematron" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsltforms="http://www.agencexml.com/xsltforms" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="author" content="majlis-erc"/>
<meta name="description" content=" Record information pertaining the institutions and people behind the project. Add shelfmark and information on the holding institution. Add alternate identifiers in existing catalogues and external databases. Add information on reproductions, such as digital images, microfilms or other types. Give a basic codicological definition of the book and specify the type and form. Indicate joins to other shelfmarks. Describe the textual unit(s) in general terms and in detail."/>
<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 id="m-mss">
<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:bind nodeset="instance('i-rec')/descendant::*:p" type="rte:standardHTML"/>
<xf:bind nodeset="instance('i-rec')/descendant::*:desc" type="rte:standardHTML"/>
<xf:bind nodeset="instance('i-rec')/descendant::*:note" type="rte:standardHTML"/>
<xf:bind nodeset="instance('i-rec')/descendant::*:summary" type="rte:standardHTML"/>
<xf:bind nodeset="instance('i-rec')/descendant::*:quote" type="rte:standardHTML"/>
</xf:model>
</head>
<body>
<h2 class="h3 mainElement">Identification T4</h2>
<group xmlns="http://www.w3.org/2002/xforms" ref="instance('i-rec')//*:msIdentifier[position() = instance('i-repeatIndex')/index]"
id="msIdentifier-root">
<h3>Paragraph</h3>
<repeat ref="*:p">
<textarea ref="." class="large-textarea" mediatype="application/xhtml+xml"/>
</repeat>
<h3>Desc</h3>
<repeat ref="*:desc">
<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