Skip to content

GitLab

mahara
mahara
Commit 8d796e7c authored by Liam's avatar Liam
Browse files
Options

Bug #1744191: Updated the datepicker to use the bootstrap one 

Includes accessibility features
Includes ability to translate tooltips
Have picker div appear inside a <div> rather than <span> for valid
markup

behatnotneeded

Change-Id: I7e4dfb5026cfa579145ca4c932ad673690a8c55a
parent c3dd695b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1570 additions and 287 deletions
htdocs/js/bootstrap-datetimepicker/README.Mahara 0 → 100644
View file @ 8d796e7c
Bootstrap Datetimepicker
========================
Website: https://eonasdan.github.io/bootstrap-datetimepicker/
Version: 4.17.47
The bootstrap datetimepicker makes it easy to select dates and times on input fields by using a popup selector. It runs using bootstrap and moment.js.
Changes:
- Added aria-labels
- Added function, press h, to switch between the date and time picker pages
htdocs/js/momentjs/README.Mahara 0 → 100644
View file @ 8d796e7c
Moment.js
=========
Website: http://momentjs.com/
Version: 2.20.1
Moment.js makes use of javascript to parse, validate, manipulate, and display dates and times in Mahara. It is used in conjunction with the bootstrap datetimepicker.
Changes: none
htdocs/js/momentjs/moment-with-locales.min.js 0 → 100644
View file @ 8d796e7c
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/lang/en.utf8/mahara.php
View file @ 8d796e7c
......@@ -637,37 +637,31 @@ $string['years'] = 'years';
$string['year'] = 'year';
// Datepicker options
$string['datepicker_clearText'] = 'Clear';
$string['datepicker_clearStatus'] = '';
$string['datepicker_closeText'] = 'Done';
$string['datepicker_closeStatus'] = 'Close without change';
$string['datepicker_prevText'] = 'Prev';
$string['datepicker_prevStatus'] = 'Show the previous month';
$string['datepicker_nextText'] = 'Next';
$string['datepicker_nextStatus'] = 'Show the next month';
$string['datepicker_currentText'] = 'Now';
$string['datepicker_currentStatus'] = 'Show the current month';
$string['datepicker_monthNames'] = "['January','February','March','April','May','June','July','August','September','October','November','December']";
$string['datepicker_monthNamesShort'] = "['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']";
$string['datepicker_monthStatus'] = 'Show a different month';
$string['datepicker_yearStatus'] = 'See another year';
$string['datepicker_weekHeader'] = 'Wk';
$string['datepicker_weekStatus'] = '';
$string['datepicker_dayNames'] = "['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']";
$string['datepicker_dayNamesShort'] = "['Sun','Mon','Tue','Wed','Thu','Fri','Sat']";
$string['datepicker_dayNamesMin'] = "['Su','Mo','Tu','We','Th','Fr','Sa']";
$string['datepicker_dayStatus'] = 'Using DD as the first day of the week';
$string['datepicker_dateStatus'] = 'Select DD, MM d, yy';
$string['datepicker_initStatus'] = 'Choose the date';
$string['datepicker_timeOnlyTitle'] = 'Select time';
$string['datepicker_timeText'] = 'Time';
$string['datepicker_hourText'] = 'Hour';
$string['datepicker_minuteText'] = 'Minute';
$string['datepicker_secondText'] = 'Second';
$string['datepicker_millisecText'] = 'Millisecond';
$string['datepicker_timezoneText'] = 'Timezone';
$string['datepicker_amNames'] = "['AM', 'A']";
$string['datepicker_pmNames'] = "['PM', 'P']";
$string['datepicker_today'] = "Go to today";
$string['datepicker_clear'] = "Clear selection";
$string['datepicker_close'] = "Close the picker";
$string['datepicker_selectMonth'] = "Select month";
$string['datepicker_prevMonth'] = "Previous month";
$string['datepicker_nextMonth'] = "Next month";
$string['datepicker_selectYear'] = "Select year";
$string['datepicker_prevYear'] = "Previous year";
$string['datepicker_nextYear'] = "Next year";
$string['datepicker_selectDecade'] = "Select decade";
$string['datepicker_prevDecade'] = "Previous decade";
$string['datepicker_nextDecade'] = "Next decade";
$string['datepicker_prevCentury'] = "Previous century";
$string['datepicker_nextCentury'] = "Next century";
$string['datepicker_pickHour'] = "Pick hour";
$string['datepicker_incrementHour'] = "Increment hour";
$string['datepicker_decrementHour'] = "Decrement hour";
$string['datepicker_pickMinute'] = "Pick minute";
$string['datepicker_incrementMinute'] = "Increment minute";
$string['datepicker_decrementMinute'] = "Decrement minute";
$string['datepicker_pickSecond'] = "Pick second";
$string['datepicker_incrementSecond'] = "Increment second";
$string['datepicker_decrementSecond'] = "Decrement second";
$string['datepicker_togglePeriod'] = "Toggle period";
$string['datepicker_selectTime'] = "Select time";
$string['timelapsestringhour'] = array(
0 => '%2$s hour %s min ago',
......
htdocs/lib/form/elements/viewacl.php
View file @ 8d796e7c
......@@ -180,7 +180,7 @@ function pieform_element_viewacl(Pieform $form, $element) {
$options = array('stepHour' => 1,
'stepMinute' => 5,
);
$options = pieform_element_calendar_get_lang_strings($options, $LANGDIRECTION);
$tooltips = pieform_element_calendar_tooltip_lang_strings();
$datepickeroptionstr = '';
foreach ($options as $key => $option) {
if (is_numeric($option)) {
......@@ -204,6 +204,7 @@ function pieform_element_viewacl(Pieform $form, $element) {
}
$smarty->assign('datepickeroptions', $datepickeroptionstr);
$smarty->assign('datepickertooltips', json_encode($tooltips));
$smarty->assign('viewtype', $element['viewtype']);
$smarty->assign('potentialpresets', json_encode($allowedpresets));
$smarty->assign('loggedinindex', $loggedinindex);
......
htdocs/theme/raw/sass/components/_datepicker.scss 0 → 100644
View file @ 8d796e7c
This diff is collapsed.
htdocs/theme/raw/sass/components/_modal.scss
View file @ 8d796e7c
......@@ -44,6 +44,7 @@ $width-sm: 90%;
.modal-body {
@include border-bottom-radius(3px);
max-height: 90%;
height: 90%;
overflow: auto;
&.flush {
padding: 0;
......
htdocs/theme/raw/sass/datepicker.scss deleted 100644 → 0
View file @ c3dd695b
/* Changes for datepicker - original css is part of jquery-ui */
.ui-datepicker {
font-size: 0.7em;
z-index: 6 !important;
.ui-datepicker-prev-year, .ui-datepicker-next-year {
height: 1.8em;
position: absolute;
top: 2px;
width: 1.8em;
}
.ui-datepicker-prev-year {
left: 2px;
}
.ui-datepicker-next-year {
right: 2px;
}
.ui-datepicker-prev-year span, .ui-datepicker-next-year span {
display: block;
left: 50%;
margin-left: -7px;
margin-top: -8px;
position: absolute;
top: 50%;
}
.ui-datepicker-prev-year-hover, .ui-datepicker-next-year-hover {
top: 1px;
}
.ui-datepicker-prev-year-hover span, .ui-datepicker-next-year-hover span {
margin-left: -8px;
}
.ui-datepicker-next-year span {
margin-left: -9px;
}
.ui-datepicker-next-year-hover span {
margin-left: -8px;
}
.ui-datepicker-prev span, .ui-datepicker-next span {
margin-left: -7px;
}
.ui-datepicker-prev-hover span, .ui-datepicker-next-hover span {
margin-left: -8px;
}
.ui-datepicker-prev {
left: 23px;
}
.ui-datepicker-next {
right: 23px;
span {
margin-left: -9px;
}
}
.ui-datepicker-next-hover span {
margin-left: -8px;
}
button.ui-priority-secondary {
opacity: 1;
font-weight: 700;
}
}
.ui-datepicker.in-modal {
z-index: 1041 !important;
}
/* Styles for the new year prev/next css */
/* Styles changes to get prev/next to work with year prev/next css */
.ui-icon-circle-triangle-wy {
background-position: -144px -192px;
}
.ui-icon-circle-triangle-ey {
background-position: -112px -192px;
}
/* Changes for timepicker */
.ui-timepicker-div {
.ui-widget-header {
margin-bottom: 8px;
}
dl {
text-align: left;
dt {
float: left;
clear: left;
padding: 0 0 0 5px;
}
dd {
margin: 0 10px 10px 40%;
}
}
td {
font-size: 90%;
}
}
.ui-tpicker-grid-label {
background: none;
border: none;
margin: 0;
padding: 0;
}
.ui-timepicker-rtl {
direction: rtl;
dl {
text-align: right;
padding: 0 5px 0 0;
dt {
float: right;
clear: right;
}
dd {
margin: 0 40% 10px 10px;
}
}
}
htdocs/theme/raw/sass/form/_form.scss
View file @ 8d796e7c
......@@ -185,6 +185,7 @@ textarea.resizable {
.hasDatepickerwrapper input[type="text"],
.hasDatepickerwrapperacl input[type="text"] {
position: relative;
padding-right: 28px;
}
.hasDatepicker {
padding-right: 20px;
......
htdocs/theme/raw/sass/utilities/_index.scss
View file @ 8d796e7c
......@@ -74,6 +74,7 @@
@import "../components/tags";
@import "../components/user-icon";
@import "../components/framework"; // For the framework matrix
@import "../components/datepicker";
// Feature related sass. We avoid this where we can in favour of reusable components
......
htdocs/theme/raw/templates/form/viewacl.tpl
View file @ 8d796e7c
......@@ -89,12 +89,12 @@
</td>
<td class="text-center js-date short" data-name='from'>
<div class="date-picker js-date-picker js-hide-empty {% if (o.presets.empty) { %}hidden{% } %}">
<span class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][startdate]" class="form-control pull-left" data-setmin="true" setdatatarget="to" value="{%=o.presets.startdate%}" {% if (o.presets.locked) { %}disabled{% } %}></span>
<div class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][startdate]" class="form-control pull-left" data-setmin="true" setdatatarget="to" value="{%=o.presets.startdate%}" aria-label="Date from (Edit the field using the following format, year / month / day, hours colon minutes, a m or p m.)" {% if (o.presets.locked) { %}disabled{% } %}></div>
</div>
</td>
<td class="text-center js-date short" data-name='to'>
<div class="date-picker js-date-picker js-hide-empty {% if (o.presets.empty) { %}hidden{% } %}">
<span class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][stopdate]" class="form-control pull-left " data-setmax="true" setdatatarget="from" value="{%=o.presets.stopdate%}" {% if (o.presets.locked) { %}disabled{% } %}></span>
<div class="hasDatepickerwrapperacl"><input type="text" name="accesslist[{%=o.id%}][stopdate]" class="form-control pull-left " data-setmax="true" setdatatarget="from" value="{%=o.presets.stopdate%}" aria-label="Date to (Edit the field using the following format, year / month / day, hours colon minutes, a m or p m.)" value="{%=o.presets.stopdate%}" {% if (o.presets.locked) { %}disabled{% } %}></div>
</div>
</td>
{% if (o.viewtype !== "profile") { %}
......@@ -134,36 +134,21 @@ jQuery(function($) {
});
function setDatePicker(target) {
var loc = '{{strstr(current_language(), '.', true)}}'; // Get current langauge to use for locale
target.datetimepicker({
dateFormat: "{{str(tag='pieform_calendar_dateformat' section='langconfig')|pieform_element_calendar_convert_dateformat}}",
showOtherMonths: true,
selectOtherMonths: true,
showButtonPanel: true,
beforeShow: function(input, inst) {
setTimeout(function() {
add_prev_next_year(inst);
}, 1);
useCurrent: false,
format: "{{str(tag='pieform_calendar_dateformat' section='langconfig')|pieform_element_calendar_convert_dateformat}} {{str(tag='pieform_calendar_timeformat' section='langconfig')|pieform_element_calendar_convert_timeformat}}",
locale: loc,
showClear: true,
showTodayButton: true,
tooltips: {{$datepickertooltips|safe}},
icons: {
clear: "icon icon-trash",
today: "icon icon-crosshairs",
},
onChangeMonthYear: function(y, m, inst) {
setTimeout(function() {
add_prev_next_year(inst);
}, 1);
},
onClose: function( selectedDate ) {
var setmin = $(this).attr('data-setmin'),
setmax = $(this).attr('data-setmax'),
setdatatarget = $(this).attr('data-setdatatarget'),
settarget = $(this).closest('td').siblings(['data-name="' + setdatatarget + '"']).find('input');
if (setmin !== undefined) {
settarget.datetimepicker( "option", "minDate", selectedDate);
}
if (setmax !== undefined) {
settarget.datetimepicker( "option", "maxDate", selectedDate);
}
if ((setmin !== undefined || setmax !== undefined ) && selectedDate !== "") {
formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
}
}).on('dp.hide', function(selectedDate) {
if (selectedDate !== "") {
formchangemanager.setFormStateById('{{$formname}}', FORM_CHANGED);
}
});
}
......@@ -330,7 +315,7 @@ jQuery(function($) {
function attachEventListeners(id) {
var newrow = $('#accesslistitems').find('[data-id="' + id + '"]');
attachShareTypeEvent(newrow);
setDatePicker($(newrow).find('.js-date-picker > span > input'));
setDatePicker($(newrow).find('.js-date-picker > div > input'));
attachSelect2Search($(newrow).find('.js-select2-search'));
attachCommentEvents($(newrow));
onChange($(newrow));
......@@ -563,7 +548,7 @@ jQuery(function($) {
shareoptions = shareWithOptions(rows[i]);
renderAccessList(shareoptions);
setDatePicker($( ".js-date-picker > span > input" ));
setDatePicker($( ".js-date-picker > div > input" ));
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment