| Project: | UberPOS |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
For an implementation of UberPOS we're doing we need to have buttons on screen that can be used to scroll the list of items.
Unfortunately if you want to put those buttons inside #screen (which from an interface design point of view makes perfect sense) the scrolling functions in UberPOS.js don't work reliably anymore. The reason is these use #screen to determine where #main-table should be scrolled to. This only works if #screen contains nothing but #main-table. If it contains something more, such as #scrollbuttons, #scrollbuttons gets hidden whenever a user starts scrolling.
I'm sure there are many ways around this. The method I came up with is this:
* Wrap #main-table in a wrapper div.
* Create a new scrolling function that uses this wrapping div to scroll
For now I've done this in our theme, which is of course perfectly workable. However, this could possibly be something that would be usable for others as well. If so, I could supply a patch to uberpos-screen-interface.tpl.php and UberPOS.js that implements the necessary changes. There's actually very little to them, and (IMHO) the scrolling code is in fact a bit cleaner than it is currently as everything goes into a single function rather than in two.
In uberpos-screen-interface.tpl.php there simply needs to go a #main-table-wrapper div around #main-table.
var icaUPScroll = new Object();
/****************************************************************************
* *
* Settings *
* *
***************************************************************************/
icaUPScroll.numRowsVisible = 12; // how many rows can
// fit in the screen
// without scrolling?
icaUPScroll.numRowsForScrollButtons = 2; // how many rows does
// the scroll button
// div take up?
icaUPScroll.numRowsToShowBelowCurrentlySelected = 2; // how many rows do
// we want to show
// between the
// currently
// selected row and
// the bottom of the
// screen?
/****************************************************************************
* *
* Not settings
* *
***************************************************************************/
// Scroll the wrapper div by a given number of rows
icaUPScroll.scrollBy = function(amount) {
var numRows = 0;
$('table#main-table tr').each(function() { numRows++ });
numRows--;
var idOfCurrentlySelectedRow = $('table#main-table tr.selected').attr('id');
var idOfNewSelectedRow = parseInt(idOfCurrentlySelectedRow) + amount;
if(idOfNewSelectedRow < 0) {
idOfNewSelectedRow = 0;
};
if(idOfNewSelectedRow > numRows) {
idOfNewSelectedRow = numRows;
};
$('#main-table-wrapper table tbody tr.selected').removeClass('selected');
$('#main-table-wrapper table tbody tr').eq(idOfNewSelectedRow).addClass('selected');
var idOfNewTopRow = idOfNewSelectedRow - icaUPScroll.numRowsVisible + icaUPScroll.numRowsForScrollButtons + icaUPScroll.numRowsToShowBelowCurrentlySelected;
if(idOfNewTopRow < 0) {
idOfNewTopRow = 0;
};
$('div#main-table-wrapper').scrollTo($('#main-table-wrapper table#main-table tbody tr').eq(idOfNewTopRow));
$("input#edit-pos-input").focus();
};
// Assign scrolling functions to key up, key down and to clicks on scroll
// buttons. Also attach a listener to the UberPOS ajax complete hook
// to determine visibility of the div with scroll buttons
$(window).load(function() {
// note UberPOS itself selects rows, so all we need to do is scroll
$(document).keydown(function(event) {
switch (event.which) {
case 40:
icaUPScroll.scrollBy(0);
return false;
case 38:
icaUPScroll.scrollBy(0);
return false;
}
});
});The JavaScript for the scroll buttons makes use of my ajax call complete "hooks" patch (see http://drupal.org/node/1063450). I've therefore left them out in the code above (it would be great if these could make it into core, however).