jQuery CTS XSLT Helper

In all example and documentation, "target element" or $(target) is the element on which ctsXSLT have been started. To start a XSLT on a given container - thus filling it with the form -, use the following expression : $(element).ctsXSLT(XSLTName, options)

XSLTs

See implemented XSLTs documentations.

API

• $(target).ctsXSLT(XSLTName, "getValues") : returns a dictionary representing the form key-value's pair
• $(target).ctsXSLT(XSLTName, "instance") : return the CTS.XSLT abstraction object

Events

| Name   | Description |-------------------------------|--------------------------------- | cts-xslt:XSLTName:doing | Before sending request to XSLT naed "XSLTName" | cts-xslt:XSLTName:done | When sending request to XSLT named "XSLTName" is done

## Options

Options are set-up as the second argument of $(element).ctsXSLT(). It's a simple dictionary

• endpoint (Type : string) Endpoint of XSLT is the URI of the XSLT sheet you want to use.
• xml (Type . string or jQuery or function) The value of xml can either be a selector such as ".xml" or a jQuery object such as $(".xml"). When transforming data, the plugin will used the targeted element value as the source fore the transformation.
• css (Type : dictionary) See below
• trigger (Type : string) When given trigger is called on the original element, the XSLT attached to it will be called.
• click (Type : jQuery or string) The value of click can either be a selector such as ".button" or a jQuery object such as $(".button"). It will attach an event listener to id. Clicking the targeted element will call the attached XSLT.
• driver (Type : dictionary) driver dictionary allows you to keep the plugin to generating form field in the DOM by giving it a replacement. The keys should be the name of the field, the value can be : function, jQuery object or selector. eg : We instantiate CTS.XSLT "llt.seg_to_tok" which has fields name : e_lang, e_format, e_attachtoroot. Instead of generating new DOM, we can give it the following driver parameters.

driver : {
    e_lang : function() { return "<hello></hello>"; },
    //Here we give a replacement function
    e_format : ".hiddenInput"
    //Here we pass a selector. The XSLT will use it to retrieve the value of the element.
    e_attachtoroot : $(".checkbox")
    //Here we pass a jQuery object. The XSLT will use it as well to retrieve the value of this element
}

• defaults (Type : dictionary) defaults dictionary allows you to override the XSLT field's default value. The keys should be the name of the field, the value can be string, list or boolean. eg : We instantiate CTS.XSLT "llt.seg_to_tok" which has fields name (default value): e_lang("latin"), e_attachtoroot(false). In our case, we want merging to be true by default:

defaults : {
    e_attachtoroot : true
}

The generated DOM form will contain this value as default. For example, if e_attachtoroot is a checkbox, it will be checked.

• names (Type: dictionary) Default behaviour of DOM generation in CTS.XSLT will create anonymous inputs (ie : input would have no name attribute). names dictionary allows you to give to a given field a name. The keys should be the name of the field, the value should be a string. eg : We instantiate CTS.XSLT "llt.seg_to_tok" which has fields name : e_lang, e_attachtoroot.

defaults : {
    e_attachtoroot : "e_attachtoroot"
}

It will produce the following inputs :

<input type="text" /> <!-- this is e_lang field -->
<input type="checkbox" name="e_attachtoroot" /> <!-- this is e_attachtoroot field -->

• show (Type : Boolean, String) If show is a boolean, the fiedset generated by ctsXSLT will be shown only if show is true. If this is a string, the original element will toggle its visibility when show value is triggered on it. eg :

$(".element").ctsXSLT("llt.seg_to_tok", {
    show : "trigger"
});
$(".element").hide();
$(".element").trigger("trigger"); // Will show element

• callback (Type : function) Callback is called when XSLT is called and has answered. Parameter passed to this function are value returned by the XSLT transform.

Recap

| Key | type | Default | Informations | ---------------- | -------------- | ------------- | ----------------------------------- | endpoint | string | "" | URI of the stylesheet | xml | jQuery,string | | Element from which to retrieve the xml to transform | css | object | {} | See below CSS custom classes | trigger | string | null | Send request when trigger is trigger on original element | click | string,element | false | Send request when click is triggered on targeted element | driver | dictionary | {} | Instead of generating DOM, reuse an element in the DOM or a function for a given parameter | defaults | dictionary | {} | Override a default value of the XSLT | names | dictionary | {} | When generating DOM inputs, give to a field a given name. | show | boolean,string | true | Hide/Show the element. If a string, $(target).trigger(the string) will toggle the visibility of the form | callback | function | null   | Function to call on XSLT calling. Response from ajax request is passed as data to the callback function

CSS custom classes

Because so many plugins force you to dig the code or extend your already existing CSS classes, we thought it might be cool to give you the availability to add your own classes to all the generated DOM elements !. To do so, when passing your option object to the constructor, add the css dictionary, where keys are identifier described below and value a list of classes (WITHOUT THE DOT).

| Identifier | Automatic class | Description |--------------------------|------------------------------------|-------------- | container | ["cts-xslt"] | Container for all the generated DOM (<fieldset />) | container-legend | ["cts-xslt-legend"] | Container for the title of the XSLT (<legend />) | | | | field-container | [] | <div /> containing a field | field-label | [] | <Label /> of the field | field-input-container | [] | <div /> wrapping the input inside the field-container | field-text | [] | Classes for <input type="text" /> | field-checkbox | [] | Classes for <input type="checkbox" /> | field-textarea | [] | Classes for <textarea />

Example

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../src/cts.js"></script>
<script type="text/javascript" src="../src/modules/utils.js"></script>
<script type="text/javascript" src="../src/modules/repository.js"></script>
<script type="text/javascript" src="../src/modules/text.js"></script>
<script type="text/javascript" src="../src/modules/i18n.js"></script>
<script type="text/javascript" src="../src/modules/service.js"></script>
<script type="text/javascript" src="../src/modules/xslt.js"></script>
<script type="text/javascript" src="../src/i18n/en.js"></script>
<!-- Dependencies -->
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<!-- Plugins using dependencies -->
<script type="text/javascript" src="../src/plugins/jquery.cts.xslt.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#lltsegtok").ctsXSLT("llt.segtok_to_tb", {
            "endpoint" : "./test_data/segtok.xslt",
            "xml" : $(".segtok"),
            "names" : {
                "e_lang" : "lang"
            },
            "DOM" : {
                //"text" : $(".TEItext")
            },
            "click" : ".button",
            "trigger" : "tokenize!",
            "callback" : function(data) {
                $(".segtok").val(data);
            },
            "show" : "SHOW_ME_THE_GONDOR"
        });
        $("#lltsegtok").on("cts-service:llt.tokenizer:done", function() {
            //console.log(data);
        });
        $(".toggle_button").on("click", function(e) {
            e.preventDefault();
            $("#lltsegtok").trigger("SHOW_ME_THE_GONDOR");
        });
        $(".trigger_button").on("click", function(e) {
            e.preventDefault();
            $("#lltsegtok").trigger("tokenize!");
        });
    });
</script>
</head>
<body>
    <button class="button">Click me !</button> 
    <button class="trigger_button">Trigger me !</button> 
    <button class="toggle_button">Toggle me !</button>
    <div id="lltsegtok"></div>
    <textarea class="segtok"><?xml version="1.0" encoding="UTF-8"?><llt-segtok><TEI xmlns="http://www.tei-c.org/ns/1.0"><text xml:lang="grc"><body><div1 n="1" type="Book"><l n="1"><milestone ed="P" unit="para"/><w n="1" s_n="1"><w s_n="1" n="1">μῆνιν</w></w><w n="2" s_n="1"><w s_n="1" n="2">ἄειδε</w></w><w n="3" s_n="1"><w s_n="1" n="3">θεὰ</w></w><w n="4" s_n="1"><w s_n="1" n="4">Πηληϊάδεω</w></w><w n="5" s_n="1"><w s_n="1" n="5">Ἀχιλῆος</w></w></l></div1><div1 n="1" type="Book"><l n="2"><w n="6" s_n="1"><w s_n="1" n="6">οὐλομένην</w></w><pc n="7" s_n="1"><pc s_n="1" n="7">,</pc></pc><w n="8" s_n="1"><w s_n="1" n="8">ἣ</w></w><w n="9" s_n="1"><w s_n="1" n="9">μυρίʼ</w></w><w n="10" s_n="1"><w s_n="1" n="10">Ἀχαιοῖς</w></w><w n="11" s_n="1"><w s_n="1" n="11">ἄλγεʼ</w></w><w n="12" s_n="1"><w s_n="1" n="12">ἔθηκε</w></w><pc n="13" s_n="1"><pc s_n="1" n="13">,</pc></pc></l></div1><div1 n="1" type="Book"><l n="3"><w n="14" s_n="1"><w s_n="1" n="14">πολλὰς</w></w><w n="15" s_n="1"><w s_n="1" n="15">δʼ</w></w><w n="16" s_n="1"><w s_n="1" n="16">ἰφθίμους</w></w><w n="17" s_n="1"><w s_n="1" n="17">ψυχὰς</w></w><w n="18" s_n="1"><w s_n="1" n="18">Ἄϊδι</w></w><w n="19" s_n="1"><w s_n="1" n="19">προΐαψεν</w></w></l></div1><div1 n="1" type="Book"><l n="4"><w n="20" s_n="1"><w s_n="1" n="20">ἡρώων</w></w><pc n="21" s_n="1"><pc s_n="1" n="21">,</pc></pc><w n="22" s_n="1"><w s_n="1" n="22">αὐτοὺς</w></w><w n="23" s_n="1"><w s_n="1" n="23">δὲ</w></w><w n="24" s_n="1"><w s_n="1" n="24">ἑλώρια</w></w><w n="25" s_n="1"><w s_n="1" n="25">τεῦχε</w></w><w n="26" s_n="1"><w s_n="1" n="26">κύνεσσιν</w></w></l></div1><div1 n="1" type="Book"><l n="5"><w n="27" s_n="1"><w s_n="1" n="27">οἰωνοῖσί</w></w><w n="28" s_n="1"><w s_n="1" n="28">τε</w></w><w n="29" s_n="1"><w s_n="1" n="29">πᾶσι</w></w><pc n="30" s_n="1"><pc s_n="1" n="30">,</pc></pc><w n="31" s_n="1"><w s_n="1" n="31">Διὸς</w></w><w n="32" s_n="1"><w s_n="1" n="32">δʼ</w></w><w n="33" s_n="1"><w s_n="1" n="33">ἐτελείετο</w></w><w n="34" s_n="1"><w s_n="1" n="34">βουλή</w></w><pc n="35" s_n="1"><pc s_n="1" n="35">,</pc></pc></l></div1></body></text></TEI></llt-segtok></textarea>

</body>
</html>