diff --git a/extensions/xforms/jar.mn b/extensions/xforms/jar.mn
index 6a5b820bafc..8b0a6727743 100755
--- a/extensions/xforms/jar.mn
+++ b/extensions/xforms/jar.mn
@@ -28,4 +28,5 @@ xforms.jar:
locale/en-US/xforms/xforms.properties (resources/locale/en-US/xforms.properties)
locale/en-US/xforms/xforms.dtd (resources/locale/en-US/xforms.dtd)
* skin/xforms/contents.rdf (resources/skin/contents.rdf)
+ skin/xforms/widgets-xhtml.css (resources/skin/widgets-xhtml.css)
diff --git a/extensions/xforms/resources/content/input-xhtml.xml b/extensions/xforms/resources/content/input-xhtml.xml
index 46851967385..9d7488611ab 100644
--- a/extensions/xforms/resources/content/input-xhtml.xml
+++ b/extensions/xforms/resources/content/input-xhtml.xml
@@ -184,6 +184,310 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ return {
+ __proto__: this.inputField,
+ pickerButton: this.dropmarker,
+
+ set readonly(val) {
+ if (val) {
+ this.setAttribute('disabled', 'disabled');
+ this.pickerButton.setAttribute('disabled', 'disabled');
+ } else {
+ this.removeAttribute('disabled');
+ this.pickerButton.removeAttribute('disabled');
+ }
+ }
+ };
+
+
+
+
+
+
+ if (this._isPickerVisible)
+ this.hidePicker(true);
+ else
+ this.showPicker();
+
+
+
+
+
+
+ windowWidth) {
+ position = windowWidth - pickerWidth;
+ }
+
+ this.picker.style.left = position + "px";
+ this.picker.focus();
+
+ this.ownerDocument.
+ addEventListener("blur", this.hidePickerHandler, true);
+ this.ownerDocument.
+ addEventListener("focus", this.hidePickerHandler, true);
+ ]]>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ null
+
+
+ // Add event handlers to update instance data when date picker value is
+ // changed.
+
+ // Add event handler on 'change' event.
+ var changePickerValueHandlerOnChange = {
+ inputElm: this,
+ handleEvent: function(event) {
+ this.inputElm.inputField.value = this.inputElm.picker.value;
+ this.inputElm.hidePicker(true);
+ this.inputElm.updateInstanceData(true);
+ }
+ };
+ this.picker.addEventListener("change", changePickerValueHandlerOnChange,
+ false);
+
+ // Add event handler on 'enter' key pressing.
+ var changePickerValueHandlerOnKeypress = {
+ inputElm: this,
+ pickerElm: this.picker,
+ handleEvent: function(event) {
+ if (event.keyCode != event.DOM_VK_RETURN ||
+ !this.pickerElm.isDayControl(event.originalTarget))
+ return;
+
+ var date = this.pickerElm.getDate();
+ if (date) {
+ this.inputElm.inputField.value = date.toLocaleFormat('%Y-%m-%d');
+ this.inputElm.hidePicker(true);
+ this.inputElm.updateInstanceData(true);
+ }
+ }
+ };
+ this.picker.addEventListener("keypress",
+ changePickerValueHandlerOnKeypress, false);
+
+
+
+
+
+ if (!this._inputField) {
+ this._inputField =
+ document.getAnonymousElementByAttribute(this, "anonid", "control");
+ }
+ return this._inputField;
+
+
+ null
+
+
+
+
+ if (!this._picker) {
+ this._picker =
+ document.getAnonymousElementByAttribute(this, "anonid", "picker");
+ }
+ return this._picker;
+
+
+ null
+
+
+
+
+ if (!this._dropmarker) {
+ this._dropmarker =
+ document.getAnonymousElementByAttribute(this, "anonid", "dropmarker");
+ }
+ return this._dropmarker;
+
+
+ null
+
+ false
+
+
+
+
+ this.hidePicker();
+
+
+
+ var target = event.originalTarget;
+ if (target == this.inputField) {
+ this.dispatchDOMUIEvent('DOMActivate');
+ }
+
+
+
+
+
+
+
+ this.updateInstanceData(true);
+
+
+
+ if (event.originalTarget == this.dropmarker) {
+ this.togglePicker();
+ }
+
+
+
+ if (event.originalTarget == this.inputField) {
+ this.dispatchDOMUIEvent('DOMFocusIn');
+ }
+
+
+
+ if (event.originalTarget == this.inputField) {
+ this.updateInstanceData(false);
+ this.dispatchDOMUIEvent('DOMFocusOut');
+ }
+
+
+
+
+
diff --git a/extensions/xforms/resources/content/input.xml b/extensions/xforms/resources/content/input.xml
index e68b8792625..00550bec947 100644
--- a/extensions/xforms/resources/content/input.xml
+++ b/extensions/xforms/resources/content/input.xml
@@ -46,11 +46,6 @@
-->
-
- %xformsDTD;
-]>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this.inputField.value = this.stringValue;
- if (this.accessors.isReadonly()) {
- this.inputField.setAttribute("readonly", "readonly");
- this.dropmarker.setAttribute("disabled", "true");
- } else {
- this.inputField.removeAttribute("readonly");
- this.dropmarker.removeAttribute("disabled");
- }
- return true;
-
-
-
-
-
- if (this.getAttribute("incremental") == "true") {
- this.accessors.setValue(this.inputField.value);
- }
- return true;
-
-
-
- null
-
-
- if (!this._inputField) {
- this._inputField =
- document.getAnonymousElementByAttribute(this, "anonid", "control");
- }
- return this._inputField;
-
-
-
- null
-
-
- if (!this._picker) {
- this._picker =
- document.getAnonymousElementByAttribute(this, "anonid", "picker");
- }
- return this._picker;
-
-
-
- null
-
-
- if (!this._dropmarker) {
- this._dropmarker =
- document.getAnonymousElementByAttribute(this, "anonid", "dropmarker");
- }
- return this._dropmarker;
-
-
-
- null
-
-
- if (!this._dateField) {
- this._dateField =
- document.getAnonymousElementByAttribute(this, "anonid", "date");
- }
- return this._dateField;
-
-
-
- false
- false
- null
- null
-
- -1
-
-
-
-
-
-
-
-
-
- window.innerWidth) {
- // we use window.innerWidth because XHTML documents are not always
- // 100% width, and innerWidth will always give use the browser size.
- position = window.innerWidth - width;
- }
-
- picker.style.left = position + "px";
-
- this._refreshCells(this._date, this._date.getDate());
- ]]>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- = (firstDay + totaldays)) {
- // either previous or next month
- if (i < firstDay) {
- // previous month
- var prevyear = prevDate.getFullYear();
- var prevmonth = prevDate.getMonth();
-
- var maxprev = this._getDaysInMonth(prevmonth, prevyear);
- this._cells[i].node.textContent = maxprev - firstDay + i + 1;
-
- this._cells[i].node.className = "prevMonth";
- showsPrevDays++;
- } else {
- // next month
- this._cells[i].node.textContent = i - (firstDay + totaldays) + 1;
- this._cells[i].node.className = "nextMonth";
- }
- } else {
- // current month
- // this._cells add one since the first day is 1, not 0!
- this._cells[i].node.textContent = i - firstDay + 1;
- this._cells[i].node.className = "currentMonth";
- }
-
- this._cells[i].node.setAttribute("tabindex", "-1");
- }
-
- // first time
- if (this._currentCellIndex == -1) {
- // select the current day
- this._currentCellIndex = aDate.getDate() + showsPrevDays - 1;
- } else {
- // if the day is larger that the total days in this month
- if (aDayToSelect > totaldays)
- aDayToSelect = totaldays;
-
- this._currentCellIndex = aDayToSelect + showsPrevDays - 1;
- }
-
- this._cells[this._currentCellIndex].node.setAttribute("tabindex", "0");
-
- if (!aSkipFocus)
- this._cells[this._currentCellIndex].node.focus();
-
- // update the month year heading
- this.dateField.textContent = this._date.toLocaleFormat("%B %Y");
- ]]>
-
-
-
-
-
-
-
- var month, year = aYear;
-
- if (aMonth == 0) {
- month = 11;
- year--;
- } else {
- month = aMonth - 1;
- }
-
- return new Date(year, month);
-
-
-
-
-
-
-
- var month, year = aYear;
-
- if (aMonth == 11) {
- month = 0;
- year++;
- } else {
- month = aMonth + 1;
- }
-
- return new Date(year, month);
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- = 0) {
- this.selectCell(index - 7);
- } else {
- // focus the back button
- document.getAnonymousElementByAttribute(this, "anonid", "back-button").focus();
- }
- } else if (event.keyCode == event.DOM_VK_LEFT) {
- // ctrl-left goes back a month
- if (event.ctrlKey) {
- this.goBack();
- } else if (currentElement.localName == "input") {
- // input means we are on one of the back/fwd buttons
- document.getAnonymousElementByAttribute(this, "anonid", "back-button").focus();
- } else if ((index - 1) >= 0) {
- this.selectCell(index - 1);
- }
- } else if (event.keyCode == event.DOM_VK_RIGHT) {
- // ctrl-right goes forward a month
- if (event.ctrlKey) {
- this.goForward();
- } else if (currentElement.localName == "input") {
- // input means we are on one of the back/fwd buttons
- document.getAnonymousElementByAttribute(this, "anonid", "fwd-button").focus();
- } else if ((index + 1) < this._cells.length) {
- this.selectCell(index + 1);
- }
- } else if (event.keyCode == event.DOM_VK_RETURN &&
- event.originalTarget.localName == "td") {
- var type = event.originalTarget.className;
- if (type == "currentMonth") {
- this.selectCell(event.originalTarget.getAttribute("num"));
- this._valueSet();
- } else if (type == "prevMonth") {
- this.goBack();
- } else if (type == "nextMonth") {
- this.goForward();
- }
- } else if (event.keyCode == event.DOM_VK_ESCAPE) {
- this._hidePicker(true);
- }
- } else {
- // pressing down if the picker is hidden will show it
- if (event.keyCode == event.DOM_VK_DOWN) {
- // first set the accessor value, since the input's value hasn't
- // been validated yet, and forcing this will.
- this.accessors.setValue(this.inputField.value);
-
- this._showPicker();
- } else {
- // check if something changed
- this._change();
- }
- }
- ]]>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-