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

Change DOM sort style to match existing style

Browse source
This commit is contained in:
Julius 2013-07-08 21:51:15 +02:00
parent ff1317b17b
commit bba70dc875
2 changed files with 22 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -145,17 +145,15 @@ $(function() {
$('.datepicker').datepicker({format: 'yyyy-mm-dd', language: I18n.locale}); $('.datepicker').datepicker({format: 'yyyy-mm-dd', language: I18n.locale});
// Init table sorting // Init table sorting
var myBars = $('.sorter-bar'); var myTriggerers = $('.dom-sort-triggerer');
myBars.html('<button type="button" class="sorter-button btn btn-mini"><i class="icon-chevron-up"></i></button><button type="button" class="sorter-button btn btn-mini"><i class="icon-chevron-down"></i></button>'); myTriggerers.wrapInner('<a href="#" class="dom-sort-link"></a>');
$('button:nth-child(1)', myBars).click(function(e) {sortTable(e, false);}); $('.dom-sort-link', myTriggerers).click(function(e) {sortTable(e); e.preventDefault();});
$('button:nth-child(2)', myBars).click(function(e) {sortTable(e, true);}); // A title attribute ('sort ascending/descending') would be nice here.
// A title attribute ('sort ascending order') would be nice here.
// However, for a tiny detail like that it is not worth to translate everything: // 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 // 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 // Sort tables with a default sort
$('.sorter-bar.default-sort-asc button:nth-child(1)').trigger('click'); $('.dom-sort-link', '.default-sort').trigger('click');
$('.sorter-bar.default-sort-desc button:nth-child(2)').trigger('click');
}); });
// compare two elements interpreted as text // compare two elements interpreted as text
@ -164,14 +162,16 @@ function compareText(a, b) {
} }
// wrapper for $.fn.sorter (see above) for sorting tables // wrapper for $.fn.sorter (see above) for sorting tables
function sortTable(e, inverted) { function sortTable(e) {
var sign = ( inverted ) ? ( -1 ) : ( 1 ); var sortLink = $(e.currentTarget);
var myBar = $(e.currentTarget).closest('.sorter-bar'); // bar containing the clicked up/down arrow var sign = ( sortLink.hasClass('sortup') ) ? ( -1 ) : ( 1 );
var sortCriterion = myBar.data('sortCriterion'); // class name of (usually td) elements which define the order
var compareFunction = myBar.data('compareFunction'); // function to compare two element contents for ordering var options = sortLink.closest('.dom-sort-triggerer').data();
var sortElement = myBar.data('sortElement'); // name of function which returns the movable element (default: 'thisParent') var sortCriterion = options.sortCriterion; // class name of (usually td) elements which define the order
var myTable = myBar.closest('table'); // table to sort 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? sortElement = ( 'undefined' === typeof sortElement ) ? ( function() {return this.parentNode;} ) : ( window[sortElement] ); // is this dirty?
@ -182,13 +182,15 @@ function sortTable(e, inverted) {
sortElement sortElement
); );
$('.sorter-button', myTable).removeClass('btn-primary active'); $('.dom-sort-link', myTable).removeClass('sortup sortdown');
$(e.currentTarget).addClass('btn-primary active'); sortLink.addClass(
( sign == 1 ) ? ( 'sortup' ) : ( 'sortdown' )
);
} }
// retrigger last sort function for elements in a context (e.g. after DOM update) // retrigger last sort function for elements in a context (e.g. after DOM update)
function updateSort(context) { function updateSort(context) {
$('.sorter-bar button.active.btn-primary', context).trigger('click'); $('.sortup, .sortdown', context).toggleClass('sortup sortdown').trigger('click');
} }
// gives the row an yellow background // gives the row an yellow background

10
app/views/deliveries/_form.html.haml
View file

@ -101,13 +101,10 @@
%table.table.table-hover#stock_articles_for_adding %table.table.table-hover#stock_articles_for_adding
%thead %thead
%tr %tr
%th %th.dom-sort-triggerer.default-sort{:data => {'compare-function' => 'compareText', 'sort-criterion' => 'sort-by-name'}}
= t '.article' = t '.article'
%span.sorter-bar.default-sort-asc{:data => {'compare-function' => 'compareText', 'sort-criterion' => 'sort-by-name'}}
%th= t '.price' %th= t '.price'
%th %th= t '.category'
= t '.category'
%span.sorter-bar{:data => {'compare-function' => 'compareText', 'sort-criterion' => 'sort-by-category'}}
%th= t '.actions' %th= t '.actions'
%tbody %tbody
- for article in stock_articles_for_table(@supplier) - for article in stock_articles_for_table(@supplier)
@ -117,9 +114,8 @@
%table.table#stock_changes %table.table#stock_changes
%thead %thead
%tr %tr
%th %th.dom-sort-triggerer.default-sort{:data => {'compare-function' => 'compareText', 'sort-criterion' => 'sort-by-name'}}
= t '.article' = t '.article'
%span.sorter-bar.default-sort-asc{:data => {'compare-function' => 'compareText', 'sort-criterion' => 'sort-by-name'}}
%th= t '.price' %th= t '.price'
%th= t '.quantity' %th= t '.quantity'
%th= t '.actions' %th= t '.actions'