mirror of
https://github.com/Alfresco/alfresco-community-repo.git
synced 2025-08-07 17:49:17 +00:00
ALF-14382: Reverted changes to web/scripts/ajax - slight misunderstanding
git-svn-id: https://svn.alfresco.com/repos/alfresco-enterprise/alfresco/HEAD/root@37346 c4b6b30b-aa2e-2d43-bbcb-ca4b014f7261
This commit is contained in:
Dave Ward
404
source/web/scripts/ajax/autocompleter.js
Normal file
404
source/web/scripts/ajax/autocompleter.js
Normal file
@@ -0,0 +1,404 @@
|
|||||||
|
/**
|
||||||
|
* Autocompleter
|
||||||
|
*
|
||||||
|
* @version 1.0rc4
|
||||||
|
*
|
||||||
|
* @license MIT-style license
|
||||||
|
* @author Harald Kirschner <mail [at] digitarald.de>
|
||||||
|
* @copyright Author
|
||||||
|
*/
|
||||||
|
var Autocompleter = {};
|
||||||
|
|
||||||
|
Autocompleter.Base = new Class({
|
||||||
|
|
||||||
|
options: {
|
||||||
|
minLength: 1,
|
||||||
|
useSelection: true,
|
||||||
|
markQuery: true,
|
||||||
|
inheritWidth: true,
|
||||||
|
maxChoices: 10,
|
||||||
|
injectChoice: null,
|
||||||
|
onSelect: Class.empty,
|
||||||
|
onShow: Class.empty,
|
||||||
|
onHide: Class.empty,
|
||||||
|
customTarget: null,
|
||||||
|
className: 'autocompleter-choices',
|
||||||
|
zIndex: 42,
|
||||||
|
observerOptions: {},
|
||||||
|
fxOptions: {},
|
||||||
|
overflown: []
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(el, options) {
|
||||||
|
this.setOptions(options);
|
||||||
|
this.element = $(el);
|
||||||
|
this.build();
|
||||||
|
this.observer = new Observer(this.element, this.prefetch.bind(this), $merge({
|
||||||
|
delay: 400
|
||||||
|
}, this.options.observerOptions));
|
||||||
|
this.value = this.observer.value;
|
||||||
|
this.queryValue = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* build - Initialize DOM
|
||||||
|
*
|
||||||
|
* Builds the html structure for choices and appends the events to the element.
|
||||||
|
* Override this function to modify the html generation.
|
||||||
|
*/
|
||||||
|
build: function() {
|
||||||
|
if ($(this.options.customTarget)) this.choices = this.options.customTarget;
|
||||||
|
else {
|
||||||
|
this.choices = new Element('ul', {
|
||||||
|
'class': this.options.className,
|
||||||
|
styles: {zIndex: this.options.zIndex}
|
||||||
|
}).injectInside(document.body);
|
||||||
|
this.fix = new OverlayFix(this.choices);
|
||||||
|
}
|
||||||
|
this.fx = this.choices.effect('opacity', $merge({
|
||||||
|
wait: false,
|
||||||
|
duration: 200
|
||||||
|
}, this.options.fxOptions))
|
||||||
|
.addEvent('onStart', function() {
|
||||||
|
if (this.fx.now) return;
|
||||||
|
this.choices.setStyle('display', '');
|
||||||
|
this.fix.show();
|
||||||
|
}.bind(this))
|
||||||
|
.addEvent('onComplete', function() {
|
||||||
|
if (this.fx.now) return;
|
||||||
|
this.choices.setStyle('display', 'none');
|
||||||
|
this.fix.hide();
|
||||||
|
}.bind(this)).set(0);
|
||||||
|
this.element.setProperty('autocomplete', 'off')
|
||||||
|
.addEvent(window.ie ? 'keydown' : 'keypress', this.onCommand.bindWithEvent(this))
|
||||||
|
.addEvent('mousedown', this.onCommand.bindWithEvent(this, [true]))
|
||||||
|
.addEvent('focus', this.toggleFocus.bind(this, [true]))
|
||||||
|
.addEvent('blur', this.toggleFocus.bind(this, [false]))
|
||||||
|
.addEvent('trash', this.destroy.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy: function() {
|
||||||
|
this.choices.remove();
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleFocus: function(state) {
|
||||||
|
this.focussed = state;
|
||||||
|
if (!state) this.hideChoices();
|
||||||
|
},
|
||||||
|
|
||||||
|
onCommand: function(e, mouse) {
|
||||||
|
if (mouse && this.focussed) this.prefetch();
|
||||||
|
if (e.key && !e.shift) switch (e.key) {
|
||||||
|
case 'enter':
|
||||||
|
if (this.selected && this.visible) {
|
||||||
|
this.choiceSelect(this.selected);
|
||||||
|
e.stop();
|
||||||
|
} return;
|
||||||
|
case 'up': case 'down':
|
||||||
|
if (this.observer.value != (this.value || this.queryValue)) this.prefetch();
|
||||||
|
else if (this.queryValue === null) break;
|
||||||
|
else if (!this.visible) this.showChoices();
|
||||||
|
else {
|
||||||
|
this.choiceOver((e.key == 'up')
|
||||||
|
? this.selected.getPrevious() || this.choices.getLast()
|
||||||
|
: this.selected.getNext() || this.choices.getFirst() );
|
||||||
|
this.setSelection();
|
||||||
|
}
|
||||||
|
e.stop(); return;
|
||||||
|
case 'esc': this.hideChoices(); return;
|
||||||
|
}
|
||||||
|
this.value = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
setSelection: function() {
|
||||||
|
if (!this.options.useSelection) return;
|
||||||
|
var startLength = this.queryValue.length;
|
||||||
|
if (this.element.value.indexOf(this.queryValue) != 0) return;
|
||||||
|
var insert = this.selected.inputValue.substr(startLength);
|
||||||
|
if (document.getSelection) {
|
||||||
|
this.element.value = this.queryValue + insert;
|
||||||
|
this.element.selectionStart = startLength;
|
||||||
|
this.element.selectionEnd = this.element.value.length;
|
||||||
|
} else if (document.selection) {
|
||||||
|
var sel = document.selection.createRange();
|
||||||
|
sel.text = insert;
|
||||||
|
sel.move("character", - insert.length);
|
||||||
|
sel.findText(insert);
|
||||||
|
sel.select();
|
||||||
|
}
|
||||||
|
this.value = this.observer.value = this.element.value;
|
||||||
|
},
|
||||||
|
|
||||||
|
hideChoices: function() {
|
||||||
|
if (!this.visible) return;
|
||||||
|
this.visible = this.value = false;
|
||||||
|
this.observer.clear();
|
||||||
|
this.fx.start(0);
|
||||||
|
this.fireEvent('onHide', [this.element, this.choices]);
|
||||||
|
},
|
||||||
|
|
||||||
|
showChoices: function() {
|
||||||
|
if (this.visible || !this.choices.getFirst()) return;
|
||||||
|
this.visible = true;
|
||||||
|
var pos = this.element.getCoordinates(this.options.overflown);
|
||||||
|
this.choices.setStyles({
|
||||||
|
left: pos.left,
|
||||||
|
top: pos.bottom
|
||||||
|
});
|
||||||
|
if (this.options.inheritWidth) this.choices.setStyle('width', pos.width);
|
||||||
|
this.fx.start(1);
|
||||||
|
this.choiceOver(this.choices.getFirst());
|
||||||
|
this.fireEvent('onShow', [this.element, this.choices]);
|
||||||
|
},
|
||||||
|
|
||||||
|
prefetch: function() {
|
||||||
|
if (this.element.value.length < this.options.minLength) this.hideChoices();
|
||||||
|
else if (this.element.value == this.queryValue) this.showChoices();
|
||||||
|
else this.query();
|
||||||
|
},
|
||||||
|
|
||||||
|
updateChoices: function(choices) {
|
||||||
|
this.choices.empty();
|
||||||
|
this.selected = null;
|
||||||
|
if (!choices || !choices.length) return;
|
||||||
|
if (this.options.maxChoices < choices.length) choices.length = this.options.maxChoices;
|
||||||
|
choices.each(this.options.injectChoice || function(choice, i){
|
||||||
|
var el = new Element('li').setHTML(this.markQueryValue(choice));
|
||||||
|
el.inputValue = choice;
|
||||||
|
this.addChoiceEvents(el).injectInside(this.choices);
|
||||||
|
}, this);
|
||||||
|
this.showChoices();
|
||||||
|
},
|
||||||
|
|
||||||
|
choiceOver: function(el) {
|
||||||
|
if (this.selected) this.selected.removeClass('autocompleter-selected');
|
||||||
|
this.selected = el.addClass('autocompleter-selected');
|
||||||
|
},
|
||||||
|
|
||||||
|
choiceSelect: function(el) {
|
||||||
|
this.observer.value = this.element.value = el.inputValue;
|
||||||
|
this.hideChoices();
|
||||||
|
this.fireEvent('onSelect', [this.element], 20);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* markQueryValue
|
||||||
|
*
|
||||||
|
* Marks the queried word in the given string with <span class="autocompleter-queried">*</span>
|
||||||
|
* Call this i.e. from your custom parseChoices, same for addChoiceEvents
|
||||||
|
*
|
||||||
|
* @param {String} Text
|
||||||
|
* @return {String} Text
|
||||||
|
*/
|
||||||
|
markQueryValue: function(txt) {
|
||||||
|
return (this.options.markQuery && this.queryValue) ? txt.replace(new RegExp('^(' + this.queryValue.escapeRegExp() + ')', 'i'), '<span class="autocompleter-queried">$1</span>') : txt;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* addChoiceEvents
|
||||||
|
*
|
||||||
|
* Appends the needed event handlers for a choice-entry to the given element.
|
||||||
|
*
|
||||||
|
* @param {Element} Choice entry
|
||||||
|
* @return {Element} Choice entry
|
||||||
|
*/
|
||||||
|
addChoiceEvents: function(el) {
|
||||||
|
return el.addEvents({
|
||||||
|
mouseover: this.choiceOver.bind(this, [el]),
|
||||||
|
mousedown: this.choiceSelect.bind(this, [el])
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Autocompleter.Base.implement(new Events);
|
||||||
|
Autocompleter.Base.implement(new Options);
|
||||||
|
|
||||||
|
Autocompleter.Local = Autocompleter.Base.extend({
|
||||||
|
|
||||||
|
options: {
|
||||||
|
minLength: 0,
|
||||||
|
filterTokens : null
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(el, tokens, options) {
|
||||||
|
this.parent(el, options);
|
||||||
|
this.tokens = tokens;
|
||||||
|
if (this.options.filterTokens) this.filterTokens = this.options.filterTokens.bind(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
query: function() {
|
||||||
|
this.hideChoices();
|
||||||
|
this.queryValue = this.element.value;
|
||||||
|
this.updateChoices(this.filterTokens());
|
||||||
|
},
|
||||||
|
|
||||||
|
filterTokens: function(token) {
|
||||||
|
var regex = new RegExp('^' + this.queryValue.escapeRegExp(), 'i');
|
||||||
|
return this.tokens.filter(function(token) {
|
||||||
|
return regex.test(token);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
Autocompleter.Ajax = {};
|
||||||
|
|
||||||
|
Autocompleter.Ajax.Base = Autocompleter.Base.extend({
|
||||||
|
|
||||||
|
options: {
|
||||||
|
postVar: 'value',
|
||||||
|
postData: {},
|
||||||
|
ajaxOptions: {},
|
||||||
|
onRequest: Class.empty,
|
||||||
|
onComplete: Class.empty
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(el, url, options) {
|
||||||
|
this.parent(el, options);
|
||||||
|
this.ajax = new Ajax(url, $merge({
|
||||||
|
autoCancel: true
|
||||||
|
}, this.options.ajaxOptions));
|
||||||
|
this.ajax.addEvent('onComplete', this.queryResponse.bind(this));
|
||||||
|
this.ajax.addEvent('onFailure', this.queryResponse.bind(this, [false]));
|
||||||
|
},
|
||||||
|
|
||||||
|
query: function(){
|
||||||
|
var data = $extend({}, this.options.postData);
|
||||||
|
data[this.options.postVar] = this.element.value;
|
||||||
|
this.fireEvent('onRequest', [this.element, this.ajax]);
|
||||||
|
this.ajax.request(data);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* queryResponse - abstract
|
||||||
|
*
|
||||||
|
* Inherated classes have to extend this function and use this.parent(resp)
|
||||||
|
*
|
||||||
|
* @param {String} Response
|
||||||
|
*/
|
||||||
|
queryResponse: function(resp) {
|
||||||
|
this.value = this.queryValue = this.element.value;
|
||||||
|
this.selected = false;
|
||||||
|
this.hideChoices();
|
||||||
|
this.fireEvent(resp ? 'onComplete' : 'onFailure', [this.element, this.ajax], 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
Autocompleter.Ajax.Json = Autocompleter.Ajax.Base.extend({
|
||||||
|
|
||||||
|
queryResponse: function(resp) {
|
||||||
|
this.parent(resp);
|
||||||
|
var choices = Json.evaluate(resp || false);
|
||||||
|
if (!choices || !choices.length) return;
|
||||||
|
this.updateChoices(choices);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
Autocompleter.Ajax.Xhtml = Autocompleter.Ajax.Base.extend({
|
||||||
|
|
||||||
|
options: {
|
||||||
|
parseChoices: null
|
||||||
|
},
|
||||||
|
|
||||||
|
queryResponse: function(resp) {
|
||||||
|
this.parent(resp);
|
||||||
|
if (!resp) return;
|
||||||
|
this.choices.setHTML(resp).getChildren().each(this.options.parseChoices || this.parseChoices, this);
|
||||||
|
this.showChoices();
|
||||||
|
},
|
||||||
|
|
||||||
|
parseChoices: function(el) {
|
||||||
|
var value = el.innerHTML;
|
||||||
|
el.inputValue = value;
|
||||||
|
el.setHTML(this.markQueryValue(value));
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
var OverlayFix = new Class({
|
||||||
|
|
||||||
|
initialize: function(el) {
|
||||||
|
this.element = $(el);
|
||||||
|
if (window.ie){
|
||||||
|
this.element.addEvent('trash', this.destroy.bind(this));
|
||||||
|
this.fix = new Element('iframe', {
|
||||||
|
properties: {
|
||||||
|
frameborder: '0',
|
||||||
|
scrolling: 'no',
|
||||||
|
src: 'javascript:false;'
|
||||||
|
},
|
||||||
|
styles: {
|
||||||
|
position: 'absolute',
|
||||||
|
border: 'none',
|
||||||
|
display: 'none',
|
||||||
|
filter: 'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'
|
||||||
|
}
|
||||||
|
}).injectAfter(this.element);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function() {
|
||||||
|
if (this.fix) this.fix.setStyles($extend(
|
||||||
|
this.element.getCoordinates(), {
|
||||||
|
display: '',
|
||||||
|
zIndex: (this.element.getStyle('zIndex') || 1) - 1
|
||||||
|
}));
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: function() {
|
||||||
|
if (this.fix) this.fix.setStyle('display', 'none');
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy: function() {
|
||||||
|
this.fix.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Observer - Observe formelements for changes
|
||||||
|
*
|
||||||
|
* @version 1.0rc1
|
||||||
|
*
|
||||||
|
* @license MIT-style license
|
||||||
|
* @author Harald Kirschner <mail [at] digitarald.de>
|
||||||
|
* @copyright Author
|
||||||
|
*/
|
||||||
|
var Observer = new Class({
|
||||||
|
|
||||||
|
options: {
|
||||||
|
periodical: false,
|
||||||
|
delay: 1000
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(el, onFired, options){
|
||||||
|
this.setOptions(options);
|
||||||
|
this.addEvent('onFired', onFired);
|
||||||
|
this.element = $(el);
|
||||||
|
this.listener = this.fired.bind(this);
|
||||||
|
this.value = this.element.getValue();
|
||||||
|
if (this.options.periodical) this.timer = this.listener.periodical(this.options.periodical);
|
||||||
|
else this.element.addEvent('keyup', this.listener);
|
||||||
|
},
|
||||||
|
|
||||||
|
fired: function() {
|
||||||
|
var value = this.element.getValue();
|
||||||
|
if (this.value == value) return;
|
||||||
|
this.clear();
|
||||||
|
this.value = value;
|
||||||
|
this.timeout = this.fireEvent.delay(this.options.delay, this, ['onFired', [value]]);
|
||||||
|
},
|
||||||
|
|
||||||
|
clear: function() {
|
||||||
|
$clear(this.timeout);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Observer.implement(new Options);
|
||||||
|
Observer.implement(new Events);
|
||||||
383
source/web/scripts/ajax/date_picker.js
Normal file
383
source/web/scripts/ajax/date_picker.js
Normal file
@@ -0,0 +1,383 @@
|
|||||||
|
if (!$defined(Element.getText))
|
||||||
|
{
|
||||||
|
Element.extend(
|
||||||
|
{
|
||||||
|
getText: function()
|
||||||
|
{
|
||||||
|
return this.innerText || this.textContent || "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var DatePicker = new Class(
|
||||||
|
{
|
||||||
|
options:
|
||||||
|
{
|
||||||
|
onShow: Class.empty,
|
||||||
|
onHide: Class.empty,
|
||||||
|
readOnly: true,
|
||||||
|
showToday: true,
|
||||||
|
dateFormat: "string",
|
||||||
|
monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||||
|
monthNamesLong: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
||||||
|
dayNamesShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||||
|
dayNamesLong: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(el, options)
|
||||||
|
{
|
||||||
|
this.element = el;
|
||||||
|
this.setOptions(options);
|
||||||
|
|
||||||
|
this.calendar = new Element("div", {"id": "date-picker"}).inject(document.body);
|
||||||
|
this.calendar.addEvent("mouseenter", this.onMouseEnter.bind(this));
|
||||||
|
this.calendar.addEvent("mouseleave", this.onMouseLeave.bind(this));
|
||||||
|
|
||||||
|
this.wrapper = new Element("div", {"id": "date-wrapper"}).inject(this.calendar);
|
||||||
|
|
||||||
|
this.currentDate = null;
|
||||||
|
this.isVisible = false;
|
||||||
|
this.hasMouse = false;
|
||||||
|
|
||||||
|
if (this.options.readOnly)
|
||||||
|
{
|
||||||
|
el.setProperty("readonly", "readonly");
|
||||||
|
}
|
||||||
|
el.addEvent("click", this.toggleCalendar.bind(this));
|
||||||
|
el.addEvent("blur", this.onBlur.bind(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
position: function(el)
|
||||||
|
{
|
||||||
|
var pos = $(el).getPosition();
|
||||||
|
this.calendar.setStyles(
|
||||||
|
{
|
||||||
|
"left": pos.x,
|
||||||
|
"top": pos.y + $(el).getCoordinates().height
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function()
|
||||||
|
{
|
||||||
|
this.isVisible = true;
|
||||||
|
this.calendar.setStyle("visibility", "visible");
|
||||||
|
this.fireEvent("onShow", [this.calendar]);
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: function()
|
||||||
|
{
|
||||||
|
this.isVisible = false;
|
||||||
|
this.hasMouse = false;
|
||||||
|
this.calendar.setStyle("visibility", "hidden");
|
||||||
|
this.fireEvent("onHide", [this.calendar]);
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseEnter: function()
|
||||||
|
{
|
||||||
|
this.hasMouse = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseLeave: function()
|
||||||
|
{
|
||||||
|
this.hasMouse = false;
|
||||||
|
this.onBlur.delay(500, this);
|
||||||
|
},
|
||||||
|
|
||||||
|
onBlur: function()
|
||||||
|
{
|
||||||
|
if (!this.hasMouse)
|
||||||
|
{
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
toggleCalendar: function()
|
||||||
|
{
|
||||||
|
if (this.isVisible)
|
||||||
|
{
|
||||||
|
// Hide the calendar
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
this.originalDate = this.convert(this.element.value.toString(), "date");
|
||||||
|
this.renderCalendar(this.element);
|
||||||
|
this.show();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Main calendar render function */
|
||||||
|
renderCalendar: function(el, dt)
|
||||||
|
{
|
||||||
|
this.currentDate = this.convert((($defined(dt)) ? dt : el.value), "date");
|
||||||
|
|
||||||
|
this.position(el);
|
||||||
|
|
||||||
|
/** Set up all the dates we need */
|
||||||
|
var lastMonth = new Date(this.currentDate).setMonth(this.currentDate.getMonth() - 1); // The previous month to the display date
|
||||||
|
var nextMonth = new Date(this.currentDate).setMonth(this.currentDate.getMonth() + 1); // The next month to the display date
|
||||||
|
var lastYear = new Date(this.currentDate).setFullYear(this.currentDate.getFullYear() - 1); // The previous year to the display date
|
||||||
|
var nextYear = new Date(this.currentDate).setFullYear(this.currentDate.getFullYear() + 1); // The next year to the display date
|
||||||
|
|
||||||
|
var firstDay = new Date(this.currentDate); // The first day of the month for the display date
|
||||||
|
firstDay.setDate(1);
|
||||||
|
if (firstDay.getDay() > 0)
|
||||||
|
{
|
||||||
|
firstDay.setDate(-firstDay.getDay() + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
var currentDay = new Date(firstDay);
|
||||||
|
var today = new Date(); // Todays date
|
||||||
|
|
||||||
|
/** Clear any previous dom and refill it*/
|
||||||
|
this.wrapper.empty();
|
||||||
|
|
||||||
|
/** Global vars and initial dom stuff */
|
||||||
|
var table, tbody, row, td, highlight;
|
||||||
|
table = new Element("table",
|
||||||
|
{
|
||||||
|
"id": "date-table",
|
||||||
|
"class": "date-table"
|
||||||
|
});
|
||||||
|
tbody = new Element("tbody").injectInside(table)
|
||||||
|
|
||||||
|
/** Build the skip month/date controls */
|
||||||
|
row = new Element("tr").injectInside(tbody);
|
||||||
|
|
||||||
|
new Element("td",
|
||||||
|
{
|
||||||
|
"class": "date-monthswitch",
|
||||||
|
"events":
|
||||||
|
{
|
||||||
|
"click" : this.renderCalendar.bind(this, [el, lastMonth])
|
||||||
|
}
|
||||||
|
}).appendText("<").injectInside(row);
|
||||||
|
|
||||||
|
new Element("td",
|
||||||
|
{
|
||||||
|
"colSpan": 5,
|
||||||
|
"rowSpan": 2,
|
||||||
|
"class" : "date-monthandyear"
|
||||||
|
}).appendText(this.options.monthNamesLong[this.currentDate.getMonth()] + " " + this.currentDate.getFullYear()).injectInside(row);
|
||||||
|
|
||||||
|
new Element("td",
|
||||||
|
{
|
||||||
|
"class": "date-monthswitch",
|
||||||
|
"events":
|
||||||
|
{
|
||||||
|
"click" : this.renderCalendar.bind(this, [el, nextMonth])
|
||||||
|
}
|
||||||
|
}).appendText(">").injectInside(row);
|
||||||
|
|
||||||
|
row = new Element("tr").injectInside(tbody);
|
||||||
|
|
||||||
|
new Element("td",
|
||||||
|
{
|
||||||
|
"class": "date-yearswitch",
|
||||||
|
"events":
|
||||||
|
{
|
||||||
|
"click" : this.renderCalendar.bind(this, [el, lastYear])
|
||||||
|
}
|
||||||
|
}).appendText("<<").injectInside(row);
|
||||||
|
|
||||||
|
new Element("td",
|
||||||
|
{
|
||||||
|
"class": "date-yearswitch",
|
||||||
|
"events":
|
||||||
|
{
|
||||||
|
"click" : this.renderCalendar.bind(this, [el, nextYear])
|
||||||
|
}
|
||||||
|
}).appendText(">>").injectInside(row);
|
||||||
|
|
||||||
|
/** Push out the day names */
|
||||||
|
row = new Element("tr").injectInside(tbody);
|
||||||
|
for (i = 0; i < 7; i++)
|
||||||
|
{
|
||||||
|
new Element("th").appendText(this.options.dayNamesShort[i].substr(0,2)).injectInside(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
highlight = this.highlight.bind(this);
|
||||||
|
|
||||||
|
/* Populate the dates we can pick */
|
||||||
|
while (currentDay.getMonth() == this.currentDate.getMonth() || currentDay.getMonth() == firstDay.getMonth())
|
||||||
|
{
|
||||||
|
row = new Element("tr").injectInside(tbody);
|
||||||
|
for (i = 0; i < 7; i++)
|
||||||
|
{
|
||||||
|
td = new Element("td").appendText(currentDay.getDate()).injectInside(row);
|
||||||
|
td.addClass((currentDay.getDay() == 0 || currentDay.getDay() == 6) ? "date-weekend" : "date-workday");
|
||||||
|
if (currentDay.getMonth() != this.currentDate.getMonth())
|
||||||
|
{
|
||||||
|
td.addClass("date-offmonth");
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
td.addClass("date-day");
|
||||||
|
td.addEvents(
|
||||||
|
{
|
||||||
|
"click": this.selectValue.bindWithEvent(this),
|
||||||
|
"mouseenter": highlight,
|
||||||
|
"mouseleave": highlight
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (currentDay.getDate() == today.getDate() && currentDay.getMonth() == today.getMonth() && currentDay.getFullYear() == today.getFullYear())
|
||||||
|
{
|
||||||
|
td.addClass("date-today");
|
||||||
|
}
|
||||||
|
if (currentDay.getDate() == this.originalDate.getDate()
|
||||||
|
&& currentDay.getMonth() == this.originalDate.getMonth()
|
||||||
|
&& currentDay.getFullYear() == this.originalDate.getFullYear())
|
||||||
|
{
|
||||||
|
td.addClass("date-picked");
|
||||||
|
}
|
||||||
|
currentDay.setDate(currentDay.getDate() + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Add the select today choice */
|
||||||
|
if (this.options.showToday)
|
||||||
|
{
|
||||||
|
row = new Element("tr").injectInside(tbody);
|
||||||
|
new Element("td",
|
||||||
|
{
|
||||||
|
"colSpan": 7,
|
||||||
|
"class" : "date-todayfooter",
|
||||||
|
"events":
|
||||||
|
{
|
||||||
|
"click" : this.renderCalendar.bind(this, [el, today])
|
||||||
|
}
|
||||||
|
}).appendText("Today: " + this.convert(today, "dd/MMM/yyyy")).injectInside(row);
|
||||||
|
}
|
||||||
|
|
||||||
|
table.injectInside(this.wrapper);
|
||||||
|
},
|
||||||
|
|
||||||
|
highlight: function (ev)
|
||||||
|
{
|
||||||
|
var e = new Event(ev);
|
||||||
|
e.target.toggleClass("date-tdover");
|
||||||
|
},
|
||||||
|
|
||||||
|
selectValue: function (ev)
|
||||||
|
{
|
||||||
|
var e = new Event(ev);
|
||||||
|
e.stopPropagation();
|
||||||
|
var o = $(e.target);
|
||||||
|
var pickedDate = this.currentDate.setDate(o.getText());
|
||||||
|
this.element.value = this.convert(pickedDate, this.options.dateFormat);
|
||||||
|
this.hide();
|
||||||
|
},
|
||||||
|
|
||||||
|
convert: function(o, format)
|
||||||
|
{
|
||||||
|
var d = new Date();
|
||||||
|
if (o.getFullYear)
|
||||||
|
{
|
||||||
|
d = o;
|
||||||
|
}
|
||||||
|
else if ($type(o) == "number")
|
||||||
|
{
|
||||||
|
d = new Date(o);
|
||||||
|
}
|
||||||
|
else if ($type(o) == "object")
|
||||||
|
{
|
||||||
|
d = new Date(o.year, o.month, o.date);
|
||||||
|
}
|
||||||
|
else if ($type(o) == "string")
|
||||||
|
{
|
||||||
|
d = new Date(o);
|
||||||
|
if ((d.toString() == "Invalid Date") || (d.toString() == "NaN"))
|
||||||
|
{
|
||||||
|
d = new Date();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (format == "date")
|
||||||
|
{
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
else if (format == "object")
|
||||||
|
{
|
||||||
|
return(
|
||||||
|
{
|
||||||
|
date: d.getDate(),
|
||||||
|
month: d.getMonth(),
|
||||||
|
year: d.getFullYear()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
else if (format == "number")
|
||||||
|
{
|
||||||
|
return d.getTime();
|
||||||
|
}
|
||||||
|
else if (format == "string")
|
||||||
|
{
|
||||||
|
return d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise, assume we've been given a format string for formatDate
|
||||||
|
return this.formatDate(d, format);
|
||||||
|
},
|
||||||
|
|
||||||
|
formatDate: function(dt, format)
|
||||||
|
{
|
||||||
|
if (!dt.valueOf())
|
||||||
|
{
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
window.monthNamesLong = this.options.monthNamesLong;
|
||||||
|
window.monthNamesShort = this.options.monthNamesShort;
|
||||||
|
window.dayNamesLong = this.options.dayNamesLong;
|
||||||
|
window.dayNamesShort = this.options.dayNamesShort;
|
||||||
|
|
||||||
|
return format.replace(/(yyyy|yy|y|MMMM|MMM|MM|M|dddd|ddd|dd|d|HH|H|hh|h|mm|m|ss|s|t)/gi, function($1, $2, $3, $4, $5)
|
||||||
|
{
|
||||||
|
switch ($1)
|
||||||
|
{
|
||||||
|
case 'yyyy': return dt.getFullYear();
|
||||||
|
case 'yy': return ('0' + (dt.getFullYear()%100)).zeroFill(2);
|
||||||
|
case 'y': return (d.getFullYear()%100);
|
||||||
|
case 'MMMM': return window.monthNamesLong[dt.getMonth()];
|
||||||
|
case 'MMM': return window.monthNamesShort[dt.getMonth()];
|
||||||
|
case 'MM': return (dt.getMonth() + 1).zeroFill(2);
|
||||||
|
case 'M': return (dt.getMonth() + 1);
|
||||||
|
case 'dddd': return window.dayNamesLong[dt.getDay()];
|
||||||
|
case 'ddd': return window.dayNamesShort[dt.getDay()];
|
||||||
|
case 'dd': return dt.getDate().zeroFill(2);
|
||||||
|
case 'd': return dt.getDate();
|
||||||
|
case 'HH': return dt.getHours().zeroFill(2);
|
||||||
|
case 'H': return dt.getHours();
|
||||||
|
case 'hh': return ((h = dt.getHours() % 12) ? h : 12).zeroFill(2);
|
||||||
|
case 'h': return ((h = dt.getHours() % 12) ? h : 12);
|
||||||
|
case 'mm': return dt.getMinutes().zeroFill(2);
|
||||||
|
case 'm': return dt.getMinutes();
|
||||||
|
case 'ss': return dt.getSeconds().zeroFill(2);
|
||||||
|
case 's': return dt.getSeconds();
|
||||||
|
case 't': return dt.getHours() < 12 ? 'A.M.' : 'P.M.';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
DatePicker.implement(new Events, new Options);
|
||||||
|
|
||||||
|
// Used by formatDate function */
|
||||||
|
String.prototype.zeroFill = function(l)
|
||||||
|
{
|
||||||
|
return '0'.repeat(l - this.length) + this;
|
||||||
|
}
|
||||||
|
String.prototype.repeat = function(l)
|
||||||
|
{
|
||||||
|
var s = '', i = 0;
|
||||||
|
while (i++ < l)
|
||||||
|
{
|
||||||
|
s += this;
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
}
|
||||||
|
Number.prototype.zeroFill = function(l)
|
||||||
|
{
|
||||||
|
return this.toString().zeroFill(l);
|
||||||
|
}
|
||||||
3
source/web/scripts/ajax/mootools.v1.11.js
Normal file
3
source/web/scripts/ajax/mootools.v1.11.js
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user