3616 changed files with 338155 additions and 44462 deletions
@ -0,0 +1,505 @@ |
|||
dojo.provide("dijit.Calendar"); |
|||
|
|||
dojo.require("dojo.cldr.supplemental"); |
|||
dojo.require("dojo.date"); |
|||
dojo.require("dojo.date.locale"); |
|||
|
|||
dojo.require("dijit._Widget"); |
|||
dojo.require("dijit._Templated"); |
|||
dojo.require("dijit._CssStateMixin"); |
|||
|
|||
dojo.declare( |
|||
"dijit.Calendar", |
|||
[dijit._Widget, dijit._Templated, dijit._CssStateMixin], |
|||
{ |
|||
// summary:
|
|||
// A simple GUI for choosing a date in the context of a monthly calendar.
|
|||
//
|
|||
// description:
|
|||
// A simple GUI for choosing a date in the context of a monthly calendar.
|
|||
// This widget can't be used in a form because it doesn't serialize the date to an
|
|||
// `<input>` field. For a form element, use dijit.form.DateTextBox instead.
|
|||
//
|
|||
// Note that the parser takes all dates attributes passed in the
|
|||
// [RFC 3339 format](http://www.faqs.org/rfcs/rfc3339.html), e.g. `2005-06-30T08:05:00-07:00`
|
|||
// so that they are serializable and locale-independent.
|
|||
//
|
|||
// example:
|
|||
// | var calendar = new dijit.Calendar({}, dojo.byId("calendarNode"));
|
|||
//
|
|||
// example:
|
|||
// | <div dojoType="dijit.Calendar"></div>
|
|||
|
|||
templateString: dojo.cache("dijit", "templates/Calendar.html"), |
|||
|
|||
// value: Date
|
|||
// The currently selected Date
|
|||
value: new Date(), |
|||
|
|||
// datePackage: String
|
|||
// JavaScript namespace to find Calendar routines. Uses Gregorian Calendar routines
|
|||
// at dojo.date by default.
|
|||
datePackage: "dojo.date", |
|||
|
|||
// dayWidth: String
|
|||
// How to represent the days of the week in the calendar header. See dojo.date.locale
|
|||
dayWidth: "narrow", |
|||
|
|||
// tabIndex: Integer
|
|||
// Order fields are traversed when user hits the tab key
|
|||
tabIndex: "0", |
|||
|
|||
baseClass:"dijitCalendar", |
|||
|
|||
// Set node classes for various mouse events, see dijit._CssStateMixin for more details
|
|||
cssStateNodes: { |
|||
"decrementMonth": "dijitCalendarArrow", |
|||
"incrementMonth": "dijitCalendarArrow", |
|||
"previousYearLabelNode": "dijitCalendarPreviousYear", |
|||
"nextYearLabelNode": "dijitCalendarNextYear" |
|||
}, |
|||
|
|||
attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, { |
|||
tabIndex: "domNode" |
|||
}), |
|||
|
|||
setValue: function(/*Date*/ value){ |
|||
// summary:
|
|||
// Deprecated. Used attr('value', ...) instead.
|
|||
// tags:
|
|||
// deprecated
|
|||
dojo.deprecated("dijit.Calendar:setValue() is deprecated. Use set('value', ...) instead.", "", "2.0"); |
|||
this.set('value', value); |
|||
}, |
|||
|
|||
_getValueAttr: function(){ |
|||
// summary:
|
|||
// Support getter attr('value')
|
|||
var value = new this.dateClassObj(this.value); |
|||
value.setHours(0, 0, 0, 0); // return midnight, local time for back-compat
|
|||
|
|||
// If daylight savings pushes midnight to the previous date, fix the Date
|
|||
// object to point at 1am so it will represent the correct day. See #9366
|
|||
if(value.getDate() < this.value.getDate()){ |
|||
value = this.dateFuncObj.add(value, "hour", 1); |
|||
} |
|||
return value; |
|||
}, |
|||
|
|||
_setValueAttr: function(/*Date*/ value){ |
|||
// summary:
|
|||
// Support setter attr("value", ...)
|
|||
// description:
|
|||
// Set the current date and update the UI. If the date is disabled, the value will
|
|||
// not change, but the display will change to the corresponding month.
|
|||
// tags:
|
|||
// protected
|
|||
if(!this.value || this.dateFuncObj.compare(value, this.value)){ |
|||
value = new this.dateClassObj(value); |
|||
value.setHours(1); // to avoid issues when DST shift occurs at midnight, see #8521, #9366
|
|||
this.displayMonth = new this.dateClassObj(value); |
|||
if(!this.isDisabledDate(value, this.lang)){ |
|||
this.value = value; |
|||
this.onChange(this.get('value')); |
|||
} |
|||
dojo.attr(this.domNode, "aria-label", |
|||
this.dateLocaleModule.format(value, |
|||
{selector:"date", formatLength:"full"})); |
|||
this._populateGrid(); |
|||
} |
|||
}, |
|||
|
|||
_setText: function(node, text){ |
|||
// summary:
|
|||
// This just sets the content of node to the specified text.
|
|||
// Can't do "node.innerHTML=text" because of an IE bug w/tables, see #3434.
|
|||
// tags:
|
|||
// private
|
|||
while(node.firstChild){ |
|||
node.removeChild(node.firstChild); |
|||
} |
|||
node.appendChild(dojo.doc.createTextNode(text)); |
|||
}, |
|||
|
|||
_populateGrid: function(){ |
|||
// summary:
|
|||
// Fills in the calendar grid with each day (1-31)
|
|||
// tags:
|
|||
// private
|
|||
var month = this.displayMonth; |
|||
month.setDate(1); |
|||
var firstDay = month.getDay(), |
|||
daysInMonth = this.dateFuncObj.getDaysInMonth(month), |
|||
daysInPreviousMonth = this.dateFuncObj.getDaysInMonth(this.dateFuncObj.add(month, "month", -1)), |
|||
today = new this.dateClassObj(), |
|||
dayOffset = dojo.cldr.supplemental.getFirstDayOfWeek(this.lang); |
|||
if(dayOffset > firstDay){ dayOffset -= 7; } |
|||
|
|||
// Iterate through dates in the calendar and fill in date numbers and style info
|
|||
dojo.query(".dijitCalendarDateTemplate", this.domNode).forEach(function(template, i){ |
|||
i += dayOffset; |
|||
var date = new this.dateClassObj(month), |
|||
number, clazz = "dijitCalendar", adj = 0; |
|||
|
|||
if(i < firstDay){ |
|||
number = daysInPreviousMonth - firstDay + i + 1; |
|||
adj = -1; |
|||
clazz += "Previous"; |
|||
}else if(i >= (firstDay + daysInMonth)){ |
|||
number = i - firstDay - daysInMonth + 1; |
|||
adj = 1; |
|||
clazz += "Next"; |
|||
}else{ |
|||
number = i - firstDay + 1; |
|||
clazz += "Current"; |
|||
} |
|||
|
|||
if(adj){ |
|||
date = this.dateFuncObj.add(date, "month", adj); |
|||
} |
|||
date.setDate(number); |
|||
|
|||
if(!this.dateFuncObj.compare(date, today, "date")){ |
|||
clazz = "dijitCalendarCurrentDate " + clazz; |
|||
} |
|||
|
|||
if(this._isSelectedDate(date, this.lang)){ |
|||
clazz = "dijitCalendarSelectedDate " + clazz; |
|||
} |
|||
|
|||
if(this.isDisabledDate(date, this.lang)){ |
|||
clazz = "dijitCalendarDisabledDate " + clazz; |
|||
} |
|||
|
|||
var clazz2 = this.getClassForDate(date, this.lang); |
|||
if(clazz2){ |
|||
clazz = clazz2 + " " + clazz; |
|||
} |
|||
|
|||
template.className = clazz + "Month dijitCalendarDateTemplate"; |
|||
template.dijitDateValue = date.valueOf(); |
|||
var label = dojo.query(".dijitCalendarDateLabel", template)[0], |
|||
text = date.getDateLocalized ? date.getDateLocalized(this.lang) : date.getDate(); |
|||
this._setText(label, text); |
|||
}, this); |
|||
|
|||
// Fill in localized month name
|
|||
var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang, month); |
|||
this._setText(this.monthLabelNode, monthNames[month.getMonth()]); |
|||
// Repopulate month list based on current year (Hebrew calendar)
|
|||
dojo.query(".dijitCalendarMonthLabelTemplate", this.domNode).forEach(function(node, i){ |
|||
dojo.toggleClass(node, "dijitHidden", !(i in monthNames)); // hide leap months (Hebrew)
|
|||
this._setText(node, monthNames[i]); |
|||
}, this); |
|||
|
|||
// Fill in localized prev/current/next years
|
|||
var y = month.getFullYear() - 1; |
|||
var d = new this.dateClassObj(); |
|||
dojo.forEach(["previous", "current", "next"], function(name){ |
|||
d.setFullYear(y++); |
|||
this._setText(this[name+"YearLabelNode"], |
|||
this.dateLocaleModule.format(d, {selector:'year', locale:this.lang})); |
|||
}, this); |
|||
}, |
|||
|
|||
goToToday: function(){ |
|||
// summary:
|
|||
// Sets calendar's value to today's date
|
|||
this.set('value', new this.dateClassObj()); |
|||
}, |
|||
|
|||
constructor: function(/*Object*/args){ |
|||
var dateClass = (args.datePackage && (args.datePackage != "dojo.date"))? args.datePackage + ".Date" : "Date"; |
|||
this.dateClassObj = dojo.getObject(dateClass, false); |
|||
this.datePackage = args.datePackage || this.datePackage; |
|||
this.dateFuncObj = dojo.getObject(this.datePackage, false); |
|||
this.dateLocaleModule = dojo.getObject(this.datePackage + ".locale", false); |
|||
}, |
|||
|
|||
postMixInProperties: function(){ |
|||
// parser.instantiate sometimes passes in NaN for IE. Use default value in prototype instead.
|
|||
if(isNaN(this.value)){ delete this.value; } |
|||
this.inherited(arguments); |
|||
}, |
|||
|
|||
postCreate: function(){ |
|||
this.inherited(arguments); |
|||
dojo.setSelectable(this.domNode, false); |
|||
|
|||
var cloneClass = dojo.hitch(this, function(clazz, n){ |
|||
var template = dojo.query(clazz, this.domNode)[0]; |
|||
for(var i=0; i<n; i++){ |
|||
template.parentNode.appendChild(template.cloneNode(true)); |
|||
} |
|||
}); |
|||
|
|||
// clone the day label and calendar day templates 6 times to make 7 columns
|
|||
cloneClass(".dijitCalendarDayLabelTemplate", 6); |
|||
cloneClass(".dijitCalendarDateTemplate", 6); |
|||
|
|||
// now make 6 week rows
|
|||
cloneClass(".dijitCalendarWeekTemplate", 5); |
|||
|
|||
// insert localized day names in the header
|
|||
var dayNames = this.dateLocaleModule.getNames('days', this.dayWidth, 'standAlone', this.lang); |
|||
var dayOffset = dojo.cldr.supplemental.getFirstDayOfWeek(this.lang); |
|||
dojo.query(".dijitCalendarDayLabel", this.domNode).forEach(function(label, i){ |
|||
this._setText(label, dayNames[(i + dayOffset) % 7]); |
|||
}, this); |
|||
|
|||
var dateObj = new this.dateClassObj(this.value); |
|||
// Fill in spacer/month dropdown element with all the month names (invisible) so that the maximum width will affect layout
|
|||
var monthNames = this.dateLocaleModule.getNames('months', 'wide', 'standAlone', this.lang, dateObj); |
|||
cloneClass(".dijitCalendarMonthLabelTemplate", monthNames.length-1); |
|||
dojo.query(".dijitCalendarMonthLabelTemplate", this.domNode).forEach(function(node, i){ |
|||
dojo.attr(node, "month", i); |
|||
if(i in monthNames){ this._setText(node, monthNames[i]); } |
|||
dojo.place(node.cloneNode(true), this.monthLabelSpacer); |
|||
}, this); |
|||
|
|||
this.value = null; |
|||
this.set('value', dateObj); |
|||
|
|||
// Set up repeating mouse behavior
|
|||
var _this = this; |
|||
var typematic = function(nodeProp, dateProp, adj){ |
|||
_this._connects.push( |
|||
dijit.typematic.addMouseListener(_this[nodeProp], _this, function(count){ |
|||
if(count >= 0){ _this._adjustDisplay(dateProp, adj); } |
|||
}, 0.8, 500) |
|||
); |
|||
}; |
|||
typematic("incrementMonth", "month", 1); |
|||
typematic("decrementMonth", "month", -1); |
|||
typematic("nextYearLabelNode", "year", 1); |
|||
typematic("previousYearLabelNode", "year", -1); |
|||
}, |
|||
|
|||
_onMenuHover: function(e){ |
|||
dojo.stopEvent(e); |
|||
dojo.toggleClass(e.target, "dijitMenuItemHover"); |
|||
}, |
|||
|
|||
_adjustDisplay: function(/*String*/ part, /*int*/ amount){ |
|||
// summary:
|
|||
// Moves calendar forwards or backwards by months or years
|
|||
// part:
|
|||
// "month" or "year"
|
|||
// amount:
|
|||
// Number of months or years
|
|||
// tags:
|
|||
// private
|
|||
this.displayMonth = this.dateFuncObj.add(this.displayMonth, part, amount); |
|||
this._populateGrid(); |
|||
}, |
|||
|
|||
_onMonthToggle: function(/*Event*/ evt){ |
|||
// summary:
|
|||
// Handler for when user triggers or dismisses the month list
|
|||
// tags:
|
|||
// protected
|
|||
dojo.stopEvent(evt); |
|||
|
|||
if(evt.type == "mousedown"){ |
|||
var coords = dojo.position(this.monthLabelNode); |
|||
// coords.y -= dojo.position(this.domNode, true).y;
|
|||
// Size the dropdown's width to match the label in the widget
|
|||
// so that they are horizontally aligned
|
|||
var dim = { |
|||
width: coords.w + "px", |
|||
top: -this.displayMonth.getMonth() * coords.h + "px" |
|||
}; |
|||
if((dojo.isIE && dojo.isQuirks) || dojo.isIE < 7){ |
|||
dim.left = -coords.w/2 + "px"; |
|||
} |
|||
dojo.style(this.monthDropDown, dim); |
|||
this._popupHandler = this.connect(document, "onmouseup", "_onMonthToggle"); |
|||
}else{ |
|||
this.disconnect(this._popupHandler); |
|||
delete this._popupHandler; |
|||
} |
|||
|
|||
dojo.toggleClass(this.monthDropDown, "dijitHidden"); |
|||
dojo.toggleClass(this.monthLabelNode, "dijitVisible"); |
|||
}, |
|||
|
|||
_onMonthSelect: function(/*Event*/ evt){ |
|||
// summary:
|
|||
// Handler for when user selects a month from a list
|
|||
// tags:
|
|||
// protected
|
|||
this._onMonthToggle(evt); |
|||
this.displayMonth.setMonth(dojo.attr(evt.target, "month")); |
|||
this._populateGrid(); |
|||
}, |
|||
|
|||
_onDayClick: function(/*Event*/ evt){ |
|||
// summary:
|
|||
// Handler for day clicks, selects the date if appropriate
|
|||
// tags:
|
|||
// protected
|
|||
dojo.stopEvent(evt); |
|||
for(var node = evt.target; node && !node.dijitDateValue; node = node.parentNode); |
|||
if(node && !dojo.hasClass(node, "dijitCalendarDisabledDate")){ |
|||
this.set('value', node.dijitDateValue); |
|||
this.onValueSelected(this.get('value')); |
|||
} |
|||
}, |
|||
|
|||
_onDayMouseOver: function(/*Event*/ evt){ |
|||
// summary:
|
|||
// Handler for mouse over events on days, sets hovered style
|
|||
// tags:
|
|||
// protected
|
|||
|
|||
// event can occur on <td> or the <span> inside the td,
|
|||
// set node to the <td>.
|
|||
var node = |
|||
dojo.hasClass(evt.target, "dijitCalendarDateLabel") ? |
|||
evt.target.parentNode : |
|||
evt.target; |
|||
|
|||
if(node && (node.dijitDateValue || node == this.previousYearLabelNode || node == this.nextYearLabelNode) ){ |
|||
dojo.addClass(node, "dijitCalendarHoveredDate"); |
|||
this._currentNode = node; |
|||
} |
|||
}, |
|||
|
|||
_onDayMouseOut: function(/*Event*/ evt){ |
|||
// summary:
|
|||
// Handler for mouse out events on days, clears hovered style
|
|||
// tags:
|
|||
// protected
|
|||
|
|||
if(!this._currentNode){ return; } |
|||
|
|||
// if mouse out occurs moving from <td> to <span> inside <td>, ignore it
|
|||
if(evt.relatedTarget && evt.relatedTarget.parentNode == this._currentNode){ return; } |
|||
|
|||
dojo.removeClass(this._currentNode, "dijitCalendarHoveredDate"); |
|||
if(dojo.hasClass(this._currentNode, "dijitCalendarActiveDate")) { |
|||
dojo.removeClass(this._currentNode, "dijitCalendarActiveDate"); |
|||
} |
|||
this._currentNode = null; |
|||
}, |
|||
|
|||
_onDayMouseDown: function(/*Event*/ evt){ |
|||
var node = evt.target.parentNode; |
|||
if(node && node.dijitDateValue){ |
|||
dojo.addClass(node, "dijitCalendarActiveDate"); |
|||
this._currentNode = node; |
|||
} |
|||
}, |
|||
|
|||
_onDayMouseUp: function(/*Event*/ evt){ |
|||
var node = evt.target.parentNode; |
|||
if(node && node.dijitDateValue){ |
|||
dojo.removeClass(node, "dijitCalendarActiveDate"); |
|||
} |
|||
}, |
|||
|
|||
//TODO: use typematic
|
|||
//TODO: skip disabled dates without ending up in a loop
|
|||
//TODO: could optimize by avoiding populate grid when month does not change
|
|||
_onKeyPress: function(/*Event*/evt){ |
|||
// summary:
|
|||
// Provides keyboard navigation of calendar
|
|||
// tags:
|
|||
// protected
|
|||
var dk = dojo.keys, |
|||
increment = -1, |
|||
interval, |
|||
newValue = this.value; |
|||
switch(evt.keyCode){ |
|||
case dk.RIGHT_ARROW: |
|||
increment = 1; |
|||
//fallthrough...
|
|||
case dk.LEFT_ARROW: |
|||
interval = "day"; |
|||
if(!this.isLeftToRight()){ increment *= -1; } |
|||
break; |
|||
case dk.DOWN_ARROW: |
|||
increment = 1; |
|||
//fallthrough...
|
|||
case dk.UP_ARROW: |
|||
interval = "week"; |
|||
break; |
|||
case dk.PAGE_DOWN: |
|||
increment = 1; |
|||
//fallthrough...
|
|||
case dk.PAGE_UP: |
|||
interval = evt.ctrlKey ? "year" : "month"; |
|||
break; |
|||
case dk.END: |
|||
// go to the next month
|
|||
newValue = this.dateFuncObj.add(newValue, "month", 1); |
|||
// subtract a day from the result when we're done
|
|||
interval = "day"; |
|||
//fallthrough...
|
|||
case dk.HOME: |
|||
newValue = new Date(newValue).setDate(1); |
|||
break; |
|||
case dk.ENTER: |
|||
this.onValueSelected(this.get('value')); |
|||
break; |
|||
case dk.ESCAPE: |
|||
//TODO
|
|||
default: |
|||
return; |
|||
} |
|||
dojo.stopEvent(evt); |
|||
|
|||
if(interval){ |
|||
newValue = this.dateFuncObj.add(newValue, interval, increment); |
|||
} |
|||
|
|||
this.set("value", newValue); |
|||
}, |
|||
|
|||
onValueSelected: function(/*Date*/ date){ |
|||
// summary:
|
|||
// Notification that a date cell was selected. It may be the same as the previous value.
|
|||
// description:
|
|||
// Used by `dijit.form._DateTimeTextBox` (and thus `dijit.form.DateTextBox`)
|
|||
// to get notification when the user has clicked a date.
|
|||
// tags:
|
|||
// protected
|
|||
}, |
|||
|
|||
onChange: function(/*Date*/ date){ |
|||
// summary:
|
|||
// Called only when the selected date has changed
|
|||
}, |
|||
|
|||
_isSelectedDate: function(/*Date*/ dateObject, /*String?*/ locale){ |
|||
// summary:
|
|||
// Extension point so developers can subclass Calendar to
|
|||
// support multiple (concurrently) selected dates
|
|||
// tags:
|
|||
// protected extension
|
|||
return !this.dateFuncObj.compare(dateObject, this.value, "date") |
|||
}, |
|||
|
|||
isDisabledDate: function(/*Date*/ dateObject, /*String?*/ locale){ |
|||
// summary:
|
|||
// May be overridden to disable certain dates in the calendar e.g. `isDisabledDate=dojo.date.locale.isWeekend`
|
|||
// tags:
|
|||
// extension
|
|||
/*===== |
|||
return false; // Boolean
|
|||
=====*/ |
|||
}, |
|||
|
|||
getClassForDate: function(/*Date*/ dateObject, /*String?*/ locale){ |
|||
// summary:
|
|||
// May be overridden to return CSS classes to associate with the date entry for the given dateObject,
|
|||
// for example to indicate a holiday in specified locale.
|
|||
// tags:
|
|||
// extension
|
|||
|
|||
/*===== |
|||
return ""; // String
|
|||
=====*/ |
|||
} |
|||
} |
|||
); |
|||
@ -0,0 +1,43 @@ |
|||
dojo.provide("dijit.CheckedMenuItem"); |
|||
|
|||
dojo.require("dijit.MenuItem"); |
|||
|
|||
dojo.declare("dijit.CheckedMenuItem", |
|||
dijit.MenuItem, |
|||
{ |
|||
// summary:
|
|||
// A checkbox-like menu item for toggling on and off
|
|||
|
|||
templateString: dojo.cache("dijit", "templates/CheckedMenuItem.html"), |
|||
|
|||
// checked: Boolean
|
|||
// Our checked state
|
|||
checked: false, |
|||
_setCheckedAttr: function(/*Boolean*/ checked){ |
|||
// summary:
|
|||
// Hook so attr('checked', bool) works.
|
|||
// Sets the class and state for the check box.
|
|||
dojo.toggleClass(this.domNode, "dijitCheckedMenuItemChecked", checked); |
|||
dijit.setWaiState(this.domNode, "checked", checked); |
|||
this.checked = checked; |
|||
}, |
|||
|
|||
onChange: function(/*Boolean*/ checked){ |
|||
// summary:
|
|||
// User defined function to handle check/uncheck events
|
|||
// tags:
|
|||
// callback
|
|||
}, |
|||
|
|||
_onClick: function(/*Event*/ e){ |
|||
// summary:
|
|||
// Clicking this item just toggles its state
|
|||
// tags:
|
|||
// private
|
|||
if(!this.disabled){ |
|||
this.set("checked", !this.checked); |
|||
this.onChange(this.checked); |
|||
} |
|||
this.inherited(arguments); |
|||
} |
|||
}); |
|||
@ -0,0 +1,109 @@ |
|||
dojo.provide("dijit.ColorPalette"); |
|||
|
|||
dojo.require("dijit._Widget"); |
|||
dojo.require("dijit._Templated"); |
|||
dojo.require("dojo.colors"); |
|||
dojo.require("dojo.i18n"); |
|||
|
|||
dojo.require("dijit._PaletteMixin"); |
|||
|
|||
dojo.requireLocalization("dojo", "colors"); |
|||
|
|||
dojo.declare("dijit.ColorPalette", |
|||
[dijit._Widget, dijit._Templated, dijit._PaletteMixin], |
|||
{ |
|||
// summary:
|
|||
// A keyboard accessible color-picking widget
|
|||
// description:
|
|||
// Grid showing various colors, so the user can pick a certain color.
|
|||
// Can be used standalone, or as a popup.
|
|||
//
|
|||
// example:
|
|||
// | <div dojoType="dijit.ColorPalette"></div>
|
|||
//
|
|||
// example:
|
|||
// | var picker = new dijit.ColorPalette({ },srcNode);
|
|||
// | picker.startup();
|
|||
|
|||
|
|||
// palette: String
|
|||
// Size of grid, either "7x10" or "3x4".
|
|||
palette: "7x10", |
|||
|
|||
// _palettes: [protected] Map
|
|||
// This represents the value of the colors.
|
|||
// The first level is a hashmap of the different palettes available.
|
|||
// The next two dimensions represent the columns and rows of colors.
|
|||
_palettes: { |
|||
"7x10": [["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan", "lavender", "plum"], |
|||
["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightskyblue", "cornflowerblue", "violet"], |
|||
["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise", "skyblue", "mediumslateblue","orchid"], |
|||
["gray", "red", "orangered", "darkorange", "yellow", "limegreen", "darkseagreen", "royalblue", "slateblue", "mediumorchid"], |
|||
["dimgray", "crimson", "chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"], |
|||
["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ], |
|||
["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo", "purple"]], |
|||
|
|||
"3x4": [["white", "lime", "green", "blue"], |
|||
["silver", "yellow", "fuchsia", "navy"], |
|||
["gray", "red", "purple", "black"]] |
|||
}, |
|||
|
|||
// _imagePaths: [protected] Map
|
|||
// This is stores the path to the palette images
|
|||
_imagePaths: { |
|||
"7x10": dojo.moduleUrl("dijit.themes", "a11y/colors7x10.png"), |
|||
"3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png"), |
|||
"7x10-rtl": dojo.moduleUrl("dijit.themes", "a11y/colors7x10-rtl.png"), |
|||
"3x4-rtl": dojo.moduleUrl("dijit.themes", "a11y/colors3x4-rtl.png") |
|||
}, |
|||
|
|||
// templateString: String
|
|||
// The template of this widget.
|
|||
templateString: dojo.cache("dijit", "templates/ColorPalette.html"), |
|||
|
|||
baseClass: "dijitColorPalette", |
|||
|
|||
dyeClass: 'dijit._Color', |
|||
|
|||
buildRendering: function(){ |
|||
// Instantiate the template, which makes a skeleton into which we'll insert a bunch of
|
|||
// <img> nodes
|
|||
|
|||
this.inherited(arguments); |
|||
|
|||
this.imageNode.setAttribute("src", this._imagePaths[this.palette + (this.isLeftToRight() ? "" : "-rtl")].toString()); |
|||
|
|||
var i18nColorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang); |
|||
this._preparePalette( |
|||
this._palettes[this.palette], |
|||
i18nColorNames |
|||
); |
|||
} |
|||
}); |
|||
|
|||
dojo.declare("dijit._Color", dojo.Color, |
|||
// summary:
|
|||
// Object associated with each cell in a ColorPalette palette.
|
|||
// Implements dijit.Dye.
|
|||
{ |
|||
constructor: function(/*String*/alias){ |
|||
this._alias = alias; |
|||
this.setColor(dojo.Color.named[alias]); |
|||
}, |
|||
|
|||
getValue: function(){ |
|||
// summary:
|
|||
// Note that although dijit._Color is initialized with a value like "white" getValue() always
|
|||
// returns a hex value
|
|||
return this.toHex(); |
|||
}, |
|||
|
|||
fillCell: function(/*DOMNode*/ cell, /*String*/ blankGif){ |
|||
dojo.create("img", { |
|||
src: blankGif, |
|||
"class": "dijitPaletteImg", |
|||
alt: this._alias |
|||
}, cell); |
|||
} |
|||
} |
|||
); |
|||
@ -0,0 +1,90 @@ |
|||
dojo.provide("dijit.Declaration"); |
|||
dojo.require("dijit._Widget"); |
|||
dojo.require("dijit._Templated"); |
|||
|
|||
dojo.declare( |
|||
"dijit.Declaration", |
|||
dijit._Widget, |
|||
{ |
|||
// summary:
|
|||
// The Declaration widget allows a developer to declare new widget
|
|||
// classes directly from a snippet of markup.
|
|||
|
|||
// _noScript: [private] Boolean
|
|||
// Flag to parser to leave alone the script tags contained inside of me
|
|||
_noScript: true, |
|||
|
|||
// stopParser: [private] Boolean
|
|||
// Flag to parser to not try and parse widgets declared inside of me
|
|||
stopParser: true, |
|||
|
|||
// widgetClass: String
|
|||
// Name of class being declared, ex: "acme.myWidget"
|
|||
widgetClass: "", |
|||
|
|||
// propList: Object
|
|||
// Set of attributes for this widget along with default values, ex:
|
|||
// {delay: 100, title: "hello world"}
|
|||
defaults: null, |
|||
|
|||
// mixins: String[]
|
|||
// List containing the prototype for this widget, and also any mixins,
|
|||
// ex: ["dijit._Widget", "dijit._Container"]
|
|||
mixins: [], |
|||
|
|||
buildRendering: function(){ |
|||
var src = this.srcNodeRef.parentNode.removeChild(this.srcNodeRef), |
|||
methods = dojo.query("> script[type^='dojo/method'][event]", src).orphan(), |
|||
postscriptConnects = dojo.query("> script[type^='dojo/method']", src).orphan(), |
|||
regularConnects = dojo.query("> script[type^='dojo/connect']", src).orphan(), |
|||
srcType = src.nodeName; |
|||
|
|||
var propList = this.defaults || {}; |
|||
|
|||
// For all methods defined like <script type="dojo/method" event="foo">,
|
|||
// add that method to prototype
|
|||
dojo.forEach(methods, function(s){ |
|||
var evt = s.getAttribute("event"), |
|||
func = dojo.parser._functionFromScript(s); |
|||
propList[evt] = func; |
|||
}); |
|||
|
|||
// map array of strings like [ "dijit.form.Button" ] to array of mixin objects
|
|||
// (note that dojo.map(this.mixins, dojo.getObject) doesn't work because it passes
|
|||
// a bogus third argument to getObject(), confusing it)
|
|||
this.mixins = this.mixins.length ? |
|||
dojo.map(this.mixins, function(name){ return dojo.getObject(name); } ) : |
|||
[ dijit._Widget, dijit._Templated ]; |
|||
|
|||
propList.widgetsInTemplate = true; |
|||
propList._skipNodeCache = true; |
|||
propList.templateString = "<"+srcType+" class='"+src.className+"' dojoAttachPoint='"+(src.getAttribute("dojoAttachPoint") || '')+"' dojoAttachEvent='"+(src.getAttribute("dojoAttachEvent") || '')+"' >"+src.innerHTML.replace(/\%7B/g,"{").replace(/\%7D/g,"}")+"</"+srcType+">"; |
|||
|
|||
// strip things so we don't create stuff under us in the initial setup phase
|
|||
dojo.query("[dojoType]", src).forEach(function(node){ |
|||
node.removeAttribute("dojoType"); |
|||
}); |
|||
|
|||
// create the new widget class
|
|||
var wc = dojo.declare( |
|||
this.widgetClass, |
|||
this.mixins, |
|||
propList |
|||
); |
|||
|
|||
// Handle <script> blocks of form:
|
|||
// <script type="dojo/connect" event="foo">
|
|||
// and
|
|||
// <script type="dojo/method">
|
|||
// (Note that the second one is just shorthand for a dojo/connect to postscript)
|
|||
// Since this is a connect in the declaration, we are actually connection to the method
|
|||
// in the _prototype_.
|
|||
var connects = regularConnects.concat(postscriptConnects); |
|||
dojo.forEach(connects, function(s){ |
|||
var evt = s.getAttribute("event") || "postscript", |
|||
func = dojo.parser._functionFromScript(s); |
|||
dojo.connect(wc.prototype, evt, func); |
|||
}); |
|||
} |
|||
} |
|||
); |
|||
@ -0,0 +1,522 @@ |
|||
dojo.provide("dijit.Dialog"); |
|||
|
|||
dojo.require("dojo.dnd.move"); |
|||
dojo.require("dojo.dnd.TimedMoveable"); |
|||
dojo.require("dojo.fx"); |
|||
dojo.require("dojo.window"); |
|||
|
|||
dojo.require("dijit._Widget"); |
|||
dojo.require("dijit._Templated"); |
|||
dojo.require("dijit._CssStateMixin"); |
|||
dojo.require("dijit.form._FormMixin"); |
|||
dojo.require("dijit._DialogMixin"); |
|||
dojo.require("dijit.DialogUnderlay"); |
|||
dojo.require("dijit.layout.ContentPane"); |
|||
dojo.requireLocalization("dijit", "common"); |
|||
|
|||
/*===== |
|||
dijit._underlay = function(kwArgs){ |
|||
// summary:
|
|||
// A shared instance of a `dijit.DialogUnderlay`
|
|||
//
|
|||
// description:
|
|||
// A shared instance of a `dijit.DialogUnderlay` created and
|
|||
// used by `dijit.Dialog`, though never created until some Dialog
|
|||
// or subclass thereof is shown.
|
|||
}; |
|||
=====*/ |
|||
|
|||
dojo.declare( |
|||
"dijit._DialogBase", |
|||
[dijit._Templated, dijit.form._FormMixin, dijit._DialogMixin, dijit._CssStateMixin], |
|||
{ |
|||
// summary:
|
|||
// A modal dialog Widget
|
|||
//
|
|||
// description:
|
|||
// Pops up a modal dialog window, blocking access to the screen
|
|||
// and also graying out the screen Dialog is extended from
|
|||
// ContentPane so it supports all the same parameters (href, etc.)
|
|||
//
|
|||
// example:
|
|||
// | <div dojoType="dijit.Dialog" href="test.html"></div>
|
|||
//
|
|||
// example:
|
|||
// | var foo = new dijit.Dialog({ title: "test dialog", content: "test content" };
|
|||
// | dojo.body().appendChild(foo.domNode);
|
|||
// | foo.startup();
|
|||
|
|||
templateString: dojo.cache("dijit", "templates/Dialog.html"), |
|||
|
|||
baseClass: "dijitDialog", |
|||
|
|||
cssStateNodes: { |
|||
closeButtonNode: "dijitDialogCloseIcon" |
|||
}, |
|||
|
|||
attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, { |
|||
title: [ |
|||
{ node: "titleNode", type: "innerHTML" }, |
|||
{ node: "titleBar", type: "attribute" } |
|||
], |
|||
"aria-describedby":"" |
|||
}), |
|||
|
|||
// open: Boolean
|
|||
// True if Dialog is currently displayed on screen.
|
|||
open: false, |
|||
|
|||
// duration: Integer
|
|||
// The time in milliseconds it takes the dialog to fade in and out
|
|||
duration: dijit.defaultDuration, |
|||
|
|||
// refocus: Boolean
|
|||
// A Toggle to modify the default focus behavior of a Dialog, which
|
|||
// is to re-focus the element which had focus before being opened.
|
|||
// False will disable refocusing. Default: true
|
|||
refocus: true, |
|||
|
|||
// autofocus: Boolean
|
|||
// A Toggle to modify the default focus behavior of a Dialog, which
|
|||
// is to focus on the first dialog element after opening the dialog.
|
|||
// False will disable autofocusing. Default: true
|
|||
autofocus: true, |
|||
|
|||
// _firstFocusItem: [private] [readonly] DomNode
|
|||
// The pointer to the first focusable node in the dialog.
|
|||
// Set by `dijit._DialogMixin._getFocusItems`.
|
|||
_firstFocusItem: null, |
|||
|
|||
// _lastFocusItem: [private] [readonly] DomNode
|
|||
// The pointer to which node has focus prior to our dialog.
|
|||
// Set by `dijit._DialogMixin._getFocusItems`.
|
|||
_lastFocusItem: null, |
|||
|
|||
// doLayout: [protected] Boolean
|
|||
// Don't change this parameter from the default value.
|
|||
// This ContentPane parameter doesn't make sense for Dialog, since Dialog
|
|||
// is never a child of a layout container, nor can you specify the size of
|
|||
// Dialog in order to control the size of an inner widget.
|
|||
doLayout: false, |
|||
|
|||
// draggable: Boolean
|
|||
// Toggles the moveable aspect of the Dialog. If true, Dialog
|
|||
// can be dragged by it's title. If false it will remain centered
|
|||
// in the viewport.
|
|||
draggable: true, |
|||
|
|||
//aria-describedby: String
|
|||
// Allows the user to add an aria-describedby attribute onto the dialog. The value should
|
|||
// be the id of the container element of text that describes the dialog purpose (usually
|
|||
// the first text in the dialog).
|
|||
// <div dojoType="dijit.Dialog" aria-describedby="intro" .....>
|
|||
// <div id="intro">Introductory text</div>
|
|||
// <div>rest of dialog contents</div>
|
|||
// </div>
|
|||
"aria-describedby":"", |
|||
|
|||
postMixInProperties: function(){ |
|||
var _nlsResources = dojo.i18n.getLocalization("dijit", "common"); |
|||
dojo.mixin(this, _nlsResources); |
|||
this.inherited(arguments); |
|||
}, |
|||
|
|||
postCreate: function(){ |
|||
dojo.style(this.domNode, { |
|||
display: "none", |
|||
position:"absolute" |
|||
}); |
|||
dojo.body().appendChild(this.domNode); |
|||
|
|||
this.inherited(arguments); |
|||
|
|||
this.connect(this, "onExecute", "hide"); |
|||
this.connect(this, "onCancel", "hide"); |
|||
this._modalconnects = []; |
|||
}, |
|||
|
|||
onLoad: function(){ |
|||
// summary:
|
|||
// Called when data has been loaded from an href.
|
|||
// Unlike most other callbacks, this function can be connected to (via `dojo.connect`)
|
|||
// but should *not* be overriden.
|
|||
// tags:
|
|||
// callback
|
|||
|
|||
// when href is specified we need to reposition the dialog after the data is loaded
|
|||
// and find the focusable elements
|
|||
this._position(); |
|||
if(this.autofocus){ |
|||
this._getFocusItems(this.domNode); |
|||
dijit.focus(this._firstFocusItem); |
|||
} |
|||
this.inherited(arguments); |
|||
}, |
|||
|
|||
_endDrag: function(e){ |
|||
// summary:
|
|||
// Called after dragging the Dialog. Saves the position of the dialog in the viewport.
|
|||
// tags:
|
|||
// private
|
|||
if(e && e.node && e.node === this.domNode){ |
|||
this._relativePosition = dojo.position(e.node); |
|||
} |
|||
}, |
|||
|
|||
_setup: function(){ |
|||
// summary:
|
|||
// Stuff we need to do before showing the Dialog for the first
|
|||
// time (but we defer it until right beforehand, for
|
|||
// performance reasons).
|
|||
// tags:
|
|||
// private
|
|||
|
|||
var node = this.domNode; |
|||
|
|||
if(this.titleBar && this.draggable){ |
|||
this._moveable = (dojo.isIE == 6) ? |
|||
new dojo.dnd.TimedMoveable(node, { handle: this.titleBar }) : // prevent overload, see #5285
|
|||
new dojo.dnd.Moveable(node, { handle: this.titleBar, timeout: 0 }); |
|||
this._dndListener = dojo.subscribe("/dnd/move/stop",this,"_endDrag"); |
|||
}else{ |
|||
dojo.addClass(node,"dijitDialogFixed"); |
|||
} |
|||
|
|||
this.underlayAttrs = { |
|||
dialogId: this.id, |
|||
"class": dojo.map(this["class"].split(/\s/), function(s){ return s+"_underlay"; }).join(" ") |
|||
}; |
|||
|
|||
this._fadeIn = dojo.fadeIn({ |
|||
node: node, |
|||
duration: this.duration, |
|||
beforeBegin: dojo.hitch(this, function(){ |
|||
var underlay = dijit._underlay; |
|||
if(!underlay){ |
|||
underlay = dijit._underlay = new dijit.DialogUnderlay(this.underlayAttrs); |
|||
}else{ |
|||
underlay.set(this.underlayAttrs); |
|||
} |
|||
|
|||
var ds = dijit._dialogStack, |
|||
zIndex = 948 + ds.length*2; |
|||
if(ds.length == 1){ // first dialog
|
|||
underlay.show(); |
|||
} |
|||
dojo.style(dijit._underlay.domNode, 'zIndex', zIndex); |
|||
dojo.style(this.domNode, 'zIndex', zIndex + 1); |
|||
}), |
|||
onEnd: dojo.hitch(this, function(){ |
|||
if(this.autofocus){ |
|||
// find focusable Items each time dialog is shown since if dialog contains a widget the
|
|||
// first focusable items can change
|
|||
this._getFocusItems(this.domNode); |
|||
dijit.focus(this._firstFocusItem); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
this._fadeOut = dojo.fadeOut({ |
|||
node: node, |
|||
duration: this.duration, |
|||
onEnd: dojo.hitch(this, function(){ |
|||
node.style.display = "none"; |
|||
|
|||
// Restore the previous dialog in the stack, or if this is the only dialog
|
|||
// then restore to original page
|
|||
var ds = dijit._dialogStack; |
|||
if(ds.length == 0){ |
|||
dijit._underlay.hide(); |
|||
}else{ |
|||
dojo.style(dijit._underlay.domNode, 'zIndex', 948 + ds.length*2); |
|||
dijit._underlay.set(ds[ds.length-1].underlayAttrs); |
|||
} |
|||
|
|||
// Restore focus to wherever it was before this dialog was displayed
|
|||
if(this.refocus){ |
|||
var focus = this._savedFocus; |
|||
|
|||
// If we are returning control to a previous dialog but for some reason
|
|||
// that dialog didn't have a focused field, set focus to first focusable item.
|
|||
// This situation could happen if two dialogs appeared at nearly the same time,
|
|||
// since a dialog doesn't set it's focus until the fade-in is finished.
|
|||
if(ds.length > 0){ |
|||
var pd = ds[ds.length-1]; |
|||
if(!dojo.isDescendant(focus.node, pd.domNode)){ |
|||
pd._getFocusItems(pd.domNode); |
|||
focus = pd._firstFocusItem; |
|||
} |
|||
} |
|||
|
|||
dijit.focus(focus); |
|||
} |
|||
}) |
|||
}); |
|||
}, |
|||
|
|||
uninitialize: function(){ |
|||
var wasPlaying = false; |
|||
if(this._fadeIn && this._fadeIn.status() == "playing"){ |
|||
wasPlaying = true; |
|||
this._fadeIn.stop(); |
|||
} |
|||
if(this._fadeOut && this._fadeOut.status() == "playing"){ |
|||
wasPlaying = true; |
|||
this._fadeOut.stop(); |
|||
} |
|||
|
|||
// Hide the underlay, unless the underlay widget has already been destroyed
|
|||
// because we are being called during page unload (when all widgets are destroyed)
|
|||
if((this.open || wasPlaying) && !dijit._underlay._destroyed){ |
|||
dijit._underlay.hide(); |
|||
} |
|||
|
|||
if(this._moveable){ |
|||
this._moveable.destroy(); |
|||
} |
|||
this.inherited(arguments); |
|||
}, |
|||
|
|||
_size: function(){ |
|||
// summary:
|
|||
// If necessary, shrink dialog contents so dialog fits in viewport
|
|||
// tags:
|
|||
// private
|
|||
|
|||
this._checkIfSingleChild(); |
|||
|
|||
// If we resized the dialog contents earlier, reset them back to original size, so
|
|||
// that if the user later increases the viewport size, the dialog can display w/out a scrollbar.
|
|||
// Need to do this before the dojo.marginBox(this.domNode) call below.
|
|||
if(this._singleChild){ |
|||
if(this._singleChildOriginalStyle){ |
|||
this._singleChild.domNode.style.cssText = this._singleChildOriginalStyle; |
|||
} |
|||
delete this._singleChildOriginalStyle; |
|||
}else{ |
|||
dojo.style(this.containerNode, { |
|||
width:"auto", |
|||
height:"auto" |
|||
}); |
|||
} |
|||
|
|||
var mb = dojo.marginBox(this.domNode); |
|||
var viewport = dojo.window.getBox(); |
|||
if(mb.w >= viewport.w || mb.h >= viewport.h){ |
|||
// Reduce size of dialog contents so that dialog fits in viewport
|
|||
|
|||
var w = Math.min(mb.w, Math.floor(viewport.w * 0.75)), |
|||
h = Math.min(mb.h, Math.floor(viewport.h * 0.75)); |
|||
|
|||
if(this._singleChild && this._singleChild.resize){ |
|||
this._singleChildOriginalStyle = this._singleChild.domNode.style.cssText; |
|||
this._singleChild.resize({w: w, h: h}); |
|||
}else{ |
|||
dojo.style(this.containerNode, { |
|||
width: w + "px", |
|||
height: h + "px", |
|||
overflow: "auto", |
|||
position: "relative" // workaround IE bug moving scrollbar or dragging dialog
|
|||
}); |
|||
} |
|||
}else{ |
|||
if(this._singleChild && this._singleChild.resize){ |
|||
this._singleChild.resize(); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
_position: function(){ |
|||
// summary:
|
|||
// Position modal dialog in the viewport. If no relative offset
|
|||
// in the viewport has been determined (by dragging, for instance),
|
|||
// center the node. Otherwise, use the Dialog's stored relative offset,
|
|||
// and position the node to top: left: values based on the viewport.
|
|||
// tags:
|
|||
// private
|
|||
if(!dojo.hasClass(dojo.body(),"dojoMove")){ |
|||
var node = this.domNode, |
|||
viewport = dojo.window.getBox(), |
|||
p = this._relativePosition, |
|||
bb = p ? null : dojo._getBorderBox(node), |
|||
l = Math.floor(viewport.l + (p ? p.x : (viewport.w - bb.w) / 2)), |
|||
t = Math.floor(viewport.t + (p ? p.y : (viewport.h - bb.h) / 2)) |
|||
; |
|||
dojo.style(node,{ |
|||
left: l + "px", |
|||
top: t + "px" |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
_onKey: function(/*Event*/ evt){ |
|||
// summary:
|
|||
// Handles the keyboard events for accessibility reasons
|
|||
// tags:
|
|||
// private
|
|||
|
|||
var ds = dijit._dialogStack; |
|||
if(ds[ds.length-1] != this){ |
|||
// console.debug(this.id + ': skipping because', this, 'is not the active dialog');
|
|||
return; |
|||
} |
|||
|
|||
if(evt.charOrCode){ |
|||
var dk = dojo.keys; |
|||
var node = evt.target; |
|||
if(evt.charOrCode === dk.TAB){ |
|||
this._getFocusItems(this.domNode); |
|||
} |
|||
var singleFocusItem = (this._firstFocusItem == this._lastFocusItem); |
|||
// see if we are shift-tabbing from first focusable item on dialog
|
|||
if(node == this._firstFocusItem && evt.shiftKey && evt.charOrCode === dk.TAB){ |
|||
if(!singleFocusItem){ |
|||
dijit.focus(this._lastFocusItem); // send focus to last item in dialog
|
|||
} |
|||
dojo.stopEvent(evt); |
|||
}else if(node == this._lastFocusItem && evt.charOrCode === dk.TAB && !evt.shiftKey){ |
|||
if(!singleFocusItem){ |
|||
dijit.focus(this._firstFocusItem); // send focus to first item in dialog
|
|||
} |
|||
dojo.stopEvent(evt); |
|||
}else{ |
|||
// see if the key is for the dialog
|
|||
while(node){ |
|||
if(node == this.domNode || dojo.hasClass(node, "dijitPopup")){ |
|||
if(evt.charOrCode == dk.ESCAPE){ |
|||
this.onCancel(); |
|||
}else{ |
|||
return; // just let it go
|
|||
} |
|||
} |
|||
node = node.parentNode; |
|||
} |
|||
// this key is for the disabled document window
|
|||
if(evt.charOrCode !== dk.TAB){ // allow tabbing into the dialog for a11y
|
|||
dojo.stopEvent(evt); |
|||
// opera won't tab to a div
|
|||
}else if(!dojo.isOpera){ |
|||
try{ |
|||
this._firstFocusItem.focus(); |
|||
}catch(e){ /*squelch*/ } |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
|
|||
show: function(){ |
|||
// summary:
|
|||
// Display the dialog
|
|||
if(this.open){ return; } |
|||
|
|||
// first time we show the dialog, there's some initialization stuff to do
|
|||
if(!this._alreadyInitialized){ |
|||
this._setup(); |
|||
this._alreadyInitialized=true; |
|||
} |
|||
|
|||
if(this._fadeOut.status() == "playing"){ |
|||
this._fadeOut.stop(); |
|||
} |
|||
|
|||
this._modalconnects.push(dojo.connect(window, "onscroll", this, "layout")); |
|||
this._modalconnects.push(dojo.connect(window, "onresize", this, function(){ |
|||
// IE gives spurious resize events and can actually get stuck
|
|||
// in an infinite loop if we don't ignore them
|
|||
var viewport = dojo.window.getBox(); |
|||
if(!this._oldViewport || |
|||
viewport.h != this._oldViewport.h || |
|||
viewport.w != this._oldViewport.w){ |
|||
this.layout(); |
|||
this._oldViewport = viewport; |
|||
} |
|||
})); |
|||
this._modalconnects.push(dojo.connect(dojo.doc.documentElement, "onkeypress", this, "_onKey")); |
|||
|
|||
dojo.style(this.domNode, { |
|||
opacity:0, |
|||
display:"" |
|||
}); |
|||
|
|||
this.open = true; |
|||
this._onShow(); // lazy load trigger
|
|||
|
|||
this._size(); |
|||
this._position(); |
|||
dijit._dialogStack.push(this); |
|||
this._fadeIn.play(); |
|||
|
|||
this._savedFocus = dijit.getFocus(this); |
|||
}, |
|||
|
|||
hide: function(){ |
|||
// summary:
|
|||
// Hide the dialog
|
|||
|
|||
// if we haven't been initialized yet then we aren't showing and we can just return
|
|||
// or if we aren't the active dialog, don't allow us to close yet
|
|||
var ds = dijit._dialogStack; |
|||
if(!this._alreadyInitialized || this != ds[ds.length-1]){ |
|||
return; |
|||
} |
|||
|
|||
if(this._fadeIn.status() == "playing"){ |
|||
this._fadeIn.stop(); |
|||
} |
|||
|
|||
// throw away current active dialog from stack -- making the previous dialog or the node on the original page active
|
|||
ds.pop(); |
|||
|
|||
this._fadeOut.play(); |
|||
|
|||
if(this._scrollConnected){ |
|||
this._scrollConnected = false; |
|||
} |
|||
dojo.forEach(this._modalconnects, dojo.disconnect); |
|||
this._modalconnects = []; |
|||
|
|||
if(this._relativePosition){ |
|||
delete this._relativePosition; |
|||
} |
|||
this.open = false; |
|||
|
|||
this.onHide(); |
|||
}, |
|||
|
|||
layout: function(){ |
|||
// summary:
|
|||
// Position the Dialog and the underlay
|
|||
// tags:
|
|||
// private
|
|||
if(this.domNode.style.display != "none"){ |
|||
if(dijit._underlay){ // avoid race condition during show()
|
|||
dijit._underlay.layout(); |
|||
} |
|||
this._position(); |
|||
} |
|||
}, |
|||
|
|||
destroy: function(){ |
|||
dojo.forEach(this._modalconnects, dojo.disconnect); |
|||
if(this.refocus && this.open){ |
|||
setTimeout(dojo.hitch(dijit,"focus",this._savedFocus), 25); |
|||
} |
|||
if(this._dndListener){ |
|||
dojo.unsubscribe(this._dndListener); |
|||
} |
|||
this.inherited(arguments); |
|||
} |
|||
} |
|||
); |
|||
|
|||
dojo.declare( |
|||
"dijit.Dialog", |
|||
[dijit.layout.ContentPane, dijit._DialogBase], |
|||
{} |
|||
); |
|||
|
|||
// Stack of currenctly displayed dialogs, layered on top of each other
|
|||
dijit._dialogStack = []; |
|||
|
|||
// For back-compat. TODO: remove in 2.0
|
|||
dojo.require("dijit.TooltipDialog"); |
|||
@ -0,0 +1,100 @@ |
|||
dojo.provide("dijit.DialogUnderlay"); |
|||
|
|||
dojo.require("dojo.window"); |
|||
|
|||
dojo.require("dijit._Widget"); |
|||
dojo.require("dijit._Templated"); |
|||
|
|||
dojo.declare( |
|||
"dijit.DialogUnderlay", |
|||
[dijit._Widget, dijit._Templated], |
|||
{ |
|||
// summary:
|
|||
// The component that blocks the screen behind a `dijit.Dialog`
|
|||
//
|
|||
// description:
|
|||
// A component used to block input behind a `dijit.Dialog`. Only a single
|
|||
// instance of this widget is created by `dijit.Dialog`, and saved as
|
|||
// a reference to be shared between all Dialogs as `dijit._underlay`
|
|||
//
|
|||
// The underlay itself can be styled based on and id:
|
|||
// | #myDialog_underlay { background-color:red; }
|
|||
//
|
|||
// In the case of `dijit.Dialog`, this id is based on the id of the Dialog,
|
|||
// suffixed with _underlay.
|
|||
|
|||
// Template has two divs; outer div is used for fade-in/fade-out, and also to hold background iframe.
|
|||
// Inner div has opacity specified in CSS file.
|
|||
templateString: "<div class='dijitDialogUnderlayWrapper'><div class='dijitDialogUnderlay' dojoAttachPoint='node'></div></div>", |
|||
|
|||
// Parameters on creation or updatable later
|
|||
|
|||
// dialogId: String
|
|||
// Id of the dialog.... DialogUnderlay's id is based on this id
|
|||
dialogId: "", |
|||
|
|||
// class: String
|
|||
// This class name is used on the DialogUnderlay node, in addition to dijitDialogUnderlay
|
|||
"class": "", |
|||
|
|||
attributeMap: { id: "domNode" }, |
|||
|
|||
_setDialogIdAttr: function(id){ |
|||
dojo.attr(this.node, "id", id + "_underlay"); |
|||
}, |
|||
|
|||
_setClassAttr: function(clazz){ |
|||
this.node.className = "dijitDialogUnderlay " + clazz; |
|||
}, |
|||
|
|||
postCreate: function(){ |
|||
// summary:
|
|||
// Append the underlay to the body
|
|||
dojo.body().appendChild(this.domNode); |
|||
}, |
|||
|
|||
layout: function(){ |
|||
// summary:
|
|||
// Sets the background to the size of the viewport
|
|||
//
|
|||
// description:
|
|||
// Sets the background to the size of the viewport (rather than the size
|
|||
// of the document) since we need to cover the whole browser window, even
|
|||
// if the document is only a few lines long.
|
|||
// tags:
|
|||
// private
|
|||
|
|||
var is = this.node.style, |
|||
os = this.domNode.style; |
|||
|
|||
// hide the background temporarily, so that the background itself isn't
|
|||
// causing scrollbars to appear (might happen when user shrinks browser
|
|||
// window and then we are called to resize)
|
|||
os.display = "none"; |
|||
|
|||
// then resize and show
|
|||
var viewport = dojo.window.getBox(); |
|||
os.top = viewport.t + "px"; |
|||
os.left = viewport.l + "px"; |
|||
is.width = viewport.w + "px"; |
|||
is.height = viewport.h + "px"; |
|||
os.display = "block"; |
|||
}, |
|||
|
|||
show: function(){ |
|||
// summary:
|
|||
// Show the dialog underlay
|
|||
this.domNode.style.display = "block"; |
|||
this.layout(); |
|||
this.bgIframe = new dijit.BackgroundIframe(this.domNode); |
|||
}, |
|||
|
|||
hide: function(){ |
|||
// summary:
|
|||
// Hides the dialog underlay
|
|||
this.bgIframe.destroy(); |
|||
delete this.bgIframe; |
|||
this.domNode.style.display = "none"; |
|||
} |
|||
} |
|||
); |
|||
@ -0,0 +1,763 @@ |
|||
dojo.provide("dijit.Editor"); |
|||
dojo.require("dijit._editor.RichText"); |
|||
|
|||
dojo.require("dijit.Toolbar"); |
|||
dojo.require("dijit.ToolbarSeparator"); |
|||
dojo.require("dijit._editor._Plugin"); |
|||
dojo.require("dijit._editor.plugins.EnterKeyHandling"); |
|||
dojo.require("dijit._editor.range"); |
|||
dojo.require("dijit._Container"); |
|||
dojo.require("dojo.i18n"); |
|||
dojo.require("dijit.layout._LayoutWidget"); |
|||
dojo.require("dijit._editor.range"); |
|||
dojo.requireLocalization("dijit._editor", "commands"); |
|||
|
|||
dojo.declare( |
|||
"dijit.Editor", |
|||
dijit._editor.RichText, |
|||
{ |
|||
// summary:
|
|||
// A rich text Editing widget
|
|||
//
|
|||
// description:
|
|||
// This widget provides basic WYSIWYG editing features, based on the browser's
|
|||
// underlying rich text editing capability, accompanied by a toolbar (`dijit.Toolbar`).
|
|||
// A plugin model is available to extend the editor's capabilities as well as the
|
|||
// the options available in the toolbar. Content generation may vary across
|
|||
// browsers, and clipboard operations may have different results, to name
|
|||
// a few limitations. Note: this widget should not be used with the HTML
|
|||
// <TEXTAREA> tag -- see dijit._editor.RichText for details.
|
|||
|
|||
// plugins: Object[]
|
|||
// A list of plugin names (as strings) or instances (as objects)
|
|||
// for this widget.
|
|||
//
|
|||
// When declared in markup, it might look like:
|
|||
// | plugins="['bold',{name:'dijit._editor.plugins.FontChoice', command:'fontName', generic:true}]"
|
|||
plugins: null, |
|||
|
|||
// extraPlugins: Object[]
|
|||
// A list of extra plugin names which will be appended to plugins array
|
|||
extraPlugins: null, |
|||
|
|||
constructor: function(){ |
|||
// summary:
|
|||
// Runs on widget initialization to setup arrays etc.
|
|||
// tags:
|
|||
// private
|
|||
|
|||
if(!dojo.isArray(this.plugins)){ |
|||
this.plugins=["undo","redo","|","cut","copy","paste","|","bold","italic","underline","strikethrough","|", |
|||
"insertOrderedList","insertUnorderedList","indent","outdent","|","justifyLeft","justifyRight","justifyCenter","justifyFull", |
|||
"dijit._editor.plugins.EnterKeyHandling" /*, "createLink"*/]; |
|||
} |
|||
|
|||
this._plugins=[]; |
|||
this._editInterval = this.editActionInterval * 1000; |
|||
|
|||
//IE will always lose focus when other element gets focus, while for FF and safari,
|
|||
//when no iframe is used, focus will be lost whenever another element gets focus.
|
|||
//For IE, we can connect to onBeforeDeactivate, which will be called right before
|
|||
//the focus is lost, so we can obtain the selected range. For other browsers,
|
|||
//no equivelent of onBeforeDeactivate, so we need to do two things to make sure
|
|||
//selection is properly saved before focus is lost: 1) when user clicks another
|
|||
//element in the page, in which case we listen to mousedown on the entire page and
|
|||
//see whether user clicks out of a focus editor, if so, save selection (focus will
|
|||
//only lost after onmousedown event is fired, so we can obtain correct caret pos.)
|
|||
//2) when user tabs away from the editor, which is handled in onKeyDown below.
|
|||
if(dojo.isIE){ |
|||
this.events.push("onBeforeDeactivate"); |
|||
this.events.push("onBeforeActivate"); |
|||
} |
|||
}, |
|||
|
|||
postMixInProperties: function() { |
|||
// summary:
|
|||
// Extension to make sure a deferred is in place before certain functions
|
|||
// execute, like making sure all the plugins are properly inserted.
|
|||
|
|||
// Set up a deferred so that the value isn't applied to the editor
|
|||
// until all the plugins load, needed to avoid timing condition
|
|||
// reported in #10537.
|
|||
this.setValueDeferred = new dojo.Deferred(); |
|||
this.inherited(arguments); |
|||
}, |
|||
|
|||
postCreate: function(){ |
|||
//for custom undo/redo, if enabled.
|
|||
this._steps=this._steps.slice(0); |
|||
this._undoedSteps=this._undoedSteps.slice(0); |
|||
|
|||
if(dojo.isArray(this.extraPlugins)){ |
|||