bike/Yellow-Bike-Database-Mirror
1
0
Fork 0
mirror of https://github.com/fspc/Yellow-Bike-Database.git synced 2025-02-23 01:03:23 -05:00
Code Issues Projects Releases Wiki Activity

Made transaction slider keyboard friendly.

Browse Source
This commit is contained in:
Jonathan Rosenbaum 2015-01-25 02:51:47 +00:00
parent 063c9fcfe3
commit 88cdfc5887
2 changed files with 79 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
js/transaction.js
View File

@ -147,6 +147,7 @@ $(function() {
} }
}); });
// on reload // on reload
transaction_slider(); transaction_slider();
@ -193,9 +194,6 @@ $(function() {
// ranges between min and max in percentages with min prepended and max appended as an object // ranges between min and max in percentages with min prepended and max appended as an object
var range_obj = {}; var range_obj = {};
console.log(max_range_last_year);
console.log(range.toString());
console.log(percentage_amounts);
// add last deposit from last year if it exists // add last deposit from last year if it exists
if(max_range_last_year) { if(max_range_last_year) {
@ -217,8 +215,6 @@ $(function() {
}); });
console.dir(range_obj);
//initialize slider //initialize slider
if (!slider) { if (!slider) {
slider = $('#gnucash_csv_range').noUiSlider({ slider = $('#gnucash_csv_range').noUiSlider({
@ -241,7 +237,84 @@ $(function() {
} }
} // end function transaction_slider } // end function transaction_slider
// make transaction slider keyboard friendly
// Listen to keydown events on the input field.
var slider_pointer = $('#gnucash_csv_range'); // slider does exist globally, but keeping namespaces clean
var first_handle = $('#slider_lower');
var second_handle = $('#slider_upper');
slider_keyboard(slider_pointer,first_handle,"lower");
slider_keyboard(slider_pointer,second_handle,"upper");
function slider_keyboard(slider_pointer, input, handle) {
input.keydown(function( e ) {
var Format = wNumb({decimals:0});
var options_object = slider_pointer.noUiSlider('options');
var value;
// Select the first handle.
if (handle == "lower") {
value = Format.from( slider_pointer.val()[0] );
// Select the second handle.
} else if (handle == "upper") {
value = Format.from( slider_pointer.val()[1] );
}
// create and array for plus (38) and minus (40) events
var plus_and_minus = [], c = 0;
$.each(options_object.range, function(k,v){
plus_and_minus[c] = v;
c++;
});
// create a lookup object to map arrays to proper plus or minus value for respective event
var lookup_object = {};
lookup_object.plus = {};
lookup_object.minus = {};
$.each(plus_and_minus, function(k,v) {
// last array element
if (k == plus_and_minus.length - 1) {
lookup_object.plus[v] = 0;
} else {
lookup_object.plus[v] = plus_and_minus[k + 1] - v;
}
});
$.each(plus_and_minus, function(k,v) {
// first array element
if (k == 0) {
lookup_object.minus[v] = 0;
} else {
lookup_object.minus[v] = v - plus_and_minus[k - 1];
}
});
// 13 is enter,
// 38 is key up,
// 40 is key down.
switch ( e.which ) {
case 13:
$(this).change();
break;
case 38: if (handle == "lower") { // +
slider_pointer.val( [value + lookup_object.plus[value] , null] );
} else if (handle == "upper") {
slider_pointer.val( [null, value + lookup_object.plus[value]] );
}
break;
case 40: if (handle == "lower") {
slider_pointer.val( [value - lookup_object.minus[value], null] );
} else if (handle == "upper") {
slider_pointer.val( [null, value - lookup_object.minus[value]] );
}
break;
}
}); // keyboard friendly slider
}
// gnucash account multi-select // gnucash account multi-select
$("#gnucash_csv_accounts").chosen({ $("#gnucash_csv_accounts").chosen({

2
transaction_log.php
View File

@ -759,7 +759,7 @@ if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "ChangeDate")) {
echo "<div id='range_slider'><div id='gnucash_csv_range'></div></div>"; echo "<div id='range_slider'><div id='gnucash_csv_range'></div></div>";
echo "</td></tr><tr><td></td><td></td> echo "</td></tr><tr><td></td><td></td>
<td><span id='slider_lower'></span>&nbsp;&nbsp;&nbsp;&nbsp;<span id='slider_upper'></span></td></tr></table></form>"; <td><input type='text' id='slider_lower'>&nbsp;&nbsp;&nbsp;&nbsp;<input type='text' id='slider_upper'></td></tr></table></form>";
?> ?>
</td> </td>