// Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements // Calendar RC4, Copyright (c) 2007 Aeron Glemann , MIT Style License. // Mootools 1.2 compatibility by Davorin Šego var Calendar = new Class({ options: { blocked: [], // blocked dates classes: [], // ['calendar', 'prev', 'next', 'month', 'year', 'today', 'invalid', 'valid', 'inactive', 'active', 'hover', 'hilite'] days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], // days of the week starting at sunday direction: 0, // -1 past, 0 past + future, 1 future draggable: true, months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], navigation: 1, // 0 = no nav; 1 = single nav for month; 2 = dual nav for month and year offset: 0, // first day of the week: 0 = sunday, 1 = monday, etc.. onHideStart: Class.empty, onHideComplete: Class.empty, onShowStart: Class.empty, onShowComplete: Class.empty, pad: 1, // padding between multiple calendars tweak: {x: 0, y: 0} // tweak calendar positioning }, // initialize: calendar constructor // @param obj (obj) a js object containing the form elements and format strings { id: 'format', id: 'format' etc } // @param props (obj) optional properties initialize: function(obj, options) { // basic error checking if (!obj) { return false; } this.setOptions(options); // create our classes array var keys = ['calendar', 'prev', 'next', 'month', 'year', 'today', 'invalid', 'valid', 'inactive', 'active', 'hover', 'hilite']; var values = keys.map(function(key, i) { if (this.options.classes[i]) { if (this.options.classes[i].length) { key = this.options.classes[i]; } } return key; }, this); this.classes = values.associate(keys); // create cal element with css styles required for proper cal functioning this.calendar = new Element('div', { 'styles': { left: '-1000px', opacity: 0, position: 'absolute', top: '-1000px', zIndex: 1000 } }).addClass(this.classes.calendar).injectInside(document.body); // iex 6 needs a transparent iframe underneath the calendar in order to not allow select elements to render through if (window.ie6) { this.iframe = new Element('iframe', { 'styles': { left: '-1000px', position: 'absolute', top: '-1000px', zIndex: 999 } }).injectInside(document.body); this.iframe.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'; } // initialize fade method this.fx = new Fx.Tween(this.calendar, { onStart: function() { if (this.calendar.getStyle('opacity') == 0) { // show if (window.ie6) { this.iframe.setStyle('display', 'block'); } this.calendar.setStyle('display', 'block'); this.fireEvent('onShowStart', this.element); } else { // hide this.fireEvent('onHideStart', this.element); } }.bind(this), onComplete: function() { if (this.calendar.getStyle('opacity') == 0) { // hidden this.calendar.setStyle('display', 'none'); if (window.ie6) { this.iframe.setStyle('display', 'none'); } this.fireEvent('onHideComplete', this.element); } else { // shown this.fireEvent('onShowComplete', this.element); } }.bind(this) }); // initialize drag method if (window.Drag && this.options.draggable) { this.drag = new Drag.Move(this.calendar, { onDrag: function() { if (window.ie6) { this.iframe.setStyles({ left: this.calendar.style.left, top: this.calendar.style.top }); } }.bind(this) }); } // create calendars array this.calendars = []; var id = 0; var d = new Date(); // today d.setDate(d.getDate() + this.options.direction.toInt()); // correct today for directional offset for (var i in obj) { var cal = { button: new Element('button', { 'type': 'button' }), el: $(i), els: [], id: id++, month: d.getMonth(), visible: false, year: d.getFullYear() }; // fix for bad element (naughty, naughty element!) if (!this.element(i, obj[i], cal)) { continue; } cal.el.addClass(this.classes.calendar); // create cal button cal.button.addClass(this.classes.calendar).addEvent('click', function(cal) { this.toggle(cal); }.pass(cal, this)).injectAfter(cal.el); // read in default value cal.val = this.read(cal); $extend(cal, this.bounds(cal)); // abs bounds of calendar $extend(cal, this.values(cal)); // valid days, months, years this.rebuild(cal); this.calendars.push(cal); // add to cals array } }, // blocked: returns an array of blocked days for the month / year // @param cal (obj) // @returns blocked days (array) blocked: function(cal) { var blocked = []; var offset = new Date(cal.year, cal.month, 1).getDay(); // day of the week (offset) var last = new Date(cal.year, cal.month + 1, 0).getDate(); // last day of this month this.options.blocked.each(function(date){ var values = date.split(' '); // preparation for (var i = 0; i <= 3; i++){ if (!values[i]){ values[i] = (i == 3) ? '' : '*'; } // make sure blocked date contains values for at least d, m and y values[i] = values[i].contains(',') ? values[i].split(',') : new Array(values[i]); // split multiple values var count = values[i].length - 1; for (var j = count; j >= 0; j--){ if (values[i][j].contains('-')){ // a range var val = values[i][j].split('-'); for (var k = val[0]; k <= val[1]; k++){ if (!values[i].contains(k)){ values[i].push(k + ''); } } values[i].splice(j, 1); } } } // execution if (values[2].contains(cal.year + '') || values[2].contains('*')){ if (values[1].contains(cal.month + 1 + '') || values[1].contains('*')){ values[0].each(function(val){ // if blocked value indicates this month / year if (val > 0){ blocked.push(val.toInt()); } // add date to blocked array }); if (values[3]){ // optional value for day of week for (var i = 0; i < last; i++){ var day = (i + offset) % 7; if (values[3].contains(day + '')){ blocked.push(i + 1); // add every date that corresponds to the blocked day of the week to the blocked array } } } } } }, this); return blocked; }, // bounds: returns the start / end bounds of the calendar // @param cal (obj) // @returns obj bounds: function(cal) { // 1. first we assume the calendar has no bounds (or a thousand years in either direction) // by default the calendar will accept a millennium in either direction var start = new Date(1000, 0, 1); // jan 1, 1000 var end = new Date(2999, 11, 31); // dec 31, 2999 // 2. but if the cal is one directional we adjust accordingly var date = new Date().getDate() + this.options.direction.toInt(); if (this.options.direction > 0) { start = new Date(); start.setDate(date + this.options.pad * cal.id); } if (this.options.direction < 0) { end = new Date(); end.setDate(date - this.options.pad * (this.calendars.length - cal.id - 1)); } // 3. then we can further filter the limits by using the pre-existing values in the selects cal.els.each(function(el) { if (el.get('tag') == 'select') { if (el.format.test('(y|Y)')) { // search for a year select var years = []; el.getChildren().each(function(option) { // get options var values = this.unformat(option.value, el.format); if (!years.contains(values[0])) { years.push(values[0]); } // add to years array }, this); years.sort(this.sort); if (years[0] > start.getFullYear()) { d = new Date(years[0], start.getMonth() + 1, 0); // last day of new month if (start.getDate() > d.getDate()) { start.setDate(d.getDate()); } start.setYear(years[0]); } if (years.getLast() < end.getFullYear()) { d = new Date(years.getLast(), end.getMonth() + 1, 0); // last day of new month if (end.getDate() > d.getDate()) { end.setDate(d.getDate()); } end.setYear(years.getLast()); } } if (el.format.test('(F|m|M|n)')) { // search for a month select var months_start = []; var months_end = []; el.getChildren().each(function(option) { // get options var values = this.unformat(option.value, el.format); if ($type(values[0]) != 'number' || values[0] == years[0]) { // if it's a year / month combo for curr year, or simply a month select if (!months_start.contains(values[1])) { months_start.push(values[1]); } // add to months array } if ($type(values[0]) != 'number' || values[0] == years.getLast()) { // if it's a year / month combo for curr year, or simply a month select if (!months_end.contains(values[1])) { months_end.push(values[1]); } // add to months array } }, this); months_start.sort(this.sort); months_end.sort(this.sort); if (months_start[0] > start.getMonth()) { d = new Date(start.getFullYear(), months_start[0] + 1, 0); // last day of new month if (start.getDate() > d.getDate()) { start.setDate(d.getDate()); } start.setMonth(months_start[0]); } if (months_end.getLast() < end.getMonth()) { d = new Date(start.getFullYear(), months_end.getLast() + 1, 0); // last day of new month if (end.getDate() > d.getDate()) { end.setDate(d.getDate()); } end.setMonth(months_end.getLast()); } } } }, this); return { 'start': start, 'end': end }; }, // caption: returns the caption element with header and navigation // @param cal (obj) // @returns caption (element) caption: function(cal) { // start by assuming navigation is allowed var navigation = { prev: { 'month': true, 'year': true }, next: { 'month': true, 'year': true } }; // if we're in an out of bounds year if (cal.year == cal.start.getFullYear()) { navigation.prev.year = false; if (cal.month == cal.start.getMonth() && this.options.navigation == 1) { navigation.prev.month = false; } } if (cal.year == cal.end.getFullYear()) { navigation.next.year = false; if (cal.month == cal.end.getMonth() && this.options.navigation == 1) { navigation.next.month = false; } } // special case of improved navigation but months array with only 1 month we can disable all month navigation if ($type(cal.months) == 'array') { if (cal.months.length == 1 && this.options.navigation == 2) { navigation.prev.month = navigation.next.month = false; } } var caption = new Element('caption'); var prev = new Element('a').addClass(this.classes.prev).appendText('\x3c'); // < var next = new Element('a').addClass(this.classes.next).appendText('\x3e'); // > if (this.options.navigation == 2) { var month = new Element('span').addClass(this.classes.month).injectInside(caption); if (navigation.prev.month) { prev.clone().addEvent('click', function(cal) { this.navigate(cal, 'm', -1); }.pass(cal, this)).injectInside(month); } month.adopt(new Element('span').appendText(this.options.months[cal.month])); if (navigation.next.month) { next.clone().addEvent('click', function(cal) { this.navigate(cal, 'm', 1); }.pass(cal, this)).injectInside(month); } var year = new Element('span').addClass(this.classes.year).injectInside(caption); if (navigation.prev.year) { prev.clone().addEvent('click', function(cal) { this.navigate(cal, 'y', -1); }.pass(cal, this)).injectInside(year); } year.adopt(new Element('span').appendText(cal.year)); if (navigation.next.year) { next.clone().addEvent('click', function(cal) { this.navigate(cal, 'y', 1); }.pass(cal, this)).injectInside(year); } } else { // 1 or 0 if (navigation.prev.month && this.options.navigation) { prev.clone().addEvent('click', function(cal) { this.navigate(cal, 'm', -1); }.pass(cal, this)).injectInside(caption); } caption.adopt(new Element('span').addClass(this.classes.month).appendText(this.options.months[cal.month])); caption.adopt(new Element('span').addClass(this.classes.year).appendText(cal.year)); if (navigation.next.month && this.options.navigation) { next.clone().addEvent('click', function(cal) { this.navigate(cal, 'm', 1); }.pass(cal, this)).injectInside(caption); } } return caption; }, // changed: run when a select value is changed // @param cal (obj) changed: function(cal) { cal.val = this.read(cal); // update calendar val from inputs $extend(cal, this.values(cal)); // update bounds - based on curr month this.rebuild(cal); // rebuild days select if (!cal.val) { return; } // in case the same date was clicked the cal has no set date we should exit if (cal.val.getDate() < cal.days[0]) { cal.val.setDate(cal.days[0]); } if (cal.val.getDate() > cal.days.getLast()) { cal.val.setDate(cal.days.getLast()); } cal.els.each(function(el) { // then we can set the value to the field el.value = this.format(cal.val, el.format); }, this); this.check(cal); // checks other cals this.calendars.each(function(kal) { // update cal graphic if visible if (kal.visible) { this.display(kal); } }, this); }, // check: checks other calendars to make sure no overlapping values // @param cal (obj) check: function(cal) { this.calendars.each(function(kal, i) { if (kal.val) { // if calendar has value set var change = false; if (i < cal.id) { // preceding calendar var bound = new Date(Date.parse(cal.val)); bound.setDate(bound.getDate() - (this.options.pad * (cal.id - i))); if (bound < kal.val) { change = true; } } if (i > cal.id) { // following calendar var bound = new Date(Date.parse(cal.val)); bound.setDate(bound.getDate() + (this.options.pad * (i - cal.id))); if (bound > kal.val) { change = true; } } if (change) { if (kal.start > bound) { bound = kal.start; } if (kal.end < bound) { bound = kal.end; } kal.month = bound.getMonth(); kal.year = bound.getFullYear(); $extend(kal, this.values(kal)); // TODO - IN THE CASE OF SELECT MOVE TO NEAREST VALID VALUE // IN THE CASE OF INPUT DISABLE // if new date is not valid better unset cal value // otherwise it would mean incrementally checking to find the nearest valid date which could be months / years away kal.val = kal.days.contains(bound.getDate()) ? bound : null; this.write(kal); if (kal.visible) { this.display(kal); } // update cal graphic if visible } } else { kal.month = cal.month; kal.year = cal.year; } }, this); }, // clicked: run when a valid day is clicked in the calendar // @param cal (obj) clicked: function(td, day, cal) { cal.val = (this.value(cal) == day) ? null : new Date(cal.year, cal.month, day); // set new value - if same then disable this.write(cal); // ok - in the special case that it's all selects and there's always a date no matter what (at least as far as the form is concerned) // we can't let the calendar undo a date selection - it's just not possible!! if (!cal.val) { cal.val = this.read(cal); } if (cal.val) { this.check(cal); // checks other cals this.toggle(cal); // hide cal } else { // remove active class and replace with valid td.addClass(this.classes.valid); td.removeClass(this.classes.active); } }, // display: create calendar element // @param cal (obj) display: function(cal) { // 1. header and navigation this.calendar.empty(); // init div this.calendar.className = this.classes.calendar + ' ' + this.options.months[cal.month].toLowerCase(); var div = new Element('div').injectInside(this.calendar); // a wrapper div to help correct browser css problems with the caption element var table = new Element('table').injectInside(div).adopt(this.caption(cal)); // 2. day names var thead = new Element('thead').injectInside(table); var tr = new Element('tr').injectInside(thead); for (var i = 0; i <= 6; i++) { var th = this.options.days[(i + this.options.offset) % 7]; tr.adopt(new Element('th', { 'title': th }).appendText(th.substr(0, 1))); } // 3. day numbers var tbody = new Element('tbody').injectInside(table); var tr = new Element('tr').injectInside(tbody); var d = new Date(cal.year, cal.month, 1); var offset = ((d.getDay() - this.options.offset) + 7) % 7; // day of the week (offset) var last = new Date(cal.year, cal.month + 1, 0).getDate(); // last day of this month var prev = new Date(cal.year, cal.month, 0).getDate(); // last day of previous month var active = this.value(cal); // active date (if set and within curr month) var valid = cal.days; // valid days for curr month var inactive = []; // active dates set by other calendars var hilited = []; this.calendars.each(function(kal, i) { if (kal != cal && kal.val) { if (cal.year == kal.val.getFullYear() && cal.month == kal.val.getMonth()) { inactive.push(kal.val.getDate()); } if (cal.val) { for (var day = 1; day <= last; day++) { d.setDate(day); if ((i < cal.id && d > kal.val && d < cal.val) || (i > cal.id && d > cal.val && d < kal.val)) { if (!hilited.contains(day)) { hilited.push(day); } } } } } }, this); var d = new Date(); var today = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime(); // today obv for (var i = 1; i < 43; i++) { // 1 to 42 (6 x 7 or 6 weeks) if ((i - 1) % 7 == 0) { tr = new Element('tr').injectInside(tbody); } // each week is it's own table row var td = new Element('td').injectInside(tr); var day = i - offset; var date = new Date(cal.year, cal.month, day); var cls = ''; if (day === active) { cls = this.classes.active; } // active else if (inactive.contains(day)) { cls = this.classes.inactive; } // inactive else if (valid.contains(day)) { cls = this.classes.valid; } // valid else if (day >= 1 && day <= last) { cls = this.classes.invalid; } // invalid if (date.getTime() == today) { cls = cls + ' ' + this.classes.today; } // adds class for today if (hilited.contains(day)) { cls = cls + ' ' + this.classes.hilite; } // adds class if hilited td.addClass(cls); if (valid.contains(day)) { // if it's a valid - clickable - day we add interaction td.setProperty('title', this.format(date, 'D M jS Y')); td.addEvents({ 'click': function(td, day, cal) { this.clicked(td, day, cal); }.pass([td, day, cal], this), 'mouseover': function(td, cls) { td.addClass(cls); }.pass([td, this.classes.hover]), 'mouseout': function(td, cls) { td.removeClass(cls); }.pass([td, this.classes.hover]) }); } // pad calendar with last days of prev month and first days of next month if (day < 1) { day = prev + day; } else if (day > last) { day = day - last; } td.appendText(day); } }, // element: helper function // @param el (string) element id // @param f (string) format string // @param cal (obj) element: function(el, f, cal) { if ($type(f) == 'object') { // in the case of multiple inputs per calendar for (var i in f) { if (!this.element(i, f[i], cal)) { return false; } } return true; } el = $(el); if (!el) { return false; } el.format = f; if (el.get('tag') == 'select') { // select elements allow the user to manually set the date via select option el.addEvent('change', function(cal) { this.changed(cal); }.pass(cal, this)); } else { // input (type text) elements restrict the user to only setting the date via the calendar el.readOnly = true; el.addEvent('focus', function(cal) { this.toggle(cal); }.pass(cal, this)); } cal.els.push(el); return true; }, // format: formats a date object according to passed in instructions // @param date (obj) // @param f (string) any combination of punctuation / separators and d, j, D, l, S, m, n, F, M, y, Y // @returns string format: function(date, format) { var str = ''; if (date) { var j = date.getDate(); // 1 - 31 var w = date.getDay(); // 0 - 6 var l = this.options.days[w]; // Sunday - Saturday var n = date.getMonth() + 1; // 1 - 12 var f = this.options.months[n - 1]; // January - December var y = date.getFullYear() + ''; // 19xx - 20xx for (var i = 0, len = format.length; i < len; i++) { var cha = format.charAt(i); // format char switch(cha) { // year cases case 'y': // xx - xx y = y.substr(2); case 'Y': // 19xx - 20xx str += y; break; // month cases case 'm': // 01 - 12 if (n < 10) { n = '0' + n; } case 'n': // 1 - 12 str += n; break; case 'M': // Jan - Dec f = f.substr(0, 3); case 'F': // January - December str += f; break; // day cases case 'd': // 01 - 31 if (j < 10) { j = '0' + j; } case 'j': // 1 - 31 str += j; break; case 'D': // Sun - Sat l = l.substr(0, 3); case 'l': // Sunday - Saturday str += l; break; case 'N': // 1 - 7 w += 1; case 'w': // 0 - 6 str += w; break; case 'S': // st, nd, rd or th (works well with j) if (j % 10 == 1 && j != '11') { str += 'st'; } else if (j % 10 == 2 && j != '12') { str += 'nd'; } else if (j % 10 == 3 && j != '13') { str += 'rd'; } else { str += 'th'; } break; default: str += cha; } } } return str; // return format with values replaced }, // navigate: calendar navigation // @param cal (obj) // @param type (str) m or y for month or year // @param n (int) + or - for next or prev navigate: function(cal, type, n) { switch (type) { case 'm': // month if ($type(cal.months) == 'array') { var i = cal.months.indexOf(cal.month) + n; // index of current month if (i < 0 || i == cal.months.length) { // out of range if (this.options.navigation == 1) { // if type 1 nav we'll need to increment the year this.navigate(cal, 'y', n); } i = (i < 0) ? cal.months.length - 1 : 0; } cal.month = cal.months[i]; } else { var i = cal.month + n; if (i < 0 || i == 12) { if (this.options.navigation == 1) { this.navigate(cal, 'y', n); } i = (i < 0) ? 11 : 0; } cal.month = i; } break; case 'y': // year if ($type(cal.years) == 'array') { var i = cal.years.indexOf(cal.year) + n; cal.year = cal.years[i]; } else { cal.year += n; } break; } $extend(cal, this.values(cal)); if ($type(cal.months) == 'array') { // if the calendar has a months select var i = cal.months.indexOf(cal.month); // and make sure the curr months exists for the new year if (i < 0) { cal.month = cal.months[0]; } // otherwise we'll reset the month } this.display(cal); }, // read: compiles cal value based on array of inputs passed in // @param cal (obj) // @returns date (obj) or (null) read: function(cal) { var arr = [null, null, null]; cal.els.each(function(el) { // returns an array which may contain empty values var values = this.unformat(el.value, el.format); values.each(function(val, i) { if ($type(val) == 'number') { arr[i] = val; } }); }, this); // we can update the cals month and year values if ($type(arr[0]) == 'number') { cal.year = arr[0]; } if ($type(arr[1]) == 'number') { cal.month = arr[1]; } var val = null; if (arr.every(function(i) { return $type(i) == 'number'; })) { // if valid date var last = new Date(arr[0], arr[1] + 1, 0).getDate(); // last day of month if (arr[2] > last) { arr[2] = last; } // make sure we stay within the month (ex in case default day of select is 31 and month is feb) val = new Date(arr[0], arr[1], arr[2]); } return (cal.val == val) ? null : val; // if new date matches old return null (same date clicked twice = disable) }, // rebuild: rebuilds days + months selects // @param cal (obj) rebuild: function(cal) { cal.els.each(function(el) { /* if (el.get('tag') == 'select' && el.format.test('^(F|m|M|n)$')) { // special case for months-only select if (!cal.options) { cal.options = el.clone(); } // clone a copy of months select var val = (cal.val) ? cal.val.getMonth() : el.value.toInt(); el.empty(); // initialize select cal.months.each(function(month) { // create an option element var option = new Element('option', { 'selected': (val == month), 'value': this.format(new Date(1, month, 1), el.format); }).appendText(day).injectInside(el); }, this); } */ if (el.get('tag') == 'select' && el.format.test('^(d|j)$')) { // special case for days-only select var d = this.value(cal); if (!d) { d = el.value.toInt(); } // if the calendar doesn't have a set value, try to use value from select el.empty(); // initialize select cal.days.each(function(day) { // create an option element var option = new Element('option', { 'selected': (d == day), 'value': ((el.format == 'd' && day < 10) ? '0' + day : day) }).appendText(day).injectInside(el); }, this); } }, this); }, // sort: helper function for numerical sorting sort: function(a, b) { return a - b; }, // toggle: show / hide calendar // @param cal (obj) toggle: function(cal) { document.removeEvent('mousedown', this.fn); // always remove the current mousedown script first if (cal.visible) { // simply hide curr cal cal.visible = false; cal.button.removeClass(this.classes.active); // active this.fx.start('opacity', 1, 0); } else { // otherwise show (may have to hide others) // hide cal on out-of-bounds click this.fn = function(e, cal) { var e = new Event(e); var el = e.target; var stop = false; while (el != document.body && el.nodeType == 1) { if (el == this.calendar) { stop = true; } this.calendars.each(function(kal) { if (kal.button == el || kal.els.contains(el)) { stop = true; } }); if (stop) { e.stop(); return false; } else { el = el.parentNode; } } this.toggle(cal); }.create({ 'arguments': cal, 'bind': this, 'event': true }); document.addEvent('mousedown', this.fn); this.calendars.each(function(kal) { if (kal == cal) { kal.visible = true; kal.button.addClass(this.classes.active); // css c-icon-active } else { kal.visible = false; kal.button.removeClass(this.classes.active); // css c-icon-active } }, this); var size = window.getScrollSize(); var coord = cal.button.getCoordinates(); var x = coord.right + this.options.tweak.x; var y = coord.top + this.options.tweak.y; // make sure the calendar doesn't open off screen if (!this.calendar.coord) { this.calendar.coord = this.calendar.getCoordinates(); } if (x + this.calendar.coord.width > size.x) { x -= (x + this.calendar.coord.width - size.x); } if (y + this.calendar.coord.height > size.y) { y -= (y + this.calendar.coord.height - size.y); } this.calendar.setStyles({ left: x + 'px', top: y + 'px' }); if (window.ie6) { this.iframe.setStyles({ height: this.calendar.coord.height + 'px', left: x + 'px', top: y + 'px', width: this.calendar.coord.width + 'px' }); } this.display(cal); this.fx.start('opacity', 0, 1); } }, // unformat: takes a value from an input and parses the d, m and y elements // @param val (string) // @param f (string) any combination of punctuation / separators and d, j, D, l, S, m, n, F, M, y, Y // @returns array unformat: function(val, f) { f = f.escapeRegExp(); var re = { d: '([0-9]{2})', j: '([0-9]{1,2})', D: '(' + this.options.days.map(function(day) { return day.substr(0, 3); }).join('|') + ')', l: '(' + this.options.days.join('|') + ')', S: '(st|nd|rd|th)', F: '(' + this.options.months.join('|') + ')', m: '([0-9]{2})', M: '(' + this.options.months.map(function(month) { return month.substr(0, 3); }).join('|') + ')', n: '([0-9]{1,2})', Y: '([0-9]{4})', y: '([0-9]{2})' } var arr = []; // array of indexes var g = ''; // convert our format string to regexp for (var i = 0; i < f.length; i++) { var c = f.charAt(i); if (re[c]) { arr.push(c); g += re[c]; } else { g += c; } } // match against date var matches = val.match('^' + g + '$'); var dates = new Array(3); if (matches) { matches = matches.slice(1); // remove first match which is the date arr.each(function(c, i) { i = matches[i]; switch(c) { // year cases case 'y': i = '19' + i; // 2 digit year assumes 19th century (same as JS) case 'Y': dates[0] = i.toInt(); break; // month cases case 'F': i = i.substr(0, 3); case 'M': i = this.options.months.map(function(month) { return month.substr(0, 3); }).indexOf(i) + 1; case 'm': case 'n': dates[1] = i.toInt() - 1; break; // day cases case 'd': case 'j': dates[2] = i.toInt(); break; } }, this); } return dates; }, // value: returns day value of calendar if set // @param cal (obj) // @returns day (int) or null value: function(cal) { var day = null; if (cal.val) { if (cal.year == cal.val.getFullYear() && cal.month == cal.val.getMonth()) { day = cal.val.getDate(); } } return day; }, // values: returns the years, months (for curr year) and days (for curr month and year) for the calendar // @param cal (obj) // @returns obj values: function(cal) { var years, months, days; cal.els.each(function(el) { if (el.get('tag') == 'select') { if (el.format.test('(y|Y)')) { // search for a year select years = []; el.getChildren().each(function(option) { // get options var values = this.unformat(option.value, el.format); if (!years.contains(values[0])) { years.push(values[0]); } // add to years array }, this); years.sort(this.sort); } if (el.format.test('(F|m|M|n)')) { // search for a month select months = []; // 0 - 11 should be el.getChildren().each(function(option) { // get options var values = this.unformat(option.value, el.format); if ($type(values[0]) != 'number' || values[0] == cal.year) { // if it's a year / month combo for curr year, or simply a month select if (!months.contains(values[1])) { months.push(values[1]); } // add to months array } }, this); months.sort(this.sort); } if (el.format.test('(d|j)') && !el.format.test('^(d|j)$')) { // search for a day select, but NOT a days only select days = []; // 1 - 31 el.getChildren().each(function(option) { // get options var values = this.unformat(option.value, el.format); // in the special case of days we dont want the value if its a days only select // otherwise that will screw up the options rebuilding // we will take the values if they are exact dates though if (values[0] == cal.year && values[1] == cal.month) { if (!days.contains(values[2])) { days.push(values[2]); } // add to days array } }, this); } } }, this); // we start with what would be the first and last days were there no restrictions var first = 1; var last = new Date(cal.year, cal.month + 1, 0).getDate(); // last day of the month // if we're in an out of bounds year if (cal.year == cal.start.getFullYear()) { // in the special case of improved navigation but no months array, we'll need to construct one if (months == null && this.options.navigation == 2) { months = []; for (var i = 0; i < 12; i ++) { if (i >= cal.start.getMonth()) { months.push(i); } } } // if we're in an out of bounds month if (cal.month == cal.start.getMonth()) { first = cal.start.getDate(); // first day equals day of bound } } if (cal.year == cal.end.getFullYear()) { // in the special case of improved navigation but no months array, we'll need to construct one if (months == null && this.options.navigation == 2) { months = []; for (var i = 0; i < 12; i ++) { if (i <= cal.end.getMonth()) { months.push(i); } } } if (cal.month == cal.end.getMonth()) { last = cal.end.getDate(); // last day equals day of bound } } // let's get our invalid days var blocked = this.blocked(cal); // finally we can prepare all the valid days in a neat little array if ($type(days) == 'array') { // somewhere there was a days select days = days.filter(function(day) { if (day >= first && day <= last && !blocked.contains(day)) { return day; } }); } else { // no days select we'll need to construct a valid days array days = []; for (var i = first; i <= last; i++) { if (!blocked.contains(i)) { days.push(i); } } } days.sort(this.sort); // sorting our days will give us first and last of month return { 'days': days, 'months': months, 'years': years }; }, // write: sets calendars value to form elements // @param cal (obj) write: function(cal) { this.rebuild(cal); // in the case of options, we'll need to make sure we have the correct number of days available cal.els.each(function(el) { // then we can set the value to the field el.value = this.format(cal.val, el.format); }, this); } }); Calendar.implement(new Events, new Options); /** * @project MavSelectBox (Customizable Select boxes) * @author Dustin Hansen * @version 0.5.1 * @url http://fuzecore.com, http://maveno.us * @license MIT Style License * * @contributions * : Container additions for using selectbox in animations and bug fixes * : fixed multiselect bug, yayyy! ^_^ * : Quentin Ambard - http://www.quentin.avricot.com */ var MavSelectBox = new Class({ Implements: [Options, Events], options: { allowSplit: true, // depricate for .filter() altClass: 'select-box-alt', alternate: false, alternateOdd: false, attachResize: true, container: null, disableClass: 'disabled', elem: null, filter: null, fxOptions: {}, groupClass: 'select-box-options-group', maxShow: null, minShow: 3, optionClass: 'select-box-opt', selectboxClass: 'select-box', selectClass: 'selected', selectmenuClass: 'select-box-options', separator: '--', // depricate for .filter() showStyles: false, size: 1, template: '%s', tmplt_regex: null, useFx: true, onHide: $empty(), onOver: $empty(), onSelect: $empty(), onShow: $empty() }, container: null, element: null, focused: null, length: 0, selected: null, selectedIndex: 0, showing: false, textSearch: '', version: '0.5.1', initialize: function(_options) { var opts = ($type(_options) != 'object' ? {'elem':_options} : _options); if (!$defined(opts.elem)) return; this.setOptions(opts); if (this.options.filter) { this.filter = this.options.filter; } this.element = $(this.options.elem); this.elementCopy = this.element.clone().set({ 'id':this.element.get('id'), 'name':this.element.get('name') }); if (!$defined(this.options.container) || (this.container = $(this.options.container)) == null) { this.container = null; } this.optClass = 'li[class*=' + this.options.optionClass + ']'; this.create_select(); if (this.options.attachResize) { window.addEvent('resize', function() { if (this.showing) { this.show(); } }.bind(this)); } }, destroy: function(_revert) { if (_revert) { if (this.selected && $defined(this.selected.retrieve('value'))) { $each(this.elementCopy.options, function(_elem) { if (_elem.value == this.selected.retrieve('value')) { _elem.selected = true; } }, this); } this.elementCopy.replaces($(this.element.get('id'))); } this.remove_events(); this.elementSelect.destroy(); }, create_select: function() { var wh = this.element.getSize(); this.eid = this.element.get('id'); // create the select element this.elementSelect = new Element('div', { 'class': this.options.selectboxClass, 'styles': { 'width': wh.x, 'height': wh.y } }).inject(this.element, 'after'); // create display element for selectbox this.elementDisplay = new Element('a', {'href':'javascript:void(0)'}).inject(this.elementSelect, 'top'); if (this.elementCopy.get('tabindex') != 0) { this.elementDisplay.set('tabindex', this.elementCopy.get('tabindex')); } this.elementDisplay.setStyles({'height': (wh.y-5), 'line-height': (wh.y-5)}); this.add_events(); // create the options element this.elementOptions = new Element('ul', { 'styles': { 'width': wh.x }, 'opacity': (this.options.useFx ? 0 : 1), 'class': this.options.selectmenuClass }).inject(this.elementSelect); // create the fx object if useFx is set this.fx = this.options.useFx ? new Fx.Tween(this.elementOptions, $merge({ 'duration': '200', 'link': 'cancel' }, this.options.fxOptions)) : null; // loop thru existing options and recreate $each(this.element.getChildren(), this.create_option.bind(this)); // set alternating if (this.options.alternate) { this.elementOptions.getElements(this.optClass + ':' + (this.options.alternateOdd ? 'odd': 'even')).addClass(this.options.altClass); } // set default selected option and dislpay value (this.selected = this.elementOptions.getElement('li.' + this.options.selectClass)).removeClass(this.options.selectClass); this.selectedIndex = this.selected.retrieve('idx'); this.elementDisplay.set({ 'html': this.selected.get('html'), 'class': (this.options.showStyles ? this.selected.get('class') : ''), 'style': (this.options.showStyles ? this.selected.get('style') : '') }); // store option menu coords info this.elementOptions.store('coords', this.elementOptions.getCoordinates()).setStyles({'visibility':'','display':'none'}); // replace select element with hidden input by same id/name this.element = new Element('input', { 'type': 'hidden', 'value': this.element.get('value'), 'id': this.element.get('id'), 'name': this.element.get('name') }).replaces(this.element).set('id', this.eid); }, create_option: function(_opt, _idx, _group) { // get option information var val = _opt.get('value'), selected = !!(_opt.selected); var text = (_opt.get('label') ? _opt.get('label') : (_opt.get('text') || ' ')); // determine class for option var opt_class = (_opt.get('tag')=='optgroup'?' optgroup unselectable':' ' + this.options.optionClass) + (selected&&!_opt.disabled?' '+this.options.selectClass:'') + (_opt.disabled?' '+this.options.disableClass:''); // create li replacement for select option var new_option = new Element('li', { 'id': this.eid + '_opt' + _idx, 'html': this.filter(text, this.options.tmplt_regex, this.options.template), 'style': _opt.get('style'), 'class': _opt.get('class') + opt_class }).store('value', _opt.get('value')) .store('idx', (_opt.get('tag')!='optgroup'?(++this.length):'')) .addEvents({ 'mouseover': this.over.bind(this), 'mousedown': this.select.bind(this) }).inject(($(_group) || this.elementOptions)); new_option.store('coords', new_option.getCoordinates()); if (_opt.get('tag') == 'optgroup') { var optgroup = new Element('ul', {'class': this.options.groupClass}).inject(new_option); $each(_opt.getChildren(), function(_sopt, _sidx) { this.create_option(_sopt, (_idx + '' + _sidx), optgroup); }, this); } // THIS TO BE REPLACED WITH this.filter() // if option.text matches this.options.separator split and go left / right with text if (this.options.allowSplit && text.match(new RegExp(this.options.separator))) { text = text.split(this.options.separator); this.elementOptions.lastChild.set('html', '' + text[0].trim() + '' + text[1].trim() + '
'); } }, filter: function(_str, _regx, _tmplt) { return _tmplt.replace(/\%s/i, _str); }, inject: function(_option, _where) { }, dispose: function(_elem) { }, add_events: function() { this.elementDisplay.addEvents({ 'click': this.show.bind(this), 'keydown': this.key_option.bind(this), 'blur': this.hide.bind(this) }); }, remove_events: function() { this.elementDisplay.removeEvents({ 'click': this.show.bind(this), 'keydown': this.key_option.bind(this), 'blur': this.hide.bind(this) }); }, key_option: function(e) { e = new Event(e); if (e.key != 'tab') { e.stop(); switch(e.key) { case 'esc': this.hide(); break; case 'enter': this.select(this.selected); case 'tab': this.hide(); break; case 'up': case 'down': if (e.alt) { this.show(); } this.select(e.key); break; case 'shift': case 'control': case 'alt': break; default: this.search(e.key); } } }, search: function(_key, _retrying) { this.textSearch += _key; var option_elems = this.get_options(), str_found=false, elem = false; // var option_elems = this.get_options('li[text^=' + this.textSearch +']'), str_found=false, elem = false; for(var i=0; i fromIdx))); }, this); elem = elem[0] ? (_elem == 'up' ? elem.reverse() : elem)[0] : elem; } return elem; }, over: function(e) { e = new Event(e); var elem = ($(e.target).get('tag') != 'li' ? $(e.target).getParent('li') : $(e.target)); if (!elem.hasClass(this.options.disableClass) && !elem.hasClass('unselectable')) { if ($type(this.focused) == 'element') { this.focused.removeClass(this.options.selectClass); } (this.focused = elem).addClass(this.options.selectClass); this.fireEvent('over'); } }, select: function(_elem) { var elem = ($type(_elem) == 'event' ? new Event(_elem).target : _elem); elem = this.determine(elem); if (elem && !elem.hasClass(this.options.disableClass) && !elem.hasClass('unselectable')) { if (this.focused) { this.focused.removeClass(this.options.selectClass); } if (this.showing === true) { (this.focused = this.selected = elem).addClass(this.options.selectClass); this.scroll(); } else { this.selected = elem; } this.element.set('value', this.selected.retrieve('value')); this.selectedIndex = this.selected.retrieve('idx'); this.elementDisplay.set({ 'html': this.selected.get('html'), 'class': (this.options.showStyles ? this.selected.get('class') : ''), 'style': (this.options.showStyles ? this.selected.get('style') : '') }).removeClass(this.options.selectClass).removeClass(this.options.altClass); this.fireEvent('select', this.selected); } }, scroll: function() { var sElem = this.elementOptions.getCoordinates(); var selElem = this.selected.getCoordinates(); var elScrollTop = this.elementOptions.scrollTop; if ((elScrollTop + sElem.height) < (selElem.top - sElem.top + 5)) { this.elementOptions.scrollTop = (selElem.top - sElem.top - sElem.height + selElem.height); } else if ((selElem.top - sElem.top + selElem.height) < (elScrollTop + 5)) { this.elementOptions.scrollTop = (selElem.top - sElem.top); } }, show: function() { var coords = this.elementOptions.retrieve('coords'); var sElem = this.elementSelect.getCoordinates(), sElem_top = (sElem.y + sElem.height); if (this.container) { sElem_top -= this.container.getStyle('top'); sElem.left -= this.container.getStyle('left'); } var h = ((window.getSize().y + window.getScroll().y) - sElem_top); var height = (coords.height >= h ? 0 : 'auto'), showing = 0; if (coords.height >= h) { $each(this.get_options(), function(_elem) { var eH = _elem.retrieve('coords').height; if (height < h && (height + eH) < h) { height += eH; showing++; } }, this); if (showing < this.options.minShow) { height = (sElem.top < coords.height ? sElem.top - 10 : coords.height); sElem_top = sElem.top - height - 1; } } this.elementOptions.setStyles({ 'display': '', 'height': height, 'top': sElem_top, 'left': sElem.x, 'margin': 0 }); this.scroll(); this.showing = true; this.focused = this.selected; this.focused.addClass(this.options.selectClass); this.fireEvent('show'); if (this.options.useFx) { this.fx.start('opacity', 0, 1); } // fixes chrome/safari focus bug this.elementDisplay.focus(); }, hide: function(e) { if (this.showing) { if (this.options.useFx) { this.fx.start('opacity', 1, 0).chain(function() { this.elementOptions.scrollTop = 0; this.elementOptions.setStyle('display', 'none'); if (this.focused) { this.focused.removeClass(this.options.selectClass); } this.showing = this.focused = false; }.bind(this)); } else { this.elementOptions.setStyle('display', 'none'); if (this.focused) { this.focused.removeClass(this.options.selectClass); } this.showing = this.focused = false; } this.fireEvent('hide'); } this.textSearch = ''; } }); /* FORM.CHECK */ var FormCheck = new Class({ Implements: [Options, Events], options : { tipsClass: 'fc-tbx', //tips error class errorClass: 'fc-error', //div error class fieldErrorClass: 'fc-field-error', //error class for elements trimValue : false, //trim (remove whitespaces before and after) the value validateDisabled : false, //skip validation on disabled input if set to false. submitByAjax : false, //false : standard submit way, true : submit by ajax ajaxResponseDiv : false, //element to inject ajax response into (can also use onAjaxSuccess) [cronix] ajaxEvalScripts : false, //use evalScripts in the Request response [cronix] onAjaxRequest : $empty, //Function to fire when the Request event starts onAjaxSuccess : $empty, //Function to fire when the Request receives . Args: response [the request response] - see Mootools docs for Request.onSuccess onAjaxFailure : $empty, //Function to fire if the Request fails display : { showErrors : 0, titlesInsteadNames : 0, errorsLocation : 1, indicateErrors : 1, indicateErrorsInit : 0, keepFocusOnError : 0, checkValueIfEmpty : 1, addClassErrorToField : 0, fixPngForIe : 1, replaceTipsEffect : 1, flashTips : 0, closeTipsButton : 1, tipsPosition : "left", tipsOffsetX : -30, tipsOffsetY : -15, listErrorsAtTop : false, scrollToFirst : true, fadeDuration : 300 }, alerts : { required: "This field is required.", alpha: "This field accepts alphabetic characters only.", alphanum: "This field accepts alphanumeric characters only.", nodigit: "No digits are accepted.", digit: "Please enter a valid integer.", digitltd: "The value must be between %0 and %1", number: "Please enter a valid number.", email: "Please enter a valid email.", phone: "Please enter a valid phone.", url: "Please enter a valid url.", confirm: "This field is different from %0", differs: "This value must be different of %0", length_str: "The length is incorrect, it must be between %0 and %1", length_fix: "The length is incorrect, it must be exactly %0 characters", lengthmax: "The length is incorrect, it must be at max %0", lengthmin: "The length is incorrect, it must be at least %0", checkbox: "Please check the box", radios: "Please select a radio", select: "Please choose a value" }, regexp : { required : /[^.*]/, alpha : /^[a-z ._-]+$/i, alphanum : /^[a-z0-9 ._-]+$/i, digit : /^[-+]?[0-9]+$/, nodigit : /^[^0-9]+$/, number : /^[-+]?\d*\.?\d+$/, email : /^[a-z0-9._%-]+@[a-z0-9.-]+\.[a-z]{2,4}$/i, phone : /^[\d\s ().-]+$/, url : /^(http|https|ftp)\:\/\/[a-z0-9\-\.]+\.[a-z]{2,3}(:[a-z0-9]*)?\/?([a-z0-9\-\._\?\,\'\/\\\+&%\$#\=~])*$/i } }, /* Constructor: initialize Constructor Add event on formular and perform some stuff, you now, like settings, ... */ initialize : function(form, options) { if (this.form = $(form)) { this.form.isValid = true; this.regex = ['length']; this.setOptions(options); //internalization if (typeof(formcheckLanguage) != 'undefined') this.options.alerts = $merge(this.options.alerts, formcheckLanguage); this.validations = []; this.alreadyIndicated = false; this.firstError = false; var regex = new Hash(this.options.regexp); regex.each(function(el, key) { this.regex.push(key); }, this); this.form.getElements("*[class*=validate]").each(function(el) { this.register(el); }, this); this.form.addEvents({ "submit": this.onSubmit.bind(this) }); if(this.options.display.fixPngForIe) this.fixIeStuffs(); document.addEvent('mousewheel', function(){ this.isScrolling = false; }.bind(this)); } }, /* Function: register Allows you to declare afterward new fields to the formcheck, to check dynamically loaded fields for example. Example: (code) (end code) See also: */ register : function(el) { el.validation = []; el.getProperty("class").split(' ').each(function(classX) { if(classX.match(/^validate(\[.+\])$/)) { var validators = eval(classX.match(/^validate(\[.+\])$/)[1]); for(var i = 0; i < validators.length; i++) { el.validation.push(validators[i]); if (validators[i].match(/^confirm\[/)) { var field = eval(validators[i].match(/^.+(\[.+\])$/)[1].replace(/([A-Z0-9\._-]+)/i, "'$1'")); if (this.form[field].validation.contains('required')){ el.validation.push('required'); } } } this.addListener(el); } }, this); }, /* Function: dispose Allows you to remove a declared field from formCheck Example: (code) (end code) See also: */ dispose : function(element) { this.validations.erase(element); }, /* Function: addListener Private method Add listener on fields */ addListener : function(el) { this.validations.push(el); el.errors = []; if (this.options.display.indicateErrorsInit) { this.validations.each(function(el) { if(!this.manageError(el,'submit')) this.form.isValid = false; }, this); return true; } if (el.validation[0] == 'submit') { el.addEvent('click', function(e){ this.onSubmit(e); }.bind(this)); return true; } if (this.isChildType(el) == false) el.addEvent('blur', function() { (function(){ if(!this.fxRunning && (el.element || this.options.display.showErrors == 1) && (this.options.display.checkValueIfEmpty || el.value)) this.manageError(el, 'blur') }.bind(this)).delay(100); }.bind(this)) //We manage errors on radio else if (this.isChildType(el) == true) { //We get all radio from the same group and add a blur option var nlButtonGroup = this.form.getElements('input[name="'+ el.getProperty("name") +'"]'); nlButtonGroup.each(function(radio){ radio.addEvent('blur', function(){ (function(){ if((el.element || this.options.display.showErrors == 1) && (this.options.display.checkValueIfEmpty || el.value)) this.manageError(el, 'click'); }.bind(this)).delay(100); }.bind(this)) },this); } }, /* Function: validate Private method Dispatch check to other methods */ validate : function(el) { el.errors = []; el.isOk = true; //skip validation and trim if specified if (!this.options.validateDisabled && el.get('disabled')) return true; if (this.options.trimValue && el.value) el.value = el.value.trim(); el.validation.each(function(rule) { if(this.isChildType(el)) { if (this.validateGroup(el) == false) { el.isOk = false; } } else { var ruleArgs = []; if(rule.match(/^.+\[/)) { var ruleMethod = rule.split('[')[0]; ruleArgs = eval(rule.match(/^.+(\[.+\])$/)[1].replace(/([A-Z0-9\._-]+)/i, "'$1'")); } else var ruleMethod = rule; if (this.regex.contains(ruleMethod) && el.get('tag') != "select") { if (this.validateRegex(el, ruleMethod, ruleArgs) == false) { el.isOk = false; } } if (ruleMethod == 'confirm') { if (this.validateConfirm(el, ruleArgs) == false) { el.isOk = false; } } if (ruleMethod == 'differs') { if (this.validateDiffers(el, ruleArgs) == false) { el.isOk = false; } } if (el.get('tag') == "select" || (el.type == "checkbox" && ruleMethod == 'required')) { if (this.simpleValidate(el) == false) { el.isOk = false; } } if(rule.match(/%[A-Z0-9\._-]+$/i) || (el.isOk && rule.match(/~[A-Z0-9\._-]+$/i))) { if(eval(rule.slice(1)+'(el)') == false) { el.isOk = false; } } } }, this); if (el.isOk) return true; else return false; }, /* Function: simpleValidate Private method Perform simple check for select fields and checkboxes */ simpleValidate : function(el) { if (el.get('tag') == 'select' && el.selectedIndex <= 0) { el.errors.push(this.options.alerts.select); return false; } else if (el.type == "checkbox" && el.checked == false) { el.errors.push(this.options.alerts.checkbox); return false; } return true; }, /* Function: validateRegex Private method Perform regex validations */ validateRegex : function(el, ruleMethod, ruleArgs) { var msg = ""; if (ruleArgs[1] && ruleMethod == 'length') { if (ruleArgs[1] == -1) { this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +",}$"); msg = this.options.alerts.lengthmin.replace("%0",ruleArgs[0]); } else if(ruleArgs[0] == ruleArgs[1]) { this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +"}$"); msg = this.options.alerts.length_fix.replace("%0",ruleArgs[0]); } else { this.options.regexp.length = new RegExp("^[\\s\\S]{"+ ruleArgs[0] +","+ ruleArgs[1] +"}$"); msg = this.options.alerts.length_str.replace("%0",ruleArgs[0]).replace("%1",ruleArgs[1]); } } else if (ruleArgs[0] && ruleMethod == 'length') { this.options.regexp.length = new RegExp("^.{0,"+ ruleArgs[0] +"}$"); msg = this.options.alerts.lengthmax.replace("%0",ruleArgs[0]); } else { msg = this.options.alerts[ruleMethod]; } if (ruleArgs[1] && ruleMethod == 'digit') { var regres = true; if (!this.options.regexp.digit.test(el.value)) { el.errors.push(this.options.alerts[ruleMethod]); regres = false; } if (ruleArgs[1] == -1) { if (el.value >= ruleArgs[0]) var valueres = true; else var valueres = false; msg = this.options.alerts.digitmin.replace("%0",ruleArgs[0]); } else { if (el.value >= ruleArgs[0] && el.value <= ruleArgs[1]) var valueres = true; else var valueres = false; msg = this.options.alerts.digitltd.replace("%0",ruleArgs[0]).replace("%1",ruleArgs[1]); } if (regres == false || valueres == false) { el.errors.push(msg); return false; } } else if (this.options.regexp[ruleMethod].test(el.value) == false) { el.errors.push(msg); return false; } return true; }, /* Function: validateConfirm Private method Perform confirm validations */ validateConfirm: function(el,ruleArgs) { var confirm = ruleArgs[0]; if(el.value != this.form[confirm].value){ if (this.options.display.titlesInsteadNames) var msg = this.options.alerts.confirm.replace("%0",this.form[confirm].getProperty('title')); else var msg = this.options.alerts.confirm.replace("%0",confirm); el.errors.push(msg); return false; } return true; }, /* Function: validateDiffers Private method Perform differs validations */ validateDiffers: function(el,ruleArgs) { var differs = ruleArgs[0]; if(el.value == this.form[differs].value){ if (this.options.display.titlesInsteadNames) var msg = this.options.alerts.differs.replace("%0",this.form[differs].getProperty('title')); else var msg = this.options.alerts.differs.replace("%0",differs); el.errors.push(msg); return false; } return true; }, /* Function: isChildType Private method Determine if the field is a group of radio or not. */ isChildType: function(el) { return ($defined(el.type) && el.type == 'radio') ? true : false; }, /* Function: validateGroup Private method Perform radios validations */ validateGroup : function(el) { el.errors = []; var nlButtonGroup = this.form[el.getProperty("name")]; el.group = nlButtonGroup; var cbCheckeds = false; for(var i = 0; i < nlButtonGroup.length; i++) { if(nlButtonGroup[i].checked) { cbCheckeds = true; } } if(cbCheckeds == false) { el.errors.push(this.options.alerts.radios); return false; } else { return true; } }, /* Function: listErrorsAtTop Private method Display errors */ listErrorsAtTop : function(obj) { if(!this.form.element) { this.form.element = new Element('div', {'id' : 'errorlist', 'class' : this.options.errorClass}).injectTop(this.form); } if ($type(obj) == 'collection') { new Element('p').set('html',"" + obj[0].name + " : " + obj[0].errors[0]).injectInside(this.form.element); } else { if ((obj.validation.contains('required') && obj.errors.length > 0) || (obj.errors.length > 0 && obj.value && obj.validation.contains('required') == false)) { obj.errors.each(function(error) { new Element('p').set('html',"" + obj.name + " : " + error).injectInside(this.form.element); }, this); } } }, /* Function: manageError Private method Manage display of errors boxes */ manageError : function(el, method) { var isValid = this.validate(el); if ((!isValid && el.validation.flatten()[0].contains('confirm[')) || (!isValid && el.validation.contains('required')) || (!el.validation.contains('required') && el.value && !isValid)) { if(this.options.display.listErrorsAtTop == true && method == 'submit') this.listErrorsAtTop(el, method); if (this.options.display.indicateErrors == 2 ||this.alreadyIndicated == false || el.name == this.alreadyIndicated.name) { if(!this.firstError) this.firstError = el; this.alreadyIndicated = el; if (this.options.display.keepFocusOnError && el.name == this.firstError.name) (function(){el.focus()}).delay(20); this.addError(el); return false; } } else if ((isValid || (!el.validation.contains('required') && !el.value)) && el.element) { this.removeError(el); return true; } return true; }, /* Function: addError Private method Add error message */ addError : function(obj) { if(!obj.element && this.options.display.indicateErrors != 0) { if (this.options.display.errorsLocation == 1) { var pos = (this.options.display.tipsPosition == 'left') ? obj.getCoordinates().left : obj.getCoordinates().right; var options = { 'opacity' : 0, 'position' : 'absolute', 'float' : 'left', 'left' : pos + this.options.display.tipsOffsetX } obj.element = new Element('div', {'class' : this.options.tipsClass, 'styles' : options}).injectInside(document.body); this.addPositionEvent(obj); } else if (this.options.display.errorsLocation == 2){ obj.element = new Element('div', {'class' : this.options.errorClass, 'styles' : {'opacity' : 0}}).injectBefore(obj); } else if (this.options.display.errorsLocation == 3){ obj.element = new Element('div', {'class' : this.options.errorClass, 'styles' : {'opacity' : 0}}); if ($type(obj.group) == 'object' || $type(obj.group) == 'collection') obj.element.injectAfter(obj.group[obj.group.length-1]); else obj.element.injectAfter(obj); } } if (obj.element && obj.element != true) { obj.element.empty(); if (this.options.display.errorsLocation == 1) { var errors = []; obj.errors.each(function(error) { errors.push(new Element('p').set('html', error)); }); var tips = this.makeTips(errors).injectInside(obj.element); if(this.options.display.closeTipsButton) { tips.getElements('a.close').addEvent('mouseup', function(){ this.removeError(obj); }.bind(this)); } obj.element.setStyle('top', obj.getCoordinates().top - tips.getCoordinates().height + this.options.display.tipsOffsetY); } else { obj.errors.each(function(error) { new Element('p').set('html',error).injectInside(obj.element); }); } if (!this.options.display.fadeDuration || Browser.Engine.trident && Browser.Engine.version == 5 && this.options.display.errorsLocation < 2) { obj.element.setStyle('opacity', 1); } else { obj.fx = new Fx.Tween(obj.element, { 'duration' : this.options.display.fadeDuration, 'ignore' : true, 'onStart' : function(){ this.fxRunning = true; }.bind(this), 'onComplete' : function() { this.fxRunning = false; if (obj.element && obj.element.getStyle('opacity').toInt() == 0) { obj.element.destroy(); obj.element = false; } }.bind(this) }) if(obj.element.getStyle('opacity').toInt() != 1) obj.fx.start('opacity', 1); } } if (this.options.display.addClassErrorToField && this.isChildType(obj) == false){ obj.addClass(this.options.fieldErrorClass); obj.element = obj.element || true; } }, /* Function: addPositionEvent Update tips position after a browser resize */ addPositionEvent : function(obj) { if(this.options.display.replaceTipsEffect) { obj.event = function(){ new Fx.Morph(obj.element, { 'duration' : this.options.display.fadeDuration }).start({ 'left':[obj.element.getStyle('left'), obj.getCoordinates().right + this.options.display.tipsOffsetX], 'top':[obj.element.getStyle('top'), obj.getCoordinates().top - obj.element.getCoordinates().height + this.options.display.tipsOffsetY] }); }.bind(this); } else { obj.event = function(){ obj.element.setStyles({ 'left':obj.getCoordinates().right + this.options.display.tipsOffsetX, 'top':obj.getCoordinates().top - obj.element.getCoordinates().height + this.options.display.tipsOffsetY }); }.bind(this) } window.addEvent('resize', obj.event); }, /* Function: removeError Private method Remove the error display */ removeError : function(obj) { this.alreadyIndicated = false; obj.errors = []; obj.isOK = true; window.removeEvent('resize', obj.event); if (this.options.display.errorsLocation >= 2 && obj.element) { new Fx.Tween(obj.element, { 'duration': this.options.display.fadeDuration }).start('height', 0); } if (!this.options.display.fadeDuration || Browser.Engine.trident && Browser.Engine.version == 5 && this.options.display.errorsLocation == 1 && obj.element) { this.fxRunning = true; obj.element.destroy(); obj.element = false; (function(){this.fxRunning = false}.bind(this)).delay(200); } else if (obj.element && obj.element != true) { obj.fx.start('opacity', 0); } if (this.options.display.addClassErrorToField && !this.isChildType(obj)) obj.removeClass(this.options.fieldErrorClass); }, /* Function: focusOnError Private method Create set the focus to the first field with an error if needed */ focusOnError : function (obj) { if (this.options.display.scrollToFirst && !this.alreadyFocused && !this.isScrolling) { if (!this.options.display.indicateErrors || !this.options.display.errorsLocation) { var dest = obj.getCoordinates().top-30; } else if (this.alreadyIndicated.element) { switch (this.options.display.errorsLocation){ case 1 : var dest = obj.element.getCoordinates().top; break; case 2 : var dest = obj.element.getCoordinates().top-30; break; case 3 : var dest = obj.getCoordinates().top-30; break; } this.isScrolling = true; } if (window.getScroll.y != dest) { new Fx.Scroll(window, { onComplete : function() { this.isScrolling = false; obj.focus(); }.bind(this) }).start(0,dest); } else { this.isScrolling = false; obj.focus(); } this.alreadyFocused = true; } }, /* Function: fixIeStuffs Private method Fix png for IE6 */ fixIeStuffs : function () { if (Browser.Engine.trident4) { //We fix png stuffs var rpng = new RegExp('url\\(([\.a-zA-Z0-9_/:-]+\.png)\\)'); var search = new RegExp('(.+)formcheck\.css'); for (var i = 0; i < document.styleSheets.length; i++){ if (document.styleSheets[i].href.match(/formcheck\.css$/)) { var root = document.styleSheets[i].href.replace(search, '$1'); var count = document.styleSheets[i].rules.length; for (var j = 0; j < count; j++){ var cssstyle = document.styleSheets[i].rules[j].style; var bgimage = root + cssstyle.backgroundImage.replace(rpng, '$1'); if (bgimage && bgimage.match(/\.png/i)){ var scale = (cssstyle.backgroundRepeat == 'no-repeat') ? 'crop' : 'scale'; cssstyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src=\'' + bgimage + '\', sizingMethod=\''+ scale +'\')'; cssstyle.backgroundImage = "none"; } } } } } }, /* Function: makeTips Private method Create tips boxes */ makeTips : function(txt) { var table = new Element('table'); table.cellPadding ='0'; table.cellSpacing ='0'; table.border ='0'; var tbody = new Element('tbody').injectInside(table); var tr1 = new Element('tr').injectInside(tbody); new Element('td', {'class' : 'tl'}).injectInside(tr1); new Element('td', {'class' : 't'}).injectInside(tr1); new Element('td', {'class' : 'tr'}).injectInside(tr1); var tr2 = new Element('tr').injectInside(tbody); new Element('td', {'class' : 'l'}).injectInside(tr2); var cont = new Element('td', {'class' : 'c'}).injectInside(tr2); var errors = new Element('div', {'class' : 'err'}).injectInside(cont); txt.each(function(error) { error.injectInside(errors); }); if (this.options.display.closeTipsButton) new Element('a',{'class' : 'close'}).injectInside(cont); new Element('td', {'class' : 'r'}).injectInside(tr2); var tr3 = new Element('tr').injectInside(tbody); new Element('td', {'class' : 'bl'}).injectInside(tr3); new Element('td', {'class' : 'b'}).injectInside(tr3); new Element('td', {'class' : 'br'}).injectInside(tr3); return table; }, /* Function: reinitialize Private method Reinitialize form before submit check */ reinitialize: function() { this.validations.each(function(el) { if (el.element) { el.errors = []; el.isOK = true; if(this.options.display.flashTips == 1) { el.element.destroy(); el.element = false; } } }, this); if (this.form.element) this.form.element.empty(); this.alreadyFocused = false; this.firstError = false; this.elementToRemove = this.alreadyIndicated; this.alreadyIndicated = false; this.form.isValid = true; }, /* Function: submitByAjax Private method Send the form by ajax, and replace the form with response */ submitByAjax: function() { var url = this.form.getProperty('action'); this.fireEvent('ajaxRequest'); new Request({ url: url, method: this.form.getProperty('method'), data : this.form.toQueryString(), evalScripts: this.options.ajaxEvalScripts, onFailure: function(instance){ this.fireEvent('ajaxFailure', instance); }.bind(this), onSuccess: function(result){ this.fireEvent('ajaxSuccess', result); if(this.options.ajaxResponseDiv) $(this.options.ajaxResponseDiv).set('html',result); }.bind(this) }).send(); }, /* Function: onSubmit Private method Perform check on submit action */ onSubmit: function(event) { this.reinitialize(); this.validations.each(function(el) { var validation = this.manageError(el,'submit'); if(!validation) this.form.isValid = false; }, this); if (this.form.isValid) { if (this.options.submitByAjax) { new Event(event).stop(); this.submitByAjax(); } } else { new Event(event).stop(); if (this.elementToRemove && this.elementToRemove != this.firstError && this.options.display.indicateErrors == 1) { this.removeError(this.elementToRemove); } this.focusOnError(this.firstError) } } }); window.addEvent('domready', function() { myCal = new Calendar({ date: 'D, M jS'}, { direction: .5, blocked: ['0 * * 0,6'], tweak: { x: -12, y: -10 } }); var helpform = new FormCheck('helpform', { flashTips : '1', display : { scrollToFirst : false }, alerts : { required : 'Please fill in this field.' } }) var my_select = new MavSelectBox('time'); });