From 85d07640167decdff2f2510737e5587906dd0465 Mon Sep 17 00:00:00 2001 From: danis Date: Thu, 25 Apr 2024 20:15:41 +0300 Subject: [PATCH 1/7] feat: reusability for toggle settings --- OpenFoodFactsPower.user.js | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/OpenFoodFactsPower.user.js b/OpenFoodFactsPower.user.js index 858511c..c1b1f1f 100644 --- a/OpenFoodFactsPower.user.js +++ b/OpenFoodFactsPower.user.js @@ -1185,6 +1185,7 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert
    • +
  • (Shift+L): List edit mode
  • (Shift+b): Show/hide barcodes
    • @@ -1198,13 +1199,15 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert $("#pwe_help").click(function(){ togglePowerUserInfo(listhelp); toggleIngredientsMonospace(); - toggleAlwaysShowBarcodes(); + toggleASetting('pus-always-show-barcode',toggleListBarcodes); + toggleASetting('pus-quick-categories',null); }); // detect product codes and add them as attributes addCodesToProductList(); showListButtons(); - loadAlwaysShowBarcodesFromStorage(); + loadASettingFromStorage('pus-always-show-barcode',toggleListBarcodes); + loadASettingFromStorage('pus-quick-categories',null); // Show an easier to read number of products /* @@ -1882,25 +1885,27 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert }); } - function toggleAlwaysShowBarcodes(){ - if(getLocalStorage("pus-always-show-barcode") === "always"){ - $('#pus-always-show-barcode').prop("checked", true); + //reusable function that can be used for toggleable setting such as "always show barcodes". + function toggleASetting(checkboxId, functionToCall){ + if(getLocalStorage(checkboxId) === "enabled"){ + $('#'+checkboxId).prop("checked", true); } - $('#pus-always-show-barcode').change(function() { + $('#'+checkboxId).change(function() { if(this.checked){ - localStorage.setItem('pus-always-show-barcode', "always"); + localStorage.setItem(checkboxId, "enabled"); }else{ - localStorage.setItem('pus-always-show-barcode', "never"); + localStorage.setItem(checkboxId, "disabled"); } - toggleListBarcodes(); + functionToCall(); }); } - function loadAlwaysShowBarcodesFromStorage(){ + //loadAlwaysShowBarcodesFromStorage + function loadASettingFromStorage(checkboxId, functionToCall){ $( window ).on( "load", function() { - if(getLocalStorage("pus-always-show-barcode") === "always"){ - toggleListBarcodes(); + if(getLocalStorage(checkboxId) === "enabled"){ + functionToCall(); } }); } From 3ecbce72c443dbc392904acedc10e2e3c7a1407a Mon Sep 17 00:00:00 2001 From: danis Date: Thu, 25 Apr 2024 21:46:20 +0300 Subject: [PATCH 2/7] show/hide rotate, hunger games logo search buttons --- OpenFoodFactsPower.user.js | 214 ++++++++++++++++++++++--------------- 1 file changed, 130 insertions(+), 84 deletions(-) diff --git a/OpenFoodFactsPower.user.js b/OpenFoodFactsPower.user.js index c1b1f1f..09714fd 100644 --- a/OpenFoodFactsPower.user.js +++ b/OpenFoodFactsPower.user.js @@ -1185,6 +1185,8 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert
    • +
    • +
  • (Shift+L): List edit mode
    • @@ -1200,13 +1202,17 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert togglePowerUserInfo(listhelp); toggleIngredientsMonospace(); toggleASetting('pus-always-show-barcode',toggleListBarcodes); + toggleASetting('pus-rotation-buttons',toggleRotationButtons); + toggleASetting('pus-hunger-games-logo-search',toggleHungerGamesButton); toggleASetting('pus-quick-categories',null); }); // detect product codes and add them as attributes addCodesToProductList(); - showListButtons(); + showListButtonsByDefault(); loadASettingFromStorage('pus-always-show-barcode',toggleListBarcodes); + loadASettingFromStorage('pus-rotation-buttons',toggleRotationButtons); + loadASettingFromStorage('pus-hunger-games-logo-search',toggleHungerGamesButton); loadASettingFromStorage('pus-quick-categories',null); // Show an easier to read number of products @@ -1885,8 +1891,8 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert }); } - //reusable function that can be used for toggleable setting such as "always show barcodes". - function toggleASetting(checkboxId, functionToCall){ + //2 reusable functions that can be used for toggleable setting such as "always show barcodes". + function toggleASetting(checkboxId, toggleFunctionToCall){ if(getLocalStorage(checkboxId) === "enabled"){ $('#'+checkboxId).prop("checked", true); } @@ -1897,20 +1903,137 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert }else{ localStorage.setItem(checkboxId, "disabled"); } - functionToCall(); + toggleFunctionToCall(); }); } - //loadAlwaysShowBarcodesFromStorage - function loadASettingFromStorage(checkboxId, functionToCall){ + function loadASettingFromStorage(checkboxId, toggleFunctionToCall){ $( window ).on( "load", function() { if(getLocalStorage(checkboxId) === "enabled"){ - functionToCall(); + toggleFunctionToCall(); } }); } + function toggleHungerGamesButton(){ + if($("a.list_hunger_games_logo_search").length){ + $("a.list_hunger_games_logo_search").remove(); + }else{ + showListHungerGamesButtons(); + } + } + + /** + * Show/hide rotation icons in list view + */ + function toggleRotationButtons(){ + if($("a.list_rotate_image_270").length){ + hideRotationButtons(); + }else{ + showListRotateButtons(); + } + } + + function hideRotationButtons(){ + $("a.list_rotate_image_270").remove(); + $("a.list_rotate_image_180").remove(); + $("a.list_rotate_image_90").remove(); + } + + function showListButtonsByDefault(){ + if(!getLocalStorage('pus-rotation-buttons')){ + localStorage.setItem('pus-rotation-buttons', "enabled"); + } + if(!getLocalStorage('pus-hunger-games-logo-search')){ + localStorage.setItem('pus-hunger-games-logo-search', "enabled"); + } + } + + //shows HungerGames logo + function showListHungerGamesButtons(){ + $("ul[id^='products_'].search_results li[data-code]").each(function(index, element) { + let barcode = $(this).attr('data-code'); + $(this).append('image_search'); + }); + } + + function showListRotateButtons(){ + let languageCode = getSubdomainLanguageCode(); + + $("ul[id^='products_'].search_results li[data-code]").each(function(index, element) { + let barcode = $(this).attr('data-code'); + $(this).append('redo'); + $(this).append('rotate_right'); + $(this).append('redo'); + + var image_reference = $(".list_product_img", $(this)); + $(".list_rotate_image_270",$(this)).on("click", function(){ + getFrontImagesToRotate(270,barcode,languageCode); + image_reference.css('transform', 'rotate(270deg)'); + }); + + $(".list_rotate_image_180",$(this)).on("click", function(){ + getFrontImagesToRotate(180,barcode,languageCode); + image_reference.css('transform', 'rotate(180deg)'); + }); + + $(".list_rotate_image_90",$(this)).on("click", function(){ + getFrontImagesToRotate(90,barcode,languageCode); + image_reference.css('transform', 'rotate(90deg)'); + }); + }); + } + + //if 'ru-en'->ru while $("html").attr('lang'); returns en + function getSubdomainLanguageCode(){ + var subdomain = window.location.href.split('.')[0].split('//')[1]; + if(subdomain === 'world'){ return 'en';} + if(subdomain.length === 2){ return subdomain;} + + return subdomain.split('-')[0]; + } + + /*gets all the front_lc images available and then compares it to the subdomain. + For example if you are on ru.openfoodfacts and a product only has front_en then that picture will be rotated + instead of creating a new rotated front_ru */ + function getFrontImagesToRotate(angle,barcode,languageCode){ + var _productUrl = "/api/v2/product/" + barcode + ".json?fields=images"; + $.getJSON(_productUrl,function(productData){ + let productImages = productData.product.images; + var frontImages = []; + if(productImages){ + $.each(productImages,function(key,value){ + let startsWithFront = key.toString().startsWith('front'); + if(startsWithFront){ + frontImages.push(key); + } + }); + if(frontImages.length>0){ + let includesLanguageCode = frontImages.includes("front_"+languageCode); + var front_lc = frontImages[0]; + + if(includesLanguageCode){ + front_lc = "front_"+languageCode; + } + + let image_id = productImages[front_lc].imgid; + //let angle = productImages[front_lc].angle; + rotateImage(angle,barcode,front_lc,image_id); + } + + } + }); + } + + function rotateImage(angle,barcode,front_lc,image_id){ + var _url = "/cgi/product_image_crop.pl?code=" + barcode + "&id="+front_lc+"&imgid="+image_id+"&angle="+angle; + $.getJSON(_url, function(data) { + log("rotate status:" +data.status); + }); + } + + /** * Show/hide a graphical barcode on the product view */ @@ -2011,83 +2134,6 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert $('ul[id^="products_"].search_results .with_barcode').removeClass('with_barcode'); } - //shows HungerGames logo, rotate buttons - function showListButtons(){ - let languageCode = getSubdomainLanguageCode(); - - $("ul[id^='products_'].search_results li[data-code]").each(function(index, element) { - let barcode = $(this).attr('data-code'); - $(this).append('image_search'); - $(this).append('redo'); - $(this).append('rotate_right'); - $(this).append('redo'); - - var image_reference = $(".list_product_img", $(this)); - $(".list_rotate_image_270",$(this)).on("click", function(){ - getFrontImagesToRotate(270,barcode,languageCode); - image_reference.css('transform', 'rotate(270deg)'); - }); - - $(".list_rotate_image_180",$(this)).on("click", function(){ - getFrontImagesToRotate(180,barcode,languageCode); - image_reference.css('transform', 'rotate(180deg)'); - }); - - $(".list_rotate_image_90",$(this)).on("click", function(){ - getFrontImagesToRotate(90,barcode,languageCode); - image_reference.css('transform', 'rotate(90deg)'); - }); - }); - } - - //if 'ru-en'->ru while $("html").attr('lang'); returns en - function getSubdomainLanguageCode(){ - var subdomain = window.location.href.split('.')[0].split('//')[1]; - if(subdomain === 'world'){ return 'en';} - if(subdomain.length === 2){ return subdomain;} - - return subdomain.split('-')[0]; - } - - /*gets all the front_lc images available and then compares it to the subdomain. - For example if you are on ru.openfoodfacts and a product only has front_en then that picture will be rotated - instead of creating a new rotated front_ru */ - function getFrontImagesToRotate(angle,barcode,languageCode){ - var _productUrl = "/api/v2/product/" + barcode + ".json?fields=images"; - $.getJSON(_productUrl,function(productData){ - let productImages = productData.product.images; - var frontImages = []; - if(productImages){ - $.each(productImages,function(key,value){ - let startsWithFront = key.toString().startsWith('front'); - if(startsWithFront){ - frontImages.push(key); - } - }); - if(frontImages.length>0){ - let includesLanguageCode = frontImages.includes("front_"+languageCode); - var front_lc = frontImages[0]; - - if(includesLanguageCode){ - front_lc = "front_"+languageCode; - } - - let image_id = productImages[front_lc].imgid; - //let angle = productImages[front_lc].angle; - rotateImage(angle,barcode,front_lc,image_id); - } - - } - }); - } - - function rotateImage(angle,barcode,front_lc,image_id){ - var _url = "/cgi/product_image_crop.pl?code=" + barcode + "&id="+front_lc+"&imgid="+image_id+"&angle="+angle; - $.getJSON(_url, function(data) { - log("rotate status:" +data.status); - }); - } - /** * The product list view has no easy way to get the barcode for each entry, * so detect them from the link, and add an attribute to the LI tag recording the barcode for later use. From 32a3abee6bb51a1985b0d0c1109e8d89572c4207 Mon Sep 17 00:00:00 2001 From: danis Date: Thu, 25 Apr 2024 22:12:46 +0300 Subject: [PATCH 3/7] reduced list icon sizes --- OpenFoodFactsPower.user.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/OpenFoodFactsPower.user.js b/OpenFoodFactsPower.user.js index c6ff3f3..d7314a4 100644 --- a/OpenFoodFactsPower.user.js +++ b/OpenFoodFactsPower.user.js @@ -423,6 +423,10 @@ input.show_comparison { border-radius: 0 10px 10px 0; z-index: 200; } +/* --------------- List buttons size --------------- */ +#list_button { + font-size: 20px; +} /* --------------- Hunger games logo search button --------------- */ .list_hunger_games_logo_search { @@ -1956,7 +1960,7 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert function showListHungerGamesButtons(){ $("ul[id^='products_'].search_results li[data-code]").each(function(index, element) { let barcode = $(this).attr('data-code'); - $(this).append('image_search'); + $(this).append('image_search'); }); } @@ -1965,9 +1969,9 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert $("ul[id^='products_'].search_results li[data-code]").each(function(index, element) { let barcode = $(this).attr('data-code'); - $(this).append('redo'); - $(this).append('rotate_right'); - $(this).append('redo'); + $(this).append('redo'); + $(this).append('rotate_right'); + $(this).append('redo'); var image_reference = $(".list_product_img", $(this)); $(".list_rotate_image_270",$(this)).on("click", function(){ From f52f5f73acfd2b29520d6d35a9c536cac8ff32a7 Mon Sep 17 00:00:00 2001 From: danis Date: Fri, 26 Apr 2024 06:14:09 +0300 Subject: [PATCH 4/7] bugfix: PUS buttons disappear when switch is used --- OpenFoodFactsPower.user.js | 33 ++++++++++++++++++++++++--------- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/OpenFoodFactsPower.user.js b/OpenFoodFactsPower.user.js index d7314a4..ddc5e32 100644 --- a/OpenFoodFactsPower.user.js +++ b/OpenFoodFactsPower.user.js @@ -1216,10 +1216,14 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert // detect product codes and add them as attributes addCodesToProductList(); showListButtonsByDefault(); - loadASettingFromStorage('pus-always-show-barcode',toggleListBarcodes); - loadASettingFromStorage('pus-rotation-buttons',toggleRotationButtons); - loadASettingFromStorage('pus-hunger-games-logo-search',toggleHungerGamesButton); - loadASettingFromStorage('pus-quick-categories',null); + $( window ).on( "load", function() { + loadASettingFromStorage('pus-always-show-barcode',toggleListBarcodes); + loadASettingFromStorage('pus-rotation-buttons',toggleRotationButtons); + loadASettingFromStorage('pus-hunger-games-logo-search',toggleHungerGamesButton); + loadASettingFromStorage('pus-quick-categories',null); + listenToFoodPreferences(); + }); + // Show an easier to read number of products /* @@ -1914,11 +1918,9 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert } function loadASettingFromStorage(checkboxId, toggleFunctionToCall){ - $( window ).on( "load", function() { - if(getLocalStorage(checkboxId) === "enabled"){ - toggleFunctionToCall(); - } - }); + if(getLocalStorage(checkboxId) === "enabled"){ + toggleFunctionToCall(); + } } @@ -1955,6 +1957,19 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert localStorage.setItem('pus-hunger-games-logo-search', "enabled"); } } + + /** listens to Food preference changes, since any change there redraws the whole product list + * making the list buttons disappear + */ + function listenToFoodPreferences(){ + $('#preferences_switch_in_list_of_products_switch input').change(function(){ + addCodesToProductList(); + loadASettingFromStorage('pus-always-show-barcode',toggleListBarcodes); + loadASettingFromStorage('pus-rotation-buttons',toggleRotationButtons); + loadASettingFromStorage('pus-hunger-games-logo-search',toggleHungerGamesButton); + loadASettingFromStorage('pus-quick-categories',null); + }); + } //shows HungerGames logo function showListHungerGamesButtons(){ From fe1fc4adcff470509cb5f001b93bd8b28c9a2af3 Mon Sep 17 00:00:00 2001 From: danis Date: Sun, 28 Apr 2024 09:16:23 +0300 Subject: [PATCH 5/7] food preference bugfix --- OpenFoodFactsPower.user.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/OpenFoodFactsPower.user.js b/OpenFoodFactsPower.user.js index ddc5e32..8faf88f 100644 --- a/OpenFoodFactsPower.user.js +++ b/OpenFoodFactsPower.user.js @@ -1221,8 +1221,10 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert loadASettingFromStorage('pus-rotation-buttons',toggleRotationButtons); loadASettingFromStorage('pus-hunger-games-logo-search',toggleHungerGamesButton); loadASettingFromStorage('pus-quick-categories',null); - listenToFoodPreferences(); }); + setTimeout(function(){ + listenToFoodPreferences(); + }, 5000); // Show an easier to read number of products From 8af1d6439f32549360be7c98a32c3cde19d09f52 Mon Sep 17 00:00:00 2001 From: danis Date: Sun, 28 Apr 2024 10:31:23 +0300 Subject: [PATCH 6/7] 2 quick categories --- OpenFoodFactsPower.user.js | 45 +++++++++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 3 deletions(-) diff --git a/OpenFoodFactsPower.user.js b/OpenFoodFactsPower.user.js index 8faf88f..d5b4ec0 100644 --- a/OpenFoodFactsPower.user.js +++ b/OpenFoodFactsPower.user.js @@ -437,7 +437,7 @@ input.show_comparison { border-radius: 0.3em; } -.list_hunger_games_logo_search:hover, .list_rotate_image_90:hover, .list_rotate_image_180:hover, .list_rotate_image_270:hover { +.list_hunger_games_logo_search:hover, .list_rotate_image_90:hover, .list_rotate_image_180:hover, .list_rotate_image_270:hover, .list_quick_category_1:hover, .list_quick_category_2:hover { background-color: #aaf; } @@ -466,6 +466,35 @@ input.show_comparison { border-radius: 0.3em; } +/* --------------- List quick category --------------- */ +.list_categories_card { + position: sticky; + top: 10em; + left:0; + border-radius: 8px; + padding: 0; + background-color: #fff; + display: flex; + width: 2em; + flex-direction: column; + box-shadow: 0 4px 4px rgba(0,0,0,.25); +} + +.list_quick_category_1 { + position: absolute; + top: 4em; + left: 0; + border-radius: 0.3em; +} + +.list_quick_category_2 { + position: absolute; + top: 6em; + left: 0; + border-radius: 0.3em; +} + + /* ---------------- /Power User Script UI -------------------------- */ @@ -1210,7 +1239,7 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert toggleASetting('pus-always-show-barcode',toggleListBarcodes); toggleASetting('pus-rotation-buttons',toggleRotationButtons); toggleASetting('pus-hunger-games-logo-search',toggleHungerGamesButton); - toggleASetting('pus-quick-categories',null); + toggleASetting('pus-quick-categories',toggleQuickCategories); }); // detect product codes and add them as attributes @@ -1220,7 +1249,7 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert loadASettingFromStorage('pus-always-show-barcode',toggleListBarcodes); loadASettingFromStorage('pus-rotation-buttons',toggleRotationButtons); loadASettingFromStorage('pus-hunger-games-logo-search',toggleHungerGamesButton); - loadASettingFromStorage('pus-quick-categories',null); + loadASettingFromStorage('pus-quick-categories',toggleQuickCategories); }); setTimeout(function(){ listenToFoodPreferences(); @@ -1934,6 +1963,16 @@ ul#products_match_all > li > a > span { display: table-cell; width: 70%; vert } } + function toggleQuickCategories(){ + $("ul[id^='products_'].search_results li[data-code]").each(function(index, element) { + let code = $(this).attr('data-code'); + + $('
    ').insertBefore( $('a.list_product_a', this) ); + + $('#quick_category_' + code,$(this)).append('pets'); + $('#quick_category_' + code,$(this)).append('emoji_nature'); + }); + } /** * Show/hide rotation icons in list view */ From 6ff619b51523b3ac700fef9a650dcd445aedffc7 Mon Sep 17 00:00:00 2001 From: Charles Nepote Date: Fri, 10 Jan 2025 11:32:51 +0100 Subject: [PATCH 7/7] Update OpenFoodFactsPower.user.js Change version --- OpenFoodFactsPower.user.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/OpenFoodFactsPower.user.js b/OpenFoodFactsPower.user.js index d5b4ec0..2df9619 100644 --- a/OpenFoodFactsPower.user.js +++ b/OpenFoodFactsPower.user.js @@ -2,7 +2,7 @@ // @name Open Food Facts power user script // @description Helps power users in their day to day work. Key "?" shows help. This extension is a kind of sandbox to experiment features that could be added to Open Food Facts website. // @namespace openfoodfacts.org -// @version 2024-02-16T13:40 +// @version 2025-01-10T11:31 // @include https://*.openfoodfacts.org/* // @include https://*.openproductsfacts.org/* // @include https://*.openbeautyfacts.org/* @@ -59,7 +59,7 @@ var proPlatform = false; // TODO: to be included in isPageType() const pageType = isPageType(); // test page type const corsProxyURL = ""; - log("2024-02-02T20:39 - mode: " + pageType); + log("2025-01-10T11:31 - mode: " + pageType); // Disable extension if the page is an API result; https://world.openfoodfacts.org/api/v0/product/3222471092705.json if (pageType === "api") {