Bug 1320225: [DateTimeInput] Integration of input type=date input box with picker (part 1)

This commit is contained in:
janekptacijarabaci 2018-02-14 14:03:55 +01:00 • committed by Roy Tam
commit ee07b11c03
4 changed files with 113 additions and 42 deletions

View file

@ -20,6 +20,8 @@
</field>
<field name="TIME_PICKER_WIDTH" readonly="true">"12em"</field>
<field name="TIME_PICKER_HEIGHT" readonly="true">"21em"</field>
<field name="DATE_PICKER_WIDTH" readonly="true">"23.1em"</field>
<field name="DATE_PICKER_HEIGHT" readonly="true">"20.7em"</field>
<method name="loadPicker">
<parameter name="type"/>
<parameter name="detail"/>
@ -38,6 +40,14 @@
this.dateTimePopupFrame.style.height = this.TIME_PICKER_HEIGHT;
break;
}
case "date": {
this.detail = detail;
this.dateTimePopupFrame.addEventListener("load", this, true);
this.dateTimePopupFrame.setAttribute("src", "chrome://global/content/datepicker.xhtml");
this.dateTimePopupFrame.style.width = this.DATE_PICKER_WIDTH;
this.dateTimePopupFrame.style.height = this.DATE_PICKER_HEIGHT;
break;
}
}
]]></body>
</method>
@ -48,7 +58,7 @@
this.pickerState = {};
this.type = undefined;
this.dateTimePopupFrame.removeEventListener("load", this, true);
this.dateTimePopupFrame.contentDocument.removeEventListener("TimePickerPopupChanged", this, false);
this.dateTimePopupFrame.contentDocument.removeEventListener("message", this, false);
this.dateTimePopupFrame.setAttribute("src", "");
]]></body>
</method>
@ -58,25 +68,39 @@
switch (this.type) {
case "time": {
this.postMessageToPicker({
name: "TimePickerSetValue",
name: "PickerSetValue",
detail: data.value
});
break;
}
case "date": {
const { year, month, day } = data.value;
this.postMessageToPicker({
name: "PickerSetValue",
detail: {
year,
// Month value from input box starts from 1 instead of 0
month: month == undefined ? undefined : month - 1,
day
}
});
break;
}
}
]]></body>
</method>
<method name="initPicker">
<parameter name="detail"/>
<body><![CDATA[
const locale = Components.classes["@mozilla.org/chrome/chrome-registry;1"].getService(Ci.nsIXULChromeRegistry).getSelectedLocale("global");
switch (this.type) {
case "time": {
const { hour, minute } = detail.value;
const format = detail.format || "12";
const locale = Components.classes["@mozilla.org/chrome/chrome-registry;1"].getService(Ci.nsIXULChromeRegistry).getSelectedLocale("global");
this.postMessageToPicker({
name: "TimePickerInit",
name: "PickerInit",
detail: {
hour,
minute,
@ -89,6 +113,20 @@
});
break;
}
case "date": {
const { year, month, day } = detail.value;
this.postMessageToPicker({
name: "PickerInit",
detail: {
year,
// Month value from input box starts from 1 instead of 0
month: month == undefined ? undefined : month - 1,
day,
locale
}
});
break;
}
}
]]></body>
</method>
@ -112,6 +150,10 @@
}
break;
}
case "date": {
this.sendPickerValueChanged(this.pickerState);
break;
}
}
]]></body>
</method>
@ -128,6 +170,17 @@
}));
break;
}
case "date": {
this.dispatchEvent(new CustomEvent("DateTimePickerValueChanged", {
detail: {
year: value.year,
// Month value from input box starts from 1 instead of 0
month: value.month == undefined ? undefined : value.month + 1,
day: value.day
}
}));
break;
}
}
]]></body>
</method>
@ -155,11 +208,15 @@
}
switch (aEvent.data.name) {
case "TimePickerPopupChanged": {
case "PickerPopupChanged": {
this.pickerState = aEvent.data.detail;
this.setInputBoxValue();
break;
}
case "ClosePopup": {
this.closePicker();
break;
}
}
]]></body>
</method>