Don't like ads? PRO users don't see any ads ;-)
Guest

Untitled

By: a guest on May 25th, 2012  |  syntax: None  |  size: 7.80 KB  |  hits: 9  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
  2.             xmlns:xforms="http://www.w3.org/2002/xforms"
  3.             xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
  4.             xmlns:ev="http://www.w3.org/2001/xml-events"
  5.             xmlns:xs="http://www.w3.org/2001/XMLSchema"
  6.             xmlns:fr="http://orbeon.org/oxf/xml/form-runner">
  7.  
  8.     <xhtml:head>
  9.         <xforms:model id="main"
  10.                       xxforms:session-heartbeat="true"
  11.                       xxforms:show-error-dialog="false"
  12.                       xxforms:external-events="submit-save submit-preview submit-cancel">
  13.  
  14.             <xforms:instance id="instance">
  15.                 <root>
  16.                     <repeat>
  17.                         <item>
  18.                             <title/>
  19.                         </item>
  20.                     </repeat>
  21.                 </root>
  22.             </xforms:instance>
  23.  
  24.             <xforms:instance id="proto-property">
  25.                 <item>
  26.                     <title/>
  27.                 </item>
  28.             </xforms:instance>
  29.  
  30.             <xforms:bind nodeset="instance('instance')">
  31.                 <xforms:bind
  32.                         nodeset="repeat/item/title"
  33.                         required="true()"/>
  34.             </xforms:bind>
  35.  
  36.         </xforms:model>
  37.         <xbl:xbl xmlns:xhtml="http://www.w3.org/1999/xhtml"
  38.                  xmlns:xforms="http://www.w3.org/2002/xforms"
  39.                  xmlns:xs="http://www.w3.org/2001/XMLSchema"
  40.                  xmlns:ev="http://www.w3.org/2001/xml-events"
  41.                  xmlns:xi="http://www.w3.org/2001/XInclude"
  42.                  xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
  43.                  xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
  44.                  xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
  45.                  xmlns:saxon="http://saxon.sf.net/"
  46.                  xmlns:oxf="http://www.orbeon.com/oxf/processors"
  47.                  xmlns:xbl="http://www.w3.org/ns/xbl"
  48.                  xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"
  49.                  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  50.  
  51.             <xbl:binding id="fr-input-counted" element="fr|input-counted">
  52.                 <xbl:template xxbl:transform="oxf:unsafe-xslt">
  53.                     <xsl:transform version="2.0">
  54.                         <xsl:import href="oxf:/oxf/xslt/utils/xbl.xsl"/>
  55.                         <xsl:template match="/*">
  56.                             <xforms:group xbl:attr="model context ref bind" xxbl:scope="outer">
  57.  
  58.                                 <xbl:content includes="xforms|label"/>
  59.  
  60.                                 <xsl:copy-of select="xxbl:parameter(., 'max')"/>
  61.  
  62.                                 <xxforms:script ev:event="xforms-enabled" ev:target="#observer">
  63.                                         YAHOO.xbl.fr.InputCounted.instance(this).initialize();
  64.                                 </xxforms:script>
  65.  
  66.                                 <xforms:group xxbl:scope="inner">
  67.                                     <xxforms:variable name="binding" as="node()?">
  68.                                         <xxforms:sequence select="." xxbl:scope="outer"/>
  69.                                     </xxforms:variable>
  70.                                     <xforms:input id="input-counted" class="fr-input-counted" ref="$binding"
  71.                                                   incremental="true"/>
  72.                                     <label class="counter-label"></label>
  73.                                 </xforms:group>
  74.                             </xforms:group>
  75.                         </xsl:template>
  76.                     </xsl:transform>
  77.                 </xbl:template>
  78.             </xbl:binding>
  79.  
  80.         </xbl:xbl>
  81.         <xhtml:script type="text/javascript">
  82.             <![CDATA[
  83.             var YDOM = YAHOO.util.Dom;
  84.             var ODOC = ORBEON.xforms.Document;
  85.  
  86.             YAHOO.namespace("xbl.fr");
  87.             YAHOO.xbl.fr.InputCounted = function() {};
  88.             ORBEON.xforms.XBL.declareClass(YAHOO.xbl.fr.InputCounted, "xbl-fr-input-counted");
  89.  
  90.             YAHOO.xbl.fr.InputCounted.prototype = {
  91.  
  92.                 _instances: {},
  93.  
  94.                 _getInstance: function(target) {
  95.                     var container = YDOM.getElementsByClassName("xbl-fr-input-counted", null, this.container)[0];
  96.                     return this._instances[container.id];
  97.                 },
  98.  
  99.                 init: function() {
  100.  
  101.                     var container = this.container;
  102.                     var htmlElement =  container.getElementsByTagName('input')[0];
  103.  
  104.                     if(htmlElement.controlInitialized !== true) {
  105.                         // Create instance
  106.                         var instance = {
  107.                                 id: "",
  108.                                 currentCount: 0,
  109.                                 maxCount: 0,
  110.                                 disabled: false
  111.                         };
  112.  
  113.                         // get attribute params from dom
  114.                         var maxCountEl = YDOM.getElementsByClassName("xbl-fr-input-counted-max", null, this.container)[0];
  115.                         // This should not be 100 as I am passing the value
  116.                         var maxCount = (maxCountEl && maxCountEl.innerHTML != "") ? maxCountEl.innerHTML : 100;
  117.  
  118.                         // populate instance
  119.                         instance.container = container;
  120.                         instance.HTMLElement = htmlElement;
  121.                         instance.id = this.container.id;
  122.                         instance.minCount = 0;
  123.                         instance.maxCount = maxCount;
  124.  
  125.                         this.initInstance(this.container, instance);
  126.  
  127.                         htmlElement.controlInitialized = true;
  128.                         this._instances[this.container.id] = instance;
  129.                     }
  130.                 },
  131.  
  132.                 initInstance: function(target, instance) {
  133.                     var counterLabel = YDOM.getElementsByClassName("counter-label", null, this.container)[0];
  134.  
  135.                     var field = YDOM.getElementsByClassName("fr-input-counted", null, this.container)[0];
  136.                     if(field.getElementsByTagName('input')[0] !== null) {
  137.                         field = field.getElementsByTagName('input')[0];
  138.                     }
  139.                     field.maxLength = instance.maxCount;
  140.                     field.ctr = counterLabel;
  141.  
  142.                     if (field.textLength > 0)
  143.                         counterLabel.innerHTML =  field.textLength + ' / ' + instance.maxCount;
  144.                     else
  145.                         counterLabel.innerHTML =  instance.minCount + ' / ' + instance.maxCount;
  146.  
  147.                     // add onchange event
  148.                     YAHOO.util.Event.on(field, 'keyup', this.count, field);
  149.                 },
  150.  
  151.                 count : function(evt, el) {
  152.                     if (el.textLength > el.maxLength) {
  153.                         YAHOO.util.Event.stopEvent(evt);
  154.                         return;
  155.                     }
  156.  
  157.                     YDOM.get(el.ctr).innerHTML = el.textLength + ' / ' + el.maxLength;
  158.                 }
  159.             };
  160.             ]]>
  161.         </xhtml:script>
  162.     </xhtml:head>
  163.  
  164.     <xhtml:body class="body">
  165.  
  166.         <div>
  167.             <xforms:trigger appearance="full">
  168.                 <xforms:label>
  169.                     Add Another
  170.                 </xforms:label>
  171.                 <xforms:insert ev:event="DOMActivate" at="1"
  172.                                nodeset="repeat/item"/>
  173.             </xforms:trigger>
  174.         </div>
  175.  
  176.         <xforms:repeat nodeset="repeat/item">
  177.             <div>
  178.                 <fr:input-counted ref="title" max="10">
  179.                     <xforms:label>Node Selector</xforms:label>
  180.                 </fr:input-counted>
  181.             </div>
  182.         </xforms:repeat>
  183.     </xhtml:body>
  184. </xhtml:html>