Skip to content

Added options to translate the UI (German+English included) and control the UI a bit more #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ Additionally, this project includes a tool for generating JSON objects from XML
Try it out in our [jquery.xmleditor demo page](http://unc-libraries.github.com/jquery.xmleditor) using the MODS 3.4 schema.

And here's a [demo starting from an existing xml file](http://unc-libraries.github.com/jquery.xmleditor/demo/mods.html)
And here's a [demo as above, but with translated UI](http://unc-libraries.github.com/jquery.xmleditor/demo/mods_de.html)
And here's a [demo as above, but with translated UI and forced required attributes](http://unc-libraries.github.com/jquery.xmleditor/demo/requiredAttributes.html)

This project was developed as a part of the [Carolina Digital Repository](https://cdr.lib.unc.edu/) for use in our administrative tools, but is fully functional as a standalone client.
This tool is intended to serve as a general schema driven XML editor that runs in web browsers, although some default behaviors are oriented towards it.
Expand Down Expand Up @@ -166,13 +168,36 @@ Alternatively, any number of buttons can be created by providing the submitButto

Providing a submitButtonConfigs option will override the creation of the standard submit/export button.

#### Translated UI

Use URL parameters or the userLang parameter of the editor options to switch between the available UI languages "en" (original English) or "de" (German translation).

Two options: Add URL parameter lang=
.../index.html?lang=de

or set target language in the options:

```javascript
$("#xml_editor").xmlEditor({
userLang : "de"
});
```

#### Other editor configuration

- documentTitle - Title for the document being edited, which is displayed at the top of the editor.
- elementUpdated - An optional event function which is triggered whenever an XML element is updated or rendered. It is triggered in the context of the element object modified, and includes an event object indicating which event took place and any additional information.
- menuEntries - A list of additional entries to add to the top menu bar, such as adding new help entries.
- confirmExitWhenUnsubmitted - Causes web browsers to prompt users if they try to navigate away from the editor while there are unsubmitted changes. Valid values: True or false.
- undoHistorySize - The number of history states remembered by the undo/redo feature. Default is 20.
- showExport - This is true by default - allows to hide the "Export" button.
- enableEdit - This is true by default - if set to false, the editor will behave as a viewer and will also set the ace editor to readonly (plus removing some menus).
- sourceDesignSwitch - This is true by default - allows to hide the switch between Text and XML display
- initialEditMode - Switch to predefined view: XML or HTML-DIV editor. 0=HTML-DIV editor, 1=XML Source editor
- i18n - This is a map in form ["en"] or ["de"] which holds all the labels used in the application for translation. More translations can be added.
- userLang - This selects the map to be used from i18n for the UI translation.
- enforceRequired - This does render required attributes to get no (x) button for remove and will automatically create the attributes. Works only together with enforceOccurs: true.


### Interacting with the editor
There are two ways to externally retrieve the contents of the editor as a string:
Expand Down Expand Up @@ -209,6 +234,8 @@ Authors

[Volker Diels-Grabsch (m-click.aero)](https://github.com/m-click)

[Marc H�schele](https://github.com/mhoesche)

Attribution
------

Expand Down
5 changes: 3 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{
"name": "jquery.xmleditor",
"main": "jquery.xmleditor.js",
"version": "1.3.0",
"version": "1.3.1",
"homepage": "https://github.com/UNC-Libraries/jquery.xmleditor",
"authors": [
"Ben Pennell (https://github.com/bbpennel)",
"Mike Daines (https://github.com/mdaines)",
"Dean Farrell <[email protected]>",
"Volker Diels-Grabsch <m-click.aero> (https://github.com/m-click)"
"Volker Diels-Grabsch <m-click.aero> (https://github.com/m-click)",
"Marc Höschele (https://github.com/mhoesche)"
],
"description": "A web browser based XML editor. It provides a general use graphical tool for creating new or modifying existing XML documents in your web browser. Information is extracted from an XML schema (XSD file) to provide the user with information about what elements, subelements and attributes are available at different points in the structure, and a GUI based means of adding or removing them from the document.",
"keywords": [
Expand Down
49 changes: 49 additions & 0 deletions demo/mods-readonly-noswitch.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery.xmleditor MODS Document Editing Demo</title>
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.xmleditor.css" type="text/css" />
<script src="../lib/ace/src-min/ace.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/json2.js"></script>
<script src="../lib/cycle.js"></script>
<script src="../lib/jquery.autosize-min.js"></script>
<script src="../jquery.xmleditor.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>jQuery.xmleditor Spoonful of Math MODS Editing Demo (Showing non-editable XML view only)</h1>
<a href="https://github.com/UNC-Libraries/jquery.xmleditor">View
the Project on GitHub <small>UNC-Libraries/jquery.xmleditor</small>
</a>
</header>
</div>
<div id="xml_editor">
</div>
<script>
$(function() {
$("#xml_editor").xmlEditor({
documentTitle : "A Spoonful of Math Helps The Medicine Go Down",
ajaxOptions: {
xmlRetrievalPath: "examples/spoonful_of_mods.xml"
},
schema : "examples/mods.json",
libPath : '../lib/',
enableEdit : false,
sourceDesignSwitch : false
});
});
</script>
<footer>
<p>
This project is maintained by <a
href="https://github.com/UNC-Libraries">UNC-Libraries</a>
</p>
</footer>
</body>
</html>
48 changes: 48 additions & 0 deletions demo/mods-textmode-first.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery.xmleditor MODS Document Editing Demo</title>
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.xmleditor.css" type="text/css" />
<script src="../lib/ace/src-min/ace.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/json2.js"></script>
<script src="../lib/cycle.js"></script>
<script src="../lib/jquery.autosize-min.js"></script>
<script src="../jquery.xmleditor.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>jQuery.xmleditor Spoonful of Math MODS Editing Demo (Texteditor selected first)</h1>
<a href="https://github.com/UNC-Libraries/jquery.xmleditor">View
the Project on GitHub <small>UNC-Libraries/jquery.xmleditor</small>
</a>
</header>
</div>
<div id="xml_editor">
</div>
<script>
$(function() {
$("#xml_editor").xmlEditor({
documentTitle : "A Spoonful of Math Helps The Medicine Go Down",
ajaxOptions: {
xmlRetrievalPath: "examples/spoonful_of_mods.xml"
},
schema : "examples/mods.json",
libPath : '../lib/',
initialEditMode : 1
});
});
</script>
<footer>
<p>
This project is maintained by <a
href="https://github.com/UNC-Libraries">UNC-Libraries</a>
</p>
</footer>
</body>
</html>
48 changes: 48 additions & 0 deletions demo/mods_de.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery.xmleditor MODS Document Editing Demo</title>
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.xmleditor.css" type="text/css" />
<script src="../lib/ace/src-min/ace.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/json2.js"></script>
<script src="../lib/cycle.js"></script>
<script src="../lib/jquery.autosize-min.js"></script>
<script src="../jquery.xmleditor.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>jQuery.xmleditor Spoonful of Math MODS Editing Demo</h1>
<a href="https://github.com/UNC-Libraries/jquery.xmleditor">View
the Project on GitHub <small>UNC-Libraries/jquery.xmleditor</small>
</a>
</header>
</div>
<div id="xml_editor">
</div>
<script>
$(function() {
$("#xml_editor").xmlEditor({
documentTitle : "A Spoonful of Math Helps The Medicine Go Down",
ajaxOptions: {
xmlRetrievalPath: "examples/spoonful_of_mods.xml"
},
schema : "examples/mods.json",
libPath : '../lib/',
userLang: "de"
});
});
</script>
<footer>
<p>
This project is maintained by <a
href="https://github.com/UNC-Libraries">UNC-Libraries</a>
</p>
</footer>
</body>
</html>
48 changes: 48 additions & 0 deletions demo/readonly.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery.xmleditor MODS Document Editing Demo</title>
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.xmleditor.css" type="text/css" />
<script src="../lib/ace/src-min/ace.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/json2.js"></script>
<script src="../lib/cycle.js"></script>
<script src="../lib/jquery.autosize-min.js"></script>
<script src="../jquery.xmleditor.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>jQuery.xmleditor Spoonful of Math MODS Editing Demo (Readonly Demo)</h1>
<a href="https://github.com/UNC-Libraries/jquery.xmleditor">View
the Project on GitHub <small>UNC-Libraries/jquery.xmleditor</small>
</a>
</header>
</div>
<div id="xml_editor">
</div>
<script>
$(function() {
$("#xml_editor").xmlEditor({
documentTitle : "A Spoonful of Math Helps The Medicine Go Down",
ajaxOptions: {
xmlRetrievalPath: "examples/spoonful_of_mods.xml"
},
schema : "examples/mods.json",
libPath : '../lib/',
enableEdit : false
});
});
</script>
<footer>
<p>
This project is maintained by <a
href="https://github.com/UNC-Libraries">UNC-Libraries</a>
</p>
</footer>
</body>
</html>
34 changes: 34 additions & 0 deletions demo/requiredAttribute/testmodel.xsd
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:dm="http://www.example.com/datamodel"
targetNamespace="http://www.example.com/datamodel"
elementFormDefault="qualified"
attributeFormDefault="unqualified">

<xs:element name="datamodel" type="dm:DataModel" />
<xs:element name="dataobject" type="dm:DataObject"/>

<xs:complexType name="DataModel">
<xs:sequence>
<xs:element name="dataobject" type="dm:DataObject" minOccurs="0" maxOccurs="unbounded" />
</xs:sequence>
</xs:complexType>

<xs:complexType name="DataObject">
<xs:sequence>
<xs:element name="attribute" type="dm:Attribute" minOccurs="0" maxOccurs="unbounded" />
<xs:element name="dataobject" type="dm:DataObject" minOccurs="0" maxOccurs="unbounded" />
</xs:sequence>
<xs:attribute name="id" type="xs:string" use="optional" />
<xs:attribute name="name" type="xs:string" use="required" />
</xs:complexType>

<xs:complexType name="Attribute">
<xs:simpleContent>
<xs:extension base="xs:string">
<xs:attribute name="name" type="xs:string" use="required"/>
</xs:extension>
</xs:simpleContent>
</xs:complexType>

</xs:schema>
31 changes: 31 additions & 0 deletions demo/requiredAttribute/testmodel_example.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<datamodel xmlns="http://www.example.com/datamodel">
<dataobject name="obj1">
<attribute name="attr11">Value 1.1</attribute>
<attribute name="attr12">Value 1.2</attribute>
<attribute name="attr13">Value 1.3</attribute>
<dataobject name="obj1.1">
Object 1.1
<attribute name="attr111">Value 1.1.1</attribute>
<attribute name="attr112">Value 1.1.2</attribute>
<attribute name="attr113">Value 1.1.3</attribute>
<![CDATA[Object 1.1]]>
<!--This is Object 1.1-->
</dataobject>
<dataobject name="obj1.2">
<attribute name="attr121">Value 1.2.1</attribute>
<attribute name="attr122">Value 1.2.2</attribute>
<attribute name="attr123">Value 1.2.3</attribute>
<![CDATA[Object 1.2]]>
<!--This is Object 1.2-->
</dataobject>
<![CDATA[Object 1]]>
<!--This is Object 1-->
</dataobject>
<dataobject name="obj2">
<attribute name="attr21">Value 2.1</attribute>
<attribute name="attr22">Value 2.2</attribute>
<attribute name="attr23">Value 2.3</attribute>
<![CDATA[Object 2]]>
<!--This is Object 2-->
</dataobject>
</datamodel>
54 changes: 54 additions & 0 deletions demo/requiredAttributes.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery.xmleditor handle required attributes demo</title>
<link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheets/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/jquery.xmleditor.css" type="text/css" />
<script src="../lib/ace/src-min/ace.js"></script>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/jquery-ui.min.js"></script>
<script src="../lib/json2.js"></script>
<script src="../lib/cycle.js"></script>
<script src="../lib/jquery.autosize-min.js"></script>
<script src="../xsd/xsd2json.js"></script>
<script src="../jquery.xmleditor.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<h1>jQuery.xmleditor some sample XML with required attributes</h1>
<a href="https://github.com/UNC-Libraries/jquery.xmleditor">View
the Project on GitHub <small>UNC-Libraries/jquery.xmleditor</small>
</a>
</header>
</div>
<div id="xml_editor">
</div>
<script>
var extractor = new Xsd2Json("testmodel.xsd", {
"schemaURI":"requiredAttribute/",
"topLevelElement": "datamodel"});
$(function() {
$("#xml_editor").xmlEditor({
schema : extractor.getSchema(),
documentTitle : "Testmodel",
ajaxOptions: {
xmlRetrievalPath: "requiredAttribute/testmodel_example.xml"
},
libPath : '../lib/',
userLang: "de",
enforceOccurs: true,
enforceRequired: true
});
});
</script>
<footer>
<p>
This project is maintained by <a
href="https://github.com/UNC-Libraries">UNC-Libraries</a>
</p>
</footer>
</body>
</html>
Loading