Skip to content

Commit

Permalink
SAK-32657 Keyboard controls needed for Syllabus reorder
Browse files Browse the repository at this point in the history
  • Loading branch information
@josecebe
josecebe authored and Miguel Pellicer committed Oct 30, 2018
1 parent 8a501f1 commit 4baa245
Show file tree
Hide file tree
Showing 9 changed files with 86 additions and 27 deletions.
2 changes: 1 addition & 1 deletion announcement/announcement-tool/tool/src/webapp/vm/announcement/chef_announcements.vm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
#end

#if ($reorder)
#set($rowClass = "row")
#set($rowClass = "row reorder-element")
#end

## message marked as hidden, current date is before release date, or current date is after retract date
Expand Down
2 changes: 1 addition & 1 deletion assignment/tool/src/webapp/vm/assignment/chef_assignments_instructor_reorder_assignment.vm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
#set($count = 1)
#foreach($assignment in $assignments)

<li class="sortable row" tabindex="0" id="listitem.orderable$count">
<li class="sortable row reorder-element" tabindex="0" id="listitem.orderable$count">
<span style="display:none" class="grabHandle">
<input type="text" size="3" value="$count" id="index$count"/>
<input type="hidden" size="3" id="holder$count" value="$count" tabindex="-2"/>
Expand Down
2 changes: 1 addition & 1 deletion content/content-tool/tool/src/webapp/vm/content/chef_resources_reorder.vm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
#set($collectionMembers = $root.members)
#set($count = 1)
#foreach($member in $collectionMembers)
<li class="sortable row well" tabindex="0" id="listitem.orderable$count">
<li class="sortable row well reorder-element" tabindex="0" id="listitem.orderable$count">
<span style="display:none" class="grabHandle">
<input type="text" size="3" value="$count" id="index$count"/>
<input type="hidden" size="3" id="holder$count" value="$count" tabindex="-2"/>
Expand Down
36 changes: 18 additions & 18 deletions library/src/morpheus-master/js/src/sakai.morpheus.reorderer.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
$PBJQ(document).ready(function(){
if ($PBJQ("#reorder-list li").size() - 1 > 15) {
if ($PBJQ('[id$="reorder-list"] .reorder-element').size() - 1 > 15) {
$PBJQ('.grabHandle').show();
$PBJQ('#inputFieldMessage').show();
$PBJQ('#inputKbdMessage').remove();
}
//get the initial order TODO - make an array instead of putting the values in a span
$PBJQ('#reorder-list li').each(function(n){
$PBJQ('[id$="reorder-list"] .reorder-element').each(function(n){
$PBJQ('#lastMoveArrayInit').append($PBJQ(this).attr('id') + ' ');
$PBJQ('#lastMoveArray').append($PBJQ(this).attr('id') + ' ');
});
Expand All @@ -25,7 +25,7 @@ $PBJQ(document).ready(function(){
initOrder = $PBJQ.trim($PBJQ('#lastMoveArrayInit').text()).split(" ");
for (z in initOrder) {
thisRow = document.getElementById(initOrder[z]);
$PBJQ(thisRow).appendTo('#reorder-list');
$PBJQ(thisRow).appendTo('[id$="reorder-list"]');
}

event.preventDefault();
Expand All @@ -42,10 +42,10 @@ $PBJQ(document).ready(function(){
prevOrder = $PBJQ.trim($PBJQ('#lastMoveArray').text()).split(" ");
for (z in prevOrder) {
thisRow = document.getElementById(prevOrder[z]);
$PBJQ(thisRow).appendTo('#reorder-list');
$PBJQ(thisRow).appendTo('[id$="reorder-list"]');
}
lastMovedT = $PBJQ.trim($PBJQ('#lastItemMoved').text());
lastMoved = $PBJQ('li:eq(' + lastMovedT.substr(20) + ')');
lastMoved = $PBJQ('.reorder-element:eq(' + lastMovedT.substr(20) + ')');
$PBJQ(lastMoved).addClass('recentMove');
event.preventDefault();
registerChange('notfluid', lastMoved);
Expand Down Expand Up @@ -86,7 +86,7 @@ $PBJQ(document).ready(function(){
that.select();
});
$PBJQ("#messageHolder").fadeOut('slow');
$PBJQ(this).parents('li').addClass('orderable-selected');
$PBJQ(this).parents('.reorder-element').addClass('orderable-selected');
return (null);
}

Expand All @@ -100,26 +100,26 @@ $PBJQ(document).ready(function(){
//insert the row in new location - if new value is 1, insert before, if it is the last possible
// insert after, otherwise insert before or after depending on if it is going up or down
if (newVal === '1') {
$PBJQ($PBJQ(this).parents('li')).insertBefore($PBJQ(this).parents('li').siblings('li').children('span').children('input[value=' + newVal + ']').parents('li'));
$PBJQ($PBJQ(this).parents('.reorder-element')).insertBefore($PBJQ(this).parents('.reorder-element').siblings('.reorder-element').children('span').children('input[value=' + newVal + ']').parents('.reorder-element'));
}
else
if (newVal == inputs.length) {
$PBJQ($PBJQ(this).parents('li')).insertAfter($PBJQ(this).parents('li').siblings('li').children('span').children('input[value=' + newVal + ']').parents('li'));
$PBJQ($PBJQ(this).parents('.reorder-element')).insertAfter($PBJQ(this).parents('.reorder-element').siblings('.reorder-element').children('span').children('input[value=' + newVal + ']').parents('.reorder-element'));
}
else {
if (newVal > oldVal) {
$PBJQ($PBJQ(this).parents('li')).insertAfter($PBJQ(this).parents('li').siblings('li').children('span').children('input[value=' + newVal + ']').parents('li'));
$PBJQ($PBJQ(this).parents('.reorder-element')).insertAfter($PBJQ(this).parents('.reorder-element').siblings('.reorder-element').children('span').children('input[value=' + newVal + ']').parents('.reorder-element'));
}
else {
$PBJQ($PBJQ(this).parents('li')).insertBefore($PBJQ(this).parents('li').siblings('li').children('span').children('input[value=' + newVal + ']').parents('li'));
$PBJQ($PBJQ(this).parents('.reorder-element')).insertBefore($PBJQ(this).parents('.reorder-element').siblings('.reorder-element').children('span').children('input[value=' + newVal + ']').parents('.reorder-element'));
}
}
registerChange('notfluid', $PBJQ(this).parents('li'));
registerChange('notfluid', $PBJQ(this).parents('.reorder-element'));
});

// the jquery-ui sortable initialization
return $PBJQ("#reorder-list").keyboardSortable({
items: 'li:not(.notsortable)',
return $PBJQ('[id$="reorder-list"]').keyboardSortable({
items: '.reorder-element:not(.notsortable)',
start: function( event, ui ) {
preserveStatus(ui);
},
Expand All @@ -133,16 +133,16 @@ $PBJQ(document).ready(function(){
// handle things that happen after a move
var registerChange = function(originEvent, movedEl){

var rows = $PBJQ("#reorder-list li").size();
var rows = $PBJQ('[id$="reorder-list"] .reorder-element').size();
if (originEvent !== 'notfluid') {
movedEl = $PBJQ("li[aria-selected='true']");
movedEl = $PBJQ(document.activeElement).closest('[id^="ui-id-"]');
}

$PBJQ('#lastItemMoved').text($PBJQ(movedEl).attr('id'));
$PBJQ('#lastItemMoved').text($PBJQ(movedEl).attr('id')).trigger('change');

$PBJQ(movedEl).addClass('recentMove');
var newVal = 0;
newVal = $PBJQ((movedEl).prevAll('li').length + 1);
newVal = $PBJQ((movedEl).prevAll('.reorder-element').length + 1);
// change the value of all the text fields (and value holders) to reflect new order
var inputsX = $PBJQ('input[id^="index"]');
var holderinputs = $PBJQ('input[id^="holder"]');
Expand Down Expand Up @@ -174,7 +174,7 @@ var registerChange = function(originEvent, movedEl){

var preserveStatus = function(item){
$PBJQ('#lastMoveArray').text('');
$PBJQ('#reorder-list li').each(function(n){
$PBJQ('[id$="reorder-list"] .reorder-element').each(function(n){
if ($PBJQ(this).attr('id') !== undefined && $PBJQ(this).attr('id') !== 'undefined_avatar') {
$PBJQ('#lastMoveArray').append($PBJQ(this).attr('id') + ' ');
}
Expand Down
4 changes: 2 additions & 2 deletions site-manage/pageorder/tool/src/webapp/content/js/orderUtil.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ function doSaveEdit(clickedLink) {
$(li).find(".item_label_box").attr("style", "display: inline");
$(li).find(".item_control_box").show();
$(li).find(".item_control_box").attr("style", "display: inline");
$(li).addClass("sortable_item");
$(li).addClass("sortable_item reorder-element");
$(li).removeClass("editable_item");
}
});
Expand All @@ -204,7 +204,7 @@ function doCancelEdit(clickedLink) {
$(li).find(".item_label_box").attr("style", "display: inline");
$(li).find(".item_control_box").show();
$(li).find(".item_control_box").attr("style", "display: inline");
$(li).addClass("sortable_item");
$(li).addClass("sortable_item reorder-element");
$(li).removeClass("editable_item");
$(li).find(".new_title").val($(li).find(".item_label_box").text());
}
Expand Down
2 changes: 1 addition & 1 deletion site-manage/pageorder/tool/src/webapp/content/templates/PageList.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h3 rsf:id="msg=page_title">page_title</h3>
<strong rsf:id="msg=curr_pages">Current Pages</strong>
</div>
<ul class="sortable" id="reorder-list">
<li rsf:id="page-row:" id="content:::page-row::" class="sortable_item" tabindex="0">
<li rsf:id="page-row:" id="content:::page-row::" class="sortable_item reorder-element" tabindex="0">
<div rsf:id="tool-icon"></div>
<div class="item_edit_box" style="display: none;">
<div>
Expand Down
2 changes: 2 additions & 0 deletions syllabus/syllabus-app/src/bundle/org/sakaiproject/tool/syllabus/bundle/Messages.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -241,6 +241,8 @@ clickToAddBody=Click to add body text
clickToHideWorld=Click to make this syllabus item viewable to only this site
clickToAddWorld=Click to make this syllabus item publicly viewable to the whole world
dragToReorder=Drag to reorder
reorderInstruction=To reorder, drag and drop list items or use the keyboard to focus on the item then use U or D keys. Changes will take effect automatically.
reorderInstruction_sr=Tab into list and hold Control key and use arrow keys to sort.
clickToPublish=Click to publish
clickToUnpublish=Click to unpublish
clickToAddCal=Click to add to calendar
Expand Down
48 changes: 47 additions & 1 deletion syllabus/syllabus-app/src/webapp/js/syllabus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ function setupAccordion(iframId, isInstructor, msgs, openDataId){
if(isInstructor){
$( "#accordion span" ).sortable({
axis: "y",
handle: "h3 span.handleIcon",
handle: ".group",
start: function(event, ui){
dragStartIndex = ui.item.index();
},
Expand All @@ -69,10 +69,56 @@ function setupAccordion(iframId, isInstructor, msgs, openDataId){
if(moved !== 0){
//update the position:
postAjax($(ui.item).children(":first").attr("syllabusItem"), {"move": moved}, msgs);
updatePositions();
}
}
});
var itemsOrder = [];
function updatePositions() {
itemsOrder = [];
$('.reorder-element .group').each(function() {
itemsOrder.push($(this).attr('syllabusitem'));
});
}
updatePositions()
var saveTimeout;
$('#lastItemMoved').change(function() {
// Clear the enqueued positions save
clearTimeout(saveTimeout);
syllabusId = $(this).text();
syllabusItem = $('#' + syllabusId).parent().attr('syllabusitem');
saveTimeout = setTimeout(function(){
// Save the positions after 500ms with no more changes
// First of all save the selected item
var positionBefore = itemsOrder.indexOf(syllabusItem);
var index = $('#' + syllabusId).parent().parent().index();
var move = positionBefore - index;
if (move !== 0) {
postAjax(syllabusItem, {"move": move}, msgs);
itemsOrder.move(positionBefore, index);
}
var index = 0;
// After this, check if other elements also should be saved (mulitple changes)
$('.reorder-element .group').each(function() {
var syllabusItem = $(this).attr('syllabusitem');
var positionBefore = itemsOrder.indexOf(syllabusItem);
var move = positionBefore - index;
if (move === 0) {
index++;
return;
}
// This request should send all the array of positions in order to make it asynchronous (this logic will need a change)
postAjax(syllabusItem, {"move": move}, msgs);
itemsOrder.move(positionBefore, index);
index++;
});
}, 500);
});
}
Array.prototype.move = function(from,to){
this.splice(to,0,this.splice(from,1)[0]);
return this;
};
if(activeVar === false && openDataId && openDataId !== ''){
//instructor is working on this data item, keep it open and focused on when refreshing
$( "#accordion div[syllabusItem=" + openDataId + "].group .ui-accordion-header").click().focus();
Expand Down
15 changes: 13 additions & 2 deletions syllabus/syllabus-app/src/webapp/syllabus/main.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,15 +198,26 @@
</li>
</ul></f:verbatim>
<syllabus:syllabus_if test="#{SyllabusTool.syllabusItem.redirectURL}">
<f:verbatim><div class="instruction"></f:verbatim>
<h:outputText value="#{msgs.reorderInstruction}" />
<f:verbatim><span class="sr-only"></f:verbatim>
<h:outputText value="#{msgs.reorderInstruction_sr}" />
<f:verbatim></span></f:verbatim>
<f:verbatim></div></f:verbatim>
<f:verbatim>
<div>
<span id="successInfo" class="success popupMessage" style="display:none; float: left;"></span>
<span id="warningInfo" class="alertMessage popupMessage" style="display:none; float: left;"></span>
</div>

<span id="lastMoveArray" class="hidden"></span>
<span id="lastMoveArrayInit" class="hidden"></span>
<span id="lastItemMoved" class="hidden"></span>

<div id="accordion">
</f:verbatim>
<t:dataList value="#{SyllabusTool.entries}" var="eachEntry" layout="simple" styleClass="accordion-items-container">
<f:verbatim><div><div class="group" syllabusItem="</f:verbatim>
<t:dataList value="#{SyllabusTool.entries}" var="eachEntry" layout="simple" styleClass="accordion-items-container" id="reorder-list">
<f:verbatim><div class="reorder-element"><div class="group" syllabusItem="</f:verbatim>
<h:outputText value="#{eachEntry.entry.syllabusId}"/>
<f:verbatim>"><h3></f:verbatim>
<f:subview id="actionIcons" rendered="#{SyllabusTool.editAble == 'true'}">
Expand Down

0 comments on commit 4baa245

Please sign in to comment.