- <xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
- xmlns:xforms="http://www.w3.org/2002/xforms"
- xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
- xmlns:ev="http://www.w3.org/2001/xml-events"
- xmlns:xs="http://www.w3.org/2001/XMLSchema"
- xmlns:fr="http://orbeon.org/oxf/xml/form-runner">
- <xhtml:head>
- <xforms:model id="main"
- xxforms:session-heartbeat="true"
- xxforms:show-error-dialog="false"
- xxforms:external-events="submit-save submit-preview submit-cancel">
- <xforms:instance id="instance">
- <root>
- <repeat>
- <item>
- <title/>
- </item>
- </repeat>
- </root>
- </xforms:instance>
- <xforms:instance id="proto-property">
- <item>
- <title/>
- </item>
- </xforms:instance>
- <xforms:bind nodeset="instance('instance')">
- <xforms:bind
- nodeset="repeat/item/title"
- required="true()"/>
- </xforms:bind>
- </xforms:model>
- <xbl:xbl xmlns:xhtml="http://www.w3.org/1999/xhtml"
- xmlns:xforms="http://www.w3.org/2002/xforms"
- xmlns:xs="http://www.w3.org/2001/XMLSchema"
- xmlns:ev="http://www.w3.org/2001/xml-events"
- xmlns:xi="http://www.w3.org/2001/XInclude"
- xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
- xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
- xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
- xmlns:saxon="http://saxon.sf.net/"
- xmlns:oxf="http://www.orbeon.com/oxf/processors"
- xmlns:xbl="http://www.w3.org/ns/xbl"
- xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"
- xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
- <xbl:binding id="fr-input-counted" element="fr|input-counted">
- <xbl:template xxbl:transform="oxf:unsafe-xslt">
- <xsl:transform version="2.0">
- <xsl:import href="oxf:/oxf/xslt/utils/xbl.xsl"/>
- <xsl:template match="/*">
- <xforms:group xbl:attr="model context ref bind" xxbl:scope="outer">
- <xbl:content includes="xforms|label"/>
- <xsl:copy-of select="xxbl:parameter(., 'max')"/>
- <xxforms:script ev:event="xforms-enabled" ev:target="#observer">
- YAHOO.xbl.fr.InputCounted.instance(this).initialize();
- </xxforms:script>
- <xforms:group xxbl:scope="inner">
- <xxforms:variable name="binding" as="node()?">
- <xxforms:sequence select="." xxbl:scope="outer"/>
- </xxforms:variable>
- <xforms:input id="input-counted" class="fr-input-counted" ref="$binding"
- incremental="true"/>
- <label class="counter-label"></label>
- </xforms:group>
- </xforms:group>
- </xsl:template>
- </xsl:transform>
- </xbl:template>
- </xbl:binding>
- </xbl:xbl>
- <xhtml:script type="text/javascript">
- <![CDATA[
- var YDOM = YAHOO.util.Dom;
- var ODOC = ORBEON.xforms.Document;
- YAHOO.namespace("xbl.fr");
- YAHOO.xbl.fr.InputCounted = function() {};
- ORBEON.xforms.XBL.declareClass(YAHOO.xbl.fr.InputCounted, "xbl-fr-input-counted");
- YAHOO.xbl.fr.InputCounted.prototype = {
- _instances: {},
- _getInstance: function(target) {
- var container = YDOM.getElementsByClassName("xbl-fr-input-counted", null, this.container)[0];
- return this._instances[container.id];
- },
- init: function() {
- var container = this.container;
- var htmlElement = container.getElementsByTagName('input')[0];
- if(htmlElement.controlInitialized !== true) {
- // Create instance
- var instance = {
- id: "",
- currentCount: 0,
- maxCount: 0,
- disabled: false
- };
- // get attribute params from dom
- var maxCountEl = YDOM.getElementsByClassName("xbl-fr-input-counted-max", null, this.container)[0];
- // This should not be 100 as I am passing the value
- var maxCount = (maxCountEl && maxCountEl.innerHTML != "") ? maxCountEl.innerHTML : 100;
- // populate instance
- instance.container = container;
- instance.HTMLElement = htmlElement;
- instance.id = this.container.id;
- instance.minCount = 0;
- instance.maxCount = maxCount;
- this.initInstance(this.container, instance);
- htmlElement.controlInitialized = true;
- this._instances[this.container.id] = instance;
- }
- },
- initInstance: function(target, instance) {
- var counterLabel = YDOM.getElementsByClassName("counter-label", null, this.container)[0];
- var field = YDOM.getElementsByClassName("fr-input-counted", null, this.container)[0];
- if(field.getElementsByTagName('input')[0] !== null) {
- field = field.getElementsByTagName('input')[0];
- }
- field.maxLength = instance.maxCount;
- field.ctr = counterLabel;
- if (field.textLength > 0)
- counterLabel.innerHTML = field.textLength + ' / ' + instance.maxCount;
- else
- counterLabel.innerHTML = instance.minCount + ' / ' + instance.maxCount;
- // add onchange event
- YAHOO.util.Event.on(field, 'keyup', this.count, field);
- },
- count : function(evt, el) {
- if (el.textLength > el.maxLength) {
- YAHOO.util.Event.stopEvent(evt);
- return;
- }
- YDOM.get(el.ctr).innerHTML = el.textLength + ' / ' + el.maxLength;
- }
- };
- ]]>
- </xhtml:script>
- </xhtml:head>
- <xhtml:body class="body">
- <div>
- <xforms:trigger appearance="full">
- <xforms:label>
- Add Another
- </xforms:label>
- <xforms:insert ev:event="DOMActivate" at="1"
- nodeset="repeat/item"/>
- </xforms:trigger>
- </div>
- <xforms:repeat nodeset="repeat/item">
- <div>
- <fr:input-counted ref="title" max="10">
- <xforms:label>Node Selector</xforms:label>
- </fr:input-counted>
- </div>
- </xforms:repeat>
- </xhtml:body>
- </xhtml:html>