mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-03-14 20:50:21 +01:00
Code Issues Projects Releases Wiki Activity

MDL-80426 qtype_ordering: An announcement region to announce reorders

Browse Source
This commit is contained in:
Shamim Rezaie 2024-03-26 15:22:48 +11:00
parent eccfb73839
commit b32617e346
5 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
question/type/ordering/amd/build/drag_reorder.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
question/type/ordering/amd/build/drag_reorder.min.js.map
View File

File diff suppressed because one or more lines are too long

20
question/type/ordering/amd/src/drag_reorder.js
View File

@ -28,6 +28,8 @@ import $ from 'jquery';
import drag from 'core/dragdrop';
import Templates from 'core/templates';
import Notification from 'core/notification';
import {getString} from 'core/str';
import {prefetchString} from 'core/prefetch';
export default class DragReorder {
@ -218,6 +220,13 @@ export default class DragReorder {
// Order has changed, call the callback.
this.config.reorderDone(this.itemDragging.closest(this.config.list), this.itemDragging, this.getCurrentOrder());
getString('moved', 'qtype_ordering', {
item: this.itemDragging.find('[data-itemcontent]').text().trim(),
position: this.itemDragging.index() + 1,
total: this.orderList.querySelectorAll(this.config.item).length
}).then((str) => {
this.config.announcementRegion.innerHTML = str;
});
}
// Clean up after the drag is finished.
@ -272,6 +281,14 @@ export default class DragReorder {
// Focus the 'previous' action button.
this.itemDragging.find('[data-action="move-backward"]').focus();
}
getString('moved', 'qtype_ordering', {
item: this.itemDragging.find('[data-itemcontent]').text().trim(),
position: this.itemDragging.index() + 1,
total: this.orderList.querySelectorAll(this.config.item).length
}).then((str) => {
this.config.announcementRegion.innerHTML = str;
});
}
}
}
@ -342,6 +359,7 @@ export default class DragReorder {
static init(sortableid, responseid) {
new DragReorder({
actionButton: '[data-action]',
announcementRegion: document.querySelector(`#${sortableid}-announcement`),
list: 'ul#' + sortableid,
item: 'li.sortableitem',
itemMovingClass: "current-drop",
@ -352,5 +370,7 @@ export default class DragReorder {
$('input#' + responseid)[0].value = newOrder.join(',');
}
});
prefetchString('qtype_ordering', 'moved');
}
}

1
question/type/ordering/lang/en/qtype_ordering.php
View File

@ -78,6 +78,7 @@ $string['layouttype'] = 'Layout of items';
$string['layouttype_help'] = 'Choose whether to display the items vertically or horizontally.';
$string['longestcontiguoussubset'] = 'Longest contiguous subset';
$string['longestorderedsubset'] = 'Longest ordered subset';
$string['moved'] = '{$a->item} moved. New position: {$a->position} of {$a->total}.';
$string['moveleft'] = 'Move left';
$string['moveright'] = 'Move right';
$string['noresponsedetails'] = 'Sorry, no details of the response to this question are available.';

3
question/type/ordering/templates/formulation_and_controls.mustache
View File

@ -65,6 +65,7 @@
{{#responsename}}
<div class="ablock" id="{{ablockid}}">
<div class="answer ordering">
<div aria-live="polite" class="sr-only" id="{{sortableid}}-announcement"></div>
<ul class="sortablelist {{layoutclass}} {{#numberingstyle}}numbering{{numberingstyle}}{{/numberingstyle}} {{#active}}active{{/active}}{{^active}}notactive{{/active}}" id="{{sortableid}}">
{{#answers}}
<li class="p-2 {{^readonly}}sortableitem{{/readonly}} {{scoreclass}}" id="{{id}}">
@ -74,7 +75,7 @@
<i class='fas fa-grip-vertical' aria-hidden="true"></i>
</div>
{{/readonly}}
<div class="d-flex align-items-center flex-grow-1 px-2" id="{{id}}-text">
<div class="d-flex align-items-center flex-grow-1 px-2" id="{{id}}-text" data-itemcontent>
{{{feedbackimage}}}{{{answertext}}}
</div>
{{^readonly}}