Location: PHPKode > scripts > HV WDDX Metadata > hv-wddx-metadata/xbl.xml
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">


  <binding id="time">
    <content>
      <xul:textbox xbl:inherits="value,readonly" anonid="time"/>
      
      <!-- **** DELETE MENU LABEL IF YOU HAVE AN IMAGE -->
			<xul:menu class="timepicker-popup" label="Time Picker"> 
			
				<xul:menupopup xpopupanchor="bottomleft" xpopupalign="topright">
				 <xul:timepicker xbl:inherits="value"/>
				</xul:menupopup>
			</xul:menu>
    </content>

    <implementation>
      <constructor><![CDATA[
        this.time = document.getAnonymousElementByAttribute(this, "anonid", "time");
      ]]></constructor>

      <property name="value"
                onget="return this.time.value;"
                onset="this.time.value = val; return val;"/>

    </implementation>
  </binding>


  <binding id="date">
    <content>
      <xul:textbox xbl:inherits="value,readonly" anonid="date" flex="0"/>
      
      <!-- **** DELETE MENU LABEL IF YOU HAVE AN IMAGE -->
			<xul:menu class="datepicker-popup" label="Date Picker"> 
			
				<xul:menupopup>
				 <xul:datepicker xbl:inherits="value"/>
				</xul:menupopup>
			</xul:menu>
    </content>

    <implementation>
      <constructor><![CDATA[
        this.date = document.getAnonymousElementByAttribute(this, "anonid", "date");
        if (this.value=='0000-00-00') this.setAttribute('value', '');
      ]]></constructor>

      <property name="value"
                onget="return this.date.value;"
                onset="this.date.value = val; return val;"/>

    </implementation>
  </binding>


  <binding id="textboxmulti">
    <content>
      <xul:textbox type="text" anonid="input" multiline="true"
                   xbl:inherits="flex,rows,cols,wrap,readonly,style"/>
    </content>
    <implementation>
      <constructor><![CDATA[
        this.input=document.getAnonymousElementByAttribute(this, "anonid", "input");
        if (this.hasAttribute('value'))
          this.input.value = this.getAttribute('value');
       ]]></constructor>
      <property name="value" onset="this.input.value=val;"
                             onget="return this.input.value;"/>
    </implementation>
  </binding>




  <!-- DATE PICKER -->
  <binding id="datepicker">
    <content>

      <xul:vbox class="datepicker-mainbox" flex="1">

		    <xul:hbox class="datepicker-month-box">
			    <xul:text class="datepicker-button-month" value="&lt;&lt;" increment="-12"/>
			    <xul:text class="datepicker-button-month" value="&lt; " increment="-1"/>
			    <xul:spacer flex="1"/>
			    <xul:text class="datepicker-month-name" value="Month"/>
			    <xul:spacer flex="1"/>
			    <xul:text class="datepicker-button-month" value="&gt;" increment="1"/>
			    <xul:text class="datepicker-button-month" value="&gt;&gt;" increment="12"/>
		    </xul:hbox>

        <xul:vbox class="datepicker-box" flex="1">
          <xul:hbox class="datepicker-row-head" equalsize="always">
            <xul:text class="datepicker-header" flex="1" value="M"/>
            <xul:text class="datepicker-header" flex="1" value="T"/>
            <xul:text class="datepicker-header" flex="1" value="W"/>
            <xul:text class="datepicker-header" flex="1" value="T"/>
            <xul:text class="datepicker-header" flex="1" value="F"/>
            <xul:text class="datepicker-header" flex="1" value="S"/>
            <xul:text class="datepicker-header" flex="1" value="S"/>
          </xul:hbox>
          <xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
          </xul:hbox>
          <xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
          </xul:hbox>
          <xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
          </xul:hbox>
          <xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
          </xul:hbox>
          <xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
          </xul:hbox>
          <xul:hbox class="datepicker-row-body" equalsize="always" flex="1">
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
            <xul:text class="datepicker-day" flex="1"/>
          </xul:hbox>
        </xul:vbox>

      </xul:vbox>
    </content>

    <implementation>
      <constructor><![CDATA[
        var box_month = document.getAnonymousNodes(this)[0].childNodes[0];

        this.month_decrement            = box_month.childNodes[1];
        this.month_decrement.datepicker = this;
        this.month_increment            = box_month.childNodes[5];
        this.month_increment.datepicker = this;
        this.year_decrement             = box_month.childNodes[0];
        this.year_decrement.datepicker  = this;
        this.year_increment             = box_month.childNodes[6];
        this.year_increment.datepicker  = this;

        this.node_month                 = box_month.childNodes[3];

        if (this.value) {
          date_array  = this.value.split('-');
          year        = date_array[0];
          month       = date_array[1]-1;
          day         = date_array[2];

          // if year is zero the use current date as default. date may be set to 0000-00-00 from database.
          if (year==0)  this.date = new Date();
          else          this.date   = new Date(year, month, day);

          //this.date   = new Date(year, month, day);

        } else {
          this.date   = new Date();
        }

        //dump(this.date);
        this.showDate(this.date);
      ]]></constructor>

      <property name="value"
          onget="return this.getAttribute('value');"
          onset="return this.setAttribute('value', val);"/>

      <method name="showDate">
        <parameter name="some_date"/>
        <body><![CDATA[
          //dump('showDate - some_date = '+some_date);

          this.display_date = some_date;

          var a_month = new Date(some_date.toString());
          a_month.setDate(1); // first day

          var selected_year  = this.date.getFullYear();
          var selected_month = this.date.getMonth();
          var selected_date  = this.date.getDate();

          // UPDATE THE MONTH
          var month = this.getMonthName(a_month) + " " + a_month.getFullYear();
          this.node_month.setAttribute("value", month);

          var box_datepicker = document.getAnonymousNodes(this)[0].childNodes[1];

          var first_weekday = (a_month.getDay() + 6) % 7; // start on monday
  	      var node_date = new Date(a_month.getTime());
  	      node_date.setDate(node_date.getDate()-first_weekday);

          for (var k = 1; k < box_datepicker.childNodes.length; k++) {
            var row = box_datepicker.childNodes[k];

            for (var i = 0; i < 7; i++) {
              node_day = row.childNodes[i];
              node_day.setAttribute("selected", "false"); // clear old attributes

              if (a_month.getMonth() != node_date.getMonth()) {
                node_day.setAttribute("othermonth", "true");
              } else {
                node_day.setAttribute("othermonth", "");
              }

              // HIGHLIGHT THE SELECTED DATE
              if ((selected_year  == node_date.getFullYear()) &&
                  (selected_month == node_date.getMonth()) &&
                  (selected_date  == node_date.getDate())) {

                node_day.setAttribute("selected", "true");
              }

  	          node_day.date = node_date;
  	          node_day.datepicker = this;
  	          node_day.setAttribute("value", node_date.getDate());
  	          node_date = new Date(node_date.getTime());
  	          node_date.setDate(node_date.getDate() + 1);
            }
          }
        ]]></body>
      </method>

      <method name="monthClicked">
  			<parameter name="increment"/>
  			<body><![CDATA[
          var month= this.display_date.getMonth()+increment;
          this.display_date.setMonth(month);
          this.showDate(this.display_date);
  			]]></body>
  		</method>

  		<method name="dayClicked">
  			<parameter name="some_day"/>
  			<body><![CDATA[
  			  this.date  = some_day.date;
  			  this.value = this.date.getFullYear() + '-' +
  			               (this.date.getMonth() + 1) + '-' +
  			               this.date.getDate();

  			  this.showDate(this.date);

          try {
            this.parentNode.parentNode.parentNode.value = this.value;
            this.parentNode.parentNode.parentNode.setAttribute('value', this.value);
            this.parentNode.hidePopup();
          } catch(e) {};



  			  //dump(this.value);
  			]]></body>
  		</method>

      <method name="getMonthName">
        <parameter name="a_month"/>
        <body><![CDATA[
          var monthNames = new Array(12);
          monthNames[0]  = "January";
          monthNames[1]  = "February";
          monthNames[2]  = "March";
          monthNames[3]  = "April";
          monthNames[4]  = "May";
          monthNames[5]  = "June";
          monthNames[6]  = "July";
          monthNames[7]  = "August";
          monthNames[8]  = "September";
          monthNames[9]  = "October";
          monthNames[10] = "November";
          monthNames[11] = "December";
          var index      = a_month.getMonth();
          return monthNames[index];
        ]]></body>
      </method>
      
    </implementation>

   </binding>


  <binding id="datepicker-button-month" inherits="dir">
    <handlers>
      <handler event="click"><![CDATA[
        this.datepicker.monthClicked(parseInt(this.getAttribute('increment')));
      ]]></handler>
    </handlers>
    <implementation/>
  </binding>

	<binding id="datepicker-day" extends="xul:text">
		<handlers>
			<handler event="click" action="this.datepicker.dayClicked(this)"/>
		</handlers>
		<implementation/>
	</binding>



  <!-- TIMEPICKER -->
  <binding id="timepicker">

    <content>
      <xul:vbox>
        <xul:hbox equalsize="always" flex="1">
          <xul:text class="timepicker-head" value="AM"/>
          <xul:text class="timepicker-head" value="PM"/>
          <xul:text class="timepicker-head" value="Minute"/>
        </xul:hbox>
        <xul:hbox class="timepicker-box" flex="1">
          <xul:vbox class="timepicker-hour-col" equalsize="always" flex="1">
            <xul:text class="timepicker-hour" flex="1" value="00" onclick="clickHour(0);"/>
            <xul:text class="timepicker-hour" flex="1" value="01" onclick="clickHour(1);"/>
            <xul:text class="timepicker-hour" flex="1" value="02" onclick="clickHour(2);"/>
            <xul:text class="timepicker-hour" flex="1" value="03" onclick="clickHour(3);"/>
            <xul:text class="timepicker-hour" flex="1" value="04" onclick="clickHour(4);"/>
            <xul:text class="timepicker-hour" flex="1" value="05" onclick="clickHour(5);"/>
            <xul:text class="timepicker-hour" flex="1" value="06" onclick="clickHour(6);"/>
            <xul:text class="timepicker-hour" flex="1" value="07" onclick="clickHour(7);"/>
            <xul:text class="timepicker-hour" flex="1" value="08" onclick="clickHour(8);"/>
            <xul:text class="timepicker-hour" flex="1" value="09" onclick="clickHour(9);"/>
            <xul:text class="timepicker-hour" flex="1" value="10" onclick="clickHour(10);"/>
            <xul:text class="timepicker-hour" flex="1" value="11" onclick="clickHour(11);"/>
          </xul:vbox>
          <xul:vbox class="timepicker-hour-col" equalsize="always" flex="1">
            <xul:text class="timepicker-hour" flex="1" value="12" onclick="clickHour(12);"/>
            <xul:text class="timepicker-hour" flex="1" value="13" onclick="clickHour(13);"/>
            <xul:text class="timepicker-hour" flex="1" value="14" onclick="clickHour(14);"/>
            <xul:text class="timepicker-hour" flex="1" value="15" onclick="clickHour(15);"/>
            <xul:text class="timepicker-hour" flex="1" value="16" onclick="clickHour(16);"/>
            <xul:text class="timepicker-hour" flex="1" value="17" onclick="clickHour(17);"/>
            <xul:text class="timepicker-hour" flex="1" value="18" onclick="clickHour(18);"/>
            <xul:text class="timepicker-hour" flex="1" value="19" onclick="clickHour(19);"/>
            <xul:text class="timepicker-hour" flex="1" value="20" onclick="clickHour(20);"/>
            <xul:text class="timepicker-hour" flex="1" value="21" onclick="clickHour(21);"/>
            <xul:text class="timepicker-hour" flex="1" value="22" onclick="clickHour(22);"/>
            <xul:text class="timepicker-hour" flex="1" value="23" onclick="clickHour(23);"/>
          </xul:vbox>
          <xul:vbox class="timepicker-minute-col" equalsize="always" flex="1">
            <xul:text class="timepicker-minute" flex="1" value=":00" onclick="clickMinute(0);"/>
            <xul:text class="timepicker-minute" flex="1" value=":05" onclick="clickMinute(5);"/>
            <xul:text class="timepicker-minute" flex="1" value=":10" onclick="clickMinute(10);"/>
            <xul:text class="timepicker-minute" flex="1" value=":15" onclick="clickMinute(15);"/>
            <xul:text class="timepicker-minute" flex="1" value=":20" onclick="clickMinute(20);"/>
            <xul:text class="timepicker-minute" flex="1" value=":25" onclick="clickMinute(25);"/>
            <xul:text class="timepicker-minute" flex="1" value=":30" onclick="clickMinute(30);"/>
            <xul:text class="timepicker-minute" flex="1" value=":35" onclick="clickMinute(35);"/>
            <xul:text class="timepicker-minute" flex="1" value=":40" onclick="clickMinute(40);"/>
            <xul:text class="timepicker-minute" flex="1" value=":45" onclick="clickMinute(45);"/>
            <xul:text class="timepicker-minute" flex="1" value=":50" onclick="clickMinute(50);"/>
            <xul:text class="timepicker-minute" flex="1" value=":55" onclick="clickMinute(55);"/>
          </xul:vbox>
        </xul:hbox>
      </xul:vbox>
    </content>

    <implementation>
      <constructor><![CDATA[
        timepicker_box = document.getAnonymousNodes(this)[0].childNodes[1];
        this.col_hour_am           = timepicker_box.childNodes[0];
        this.col_hour_pm           = timepicker_box.childNodes[1];
        this.col_minute            = timepicker_box.childNodes[2];

        if (this.value) {
          time   = this.value.split(':');
          hour   = time[0];
          minute = time[1];

          this.selectMinute(minute);
          this.selectHour(hour);
        }
      ]]></constructor>

      <property name="value"
                onget="return this.getAttribute('value');"
                onset="return this.setAttribute('value', val);"/>


      <method name="selectMinute">
        <parameter name="minute"/>
        <body><![CDATA[
          minute_index = parseInt((minute / 5) + 0.5);
          if (this.selected_minute) this.selected_minute.className="timepicker-minute";
          this.col_minute.childNodes[minute_index].className = "timepicker-minute-selected";
          this.selected_minute = this.col_minute.childNodes[minute_index];
  			]]></body>
  		</method>


      <method name="selectHour">
        <parameter name="hour"/>
        <body><![CDATA[
          if (this.selected_hour) this.selected_hour.className="timepicker-hour";
          if (hour < 12) {
            this.col_hour_am.childNodes[hour].className = "timepicker-hour-selected";
            this.selected_hour = this.col_hour_am.childNodes[hour];
          }
          if (hour >= 12) {
            this.col_hour_pm.childNodes[hour-12].className = "timepicker-hour-selected";
            this.selected_hour = this.col_hour_pm.childNodes[hour-12];
          }
        ]]></body>
  		</method>

      <method name="clickMinute">
        <parameter name="minute"/>
        <body><![CDATA[
          this.selectMinute(minute);
          time = this.value.split(':');
          hour = (time[0]==undefined || time[0] == '') ? '00' : time[0];

          if (minute < 10) minute = '0' + minute;
          this.value = hour + ':'  + minute;

          //dump(this.value);

          try {
            this.parentNode.parentNode.parentNode.value = this.value;
            this.parentNode.parentNode.parentNode.setAttribute('value', this.value);
            this.parentNode.hidePopup();
          } catch(e) {}

  			]]></body>
  		</method>

      <method name="clickHour">
        <parameter name="hour"/>
        <body><![CDATA[
          this.selectHour(hour);
          var time = this.value.split(':');
          minute = (time[1]==undefined) ? '00' : time[1];

          if   (hour < 10) hour = '0' + hour;
          this.value = hour + ':' + minute;

          if (this.parentNode.parentNode.parentNode.nodeName=='time')
              this.parentNode.parentNode.parentNode.setAttribute('value', this.value);
       ]]></body>
      </method>

    </implementation>

   </binding>

</bindings>
Return current item: HV WDDX Metadata