jminta%gmail.com ef15f6afe4 Bug 317607 For minimonth should be used localization language and not OS language. Patch by gekacheka@yahoo.com, r=ctalbert,jminta
git-svn-id: svn://10.0.0.236/trunk@220040 18797224-902f-48f8-a5cc-f745e15eee43
2007-02-13 03:09:22 +00:00

687 lines
25 KiB
XML

<?xml version="1.0"?>
<!--
/* MiniMonth Calendar: day-of-month grid XBL component.
Displays month name and year above grid of days of month by week rows.
Arrows move forward or back a month.
Selecting a month name from month menu moves to that month in same year.
Selecting a year from year menu moves to same month in selected year.
Clicking on a day cell calls onchange attribute.
Changing month via arrows or menus calls onmonthchange attribute.
Used in datepicker.xbl and as mini-month in calendar.xul of Calendar.
At site, can provide id, and code to run when value changed by picker.
<calendar id="my-date-picker" onchange="myDatePick( this );"/>
May get/set value in javascript with
document.getElementById("my-date-picker").value = new Date();
Use attributes onpopuplisthidden and onmonthchange for working around
bugs that occur when minimonth is displayed in a popup (as in datepicker):
Currently (2005.3)
whenever a child popup is hidden, the parent popup needs to be reshown.
Use onpopuplisthidden to reshow parent popop (hidePopup, showPopup).
When title month or year changes, parent popup may need to be reshown.
Use onmonthchange to reshow parent popop (hidePopup, showPopup).
*/
-->
<bindings id="xulMiniMonth"
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="minimonth" extends="xul:box" xbl:inherits="onchange,onmonthchange,onpopuplisthidden">
<resources>
<stylesheet src="chrome://calendar/skin/datetimepickers/minimonth.css"/>
</resources>
<!-- ::::::::::::::::: CONTENT ::::::::::::::::::::::::: -->
<content>
<xul:vbox class="minimonth-mainbox" flex="1">
<xul:hbox class="minimonth-month-box">
<xul:image class="minimonth-navbtn" dir="-1"/>
<xul:spacer flex="1"/>
<xul:text class="minimonth-month-name" value="Month" onclick="showPopupList(event, 'month')"/>
<xul:text class="minimonth-year-name" value="Year" onclick="showPopupList(event, 'year')"/>
<xul:spacer flex="1"/>
<xul:image class="minimonth-navbtn" dir="1"/>
</xul:hbox>
<xul:vbox class="minimonth-cal-box" flex="1">
<xul:hbox class="minimonth-row-head" equalsize="always">
<xul:text class="minimonth-header" flex="1"/>
<xul:text class="minimonth-header" flex="1"/>
<xul:text class="minimonth-header" flex="1"/>
<xul:text class="minimonth-header" flex="1"/>
<xul:text class="minimonth-header" flex="1"/>
<xul:text class="minimonth-header" flex="1"/>
<xul:text class="minimonth-header" flex="1"/>
</xul:hbox>
<xul:hbox class="minimonth-row-body" equalsize="always" flex="1">
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
</xul:hbox>
<xul:hbox class="minimonth-row-body" equalsize="always" flex="1">
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
</xul:hbox>
<xul:hbox class="minimonth-row-body" equalsize="always" flex="1">
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
</xul:hbox>
<xul:hbox class="minimonth-row-body" equalsize="always" flex="1">
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
</xul:hbox>
<xul:hbox class="minimonth-row-body" equalsize="always" flex="1">
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
</xul:hbox>
<xul:hbox class="minimonth-row-body" equalsize="always" flex="1">
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
<xul:text class="minimonth-day" flex="1"/>
</xul:hbox>
</xul:vbox>
</xul:vbox>
<xul:popupset>
<xul:popup anonid="months-popup" position="after_start"
onpopupshowing="event.stopPropagation();"
onpopuphidden="firePopupListHidden();">
<xul:vbox>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
</xul:vbox>
</xul:popup>
<xul:popup anonid="years-popup" position="after_start"
onpopupshowing="event.stopPropagation();"
onpopuphidden="firePopupListHidden();">
<xul:vbox>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
<xul:text class="minimonth-list"/>
</xul:vbox>
</xul:popup>
</xul:popupset>
</content>
<!-- ::::::::::::::::: INTERFACE ::::::::::::::::::::::::: -->
<implementation>
<property name="value"
onget="return this.mValue"
onset="this.update(val)"/>
<constructor>
<![CDATA[
this.mToday = false;
this.mSelected = false;
this.mValue = null;
this.mEditorDate = null; // set only in showMonth
this.kMonthNames = new Array(12);
var tempDate = new Date(2005, 0, 1);
for (var month = 0; month < 12; month++) {
tempDate.setMonth(month);
// if available, use UILocale months, else operating system format
try {
this.kMonthNames[month] =
calGetString("dateFormat", "month." + (month + 1) + ".name");
} catch (e) {
this.kMonthNames[month] = tempDate.toLocaleFormat("%B");
}
}
this.mPopup = null;
// save references for convenience
var anonContent = document.getAnonymousNodes(this);
var mainBox = anonContent[0];
var headBox = mainBox.childNodes[0];
this.kLeftBtn = headBox.firstChild;
this.kLeftBtn.kMinimonth = this;
this.kRightBtn = headBox.lastChild;
this.kRightBtn.kMinimonth = this;
this.kMonthCell = headBox.childNodes[2];
this.kYearCell = headBox.childNodes[3];
this.kDaysOfMonthBox = mainBox.childNodes[1];
var popupSet = anonContent[1];
this.kMonthPopup = popupSet.childNodes[0];
this.kMonthList = this.kMonthPopup.firstChild.childNodes;
this.kYearPopup = popupSet.childNodes[1];
this.kYearList = this.kYearPopup.firstChild.childNodes;
this.refreshDisplay( );
]]>
</constructor>
<method name="refreshDisplay">
<body>
<![CDATA[
// Find out which should be the first day of the week
try {
var pref = Components.classes[
"@mozilla.org/preferences-service;1"
].getService(Components.interfaces.nsIPrefBranch);
// this.weekStart;
this.weekStart = pref.getIntPref("calendar.week.start");
} catch (e) {
this.weekStart = 0;
}
if (!this.mValue) this.mValue = new Date();
this.setHeader();
this.showMonth(this.mValue);
]]>
</body>
</method>
<method name="setHeader">
<body>
<![CDATA[
// Reset the headers
var header = document.getAnonymousNodes(this)[0].
childNodes[1].childNodes[0];
var dayList = new Array(7);
var tempDate = new Date();
var i, j;
tempDate.setDate(tempDate.getDate() - (tempDate.getDay() - this.weekStart));
for (i = 0; i < header.childNodes.length; i++) {
// if available, use UILocale days, else operating system format
try {
dayList[i] =
calGetString("dateFormat",
"day." + (tempDate.getDay() + 1) + ".short");
} catch (e) {
dayList[i] = tempDate.toLocaleFormat("%a");
}
tempDate.setDate(tempDate.getDate() + 1);
}
//abbreviations are too long, so shrink them down
var foundMatch;
for (i = 0; i < header.childNodes.length; i++) {
foundMatch = 1;
for (j = 0; j < header.childNodes.length; j++) {
if (i != j) {
if (dayList[i].substring(0,1) == dayList[j].substring(0,1)) {
foundMatch = 2;
break;
}
}
}
dayList[i] = dayList[i].substring(0,foundMatch)
}
for (var column = 0; column < header.childNodes.length; column++) {
header.childNodes[column].setAttribute( "value", dayList[column]);
}
]]>
</body>
</method>
<method name="showMonth">
<parameter name="aDate"/>
<body>
<![CDATA[
if (!aDate) {
aDate = new Date();
} else {
aDate = new Date(aDate);
}
aDate.setDate(1);
aDate.setHours(0);
aDate.setMinutes(0);
aDate.setSeconds(0);
aDate.setMilliseconds(0);
var monthChanged = (this.mEditorDate != aDate);
this.mEditorDate = aDate; // only place mEditorDate is set.
if (this.mToday) {
this.mToday.removeAttribute("today");
this.mToday = null;
}
if (this.mSelected) {
this.mSelected.removeAttribute("selected");
this.mSelected = null;
}
// Update the month and year title
var mon = this.getMonthName(aDate);
this.kMonthCell.setAttribute("value", mon);
this.kYearCell.setAttribute("value", aDate.getFullYear());
// Update the month popup
var i;
var months = this.kMonthList;
for (i = 0; i < months.length; i++) {
months[i].setAttribute("value", this.kMonthNames[i]);
months[i].setAttribute("index", i);
months[i].setAttribute("current", "false");
if (i == aDate.getMonth())
months[i].setAttribute("current", "true");
}
// Update the year popup
var years = this.kYearList;
var year = new Date(aDate);
year.setFullYear(aDate.getFullYear() - (years.length%2 + 1));
for (i = 0; i < years.length; i++) {
years[i].setAttribute("value", year.getFullYear());
years[i].setAttribute("current", "false");
if (year.getFullYear() == aDate.getFullYear())
years[i].setAttribute("current", "true");
year.setFullYear(year.getFullYear() + 1);
}
// Update the calendar
var calbox = this.kDaysOfMonthBox;
var date = this._getStartDate(aDate);
// get today's date
var today = new Date();
for (var k = 1; k < calbox.childNodes.length; k++) {
var row = calbox.childNodes[k];
for (i = 0; i < 7; i++) {
var day = row.childNodes[i];
if (aDate.getMonth() != date.getMonth()) {
day.setAttribute("othermonth", "true");
} else {
day.removeAttribute("othermonth");
}
// highlight today
if (this._sameDay(today, date)) {
this.mToday = day;
day.setAttribute("today", "true");
}
// highlight the current date
var val = this.value;
if (this._sameDay(val, date)) {
this.mSelected = day;
day.setAttribute("selected", "true");
}
day.date = new Date(date);
day.calendar = this;
day.setAttribute("value", date.getDate());
date.setDate(date.getDate() + 1);
}
}
if (monthChanged) this.fireEvent('monthchange');
]]>
</body>
</method>
<method name="showPopupList">
<parameter name="event"/>
<parameter name="type"/> <!-- 'month' or 'year' -->
<body>
<![CDATA[
// Don't do anything for right/middle-clicks
if (event.button != 0)
return;
// Close open popups (if any), to prevent linux crashes
if (this.mPopup)
this.mPopup.hidePopup();
this.mPopup = (type == 'month'? this.kMonthPopup : this.kYearPopup);
var base = (type == 'month'? this.kMonthCell : this.kYearCell);
this.mPopup.showPopup(base, -1, -1, "popup", "bottomleft", "topleft");
]]>
</body>
</method>
<method name="hidePopupList">
<body>
<![CDATA[
// Close open popups (if any)
var popup = this.mPopup;
this.mPopup = null;
if (popup)
popup.hidePopup();
]]>
</body>
</method>
<method name="fireEvent">
<parameter name="aEventName"/>
<body>
<![CDATA[
var event = document.createEvent('Events');
event.initEvent(aEventName, true, true);
this.dispatchEvent(event);
]]>
</body>
</method>
<method name="firePopupListHidden">
<body>
<![CDATA[
if (this.mPopup) {
this.mPopup = null;
this.fireEvent("popuplisthidden");
}
]]>
</body>
</method>
<method name="setBusyDates">
<parameter name="arrayOfDates"/>
<body>
<![CDATA[
/* CODE FROM monthView.js for finding the events for the month. */
/*
document.getElementById( "lefthandcalendar" ).value = date;
//get a list of events for this month.
var monthEvents =
this.eventSource.getEventsForMonth( this.getSelectedDate() );
var arrayOfDates = new Array();
for( var eventIndex = 0; eventIndex < monthEvents.length; ++eventIndex )
{
var calendarEventDisplay = monthEvents[ eventIndex ];
var eventDate = new Date( calendarEventDisplay.displayDate );
//add them to an array
arrayOfDates[ eventDate.getDate() ] = true;
}
document.getElementById( "lefthandcalendar" ).setBusyDates( arrayOfDates );
*/
var aDate = new Date();
aDate.setDate( 1 );
// Update the calendar
var calbox = document.getAnonymousNodes(this)[0].childNodes[1];
// weekStart day is set by preference
var firstWeekday = (7 + aDate.getDay() - this.weekStart) % 7;
var date = new Date(aDate.getTime());
date.setDate(date.getDate() - firstWeekday);
for (var k = 1; k < calbox.childNodes.length; k++) {
var row = calbox.childNodes[k];
for (var i = 0; i < 7; i++) {
var day = row.childNodes[i];
if (aDate.getMonth() == date.getMonth() &&
arrayOfDates[ date.getDate() ] == true ) {
day.setAttribute("busy", "true");
} else {
day.removeAttribute("busy");
}
// next date of month, may increment month
date.setDate(date.getDate() + 1);
}
}
]]>
</body>
</method>
<method name="advanceMonth">
<parameter name="aDir"/>
<body>
<![CDATA[
var advEditorDate = new Date(this.mEditorDate); // at 1st of month
var advMonth = this.mEditorDate.getMonth() + aDir;
advEditorDate.setMonth(advMonth);
this.showMonth(advEditorDate);
]]>
</body>
</method>
<method name="dayClicked">
<parameter name="aDay"/>
<body>
<![CDATA[
if (this.mSelected) {
this.mSelected.removeAttribute("selected");
}
this.mSelected = aDay;
aDay.setAttribute("selected", "true");
this.value = aDay.date;
this.fireEvent('select');
]]>
</body>
</method>
<method name="update">
<parameter name="aValue"/>
<body>
<![CDATA[
this.mValue = aValue;
this.fireEvent('change');
this.showMonth(aValue);
]]>
</body>
</method>
<method name="getMonthName">
<parameter name="aDate"/>
<body>
<![CDATA[
return this.kMonthNames[aDate.getMonth()];
]]>
</body>
</method>
<method name="switchMonth">
<parameter name="aMonth"/>
<body>
<![CDATA[
var newMonth = new Date(this.mEditorDate);
newMonth.setMonth(aMonth);
this.showMonth(newMonth);
]]>
</body>
</method>
<method name="switchYear">
<parameter name="aYear"/>
<body>
<![CDATA[
var newMonth = new Date(this.mEditorDate);
newMonth.setFullYear(aYear);
this.showMonth(newMonth);
]]>
</body>
</method>
<method name="selectDate">
<parameter name="aDate"/>
<parameter name="aMainDate"/>
<body>
<![CDATA[
if (!aMainDate || (aDate < this._getStartDate(aMainDate) || aDate > this._getEndDate(aMainDate))) {
aMainDate = new Date(aDate);
aMainDate.setDate(1);
}
// note, that aMainDate and this.mEditorDate refer to the first day
// of the corresponding month
var sameMonth = this._sameDay(aMainDate, this.mEditorDate);
var sameDate = this._sameDay(aDate,this.mValue);
if (!sameMonth && !sameDate) {
// change month and select day
this.mValue = aDate;
this.showMonth(aMainDate);
} else if (!sameMonth) {
// change month only
this.showMonth(aMainDate);
} else if (!sameDate) {
// select day only
var day = this._findDay(aDate);
if (this.mSelected) {
this.mSelected.removeAttribute("selected");
}
this.mSelected = day;
day.setAttribute("selected", "true");
this.mValue = aDate;
}
]]>
</body>
</method>
<method name="_findDay">
<parameter name="aDate"/>
<body>
<![CDATA[
var calbox = this.kDaysOfMonthBox;
for (var i = 1; i < calbox.childNodes.length; ++i) {
var row = calbox.childNodes[i];
for (var j = 0; j < 7; ++j) {
var day = row.childNodes[j];
if (this._sameDay(day.date,aDate)) {
return day;
}
}
}
return null;
]]>
</body>
</method>
<method name="_getStartDate">
<parameter name="aMainDate"/>
<body>
<![CDATA[
var date = new Date(aMainDate);
var firstWeekday = (7 + aMainDate.getDay() - this.weekStart) % 7;
date.setDate(date.getDate()-firstWeekday);
return date;
]]>
</body>
</method>
<method name="_getEndDate">
<parameter name="aMainDate"/>
<body>
<![CDATA[
var date = this._getStartDate(aMainDate);
var days = (this.kDaysOfMonthBox.childNodes.length - 1) * 7;
date.setDate(date.getDate() + days - 1);
return date;
]]>
</body>
</method>
<method name="_sameDay">
<parameter name="aDate1"/>
<parameter name="aDate2"/>
<body>
<![CDATA[
if (aDate1 && aDate2 &&
(aDate1.getDate() == aDate2.getDate()) &&
(aDate1.getMonth() == aDate2.getMonth()) &&
(aDate1.getFullYear() == aDate2.getFullYear())) {
return true;
}
return false;
]]>
</body>
</method>
</implementation>
<!-- ::::::::::::::::: HANDLERS ::::::::::::::::::::::::: -->
<handlers>
<handler event="bindingattached" action="this.initialize();"/>
<!-- handle click from nested months popup and years popup -->
<handler event="click">
<![CDATA[
var element = event.originalTarget;
if (element.parentNode && element.parentNode.parentNode) {
var grandparent = element.parentNode.parentNode;
switch(grandparent) {
case this.kMonthPopup:
this.hidePopupList();
this.switchMonth(element.getAttribute("index"));
break;
case this.kYearPopup:
this.hidePopupList();
this.switchYear(element.getAttribute("value"));
break;
}
}
]]>
</handler>
<handler event="DOMMouseScroll">
<![CDATA[
var rows = event.detail;
if (rows == NSUIEvent.SCROLL_PAGE_UP) {
rows = -1;
} else if (rows == NSUIEvent.SCROLL_PAGE_DOWN) {
rows = 1;
} else {
// In this case event.detail contains the default number of lines
// to scroll. We always want to only scroll 1 month though
rows = (rows > 0) ? 1 : -1;
}
this.advanceMonth(rows);
]]>
</handler>
</handlers>
</binding>
<binding id="minimonth-navbtn" inherits="dir">
<!-- ::::::::::::::::: HANDLERS ::::::::::::::::::::::::: -->
<handlers>
<handler event="click">
<![CDATA[
this.kMinimonth.advanceMonth(parseInt(this.getAttribute('dir')));
]]>
</handler>
</handlers>
</binding>
<binding id="minimonth-day" extends="xul:text">
<!-- ::::::::::::::::: HANDLERS ::::::::::::::::::::::::: -->
<handlers>
<handler event="click" action="if (event.button == 0) this.calendar.dayClicked(this)"/>
</handlers>
</binding>
</bindings>