From 979c67b44c1f134b354e37fd564f274a70cc4c6c Mon Sep 17 00:00:00 2001 From: Bernd Bestel Date: Sun, 21 May 2023 18:01:47 +0200 Subject: [PATCH] Various JS optimizations --- package.json | 1 - public/js/grocy.js | 33 +++------------------ public/js/grocy_datatables.js | 1 - public/js/grocy_summernote.js | 9 +++++- public/viewjs/components/userfieldsform.js | 2 -- public/viewjs/mealplan.js | 7 ++--- public/viewjs/products.js | 1 - public/viewjs/quantityunitform.js | 2 +- public/viewjs/recipeform.js | 4 +-- public/viewjs/recipes.js | 7 ++--- public/viewjs/stockoverview.js | 1 - views/batteryform.blade.php | 3 +- views/choreform.blade.php | 3 +- views/components/productcard.blade.php | 9 ++++-- views/components/userfields_tbody.blade.php | 4 +-- views/components/userfieldsform.blade.php | 4 +-- views/layout/default.blade.php | 9 +++--- views/productform.blade.php | 8 +++-- views/products.blade.php | 4 +-- views/recipeform.blade.php | 8 +++-- views/recipes.blade.php | 10 ++++--- views/shoppinglist.blade.php | 3 +- views/stockoverview.blade.php | 4 +-- views/userform.blade.php | 5 ++-- yarn.lock | 9 +----- 25 files changed, 64 insertions(+), 87 deletions(-) diff --git a/package.json b/package.json index ef6fbc2d..466b2dd1 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,6 @@ "fullcalendar": "^3.10.1", "gettext-translator": "3.0.1", "jquery": "^3.6.0", - "jquery-lazy": "^1.7.11", "jquery-serializejson": "^2.9.0", "moment": "^2.27.0", "nosleep.js": "^0.12.0", diff --git a/public/js/grocy.js b/public/js/grocy.js index 336ace74..6e74c65d 100644 --- a/public/js/grocy.js +++ b/public/js/grocy.js @@ -583,15 +583,6 @@ if (window.location.hash) $(window.location.hash).addClass("p-2 border border-info rounded"); } -$("#about-dialog-link").on("click", function() -{ - bootbox.alert({ - message: '', - closeButton: false, - size: "large" - }); -}); - function RefreshLocaleNumberDisplay(rootSelector = "#page-content") { $(rootSelector + " .locale-number.locale-number-currency").each(function() @@ -674,22 +665,6 @@ $(document).on("click", ".easy-link-copy-textbox", function() $(this).select(); }); -// Summernote workaround: Make embeds responsive -// By wrapping any embeded video in a container with class "embed-responsive" -$(".note-video-clip").each(function() -{ - $(this).parent().html('
' + $(this).wrap("

").parent().html() + "

"); -}); - -function LoadImagesLazy() -{ - $(".lazy:visible").Lazy({ - enableThrottle: true, - throttle: 500 - }); -} -LoadImagesLazy(); - if (Grocy.CalendarFirstDayOfWeek) { moment.updateLocale(moment.locale(), { @@ -720,7 +695,7 @@ $(document).on("click", ".show-as-dialog-link", function(e) var link = $(e.currentTarget).attr("href"); bootbox.dialog({ - message: '', + message: '', size: 'large', backdrop: true, closeButton: false, @@ -738,7 +713,7 @@ $(document).on("click", ".show-as-dialog-link", function(e) }); // Init Bootstrap tooltips -$('[data-toggle="tooltip"]').tooltip() +$('[data-toggle="tooltip"]').tooltip(); // serializeJSON defaults $.serializeJSON.defaultOptions.checkboxUncheckedValue = "0"; @@ -750,6 +725,7 @@ $(Grocy.UserPermissions).each(function(index, item) $('.permission-' + item.permission_name).addClass('disabled').addClass('not-allowed'); } }); + $('a.link-return').not(".btn").each(function() { var base = $(this).data('href'); @@ -762,8 +738,7 @@ $('a.link-return').not(".btn").each(function() $(this).attr('href', base + '?returnto=' + encodeURIComponent(Grocy.CurrentUrlRelative)); } -}) - +}); $(document).on("click", "a.btn.link-return", function(e) { e.preventDefault(); diff --git a/public/js/grocy_datatables.js b/public/js/grocy_datatables.js index d44c9207..9271bc9d 100644 --- a/public/js/grocy_datatables.js +++ b/public/js/grocy_datatables.js @@ -324,7 +324,6 @@ $(document).on("click", ".change-table-columns-visibility-toggle", function() var dataTable = $(dataTableSelector).DataTable(); dataTable.columns(columnIndex).visible(this.checked); - LoadImagesLazy(); }); diff --git a/public/js/grocy_summernote.js b/public/js/grocy_summernote.js index 3c8bf152..51d10925 100644 --- a/public/js/grocy_summernote.js +++ b/public/js/grocy_summernote.js @@ -6,8 +6,15 @@ $("textarea.wysiwyg-editor").summernote({ { // Summernote workaround: Make images responsive // By adding the "img-fluid" class to the img tag - $img = $('').attr({ src: url, class: "img-fluid" }) + $img = $('').attr({ src: url, class: "img-fluid", loading: "lazy" }) $(this).summernote("insertNode", $img[0]); } } }); + +// Summernote workaround: Make embeds responsive +// By wrapping any embeded video in a container with class "embed-responsive" +$(".note-video-clip").each(function() +{ + $(this).parent().html('
' + $(this).wrap("

").parent().html() + "

"); +}); diff --git a/public/viewjs/components/userfieldsform.js b/public/viewjs/components/userfieldsform.js index 11180a17..4ab8c36b 100644 --- a/public/viewjs/components/userfieldsform.js +++ b/public/viewjs/components/userfieldsform.js @@ -159,7 +159,6 @@ Grocy.Components.UserfieldsForm.Load = function() formGroup.find('.userfield-file-show').removeClass('d-none'); formGroup.find('img.userfield-current-file') .attr('src', U('/files/userfiles/' + value + '?force_serve_as=picture&best_fit_width=250&best_fit_height=250')); - LoadImagesLazy(); formGroup.find('.userfield-file-delete').click( function() @@ -240,7 +239,6 @@ Grocy.Components.UserfieldsForm.Clear = function() formGroup.find('.userfield-file-show').removeClass('d-none'); formGroup.find('img.userfield-current-file') .attr('src', U('/files/userfiles/' + value + '?force_serve_as=picture&best_fit_width=250&best_fit_height=250')); - LoadImagesLazy(); formGroup.find('.userfield-file-delete').click( function() diff --git a/public/viewjs/mealplan.js b/public/viewjs/mealplan.js index 4e4b3ef0..4fc6fa9f 100644 --- a/public/viewjs/mealplan.js +++ b/public/viewjs/mealplan.js @@ -208,7 +208,7 @@ $(".calendar").each(function() if (recipe.picture_file_name) { - element.prepend('
') + element.prepend('
') } } else if (event.type == "product") @@ -279,7 +279,7 @@ $(".calendar").each(function() if (productDetails.product.picture_file_name) { - element.prepend('
') + element.prepend('
') } } else if (event.type == "note") @@ -352,7 +352,6 @@ $(".calendar").each(function() }); RefreshLocaleNumberDisplay(); - LoadImagesLazy(); $('[data-toggle="tooltip"]').tooltip(); if (!Grocy.FeatureFlags.GROCY_FEATURE_FLAG_STOCK) @@ -929,7 +928,7 @@ $(document).on("click", ".display-recipe-button", function(e) function(result) { bootbox.dialog({ - message: '', + message: '', size: 'extra-large', backdrop: true, closeButton: false, diff --git a/public/viewjs/products.js b/public/viewjs/products.js index c2f7b736..7f87be52 100644 --- a/public/viewjs/products.js +++ b/public/viewjs/products.js @@ -10,7 +10,6 @@ }); $('#products-table tbody').removeClass("d-none"); productsTable.columns.adjust().draw(); -LoadImagesLazy(); $("#search").on("keyup", Delay(function() { diff --git a/public/viewjs/quantityunitform.js b/public/viewjs/quantityunitform.js index 366030bd..08b6ebc7 100644 --- a/public/viewjs/quantityunitform.js +++ b/public/viewjs/quantityunitform.js @@ -198,7 +198,7 @@ $("#test-quantityunit-plural-forms-button").on("click", function(e) $("#save-quantityunit-button").click(); bootbox.alert({ - message: '', + message: '', closeButton: false, size: "large", callback: function(result) diff --git a/public/viewjs/recipeform.js b/public/viewjs/recipeform.js index 2c128404..383f182e 100644 --- a/public/viewjs/recipeform.js +++ b/public/viewjs/recipeform.js @@ -220,7 +220,7 @@ $(document).on('click', '.recipe-pos-edit-button', function(e) var recipePosId = $(e.currentTarget).attr('data-recipe-pos-id'); bootbox.dialog({ - message: '', + message: '', size: 'large', backdrop: true, closeButton: false, @@ -266,7 +266,7 @@ $("#recipe-pos-add-button").on("click", function(e) e.preventDefault(); bootbox.dialog({ - message: '', + message: '', size: 'large', backdrop: true, closeButton: false, diff --git a/public/viewjs/recipes.js b/public/viewjs/recipes.js index 0bde02e2..12358e8c 100644 --- a/public/viewjs/recipes.js +++ b/public/viewjs/recipes.js @@ -63,7 +63,6 @@ $("a[data-toggle='tab']").on("shown.bs.tab", function(e) { var tabId = $(e.target).attr("id"); window.localStorage.setItem("recipes_last_tab_id", tabId); - LoadImagesLazy(); }); $("#search").on("keyup", Delay(function() @@ -293,7 +292,7 @@ recipesTables.on('select', function(e, dt, type, indexes) else { bootbox.dialog({ - message: '', + message: '', size: 'extra-large', backdrop: true, closeButton: false, @@ -325,7 +324,7 @@ $(".recipe-gallery-item").on("click", function(e) else { bootbox.dialog({ - message: '', + message: '', size: 'extra-large', backdrop: true, closeButton: false, @@ -419,8 +418,6 @@ if (window.location.hash === "#fullscreen") $("#selectedRecipeToggleFullscreenButton").click(); } -LoadImagesLazy(); - $(document).on('click', '.recipe-grocycode-label-print', function(e) { e.preventDefault(); diff --git a/public/viewjs/stockoverview.js b/public/viewjs/stockoverview.js index ef3385ba..8ebd0d8b 100755 --- a/public/viewjs/stockoverview.js +++ b/public/viewjs/stockoverview.js @@ -35,7 +35,6 @@ var stockOverviewTable = $('#stock-overview-table').DataTable({ $('#stock-overview-table tbody').removeClass("d-none"); stockOverviewTable.columns.adjust().draw(); -LoadImagesLazy(); $("#location-filter").on("change", function() { diff --git a/views/batteryform.blade.php b/views/batteryform.blade.php index 37accd6b..4bf2922f 100644 --- a/views/batteryform.blade.php +++ b/views/batteryform.blade.php @@ -108,7 +108,8 @@

@if($mode == 'edit') + class="float-lg-left" + loading="lazy"> @endif

diff --git a/views/choreform.blade.php b/views/choreform.blade.php index 32801074..16526b49 100644 --- a/views/choreform.blade.php +++ b/views/choreform.blade.php @@ -323,7 +323,8 @@

@if($mode == 'edit') + class="float-lg-left" + loading="lazy"> @endif

diff --git a/views/components/productcard.blade.php b/views/components/productcard.blade.php index 2e3ae266..3f2f5c12 100644 --- a/views/components/productcard.blade.php +++ b/views/components/productcard.blade.php @@ -79,9 +79,12 @@ @if(GROCY_FEATURE_FLAG_STOCK_BEST_BEFORE_DATE_TRACKING){{ $__t('Average shelf life') }}:
@endif {{ $__t('Spoil rate') }}: -

+

+ +

@if(GROCY_FEATURE_FLAG_STOCK_PRICE_TRACKING)
{{ $__t('Price history') }}
diff --git a/views/components/userfields_tbody.blade.php b/views/components/userfields_tbody.blade.php index b1261e4d..4db0503c 100644 --- a/views/components/userfields_tbody.blade.php +++ b/views/components/userfields_tbody.blade.php @@ -44,9 +44,9 @@ $excludeFieldTypes = []; {{ base64_decode(explode('_', $userfieldObject->value)[1]) }} + alt="{{ base64_decode(explode('_', $userfieldObject->value)[1]) }}" + loading="lazy"> @else {{ $userfieldObject->value }} diff --git a/views/components/userfieldsform.blade.php b/views/components/userfieldsform.blade.php index 327dd5d2..6b04f462 100644 --- a/views/components/userfieldsform.blade.php +++ b/views/components/userfieldsform.blade.php @@ -203,8 +203,8 @@ {{ $userfield->name }} + class="userfield-current-file userfield-file-show d-none mt-1 discrete-link" + loading="lazy" /> @endif diff --git a/views/layout/default.blade.php b/views/layout/default.blade.php index 8aeddc74..ff1dd224 100644 --- a/views/layout/default.blade.php +++ b/views/layout/default.blade.php @@ -466,7 +466,8 @@ @else + src="{{ $U('/files/userpictures/' . base64_encode(GROCY_USER_PICTURE_FILE_NAME) . '_' . base64_encode(GROCY_USER_PICTURE_FILE_NAME) . '?force_serve_as=picture&best_fit_width=32&best_fit_height=32') }}" + loading="lazy"> @endif {{ GROCY_USER_USERNAME }} @@ -666,9 +667,8 @@  {{ $__t('Barcode scanner testing') }}
-  {{ $__t('About Grocy') }} +  {{ $__t('About Grocy') }} @@ -696,7 +696,6 @@ - @if(in_array('bootstrap-combobox', $GROCY_REQUIRED_FRONTEND_PACKAGES)) diff --git a/views/productform.blade.php b/views/productform.blade.php index d5cd685f..695c1939 100644 --- a/views/productform.blade.php +++ b/views/productform.blade.php @@ -738,7 +738,8 @@

@if($mode == 'edit') + class="float-lg-left" + loading="lazy"> @endif

@@ -869,8 +870,9 @@ @if($mode == "edit" && !empty($product->picture_file_name)) + src="{{ $U('/api/files/productpictures/' . base64_encode($product->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" + class="img-fluid img-thumbnail mt-2 mb-5" + loading="lazy">

{{ $__t('The current picture will be deleted on save') }}

@else diff --git a/views/products.blade.php b/views/products.blade.php index 2fd9f56e..30f4ccbc 100644 --- a/views/products.blade.php +++ b/views/products.blade.php @@ -212,8 +212,8 @@ @endif - + @include('components.userfields_tbody', array( diff --git a/views/recipeform.blade.php b/views/recipeform.blade.php index 3b093ed6..f1995e4d 100644 --- a/views/recipeform.blade.php +++ b/views/recipeform.blade.php @@ -326,8 +326,9 @@ @if(!empty($recipe->picture_file_name)) + src="{{ $U('/api/files/recipepictures/' . base64_encode($recipe->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" + class="img-fluid img-thumbnail mt-2 mb-5" + loading="lazy">

{{ $__t('The current picture will be deleted on save') }}

@else @@ -350,7 +351,8 @@

@if($mode == 'edit') + class="float-lg-left" + loading="lazy"> @endif

diff --git a/views/recipes.blade.php b/views/recipes.blade.php index 59dea8c1..ad82d44b 100644 --- a/views/recipes.blade.php +++ b/views/recipes.blade.php @@ -257,8 +257,9 @@

@if(!empty($recipe->picture_file_name)) - + @endif
{{ $recipe->name }}
@@ -323,8 +324,9 @@ id="recipe-{{ $index + 1 }}" role="tabpanel"> @if(!empty($recipe->picture_file_name)) - + @endif
diff --git a/views/shoppinglist.blade.php b/views/shoppinglist.blade.php index b83e3e5b..d7ee0249 100644 --- a/views/shoppinglist.blade.php +++ b/views/shoppinglist.blade.php @@ -322,7 +322,8 @@
+ src="" + loading="lazy">
@if(!empty($currentStockEntry->product_picture_file_name)) - + @endif diff --git a/views/userform.blade.php b/views/userform.blade.php index be360b88..4f8e71be 100644 --- a/views/userform.blade.php +++ b/views/userform.blade.php @@ -159,8 +159,9 @@
@if(!empty($user->picture_file_name)) + src="{{ $U('/api/files/userpictures/' . base64_encode($user->picture_file_name) . '?force_serve_as=picture&best_fit_width=400') }}" + class="img-fluid img-thumbnail mt-2 mb-5" + loading="lazy">

{{ $__t('The current picture will be deleted on save') }}

@else diff --git a/yarn.lock b/yarn.lock index d8c68581..448bbbf6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1156,19 +1156,12 @@ jpeg-js@^0.4.1: resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa" integrity sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg== -jquery-lazy@^1.7.11: - version "1.7.11" - resolved "https://registry.yarnpkg.com/jquery-lazy/-/jquery-lazy-1.7.11.tgz#f4146501ba64cad95cc5c20f184ac1b1d3712fe5" - integrity sha512-jNAOMwfgf+lYaOCc/atBVjbOzAIRW5BUyjQ4b4jJPkQM6I0zGZd4m/Y73ekfAlrQQDg3/Dge3YNhW7Cqjgi0UA== - dependencies: - jquery ">=1.7.2" - jquery-serializejson@^2.9.0: version "2.9.0" resolved "https://registry.yarnpkg.com/jquery-serializejson/-/jquery-serializejson-2.9.0.tgz#03e3764e3a4b42c1c5aae9f93d7f19320c5f35a6" integrity sha512-xR7rjl0tRKIVioV5lOkOSv7K8BHMvGzYzC7Ech1iAYuZiYf0ksEpLC8OqjA5VApXf/qn/49O9hTmW70+/EA0vA== -jquery@>=1.10, jquery@>=1.12.0, jquery@>=1.7, jquery@>=1.7.2, jquery@^3.6.0: +jquery@>=1.10, jquery@>=1.12.0, jquery@>=1.7, jquery@^3.6.0: version "3.7.0" resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.7.0.tgz#fe2c01a05da500709006d8790fe21c8a39d75612" integrity sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==