dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #33464
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 17081: jquery calendar ui files required for theming
------------------------------------------------------------
revno: 17081
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Mon 2014-10-13 16:48:57 +0200
message:
jquery calendar ui files required for theming
added:
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/css/ui-redmond.calendars.picker.css
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/css/ui.calendars.picker.css
dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/jquery.calendars.picker.ext.js
--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk
Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== added file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/css/ui-redmond.calendars.picker.css'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/css/ui-redmond.calendars.picker.css 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/css/ui-redmond.calendars.picker.css 2014-10-13 14:48:57 +0000
@@ -0,0 +1,18 @@
+/* ThemeRoller Redmond override style sheet for jQuery Calendars Picker v1.2.1. */
+@import "ui.calendars.picker.css";
+
+.ui-widget-header a,
+.ui-widget-header select {
+ color: #ffffff; /* Set (.ui-widget-header a) colour from theme here */
+}
+.ui-widget-header a:hover {
+ background-color: #d0e5f5; /* Set (.ui-state-hover) colours from theme here */
+ color: #1d5987;
+}
+.ui-widget-header select,
+.ui-widget-header option {
+ background-color: #5c9ccc; /* Set (.ui-widget-header) background colour from theme here */
+}
+.ui-state-highlight a {
+ color: #363636; /* Set (.ui-state-highlight) colour from theme here */
+}
=== added file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/css/ui.calendars.picker.css'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/css/ui.calendars.picker.css 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/css/ui.calendars.picker.css 2014-10-13 14:48:57 +0000
@@ -0,0 +1,107 @@
+/* ThemeRoller override style sheet for jQuery Calendars Picker v1.2.1. */
+.ui-datepicker {
+ display: block;
+}
+#ui-datepicker-div,
+.ui-datepicker-inline {
+ width: 17em;
+ font-size: 75%;
+}
+#ui-datepicker-div {
+ z-index: 100;
+}
+.ui-datepicker-inline {
+ float: left;
+}
+.ui-datepicker-rtl {
+ direction: rtl;
+}
+#ui-datepicker-div a,
+.ui-datepicker-inline a {
+ text-decoration: none;
+}
+.ui-datepicker-prompt {
+ height: 1.5em;
+ padding-top: 0.25em;
+ text-align: center;
+}
+button.ui-datepicker-cmd {
+ height: 2em;
+}
+.ui-datepicker-cmd-clear {
+ float: left;
+ margin-left: 0.25em;
+}
+.ui-datepicker-cmd-close {
+ float: right;
+ margin-right: 0.25em;
+}
+.ui-datepicker-cmd-prev {
+ position: static;
+ float: left;
+ width: 30%;
+ height: auto;
+ margin-left: 1%;
+}
+.ui-datepicker-cmd-next {
+ position: static;
+ float: right;
+ width: 30%;
+ height: auto;
+ margin-right: 1%;
+ text-align: right;
+}
+.ui-datepicker-cmd-current,
+.ui-datepicker-cmd-today {
+ float: left;
+ width: 37%;
+ text-align: center;
+}
+.ui-datepicker-month-nav {
+ float: left;
+ text-align: center;
+}
+.ui-datepicker-month-nav div {
+ float: left;
+ width: 12.5%;
+ margin: 1%;
+ padding: 1%;
+}
+.ui-datepicker-month-nav span {
+ color: #888;
+}
+.ui-datepicker-row-break {
+ width: 100%;
+ font-size: 100%;
+}
+.ui-datepicker-group {
+ float: left;
+ width: 17em;
+}
+.ui-datepicker-group .ui-datepicker-header {
+ height: 1.5em;
+ text-align: center;
+}
+.ui-datepicker select,
+.ui-datepicker-inline select {
+ width: auto;
+ height: 1.66em;
+ border: none;
+ font-weight: bold;
+}
+.ui-datepicker th {
+ padding: 0.5em 0.3em;
+}
+.ui-datepicker td,
+.ui-datepicker td a,
+.ui-datepicker td span {
+ border: 1px solid transparent;
+ text-align: center;
+}
+.ui-datepicker-status {
+ padding: 0.25em 0em;
+ text-align: center;
+}
+.ui-datepicker .ui-helper-clearfix {
+ clear: both;
+}
=== added file 'dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/jquery.calendars.picker.ext.js'
--- dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/jquery.calendars.picker.ext.js 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-commons-resources/src/main/webapp/dhis-web-commons/javascripts/jQuery/calendars/jquery.calendars.picker.ext.js 2014-10-13 14:48:57 +0000
@@ -0,0 +1,253 @@
+/* http://keith-wood.name/calendars.html
+ Calendars date picker extensions for jQuery v1.2.1.
+ Written by Keith Wood (kbwood{at}iinet.com.au) August 2009.
+ Available under the MIT (https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt) license.
+ Please attribute the author if you use it. */
+
+(function($) { // Hide scope, no $ conflict
+
+var themeRollerRenderer = {
+ picker: '<div{popup:start} id="ui-datepicker-div"{popup:end} class="ui-datepicker ui-widget ' +
+ 'ui-widget-content ui-helper-clearfix ui-corner-all{inline:start} ui-datepicker-inline{inline:end}">' +
+ '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">' +
+ '{link:prev}{link:today}{link:next}</div>{months}' +
+ '{popup:start}<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ' +
+ 'ui-corner-all">{button:clear}{button:close}</div>{popup:end}' +
+ '<div class="ui-helper-clearfix"></div></div>',
+ monthRow: '<div class="ui-datepicker-row-break">{months}</div>',
+ month: '<div class="ui-datepicker-group">' +
+ '<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">{monthHeader:MM yyyy}</div>' +
+ '<table class="ui-datepicker-calendar"><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table></div>',
+ weekHeader: '<tr>{days}</tr>',
+ dayHeader: '<th>{day}</th>',
+ week: '<tr>{days}</tr>',
+ day: '<td>{day}</td>',
+ monthSelector: '.ui-datepicker-group',
+ daySelector: 'td',
+ rtlClass: 'ui-datepicker-rtl',
+ multiClass: 'ui-datepicker-multi',
+ defaultClass: 'ui-state-default',
+ selectedClass: 'ui-state-active',
+ highlightedClass: 'ui-state-hover',
+ todayClass: 'ui-state-highlight',
+ otherMonthClass: 'ui-datepicker-other-month',
+ weekendClass: 'ui-datepicker-week-end',
+ commandClass: 'ui-datepicker-cmd',
+ commandButtonClass: 'ui-state-default ui-corner-all',
+ commandLinkClass: '',
+ disabledClass: 'ui-datepicker-disabled'
+};
+
+$.extend($.calendars.picker, {
+
+ // Template for generating a calendar picker showing week of year.
+ weekOfYearRenderer: $.extend({}, $.calendars.picker.defaultRenderer, {
+ weekHeader: '<tr><th class="calendars-week">' +
+ '<span title="{l10n:weekStatus}">{l10n:weekText}</span></th>{days}</tr>',
+ week: '<tr><td class="calendars-week">{weekOfYear}</td>{days}</tr>'
+ }),
+
+ // ThemeRoller template for generating a calendar picker.
+ themeRollerRenderer: themeRollerRenderer,
+
+ // ThemeRoller template for generating a calendar picker showing week of year.
+ themeRollerWeekOfYearRenderer: $.extend({}, themeRollerRenderer, {
+ weekHeader: '<tr><th class="ui-state-hover"><span>{l10n:weekText}</span></th>{days}</tr>',
+ week: '<tr><td class="ui-state-hover">{weekOfYear}</td>{days}</tr>'
+ }),
+
+ /* Don't allow weekends to be selected.
+ Usage: onDate: $.calendars.picker.noWeekends.
+ @param date (CDate) the current date
+ @return (object) information about this date */
+ noWeekends: function(date) {
+ return {selectable: date.weekDay()};
+ },
+
+ /* Change the first day of the week by clicking on the day header.
+ Usage: onShow: $.calendars.picker.changeFirstDay.
+ @param picker (jQuery) the completed datepicker division
+ @param calendar (*Calendar) the calendar implementation
+ @param inst (object) the current instance settings */
+ changeFirstDay: function(picker, calendar, inst) {
+ var target = $(this);
+ picker.find('th span').each(function() {
+ if (this.parentNode.className.match(/.*calendars-week.*/)) {
+ return;
+ }
+ $('<a href="javascript:void(0)" class="' + this.className +
+ '" title="Change first day of the week">' + $(this).text() + '</a>').
+ click(function() {
+ var dow = parseInt(this.className.replace(/^.*calendars-dow-(\d+).*$/, '$1'), 10);
+ target.calendarsPicker('option', {firstDay: dow});
+ }).
+ replaceAll(this);
+ });
+ },
+
+ /* Add a callback when hovering over dates.
+ Usage: onShow: $.calendars.picker.hoverCallback(handleHover).
+ @param onHover (function) the callback when hovering,
+ it receives the current date and a flag indicating selectability
+ as parameters on entry, and no parameters on exit,
+ this refers to the target input or division */
+ hoverCallback: function(onHover) {
+ return function(picker, calendar, inst) {
+ if ($.isFunction(onHover)) {
+ var target = this;
+ var renderer = inst.options.renderer;
+ picker.find(renderer.daySelector + ' a, ' + renderer.daySelector + ' span').
+ hover(function() {
+ onHover.apply(target, [$(target).calendarsPicker('retrieveDate', this),
+ this.nodeName.toLowerCase() == 'a']);
+ },
+ function() { onHover.apply(target, []); });
+ }
+ };
+ },
+
+ /* Highlight the entire week when hovering over it.
+ Usage: onShow: $.calendars.picker.highlightWeek.
+ @param picker (jQuery) the completed datepicker division
+ @param calendar (*Calendar) the calendar implementation
+ @param inst (object) the current instance settings */
+ highlightWeek: function(picker, calendar, inst) {
+ var target = this;
+ var renderer = inst.options.renderer;
+ picker.find(renderer.daySelector + ' a, ' + renderer.daySelector + ' span').
+ hover(function() {
+ $(this).parents('tr').find(renderer.daySelector + ' *').
+ addClass(renderer.highlightedClass);
+ },
+ function() {
+ $(this).parents('tr').find(renderer.daySelector + ' *').
+ removeClass(renderer.highlightedClass);
+ });
+ },
+
+ /* Show a status bar with messages.
+ Usage: onShow: $.calendars.picker.showStatus.
+ @param picker (jQuery) the completed datepicker division
+ @param calendar (*Calendar) the calendar implementation
+ @param inst (object) the current instance settings */
+ showStatus: function(picker, calendar, inst) {
+ var isTR = (inst.options.renderer.selectedClass == 'ui-state-active');
+ var defaultStatus = inst.options.defaultStatus || ' ';
+ var status = $('<div class="' + (!isTR ? 'calendars-status' :
+ 'ui-datepicker-status ui-widget-header ui-helper-clearfix ui-corner-all') + '">' +
+ defaultStatus + '</div>').
+ insertAfter(picker.find('.calendars-month-row:last,.ui-datepicker-row-break:last'));
+ picker.find('*[title]').each(function() {
+ var title = $(this).attr('title');
+ $(this).removeAttr('title').hover(
+ function() { status.text(title || defaultStatus); },
+ function() { status.text(defaultStatus); });
+ });
+ },
+
+ /* Allow easier navigation by month.
+ Usage: onShow: $.calendars.picker.monthNavigation.
+ @param picker (jQuery) the completed datepicker division
+ @param calendar (*Calendar) the calendar implementation
+ @param inst (object) the current instance settings */
+ monthNavigation: function(picker, calendar, inst) {
+ var target = $(this);
+ var isTR = (inst.options.renderer.selectedClass == 'ui-state-active');
+ var minDate = inst.curMinDate();
+ var maxDate = inst.get('maxDate');
+ var year = inst.drawDate.year();
+ var html = '<div class="' + (!isTR ? 'calendars-month-nav' : 'ui-datepicker-month-nav') + '">';
+ for (var i = 0; i < calendar.monthsInYear(year); i++) {
+ var ord = calendar.fromMonthOfYear(year, i + calendar.minMonth) - calendar.minMonth;
+ var inRange = ((!minDate || calendar.newDate(year, i + calendar.minMonth,
+ calendar.daysInMonth(year, i + calendar.minMonth)).compareTo(minDate) > -1) && (!maxDate ||
+ calendar.newDate(year, i + calendar.minMonth, calendar.minDay).compareTo(maxDate) < +1));
+ html += '<div>' + (inRange ? '<a href="#" class="jd' +
+ calendar.newDate(year, i + calendar.minMonth, calendar.minDay).toJD() + '"' : '<span') +
+ ' title="' + calendar.local.monthNames[ord] + '">' + calendar.local.monthNamesShort[ord] +
+ (inRange ? '</a>' : '</span>') + '</div>';
+ }
+ html += '</div>';
+ $(html).insertAfter(picker.find('div.calendars-nav,div.ui-datepicker-header:first')).
+ find('a').click(function() {
+ var date = target.calendarsPicker('retrieveDate', this);
+ target.calendarsPicker('showMonth', date.year(), date.month());
+ return false;
+ });
+ },
+
+ /* Select an entire week when clicking on a week number.
+ Use in conjunction with weekOfYearRenderer.
+ Usage: onShow: $.calendars.picker.selectWeek.
+ @param picker (jQuery) the completed datepicker division
+ @param calendar (*Calendar) the calendar implementation
+ @param inst (object) the current instance settings */
+ selectWeek: function(picker, calendar, inst) {
+ var target = $(this);
+ picker.find('td.calendars-week span').each(function() {
+ $('<a href="javascript:void(0)" class="' +
+ this.className + '" title="Select the entire week">' +
+ $(this).text() + '</a>').
+ click(function() {
+ var date = target.calendarsPicker('retrieveDate', this);
+ var dates = [date];
+ for (var i = 1; i < calendar.daysInWeek(); i++) {
+ dates.push(date = date.newDate().add(1, 'd'));
+ }
+ if (inst.options.rangeSelect) {
+ dates.splice(1, dates.length - 2);
+ }
+ target.calendarsPicker('setDate', dates).calendarsPicker('hide');
+ }).
+ replaceAll(this);
+ });
+ },
+
+ /* Select an entire month when clicking on the week header.
+ Use in conjunction with weekOfYearRenderer.
+ Usage: onShow: $.calendars.picker.selectMonth.
+ @param picker (jQuery) the completed datepicker division
+ @param calendar (*Calendar) the calendar implementation
+ @param inst (object) the current instance settings */
+ selectMonth: function(picker, calendar, inst) {
+ var target = $(this);
+ picker.find('th.calendars-week').each(function() {
+ $('<a href="javascript:void(0)" title="Select the entire month">' +
+ $(this).text() + '</a>').
+ click(function() {
+ var date = target.calendarsPicker('retrieveDate', $(this).parents('table').
+ find('td:not(.calendars-week) *:not(.calendars-other-month)')[0]);
+ var dates = [date.day(1)];
+ var dim = calendar.daysInMonth(date);
+ for (var i = 1; i < dim; i++) {
+ dates.push(date = date.newDate().add(1, 'd'));
+ }
+ if (inst.options.rangeSelect) {
+ dates.splice(1, dates.length - 2);
+ }
+ target.calendarsPicker('setDate', dates).calendarsPicker('hide');
+ }).
+ appendTo(this);
+ });
+ },
+
+ /* Select a month only instead of a single day.
+ Usage: onShow: $.calendars.picker.monthOnly.
+ @param picker (jQuery) the completed datepicker division
+ @param calendar (*Calendar) the calendar implementation
+ @param inst (object) the current instance settings */
+ monthOnly: function(picker, calendar, inst) {
+ var target = $(this);
+ var selectMonth = $('<div style="text-align: center;"><button type="button">Select</button></div>').
+ insertAfter(picker.find('.calendars-month-row:last,.ui-datepicker-row-break:last')).
+ children().click(function() {
+ var monthYear = picker.find('.calendars-month-year:first').val().split('/');
+ target.calendarsPicker('setDate', calendar.newDate(
+ parseInt(monthYear[1], 10), parseInt(monthYear[0], 10), calendar.minDay)).
+ calendarsPicker('hide');
+ });
+ picker.find('.calendars-month-row table,.ui-datepicker-row-break table').remove();
+ }
+});
+
+})(jQuery);
