fix: added barcode-svg

gulpfile.ts

@@ -78,6 +78,7 @@ export function copyJs() {
     "./node_modules/jsvectormap/dist/js/jsvectormap.js",
     "./node_modules/jsvectormap/dist/maps/world-merc.js",
     "./node_modules/select2/dist/js/select2.min.js",
+    "./node_modules/jsbarcode/dist/JsBarcode.all.min.js",
   ]).
     pipe(init()).
     pipe(terser()).

html/js/display-product.js

@@ -225,10 +225,10 @@ class RobotoffAsker extends HTMLElement {
         button.textContent = caption;
       }
     }
-
+    
     shadowRoot.appendChild(content);
     this.nextQuestion();
   }
 }
 
-window.customElements.define('robotoff-asker', RobotoffAsker);
+window.customElements.define('robotoff-asker', RobotoffAsker);

package.json

@@ -53,7 +53,8 @@
     "osmtogeojson": "^3.0.0-beta.4",
     "papaparse": "^5.4.1",
     "select2": "~4.0",
-    "xml2json": "^0.12.0"
+    "xml2json": "^0.12.0",
+    "jsbarcode": "^3.11.6"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",

scss/_product-page.scss

@@ -262,3 +262,16 @@ html[dir="rtl"] .image_box figure figcaption {
     // This breaks the layout of the tags in the product page. This is a temporary fix until the issue is resolved.
     display: flex !important;
 }
+
+// It is hides SVG barcode when mobile and shows when desktop
+#barcode_div_code,#barcode_div_svg{
+    display: inline-block;
+    vertical-align: top;
+}
+
+@media only screen and (max-width: 600px) {
+    #barcode_div_svg,#barcode_br {
+        display: none;
+    }
+}
+

templates/web/common/site_layout.tt.html

@@ -413,6 +413,7 @@ <h3 class="title-5 text-medium">[% lang('footer_discover_the_project') %]</h3>
 <script src="[% static_subdomain %]/js/dist/display.js"></script>
 <script src="[% static_subdomain %]/js/dist/stikelem.js"></script>
 <script src="[% static_subdomain %]/js/dist/scrollNav.js"></script>
+
 
 <script>
 \$(function() {
@@ -494,4 +495,4 @@ <h3 class="title-5 text-medium">[% lang('footer_discover_the_project') %]</h3>
 </body>
 </html>
 
-<!-- end templates/[% template.name %] -->
+<!-- end templates/[% template.name %] -->

templates/web/pages/product/product_page.tt.html

@@ -1,5 +1,5 @@
 <!-- start templates/[% template.name %] -->
-
+<script src="[% static_subdomain %]/js/dist/JsBarcode.all.min.js"></script>
 [% IF product_changes_saved %]
     <div data-alert class="alert-box info">
         <span>lang('product_changes_saved')</span>
@@ -168,12 +168,25 @@ <h2 class="title-1" property="food:name" itemprop="name">[% title %]</h1>
 
                     <!-- Display UPC code if the EAN starts with 0 -->
                         [% IF upc_code == 'defined' %]
-                            <p id="barcode_paragraph">
-                                [% lang("barcode") %]:  <span id="barcode" property="food:code" itemprop="gtin13" style="speak-as:digits;">[% code %]</span> [% upc %]
-                            </p>
+                            <div id="barcode_div">
+                                <!-- Display only text of the code if mobile -->
+                                <div id="barcode_div_code">
+                                    <p id="barcode_paragraph">[% lang("barcode") %]: <br id="barcode_br"><span id="barcode" property="food:code" itemprop="gtin13" style="speak-as:digits;">[% code %]</span>[% upc %]</p>
+                                </div>
+                                <!-- Display with SVG if not mobile -->
+                                <div id="barcode_div_svg">
+                                    <svg id="barcode_svg"
+                                        jsbarcode-format="auto"
+                                        jsbarcode-value="[% code %]"
+                                        jsbarcode-displayValue="false"
+                                        jsbarcode-height="40">
+                                    </svg>
+                                </div>
+                            </div>
+                            <script>if (screen && screen.width >= 600) JsBarcode("#barcode_svg").init()</script>
                             <div property="gr:hasEAN_UCC-13" content="[% code %]" datatype="xsd:string"></div>
                         [% ELSE %]
-                          [%# put in DOM for folksonomy %]
+                         [%# put in DOM for folksonomy %]
                           <span id="barcode"  style="display: none;">[% code %]</span>
                         [% END %]
 
@@ -382,4 +395,4 @@ <h2 id="data_sources" class="text-medium">[% lang('data_sources_p') FILTER ucfir
 
 [% INCLUDE web/common/includes/folksonomy_script.tt.html %]
 
-<!-- end templates/[% template.name %] -->
+<!-- end templates/[% template.name %] -->

tests/integration/expected_test_results/api_v2_product_read/get-auth-bad-user-password.html

@@ -445,6 +445,7 @@ <h3 class="title-5 text-medium">Discover the project</h3>
 <script src="//static.openfoodfacts.localhost/js/dist/display.js"></script>
 <script src="//static.openfoodfacts.localhost/js/dist/stikelem.js"></script>
 <script src="//static.openfoodfacts.localhost/js/dist/scrollNav.js"></script>
+
 
 <script>
 $(function() {
@@ -503,4 +504,4 @@ <h3 class="title-5 text-medium">Discover the project</h3>
 </body>
 </html>
 
-<!-- end templates/web/common/site_layout.tt.html -->
+<!-- end templates/web/common/site_layout.tt.html -->

tests/integration/expected_test_results/api_v2_product_write/post-product-auth-bad-user-password.html

@@ -445,6 +445,7 @@ <h3 class="title-5 text-medium">Découvrez le projet</h3>
 <script src="//static.openfoodfacts.localhost/js/dist/display.js"></script>
 <script src="//static.openfoodfacts.localhost/js/dist/stikelem.js"></script>
 <script src="//static.openfoodfacts.localhost/js/dist/scrollNav.js"></script>
+
 
 <script>
 $(function() {
@@ -503,4 +504,4 @@ <h3 class="title-5 text-medium">Découvrez le projet</h3>
 </body>
 </html>
 
-<!-- end templates/web/common/site_layout.tt.html -->
+<!-- end templates/web/common/site_layout.tt.html -->

tests/integration/expected_test_results/export/export.csv

@@ -15,7 +15,7 @@ Canola Oil, Water, Garbanzo Beans, Lupin (bean), Mustard Seeds, Grape Vinegar, L
 5410803950689			fr				Sauce algérienne					Sauce émulsionnée froide piquante aux oignons rôtis		500 ml		Plastique, Bouteille ou Flacon, Flacon	Halal maïza		Condiments, Sauces, Sauces algériennes, Epicerie	Halal	France												100g	100g			521	kcal	49.4	g	4.2	g	17.1	g	12.8	g			1.9	g	2.1	g	0.84	g	521	kcal																																																															App - yuka, Apps	0
 27096765			fr				Lait crème							5 x 40 g	40 g	Plastique, Métal, Métaux recyclables, Aluminium	Château		Snacks, Snacks sucrés, Cacao et dérivés, Biscuits et gâteaux, Gâteaux, Chocolats, Chocolats au lait, Gâteaux au chocolat	Agriculture durable, Certifié UTZ	Belgique, France						Sugar, cocoa butter, cream powder (milk) (15.9%), cocoa paste, whole milk powder (5.5%), skim milk powder, lactose, emulsifier: lecithin (soy), vanilla extract		Sucre, beurre de cacao, crème en poudre (lait) (15,9%), pâte de cacao, lait entier en poudre (5,5%), lait écrémé en poudre, lactose, émulsifiant : lécithine (soja), extrait de vanille		Lait, Soja	"Fruits à coque, Arachides"	100g	100g			563	kcal	35	g	22	g	52	g	51	g			8	g	0.24	g	0.096	g	563	kcal																																																															App - yuka, Apps, App - InFood	0
 3270160503070			fr				Oignons rouges émincés surgelés					Oignons surgelés		450 g		Plastique, Surgelé	Picard		"Aliments et boissons à base de végétaux, Aliments d'origine végétale, Aliments à base de fruits et de légumes, Condiments, Légumes et dérivés, Plantes condimentaires, Surgelés, Aliments à base de plantes surgelés, Légumes surgelés, Epicerie"		France	Picard		France, Bénélux		EMB 62863C			Oignons rouges 100%				100g	100g			41	kcal	0.2	g	0.1	g	7.9	g	5.6	g	1.4	g	1.2	g	0.01	g	0.004	g	41	kcal																																																															App - Yuka, Apps	0
-3451790834080	29135200		fr		UHT sterilised semi-skimmed milk enriched with vitamins B1, B2, B5, B12 and D - Long life		Lait demi ecrémé		Vitamin enriched milk		Semi-skimmed milk	Lait demi-écrémé stérilisé UHT enrichi en vitamines B1, B2, B5, B12 et D - longue conservation		1 l		"Plastique, Bouchon en polyéthylène, Bouteille en Polyéthylène, Opercule en matériau composite, Étiquette en papier"	Elle & Vire, Savencia, Elle&Vire International	Savencia	Produits laitiers, Crèmes, Laits, Laits homogénéisés, Laits demi-écrémés, Laits UHT, Crèmes entières, Crèmes cuisson	Enrichi en vitamines, Fabriqué en France	France	Toutes enseignes GMS	France		France, Somme	FR 80.001.002 EC, FR 50.139.001 EC	Milk	Leche	_Lait_ demi-écrémé stérilisé UHT enrichi en vitamines B1, B2, B5, B12 et D.	Leite	Lait		100g	100g	193	kJ	46	kcal	1.55	g	1.1	g	4.8	g	4.8	g	0	g	3.2	g	0.13	g	0.052	g	193	kJ																											120	mg	21.875	g																		https://www.elle-et-vire.com/en/produits/lait/bouteilles/lait-demi-ecreme-vitamine-uht/															App - yuka, Apps, Producers, Producer - elle-vire	0
+3451790834080	29135200		fr		UHT sterilised semi-skimmed milk enriched with vitamins B1, B2, B5, B12 and D - Long life		Lait demi ecrémé		Vitamin enriched milk		Semi-skimmed milk	Lait demi-écrémé stérilisé UHT enrichi en vitamines B1, B2, B5, B12 et D - longue conservation		1 l		"Plastique, Bouchon en polyéthylène, Bouteille en Polyéthylène, Opercule en matériau composite, Étiquette en papier"	Elle & Vire, Savencia, Elle&Vire International	Savencia	Produits laitiers, Crèmes, Laits, Laits homogénéisés, Produits pasteurisés, Laits demi-écrémés, Laits UHT, Crèmes entières, Crèmes cuisson	Enrichi en vitamines, Fabriqué en France	France	Toutes enseignes GMS	France		France, Somme	FR 80.001.002 EC, FR 50.139.001 EC	Milk	Leche	_Lait_ demi-écrémé stérilisé UHT enrichi en vitamines B1, B2, B5, B12 et D.	Leite	Lait		100g	100g	193	kJ	46	kcal	1.55	g	1.1	g	4.8	g	4.8	g	0	g	3.2	g	0.13	g	0.052	g	193	kJ																											120	mg	21.875	g																		https://www.elle-et-vire.com/en/produits/lait/bouteilles/lait-demi-ecreme-vitamine-uht/															App - yuka, Apps, Producers, Producer - elle-vire	0
 3760178254021			fr				Chocolat au lait														France												100g	100g			148	kcal	9.2	g	5.4	g	13	g	13	g			3.4	g					148	kcal																																																															App - yuka, Apps	0
 29161690			fr				100 % Almond Buter							227 g							France												100g	100g			635	kcal	54.9	g	5.4	g	27.6	g	3.4	g			21	g					635	kcal																																																															App - yuka, Apps	0
 3770013801303			fr				Limonade												Boissons et préparations de boissons, Boissons, Boissons gazeuses, Sodas, Limonades	Bio	France												100g	100g			31.2	kcal	1	g	1	g	7.5	g	7.5	g	1	g	0.7	g					31.2	kcal																																																															App - yuka, Apps	0

tests/integration/expected_test_results/export_more_fields/export_more_fields.csv

@@ -15,7 +15,7 @@ Canola Oil, Water, Garbanzo Beans, Lupin (bean), Mustard Seeds, Grape Vinegar, L
 5410803950689			fr				Sauce algérienne					Sauce émulsionnée froide piquante aux oignons rôtis		500 ml		Plastique, Bouteille ou Flacon, Flacon	en:plastic,en:bottle-or-vial,en:vial	Halal maïza	halal-maiza		Condiments, Sauces, Sauces algériennes, Epicerie	en:condiments,en:sauces,en:algerian-style-sauces,fr:epicerie	Halal	en:halal	France	en:france																		100g	100g			521	kcal	49.4	g	4.2	g	17.1	g	12.8	g			1.9	g	2.1	g	0.84	g	521	kcal																																																	en:dressings-and-sauces	en:fats-and-sauces,en:dressings-and-sauces		unknown	e	21	unknown		1		-5	-15	1	0																App - yuka, Apps	0
 27096765			fr				Lait crème							5 x 40 g	40 g	Plastique, Métal, Métaux recyclables, Aluminium	en:plastic,en:metal,en:recyclable-metals,en:aluminium	Château	chateau		Snacks, Snacks sucrés, Cacao et dérivés, Biscuits et gâteaux, Gâteaux, Chocolats, Chocolats au lait, Gâteaux au chocolat	en:snacks,en:sweet-snacks,en:cocoa-and-its-products,en:biscuits-and-cakes,en:cakes,en:chocolates,en:milk-chocolates,en:chocolate-cakes	Agriculture durable, Certifié UTZ	en:sustainable-farming,en:utz-certified	Belgique, France	en:belgium,en:france										Sugar, cocoa butter, cream powder (milk) (15.9%), cocoa paste, whole milk powder (5.5%), skim milk powder, lactose, emulsifier: lecithin (soy), vanilla extract		Sucre, beurre de cacao, crème en poudre (lait) (15,9%), pâte de cacao, lait entier en poudre (5,5%), lait écrémé en poudre, lactose, émulsifiant : lécithine (soja), extrait de vanille		Lait, Soja	en:milk,en:soybeans	"Fruits à coque, Arachides"	en:nuts,en:peanuts	100g	100g			563	kcal	35	g	22	g	52	g	51	g			8	g	0.24	g	0.096	g	563	kcal																																																	en:chocolate-products	en:sugary-snacks,en:chocolate-products	4	en:4-ultra-processed-food-and-drink-products	e	28	d	37	1	23585	-5	-15	1	10																App - yuka, Apps, App - InFood	0
 3270160503070			fr				Oignons rouges émincés surgelés					Oignons surgelés		450 g		Plastique, Surgelé	en:plastic,en:frozen	Picard	picard		"Aliments et boissons à base de végétaux, Aliments d'origine végétale, Aliments à base de fruits et de légumes, Condiments, Légumes et dérivés, Plantes condimentaires, Surgelés, Aliments à base de plantes surgelés, Légumes surgelés, Epicerie"	en:plant-based-foods-and-beverages,en:plant-based-foods,en:fruits-and-vegetables-based-foods,en:condiments,en:vegetables-based-foods,en:culinary-plants,en:frozen-foods,en:frozen-plant-based-foods,en:frozen-vegetables,fr:epicerie			France	en:france	Picard	picard			France, Bénélux			EMB 62863C	emb-62863c			Oignons rouges 100%						100g	100g			41	kcal	0.2	g	0.1	g	7.9	g	5.6	g	1.4	g	1.2	g	0.01	g	0.004	g	41	kcal																																																	en:vegetables	en:fruits-and-vegetables,en:vegetables	1	en:1-unprocessed-or-minimally-processed-foods	a	-5	unknown		1		-5	-15	1	0																App - Yuka, Apps	0
-3451790834080	29135200		fr		UHT sterilised semi-skimmed milk enriched with vitamins B1, B2, B5, B12 and D - Long life		Lait demi ecrémé		Vitamin enriched milk		Semi-skimmed milk	Lait demi-écrémé stérilisé UHT enrichi en vitamines B1, B2, B5, B12 et D - longue conservation		1 l		"Plastique, Bouchon en polyéthylène, Bouteille en Polyéthylène, Opercule en matériau composite, Étiquette en papier"	en:plastic,fr:bouchon-en-polyethylene,fr:bouteille-en-polyethylene,fr:opercule-en-materiau-composite,fr:etiquette-en-papier	Elle & Vire, Savencia, Elle&Vire International	elle-vire,savencia,elle-vire-international	Savencia	Produits laitiers, Crèmes, Laits, Laits homogénéisés, Produits pasteurisés, Laits demi-écrémés, Laits UHT, Crèmes entières, Crèmes cuisson	en:dairies,en:creams,en:milks,en:homogenized-milks,en:semi-skimmed-milks,en:uht-milks,fr:cremes-entieres,fr:cremes-cuisson	Enrichi en vitamines, Fabriqué en France	en:enriched-with-vitamins,en:made-in-france	France	en:france	Toutes enseignes GMS	toutes-enseignes-gms	France	en:france		France, Somme	france,somme	FR 80.001.002 EC, FR 50.139.001 EC	fr-80-001-002-ec,fr-50-139-001-ec	Milk	Leche	_Lait_ demi-écrémé stérilisé UHT enrichi en vitamines B1, B2, B5, B12 et D.	Leite	Lait	en:milk			100g	100g	193	kJ	46	kcal	1.55	g	1.1	g	4.8	g	4.8	g	0	g	3.2	g	0.13	g	0.052	g	193	kJ																											120	mg	21.875	g																		https://www.elle-et-vire.com/en/produits/lait/bouteilles/lait-demi-ecreme-vitamine-uht/	en:milk-and-yogurt	en:milk-and-dairy-products,en:milk-and-yogurt	1	en:1-unprocessed-or-minimally-processed-foods	b	1	b	61	1	19041	19	-15	1	0																App - yuka, Apps, Producers, Producer - elle-vire	0
+3451790834080	29135200		fr		UHT sterilised semi-skimmed milk enriched with vitamins B1, B2, B5, B12 and D - Long life		Lait demi ecrémé		Vitamin enriched milk		Semi-skimmed milk	Lait demi-écrémé stérilisé UHT enrichi en vitamines B1, B2, B5, B12 et D - longue conservation		1 l		"Plastique, Bouchon en polyéthylène, Bouteille en Polyéthylène, Opercule en matériau composite, Étiquette en papier"	en:plastic,fr:bouchon-en-polyethylene,fr:bouteille-en-polyethylene,fr:opercule-en-materiau-composite,fr:etiquette-en-papier	Elle & Vire, Savencia, Elle&Vire International	elle-vire,savencia,elle-vire-international	Savencia	Produits laitiers, Crèmes, Laits, Laits homogénéisés, Produits pasteurisés, Laits demi-écrémés, Laits UHT, Crèmes entières, Crèmes cuisson	en:dairies,en:creams,en:milks,en:homogenized-milks,en:pasteurised-products,en:semi-skimmed-milks,en:uht-milks,fr:cremes-entieres,fr:cremes-cuisson	Enrichi en vitamines, Fabriqué en France	en:enriched-with-vitamins,en:made-in-france	France	en:france	Toutes enseignes GMS	toutes-enseignes-gms	France	en:france		France, Somme	france,somme	FR 80.001.002 EC, FR 50.139.001 EC	fr-80-001-002-ec,fr-50-139-001-ec	Milk	Leche	_Lait_ demi-écrémé stérilisé UHT enrichi en vitamines B1, B2, B5, B12 et D.	Leite	Lait	en:milk			100g	100g	193	kJ	46	kcal	1.55	g	1.1	g	4.8	g	4.8	g	0	g	3.2	g	0.13	g	0.052	g	193	kJ																											120	mg	21.875	g																		https://www.elle-et-vire.com/en/produits/lait/bouteilles/lait-demi-ecreme-vitamine-uht/	en:milk-and-yogurt	en:milk-and-dairy-products,en:milk-and-yogurt	1	en:1-unprocessed-or-minimally-processed-foods	b	1	b	61	1	19041	19	-15	1	0																App - yuka, Apps, Producers, Producer - elle-vire	0
 3760178254021			fr				Chocolat au lait																		France	en:france																		100g	100g			148	kcal	9.2	g	5.4	g	13	g	13	g			3.4	g					148	kcal																																																				unknown	unknown		unknown		1		-5	-15	1	0																App - yuka, Apps	0
 29161690			fr				100 % Almond Buter							227 g											France	en:france																		100g	100g			635	kcal	54.9	g	5.4	g	27.6	g	3.4	g			21	g					635	kcal																																																				unknown	unknown		unknown		1		-5	-15	1	0																App - yuka, Apps	0
 3770013801303			fr				Limonade														Boissons et préparations de boissons, Boissons, Boissons gazeuses, Sodas, Limonades	en:beverages-and-beverages-preparations,en:beverages,en:carbonated-drinks,en:sodas,en:lemonade	Bio	en:organic	France	en:france																		100g	100g			31.2	kcal	1	g	1	g	7.5	g	7.5	g	1	g	0.7	g					31.2	kcal																																																	en:sweetened-beverages	en:beverages,en:sweetened-beverages		unknown	unknown		not-applicable		1		-5	-15	1	0																App - yuka, Apps	0

tests/integration/expected_test_results/page_crawler/crawler-access-category-facet-page.html

@@ -609,6 +609,7 @@ <h3 class="title-5 text-medium">Discover the project</h3>
 <script src="//static.openfoodfacts.localhost/js/dist/display.js"></script>
 <script src="//static.openfoodfacts.localhost/js/dist/stikelem.js"></script>
 <script src="//static.openfoodfacts.localhost/js/dist/scrollNav.js"></script>
+
 
 <script>
 $(function() {
@@ -679,4 +680,4 @@ <h3 class="title-5 text-medium">Discover the project</h3>
 </body>
 </html>
 
-<!-- end templates/web/common/site_layout.tt.html -->
+<!-- end templates/web/common/site_layout.tt.html -->