forked from nutritionix/nutrition-label
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
357 lines (328 loc) · 16.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!--
***************************************************************************************************************************************************+
* NUTRITIONIX.com |
* |
* This plugin allows you to create a fully customizable nutrition label |
* |
* @authors Leo Joseph Gajitos <leejay22@gmail.com>, Rommel Malang <genesis23rd@gmail.com> and Yurko Fedoriv <yurko.fedoriv@gmail.com> |
* @copyright Copyright (c) 2017 Nutritionix. |
* @license This Nutritionix jQuery Nutrition Label is dual licensed under the MIT and GPL licenses. |
* @link http://www.nutritionix.com |
* @github http://github.com/nutritionix/nutrition-label |
* @current version 8.0.7 |
* @stable version 8.0.5 |
* @supported browser Firefox, Chrome, IE8+ |
* @description To be able to create a FDA-style nutrition label with any nutrition data source |
* |
***************************************************************************************************************************************************+
-->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body {
padding: 20px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>Nutrition Label version 8.0.7</h1>
<h4>from Nutritionix</h4>
<h4><a href="http://github.com/nutritionix/nutrition-label" target="_newDemo">Homepage</a></h4>
<p>
This plugin can be used to create customized nutrition labels like the ones that can be seen on
<a href="http://www.nutritionix.com" target="_newDemo">http://www.nutritionix.com</a> for normal html page labels and
<a href="http://m.nutritionix.com" target="_newDemo">http://m.nutritionix.com</a> for mobile html page labels.<br/><br/>
You can read more about this on this
<a href="http://blog.nutritionix.com/2013/03/08/introducing-open-nutrition-label-project/" target="_newDemo">blog post</a><br/><br/>
Version 7.0.4 and above now allow users to use the Legacy version (original version of the plugin) or the
<a href="https://www.fda.gov/Food/GuidanceRegulation/GuidanceDocumentsRegulatoryInformation/LabelingNutrition/ucm385663.htm" target="_2018Fda">2018 version</a><br/><br/>
<a href="http://dev2.nutritionix.com/html/label-jquery-plugin/demo/demo.html" target="_newDemo">Main Demo Page</a><br/>
</p>
</div>
<p>These are the default values on the plugin that you need to change to create a customized nutrition label.</p>
<pre style="padding: 20px 40px; font-size: 14px;">
//default fixedWidth of the nutrition label
width : 280,
//to allow custom width - usually needed for mobile sites
allowCustomWidth : false,
widthCustom : 'auto',
//to allow the label to have no border
allowNoBorder : false,
//to enable rounding of the nutritional values based on the FDA rounding rules http://goo.gl/RMD2O
allowFDARounding : false,
//to enabled the google analytics event logging
allowGoogleAnalyticsEventLog : false,
gooleAnalyticsFunctionName : 'ga',
//enable triggering of user function on quantity change: global function name
userFunctionNameOnQuantityChange: null,
//enable triggering of user function on quantity change: handler instance
userFunctionOnQuantityChange: null,
//when set to true, this will hide the values if they are not applicable
hideNotApplicableValues : false,
//when set to true, this will hide all the percent daily values
hidePercentDailyValues : false,
//the brand name of the item for this label (eg. just salad)
brandName : 'Brand where this item belongs to',
//to scroll the ingredients if the innerheight is > scrollHeightComparison
scrollLongIngredients : false,
scrollHeightComparison : 100,
//the height in px of the ingredients div
scrollHeightPixel : 95,
//this is to set how many decimal places will be shown on the nutrition values (calories, fat, protein, vitamin a, iron, etc)
decimalPlacesForNutrition : 1,
//this is to set how many decimal places will be shown for the "% daily values*"
decimalPlacesForDailyValues : 0,
//this is to set how many decimal places will be shown for the serving unit quantity textbox
decimalPlacesForQuantityTextbox : 1,
//to scroll the item name if the jQuery.height() is > scrollLongItemNamePixel
scrollLongItemName : true,
scrollLongItemNamePixel : 36,
scrollLongItemNamePixel2018Override : 34, //this is needed to fix some issues on the 2018 label as the layout of the label is very different than the legacy one
//show the customizable link at the bottom
showBottomLink : false,
//url for the customizable link at the bottom
urlBottomLink : 'http://www.nutritionix.com',
//link name for the customizable link at the bottom
nameBottomLink : 'Nutritionix',
//this value can be changed and the value of the nutritions will be affected directly
//the computation is "current nutrition value" * "serving unit quantity value" = "final nutrition value"
//this can't be less than zero, all values less than zero is converted to zero
//the textbox to change this value is visible / enabled by default
//if the initial value of the serving size unit quantity is less than or equal to zero, it is converted to 1.0
//when enabled, user can change this value by clicking the arrow or changing the value on the textbox and pressing enter. the value on the label will be updated automatically
//different scenarios and the result if this feature is enabled
//NOTE 1: [ ] => means a textbox will be shown
//NOTE 2: on all cases below showServingUnitQuantityTextbox == true AND showServingUnitQuantity == true
//if showServingUnitQuantity == false, the values that should be on the 'serving size div' are empty or null
//CASE 1a: valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity >= 0
//RESULT: textServingSize [valueServingUnitQuantity] valueServingSizeUnit
//NOTE 3: on all cases below showServingUnitQuantityTextbox == true AND showItemName == true
//if showItemName == false, the values that should be on the 'item name div' are empty or null
//CASE 1b: valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity <= 0
//RESULT: [valueServingUnitQuantity default to 1.0] itemName
//CASE 3a: valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity > 0
//RESULT: [valueServingUnitQuantity] itemName
//CASE 3b: valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity <= 0
//RESULT: [valueServingUnitQuantity default to 1.0] itemName
//NOTE 4: to see the different resulting labels, check the html/demo-texbox-case*.html files
valueServingUnitQuantity : 1.0,
valueServingSizeUnit : '',
showServingUnitQuantityTextbox : true,
//the name of the item for this label (eg. cheese burger or mayonnaise)
itemName : 'Item / Ingredient Name',
showServingUnitQuantity : true,
//allow hiding of the textbox arrows
hideTextboxArrows : false,
//these 2 settings are used internally.
//this is just added here instead of a global variable to prevent a bug when there are multiple instances of the plugin like on the demo pages
originalServingUnitQuantity : 0,
//this is used to fix the computation issue on the textbox
nutritionValueMultiplier : 1,
//this is used for the computation of the servings per container
totalContainerQuantity : 1,
//default calorie intake
calorieIntake : 2000,
//these are the recommended daily intake values
dailyValueTotalFat : 65,
dailyValueSatFat : 20,
dailyValueCholesterol : 300,
dailyValueSodium : 2400,
dailyValuePotassium : 3500,
dailyValuePotassium_2018 : 4700,
dailyValueCarb : 300,
dailyValueFiber : 25,
dailyValueCalcium : 1300,
dailyValueIron : 18,
dailyValueVitaminD : 20,
dailyValueAddedSugar : 50,
//these values can be change to hide some nutrition values
showCalories : true,
showFatCalories : true,
showTotalFat : true,
showSatFat : true,
showTransFat : true,
showPolyFat : false,
showMonoFat : false,
showCholesterol : true,
showSodium : true,
showPotassium: false, //this is for the legacy version, this is the only value that is default to be hidden
showPotassium_2018: true, //this is for the 2018 version
showTotalCarb : true,
showFibers : true,
showSugars : true,
showAddedSugars : true,
showSugarAlcohol : false,
showProteins : true,
showVitaminA : true,
showVitaminC : true,
showVitaminD : true,
showCalcium : true,
showIron : true,
//to show the 'amount per serving' text
showAmountPerServing : true,
//to show the 'servings per container' data and replace the default 'Serving Size' value (without unit and servings per container text and value)
showServingsPerContainer : false,
//to show the item name. there are special cases where the item name is replaced with 'servings per container' value
showItemName : true,
//show the brand where this item belongs to
showBrandName : false,
//to show the ingredients value or not
showIngredients : true,
//to show the calorie diet info at the bottom of the label
showCalorieDiet : false,
//to show the customizable footer which can contain html and js codes
showCustomFooter : false,
//to show the disclaimer text or not
showDisclaimer : false,
//the height in px of the disclaimer div
scrollDisclaimerHeightComparison : 100,
scrollDisclaimer : 95,
valueDisclaimer : 'Please note that these nutrition values are estimated based on our standard serving portions. ' +
'As food servings may have a slight variance each time you visit, please expect these values to be with in 10% +/- of your actual meal. ' +
'If you have any questions about our nutrition calculator, please contact Nutritionix.',
ingredientLabel : 'INGREDIENTS:',
valueCustomFooter : '',
//the are to set some values as 'not applicable'. this means that the nutrition label will appear but the value will be a 'gray dash'
naCalories : false,
naFatCalories : false,
naTotalFat : false,
naSatFat : false,
naTransFat : false,
naPolyFat : false,
naMonoFat : false,
naCholesterol : false,
naSodium : false,
naPotassium : false, //this is for the legacy version
naPotassium_2018 : false, //this is for the 2018 version
naTotalCarb : false,
naFibers : false,
naSugars : false,
naAddedSugars : false,
naSugarAlcohol : false,
naProteins : false,
naVitaminA : false,
naVitaminC : false,
naVitaminD : false,
naCalcium : false,
naIron : false,
//these are the default values for the nutrition info
valueServingWeightGrams : 0,
valueServingPerContainer : 1,
valueCalories : 0,
valueFatCalories : 0,
valueTotalFat : 0,
valueSatFat : 0,
valueTransFat : 0,
valuePolyFat : 0,
valueMonoFat : 0,
valueCholesterol : 0,
valueSodium : 0,
valuePotassium : 0, //this is for the legacy version
valuePotassium_2018 : 0, //this is for the 2018 version
valueTotalCarb : 0,
valueFibers : 0,
valueSugars : 0,
valueAddedSugars : 0,
valueSugarAlcohol : 0,
valueProteins : 0,
valueVitaminA : 0,
valueVitaminC : 0,
valueVitaminD : 0,
valueCalcium : 0,
valueIron : 0,
//customizable units for the values
unitCalories : '',
unitFatCalories : '',
unitTotalFat : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitSatFat : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitTransFat : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitPolyFat : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitMonoFat : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitCholesterol : '<span aria-hidden="true">mg</span><span class="sr-only"> milligrams</span>',
unitSodium : '<span aria-hidden="true">mg</span><span class="sr-only"> milligrams</span>',
unitPotassium : '<span aria-hidden="true">mg</span><span class="sr-only"> milligrams</span>', //this is for the legacy version
unitPotassium_base : '<span aria-hidden="true">mg</span><span class="sr-only"> milligrams</span>', //this is for the 2018 version
unitPotassium_percent : '%', //this is for the 2018 version
unitTotalCarb : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitFibers : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitSugars : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitAddedSugars : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitSugarAlcohol : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitProteins : '<span aria-hidden="true">g</span><span class="sr-only"> grams</span>',
unitVitaminA : '%',
unitVitaminC : '%',
unitVitaminD_base : '<span aria-hidden="true">mcg</span><span class="sr-only"> micrograms</span>', //this is for the 2018 version
unitVitaminD_percent : '%', //this is for the 2018 version
unitCalcium : '%',
unitCalcium_base : '<span aria-hidden="true">mg</span><span class="sr-only"> milligrams</span>', //this is for the 2018 version
unitCalcium_percent : '%', //this is for the 2018 version
unitIron : '%',
unitIron_base : '<span aria-hidden="true">mg</span><span class="sr-only"> milligrams</span>', //this is for the 2018 version
unitIron_percent : '%', //this is for the 2018 version
//these are the values for the optional calorie diet
valueCol1CalorieDiet : 2000,
valueCol2CalorieDiet : 2500,
valueCol1DietaryTotalFat : 0,
valueCol2DietaryTotalFat : 0,
valueCol1DietarySatFat : 0,
valueCol2DietarySatFat : 0,
valueCol1DietaryCholesterol : 0,
valueCol2DietaryCholesterol : 0,
valueCol1DietarySodium : 0,
valueCol2DietarySodium : 0,
valueCol1DietaryPotassium : 0,
valueCol2DietaryPotassium : 0,
valueCol1DietaryTotalCarb : 0,
valueCol2DietaryTotalCarb : 0,
valueCol1Dietary : 0,
valueCol2Dietary : 0,
//these text settings is so you can create nutrition labels in different languages or to simply change them to your need
textNutritionFacts : 'Nutrition Facts',
textDailyValues : 'Daily Value',
textServingSize : 'Serving Size:',
textServingsPerContainer : 'Servings Per Container',
textAmountPerServing : 'Amount Per Serving',
textCalories : 'Calories',
textFatCalories : 'Calories from Fat',
textTotalFat : 'Total Fat',
textSatFat : 'Saturated Fat',
textTransFat : '<em>Trans</em> Fat',
textPolyFat : 'Polyunsaturated Fat',
textMonoFat : 'Monounsaturated Fat',
textCholesterol : 'Cholesterol',
textSodium : 'Sodium',
textPotassium : 'Potassium',
textTotalCarb : 'Total Carbohydrates',
textFibers : 'Dietary Fiber',
textSugars : 'Sugars',
textAddedSugars1 : 'Includes ',
textAddedSugars2 : ' Added Sugars',
textSugarAlcohol : 'Sugar Alcohol',
textProteins : 'Protein',
textVitaminA : 'Vitamin A',
textVitaminC : 'Vitamin C',
textVitaminD : 'Vitamin D',
textCalcium : 'Calcium',
textIron : 'Iron',
textNotApplicable : '-',
ingredientList : 'None',
textPercentDailyPart1 : 'Percent Daily Values are based on a',
textPercentDailyPart2 : 'calorie diet',
textPercentDaily2018VersionPart1 : 'The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. ',
textPercentDaily2018VersionPart2 : ' calories a day is used for general nutrition advice.',
textGoogleAnalyticsEventCategory : 'Nutrition Label',
textGoogleAnalyticsEventActionUpArrow : 'Quantity Up Arrow Clicked',
textGoogleAnalyticsEventActionDownArrow : 'Quantity Down Arrow Clicked',
textGoogleAnalyticsEventActionTextbox : 'Quantity Textbox Changed',
showLegacyVersion : true,
//more details here https://github.com/nutritionix/nutrition-label/issues/77#issuecomment-323510972
legacyVersion: 1
</pre>
<p>There are a lot of sample on our <a href="demo/demo.html">demo page</a> on how the plugin can be used and how it can be customized to fit your need</p>
</div>
</body>
</html>