Foodsoft/foodsoft
1
1
Fork 0
Code Issues 36 Pull requests 5 Projects 1 Releases Wiki Activity

Replace 'own' js table sorting by stupidtable plugin

Browse source
This commit is contained in:
Julius 2013-07-16 22:01:56 +02:00
parent 4fafdcb7ad
commit 7fd8abf381
5 changed files with 199 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/assets/javascripts/application.js
View file

@ -11,6 +11,7 @@
//= require rails.validations
//= require_self
//= require ordering
//= require stupidtable
// allow touch devices to work on click events
// http://stackoverflow.com/a/16221066
@ -25,34 +26,6 @@ $.fn.extend({
}()),
});
// function for sorting DOM elements
$.fn.sorter = (function(){
// Thanks to James Padolsey and Avi Deitcher
// http://james.padolsey.com/javascript/sorting-elements-with-jquery/#comment-29400
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function(){return this;};
var sorted = sort.call(this, comparator); // sort all elements in memory
var prevElmt = null;
for(i=sorted.length-1; i>=0; --i) { // loop starting from last
var criterionElmt = sorted[i];
var curElmt = ( 'function' === typeof getSortable ) ? ( getSortable.call(criterionElmt) ) : ( criterionElmt );
var parent = curElmt.parentNode;
if (!prevElmt) {
parent.appendChild(curElmt); // place last element to the end
} else {
parent.insertBefore(curElmt, prevElmt); // move each element before the previous one
}
prevElmt = curElmt;
}
return sorted;
};
})();
// Load following statements, when DOM is ready
$(function() {
@ -144,53 +117,13 @@ $(function() {
// Use bootstrap datepicker for dateinput
$('.datepicker').datepicker({format: 'yyyy-mm-dd', language: I18n.locale});
// Init table sorting
var myTriggerers = $('.dom-sort-triggerer');
myTriggerers.wrapInner('<a href="#" class="dom-sort-link"></a>');
$('.dom-sort-link', myTriggerers).click(function(e) {sortTable(e); e.preventDefault();});
// A title attribute ('sort ascending/descending') would be nice here.
// However, for a tiny detail like that it is not worth to translate everything:
// http://foodsoft.51229.x6.nabble.com/How-to-I18n-content-which-is-dynamically-loaded-via-javascript-assets-td75.html#a76
// Sort tables with a default sort
$('.dom-sort-link', '.default-sort').trigger('click');
// See stupidtable.js for initialization of local table sorting
});
// compare two elements interpreted as text
function compareText(a, b) {
return $.trim(a.textContent).toLowerCase() < $.trim(b.textContent).toLowerCase() ? -1 : 1;
}
// wrapper for $.fn.sorter (see above) for sorting tables
function sortTable(e) {
var sortLink = $(e.currentTarget);
var sign = ( sortLink.hasClass('sortup') ) ? ( -1 ) : ( 1 );
var options = sortLink.closest('.dom-sort-triggerer').data();
var sortCriterion = options.sortCriterion; // class name of (usually td) elements which define the order
var compareFunction = options.compareFunction; // function to compare two element contents for ordering
var sortElement = options.sortElement; // name of function which returns the movable element (default: 'thisParent')
var myTable = sortLink.closest('table'); // table to sort
sortElement = ( 'undefined' === typeof sortElement ) ? ( function() {return this.parentNode;} ) : ( window[sortElement] ); // is this dirty?
$('.' + sortCriterion, myTable).sorter(
function(a, b) {
return sign*window[compareFunction](a, b); // again dirty?
},
sortElement
);
$('.dom-sort-link', myTable).removeClass('sortup sortdown');
sortLink.addClass(
( sign == 1 ) ? ( 'sortup' ) : ( 'sortdown' )
);
}
// retrigger last sort function for elements in a context (e.g. after DOM update)
function updateSort(context) {
$('.sortup, .sortdown', context).toggleClass('sortup sortdown').trigger('click');
// retrigger last local table sorting
function updateSort(table) {
$('.sorting-asc, .sorting-desc', table).toggleClass('.sorting-asc .sorting-desc')
.removeData('sort-dir').trigger('click'); // CAUTION: removing data field of plugin
}
// gives the row an yellow background