mirror of
https://github.com/grocy/grocy.git
synced 2025-08-28 09:01:14 +00:00
Replaced jQuery UI by Animate.css (better, faster, lighter)
This commit is contained in:
@@ -153,3 +153,22 @@ $.fn.isVisibleInViewport = function(extraHeightPadding = 0)
|
||||
|
||||
return elementTop + $(this).outerHeight() > viewportTop && elementTop < viewportTop + $(window).height();
|
||||
};
|
||||
|
||||
function animateCSS(selector, animationName, callback, speed = "faster")
|
||||
{
|
||||
var nodes = $(selector);
|
||||
nodes.addClass('animated').addClass(speed).addClass(animationName);
|
||||
|
||||
function handleAnimationEnd()
|
||||
{
|
||||
nodes.removeClass('animated').removeClass(speed).removeClass(animationName);
|
||||
nodes.unbind('animationend', handleAnimationEnd);
|
||||
|
||||
if (typeof callback === 'function')
|
||||
{
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
nodes.on('animationend', handleAnimationEnd);
|
||||
}
|
||||
|
@@ -61,20 +61,16 @@ function OnBarcodeScanned(barcode)
|
||||
Grocy.BarCodeScannerTestingMissCount++;
|
||||
bgClass = "bg-danger";
|
||||
|
||||
$("#miss-count").fadeOut(200, function ()
|
||||
{
|
||||
$(this).text(Grocy.BarCodeScannerTestingMissCount).fadeIn(200);
|
||||
});
|
||||
$("#miss-count").text(Grocy.BarCodeScannerTestingMissCount);
|
||||
animateCSS("#miss-count", "pulse");
|
||||
}
|
||||
else
|
||||
{
|
||||
Grocy.BarCodeScannerTestingHitCount++;
|
||||
bgClass = "bg-success";
|
||||
|
||||
$("#hit-count").fadeOut(200, function ()
|
||||
{
|
||||
$(this).text(Grocy.BarCodeScannerTestingHitCount).fadeIn(200);
|
||||
});
|
||||
$("#hit-count").text(Grocy.BarCodeScannerTestingHitCount);
|
||||
animateCSS("#hit-count", "pulse");
|
||||
}
|
||||
|
||||
$("#scanned_codes").prepend("<option class='" + bgClass + "'>" + barcode + "</option>");
|
||||
|
@@ -76,20 +76,13 @@ $(document).on('click', '.track-charge-cycle-button', function(e)
|
||||
batteryRow.addClass("table-warning");
|
||||
}
|
||||
|
||||
$('#battery-' + batteryId + '-last-tracked-time').parent().effect('highlight', { }, 500);
|
||||
$('#battery-' + batteryId + '-last-tracked-time').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(trackedTime).fadeIn(500);
|
||||
});
|
||||
$('#battery-' + batteryId + '-last-tracked-time-timeago').attr('datetime', trackedTime);
|
||||
animateCSS("#battery-" + batteryId + "-row td:not(:first)", "shake");
|
||||
|
||||
$('#battery-' + batteryId + '-last-tracked-time').text(trackedTime);
|
||||
$('#battery-' + batteryId + '-last-tracked-time-timeago').attr('datetime', trackedTime);
|
||||
if (result.battery.charge_interval_days != 0)
|
||||
{
|
||||
$('#battery-' + batteryId + '-next-charge-time').parent().effect('highlight', { }, 500);
|
||||
$('#battery-' + batteryId + '-next-charge-time').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(result.next_estimated_charge_time).fadeIn(500);
|
||||
});
|
||||
$('#battery-' + batteryId + '-next-charge-time').text(result.next_estimated_charge_time);
|
||||
$('#battery-' + batteryId + '-next-charge-time-timeago').attr('datetime', result.next_estimated_charge_time);
|
||||
}
|
||||
|
||||
|
@@ -113,30 +113,20 @@ $(document).on('click', '.track-chore-button', function(e)
|
||||
$('#chore-' + choreId + '-due-filter-column').html("duesoon");
|
||||
}
|
||||
|
||||
$('#chore-' + choreId + '-last-tracked-time').parent().effect('highlight', { }, 500);
|
||||
$('#chore-' + choreId + '-last-tracked-time').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(trackedTime).fadeIn(500);
|
||||
});
|
||||
animateCSS("#chore-" + choreId + "-row td:not(:first)", "shake");
|
||||
|
||||
$('#chore-' + choreId + '-last-tracked-time').text(trackedTime);
|
||||
$('#chore-' + choreId + '-last-tracked-time-timeago').attr('datetime', trackedTime);
|
||||
|
||||
if (result.chore.period_type == "dynamic-regular")
|
||||
{
|
||||
$('#chore-' + choreId + '-next-execution-time').parent().effect('highlight', { }, 500);
|
||||
$('#chore-' + choreId + '-next-execution-time').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(result.next_estimated_execution_time).fadeIn(500);
|
||||
});
|
||||
$('#chore-' + choreId + '-next-execution-time').text(result.next_estimated_execution_time);
|
||||
$('#chore-' + choreId + '-next-execution-time-timeago').attr('datetime', result.next_estimated_execution_time);
|
||||
}
|
||||
|
||||
if (result.chore.next_execution_assigned_to_user_id != null)
|
||||
{
|
||||
$('#chore-' + choreId + '-next-execution-assigned-user').parent().effect('highlight', {}, 500);
|
||||
$('#chore-' + choreId + '-next-execution-assigned-user').fadeOut(500, function ()
|
||||
{
|
||||
$(this).text(result.next_execution_assigned_user.display_name).fadeIn(500);
|
||||
});
|
||||
$('#chore-' + choreId + '-next-execution-assigned-user').text(result.next_execution_assigned_user.display_name);
|
||||
}
|
||||
|
||||
Grocy.FrontendHelpers.EndUiBusy();
|
||||
|
@@ -11,7 +11,7 @@ apiKeysTable.columns.adjust().draw();
|
||||
var createdApiKeyId = GetUriParam('CreatedApiKeyId');
|
||||
if (createdApiKeyId !== undefined)
|
||||
{
|
||||
$('#apiKeyRow_' + createdApiKeyId).effect('highlight', {}, 3000);
|
||||
animateCSS("#apiKeyRow_" + createdApiKeyId, "pulse");
|
||||
}
|
||||
|
||||
$("#search").on("keyup", Delay(function()
|
||||
|
@@ -3,12 +3,12 @@
|
||||
RefreshQuPluralTestingResult();
|
||||
});
|
||||
|
||||
$("#amount").keyup(function (event)
|
||||
$("#amount").keyup(function(event)
|
||||
{
|
||||
RefreshQuPluralTestingResult();
|
||||
});
|
||||
|
||||
$("#amount").change(function (event)
|
||||
$("#amount").change(function(event)
|
||||
{
|
||||
RefreshQuPluralTestingResult();
|
||||
});
|
||||
@@ -24,11 +24,8 @@ function RefreshQuPluralTestingResult()
|
||||
return;
|
||||
}
|
||||
|
||||
$("#result").parent().effect("highlight", {}, 100);
|
||||
$("#result").fadeOut(100, function ()
|
||||
{
|
||||
$(this).text(__n(amount, singularForm, pluralForm)).fadeIn(100);
|
||||
});
|
||||
animateCSS("h2", "shake");
|
||||
$("#result").text(__n(amount, singularForm, pluralForm));
|
||||
}
|
||||
|
||||
if (GetUriParam("qu") !== undefined)
|
||||
|
@@ -98,10 +98,10 @@ $(document).on('click', '.shoppinglist-delete-button', function(e)
|
||||
Grocy.Api.Delete('objects/shopping_list/' + shoppingListItemId, {},
|
||||
function(result)
|
||||
{
|
||||
$('#shoppinglistitem-' + shoppingListItemId + '-row').fadeOut(500, function()
|
||||
animateCSS("#shoppinglistitem-" + shoppingListItemId + "-row", "fadeOut", function()
|
||||
{
|
||||
Grocy.FrontendHelpers.EndUiBusy();
|
||||
$(this).remove();
|
||||
$("#shoppinglistitem-" + shoppingListItemId + "-row").remove();
|
||||
OnListItemRemoved();
|
||||
});
|
||||
},
|
||||
@@ -151,10 +151,10 @@ $(document).on('click', '#clear-shopping-list', function(e)
|
||||
Grocy.Api.Post('stock/shoppinglist/clear', { "list_id": $("#selected-shopping-list").val() },
|
||||
function(result)
|
||||
{
|
||||
$('#shoppinglist-table tbody tr').fadeOut(500, function()
|
||||
animateCSS("#shoppinglist-table tbody tr", "fadeOut", function()
|
||||
{
|
||||
Grocy.FrontendHelpers.EndUiBusy();
|
||||
$(this).remove();
|
||||
$("#shoppinglist-table tbody tr").remove();
|
||||
OnListItemRemoved();
|
||||
});
|
||||
},
|
||||
|
@@ -128,9 +128,9 @@ function RefreshStockEntryRow(stockRowId)
|
||||
|
||||
if (result == null || result.amount == 0)
|
||||
{
|
||||
stockRow.fadeOut(500, function()
|
||||
animateCSS("#stock-" + stockRowId + "-row", "fadeOut", function()
|
||||
{
|
||||
$(this).addClass("d-none");
|
||||
$("#stock-" + stockRowId + "-row").addClass("d-none");
|
||||
});
|
||||
}
|
||||
else
|
||||
@@ -153,20 +153,13 @@ function RefreshStockEntryRow(stockRowId)
|
||||
stockRow.addClass("table-warning");
|
||||
}
|
||||
|
||||
$('#stock-' + stockRowId + '-amount').parent().effect('highlight', { }, 500);
|
||||
$('#stock-' + stockRowId + '-amount').fadeOut(500, function ()
|
||||
{
|
||||
$(this).text(result.amount).fadeIn(500);
|
||||
});
|
||||
animateCSS("#stock-" + stockRowId + "-row td:not(:first)", "shake");
|
||||
|
||||
$('#stock-' + stockRowId + '-best-before-date').parent().effect('highlight', { }, 500);
|
||||
$('#stock-' + stockRowId + '-best-before-date').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(result.best_before_date).fadeIn(500);
|
||||
});
|
||||
$('#stock-' + stockRowId + '-amount').text(result.amount);
|
||||
$('#stock-' + stockRowId + '-best-before-date').text(result.best_before_date);
|
||||
$('#stock-' + stockRowId + '-best-before-date-timeago').attr('datetime', result.best_before_date + ' 23:59:59');
|
||||
|
||||
$(".stock-consume-button").attr('data-location-id',result.location_id);
|
||||
$(".stock-consume-button").attr('data-location-id', result.location_id);
|
||||
|
||||
var locationName = "";
|
||||
Grocy.Api.Get("objects/locations/" + result.location_id,
|
||||
@@ -179,39 +172,21 @@ function RefreshStockEntryRow(stockRowId)
|
||||
console.error(xhr);
|
||||
}
|
||||
);
|
||||
$('#stock-' + stockRowId + '-location').parent().effect('highlight', { }, 500);
|
||||
$('#stock-' + stockRowId + '-location').fadeOut(500, function()
|
||||
{
|
||||
$(this).attr('data-location-id',result.location_id);
|
||||
$(this).text(locationName).fadeIn(500);
|
||||
});
|
||||
|
||||
$('#stock-' + stockRowId + '-price').parent().effect('highlight', { }, 500);
|
||||
$('#stock-' + stockRowId + '-price').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(result.price).fadeIn(500);
|
||||
});
|
||||
|
||||
$('#stock-' + stockRowId + '-purchased-date').parent().effect('highlight', { }, 500);
|
||||
$('#stock-' + stockRowId + '-purchased-date').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(result.purchased_date).fadeIn(500);
|
||||
});
|
||||
$('#stock-' + stockRowId + '-location').attr('data-location-id', result.location_id);
|
||||
$('#stock-' + stockRowId + '-location').text(locationName);
|
||||
$('#stock-' + stockRowId + '-price').text(result.price);
|
||||
$('#stock-' + stockRowId + '-purchased-date').text(result.purchased_date);
|
||||
$('#stock-' + stockRowId + '-purchased-date-timeago').attr('datetime', result.purchased_date + ' 23:59:59');
|
||||
|
||||
$('#stock-' + stockRowId + '-opened-amount').parent().effect('highlight', {}, 500);
|
||||
$('#stock-' + stockRowId + '-opened-amount').fadeOut(500, function ()
|
||||
if (result.open == 1)
|
||||
{
|
||||
if (result.open == 1)
|
||||
{
|
||||
$(this).text(__t('Opened')).fadeIn(500);
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).text("").fadeIn(500);
|
||||
$(".product-open-button[data-stockrow-id='" + stockRowId + "']").removeClass("disabled");
|
||||
}
|
||||
});
|
||||
$('#stock-' + stockRowId + '-opened-amount').text(__t('Opened'));
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#stock-' + stockRowId + '-opened-amount').text("");
|
||||
$(".product-open-button[data-stockrow-id='" + stockRowId + "']").removeClass("disabled");
|
||||
}
|
||||
}
|
||||
|
||||
// Needs to be delayed because of the animation above the date-text would be wrong if fired immediately...
|
||||
|
@@ -42,7 +42,6 @@ $(document).on('click', '.undo-stock-booking-button', function(e)
|
||||
{
|
||||
e.preventDefault();
|
||||
|
||||
var element = $(e.currentTarget);
|
||||
var bookingId = $(e.currentTarget).attr('data-booking-id');
|
||||
var correlationId = $("#stock-booking-" + bookingId + "-row").attr("data-correlation-id");
|
||||
|
||||
|
@@ -230,42 +230,32 @@ function RefreshProductRow(productId)
|
||||
|
||||
if (result.stock_amount == 0 && result.product.min_stock_amount == 0)
|
||||
{
|
||||
$('#product-' + productId + '-row').fadeOut(500, function()
|
||||
animateCSS("#product-" + productId + "-row", "fadeOut", function()
|
||||
{
|
||||
$(this).tooltip("hide");
|
||||
$(this).addClass("d-none");
|
||||
$("#product-" + productId + "-row").tooltip("hide");
|
||||
$("#product-" + productId + "-row").addClass("d-none");
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
animateCSS("#product-" + productId + "-row td:not(:first)", "shake");
|
||||
|
||||
$('#product-' + productId + '-qu-name').text(__n(result.stock_amount, result.quantity_unit_stock.name, result.quantity_unit_stock.name_plural));
|
||||
$('#product-' + productId + '-amount').parent().effect('highlight', { }, 500);
|
||||
$('#product-' + productId + '-amount').fadeOut(500, function ()
|
||||
{
|
||||
$(this).text(result.stock_amount).fadeIn(500);
|
||||
});
|
||||
$('#product-' + productId + '-amount').text(result.stock_amount);
|
||||
$('#product-' + productId + '-consume-all-button').attr('data-consume-amount', result.stock_amount);
|
||||
|
||||
$('#product-' + productId + '-next-best-before-date').parent().effect('highlight', { }, 500);
|
||||
$('#product-' + productId + '-next-best-before-date').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(result.next_best_before_date).fadeIn(500);
|
||||
});
|
||||
$('#product-' + productId + '-next-best-before-date').text(result.next_best_before_date);
|
||||
$('#product-' + productId + '-next-best-before-date-timeago').attr('datetime', result.next_best_before_date);
|
||||
|
||||
var openedAmount = result.stock_amount_opened || 0;
|
||||
$('#product-' + productId + '-opened-amount').parent().effect('highlight', {}, 500);
|
||||
$('#product-' + productId + '-opened-amount').fadeOut(500, function ()
|
||||
if (openedAmount > 0)
|
||||
{
|
||||
if (openedAmount > 0)
|
||||
{
|
||||
$(this).text(__t('%s opened', openedAmount)).fadeIn(500);
|
||||
}
|
||||
else
|
||||
{
|
||||
$(this).text("").fadeIn(500);
|
||||
}
|
||||
});
|
||||
$('#product-' + productId + '-opened-amount').text(__t('%s opened', openedAmount));
|
||||
}
|
||||
else
|
||||
{
|
||||
$('#product-' + productId + '-opened-amount').text("");
|
||||
}
|
||||
|
||||
if (result.stock_amount == 0 && result.product.min_stock_amount > 0)
|
||||
{
|
||||
@@ -273,20 +263,12 @@ function RefreshProductRow(productId)
|
||||
}
|
||||
}
|
||||
|
||||
$('#product-' + productId + '-next-best-before-date').parent().effect('highlight', {}, 500);
|
||||
$('#product-' + productId + '-next-best-before-date').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(result.next_best_before_date).fadeIn(500);
|
||||
});
|
||||
$('#product-' + productId + '-next-best-before-date').text(result.next_best_before_date);
|
||||
$('#product-' + productId + '-next-best-before-date-timeago').attr('datetime', result.next_best_before_date + ' 23:59:59');
|
||||
|
||||
if (result.stock_amount_opened > 0)
|
||||
{
|
||||
$('#product-' + productId + '-opened-amount').parent().effect('highlight', {}, 500);
|
||||
$('#product-' + productId + '-opened-amount').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(__t('%s opened', result.stock_amount_opened)).fadeIn(500);
|
||||
});
|
||||
$('#product-' + productId + '-opened-amount').text(__t('%s opened', result.stock_amount_opened));
|
||||
}
|
||||
else
|
||||
{
|
||||
@@ -295,18 +277,11 @@ function RefreshProductRow(productId)
|
||||
|
||||
if (parseInt(result.is_aggregated_amount) === 1)
|
||||
{
|
||||
$('#product-' + productId + '-amount-aggregated').fadeOut(500, function()
|
||||
{
|
||||
$(this).text(result.stock_amount_aggregated).fadeIn(500);
|
||||
});
|
||||
$('#product-' + productId + '-amount-aggregated').text(result.stock_amount_aggregated);
|
||||
|
||||
if (result.stock_amount_opened_aggregated > 0)
|
||||
{
|
||||
$('#product-' + productId + '-opened-amount-aggregated').parent().effect('highlight', {}, 500);
|
||||
$('#product-' + productId + '-opened-amount-aggregated').fadeOut(500, function ()
|
||||
{
|
||||
$(this).text(__t('%s opened', result.stock_amount_opened_aggregated)).fadeIn(500);
|
||||
});
|
||||
$('#product-' + productId + '-opened-amount-aggregated').text(__t('%s opened', result.stock_amount_opened_aggregated));
|
||||
}
|
||||
else
|
||||
{
|
||||
|
@@ -63,10 +63,10 @@ $(document).on('click', '.do-task-button', function(e)
|
||||
{
|
||||
if (!$("#show-done-tasks").is(":checked"))
|
||||
{
|
||||
$('#task-' + taskId + '-row').fadeOut(500, function ()
|
||||
animateCSS("#task-" + taskId + "-row", "fadeOut", function()
|
||||
{
|
||||
$(this).tooltip("hide");
|
||||
$(this).remove();
|
||||
$("#task-" + taskId + "-row").tooltip("hide");
|
||||
$("#task-" + taskId + "-row").remove();
|
||||
});
|
||||
}
|
||||
else
|
||||
@@ -142,10 +142,10 @@ $(document).on('click', '.delete-task-button', function (e)
|
||||
Grocy.Api.Delete('objects/tasks/' + objectId, {},
|
||||
function(result)
|
||||
{
|
||||
$('#task-' + objectId + '-row').fadeOut(500, function ()
|
||||
animateCSS("#task-" + objectId + "-row", "fadeOut", function()
|
||||
{
|
||||
$(this).tooltip("hide");
|
||||
$(this).remove();
|
||||
$("#task-" + objectId + "-row").tooltip("hide");
|
||||
$("#task-" + objectId + "-row").remove();
|
||||
});
|
||||
},
|
||||
function(xhr)
|
||||
|
Reference in New Issue
Block a user