Replaced jQuery UI by Animate.css (better, faster, lighter)

This commit is contained in:
Bernd Bestel
2020-01-28 19:27:18 +01:00
parent 6f549bdf3a
commit 8d490351d0
23 changed files with 109 additions and 158 deletions

View File

@@ -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);
}

View File

@@ -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>");

View File

@@ -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);
}

View File

@@ -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();

View File

@@ -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()

View File

@@ -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)

View File

@@ -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();
});
},

View File

@@ -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...

View File

@@ -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");

View File

@@ -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
{

View File

@@ -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)