jquery label plugin - major changes

[majin22]

based on a chat with @mattsilv

(1) change the label to not allow any string input - before we allow string and numeric inputs on the nutrition values

(2) have the serving_unit_qty display in an input box and then change the values in the label if you modify the serving unit (assuming the value is present and not null) - value should be a float, can't be a string

(2a) the textbox can be activated by pressing enter on the textbox

(2b) there will be an up and down arrow that can change the value of the serving unit qty (like the arrows on the calculator)

(3) add a simple setting to be able to hide the textbox on (2)

[majin22]

for (1), what I did is remove the code that check if the value is string or numeric and process it accordingly 0001727 made that obsolete so I removed it. I guess the only way to test this is to check the changes made on the file (look for the word "string")

https://github.com/nutritionix/nutrition-label/commit/2a71cc246c3f059ce861fe48c5a59913bcc3f18a [^]

(2) is not yet implemented on the mobile site or the live site. it's only implemented on the demo page until matt finished reviewing it

(2a) and (2b) are done

(3) the setting is showServingUnitQuantityTextbox (default value is true)

[majin22]

note: the nix main site and the mobile site plugins aren't updated yet until matt reviewed the feature and approved it

[majin22]

from @ditchx

Verified on http://dev2.nutritionix.com/html/label-jquery-plugin/html/generate.html [^]

1) Fix in 0001727 prevents string values 2), 2a) 2) Text box for changing serving quantity unit is displayed along with arrows that increment/decrement values. Pressing enter inside the textbox applies the change

3) Setting for hiding/showing serving quantity unit textbox working. Though the test page form did not provide means to edit the setting, entering:

$.fn.nutritionLabel.defaultSettings.showServingUnitQuantityTextbox = false;

in the javascript console and generating the label hides the textbox.

[majin22]

i had problem when the quantity textbox is shown on the generate page but matt told us that this is meant for our needs and i don't expect us to have a feature that will recreate the label on the page so I didn't spend more time making it work

[majin22]

Hi Matt,

The new unit quantities are implemented here:

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo.html [^]

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo-mini.html [^]

I haven't implemented it on the main pages yet as I need you to review it first and let us know if there are more changes needed.

This feature is currently enabled by default and I need to know if you want to keep it enabled on the search item labels on the main site? and on the labels on the mobile site?

I do suggest that we use bigger arrows because we don't have any value beside the textbox and the arrows unlike on the calculator but that's just my personal preference.

Thanks.

---

Leejay

[majin22]

from @mattsilv

Hi Leo,

We actually need to have the QTY box in the nutrition box. Here are some more details:

1. There should be one setting on the plugin (qty_change) default = true;

IF qty_change==true IF serving_unit_qty is NOT null QTY box will inherit value of serving_unit_qty.

Example, if serving unit qty is 8, and the serving unit name is cookies. It would look like: [ 8 ] Cookies

IF qty_change==true IF serving_unit_qty is null Quantity to populate in box will default to 1, and box will appear before item name instead of before serving_unit_name

Example, if serving unit qty is null, and item name is Blue Cheese Dressing, it would look like: [ 1 ] Blue Cheese Dressing

[majin22]

Hi @mattsilv

Do we have a serving unit name setting or will this be a new setting? is it the same as serving size unit? http://dev2.nutritionix.com/html/label-jquery-plugin/html/generate.html [^]

Can you use use the label generator to create a label for 0000001, I am not sure where to put the textbox on the label for that case. Will it be something like

Item Name [8] Serving Unit Name http://awesomescreenshot.com/01315kc67c [^]

or something like this where 8 will be the textbox http://awesomescreenshot.com/0c115kby5e? [^]

Thanks

[majin22]

[majin22]

from @shirleend

The textbox on IE9 is not working and on IE7 & 8 both the arrow and the textbox are not working

[majin22]

from @mattsilv

[majin22]

from @mattsilv

Hi Matt,
Do we have a serving unit name setting or will this be a new setting? is it the same as serving size unit? http://dev2.nutritionix.com/html/label-jquery-plugin/html/generate.html
Can you use use the label generator to create a label for #1, I am not sure where to put the textbox on the label for that case. Will it be something like
Item Name [8] Serving Unit Name http://awesomescreenshot.com/01315kc67c
or something like this where 8 will be the textbox http://awesomescreenshot.com/0c115kby5e?
Thanks.

Serving unit name is the same thing as serving size unit. Sorry for the confusion.

[majin22]

Hi @mattsilv ,

I am still finalizing the code for this feature because it turned out that more factors needs to be considered for this feature.

Here's my current final list of different possible scenarios (taken from the plugin settings code and will be available on the changelog later on)

    //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
    //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 && valueServingSize > 0 (default is zero)

        //NOTE 3: valueServingSize si different from valueServingUnitQuantity

        //CASE 1: valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity >= 0 (AND NOT N/A)
            //RESULT: textServingSize [valueServingUnitQuantity] valueServingSizeUnit

        //CASE 2: valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity is N/A
            //RESULT: textServingSize - (dash for not applicable) valueServingSizeUnit

        //CASE 3: valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity is N/A
            //RESULT: textServingSize - (dash for not applicable)

        //NOTE 4: on all cases below showServingUnitQuantityTextbox == true AND showItemName == true on the cases below
                //if showItemName == false, the values that should be on the 'item name div' are empty or null

        //CASE 4: valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity <= 0 (AND NOT N/A)
            //RESULT: [valueServingUnitQuantity default to 1.0] itemName

        //CASE 5: valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity <= 0 (AND NOT N/A)
            //RESULT: [valueServingUnitQuantity default to 1.0] itemName

        //CASE 5: valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity >= 0 (AND NOT N/A)
            //RESULT: [valueServingUnitQuantity] itemName

let me know if you want some changes done.

[majin22]

Hi @mattsilv ,

I think I am a bit confused with the current valueServingSize and valueServingUnitQuantity. Are these the same values or not?

If not, what will happen when the serving size is < 0 because before, the part of that label is hidden. should we make a new rule about this?

Before, it is textServingSize valueServingSize valueServingSizeUnit http://awesomescreenshot.com/04316sukdd

Also, what will happen when the serving size is not applicable (if serving size and serving unit quantity are not the same)?

I guess my questions are for these cases:

showServingUnitQuantityTextbox == false && valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity >= 0 && valueServingSize <= 0
RESULT: the section is hidden

showServingUnitQuantityTextbox == true && valueServingSizeUnit != '' (AND NOT null) && valueServingUnitQuantity >= 0 && valueServingSize <= 0
RESULT: ???

showServingUnitQuantityTextbox == false && valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity >= 0 && valueServingSize <= 0
RESULT: the section is hidden

showServingUnitQuantityTextbox == false && valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity >= 0 && valueServingSize is NA
RESULT: textServingSize naServingSize http://awesomescreenshot.com/00916sv51b

showServingUnitQuantityTextbox == true && valueServingSizeUnit == '' (OR null) && valueServingUnitQuantity >= 0 && valueServingSize is NA
RESULT: [valueServingUnitQuantity] itemName ???

I might need to change my previous questions (the cases on the email before this) depending on your answer about the relationship of the valueServingSize and valueServingUnitQuantity

[majin22]

from @mattsilv

Leo - I'm not sure what value ServingSize is, but the API is only passing back serving unit qty and serving unit name.

---

from @majin22

to Matt, Development, Rommel Hi Matt,

I think I found my answer on this old mail http://awesomescreenshot.com/01116w5e5a

I got confused because we call it serving size when the field name for this value is serving_unit_quantity.

I will check my code again and make the necessary changes and just document it on the changelog to prevent confusion.

Thanks

[majin22]

Hi Rommel,

Please check the html/ folder and open the html pages there and you can see the css bugs.

The demo-texbox-case*.html files will show the different possible outcomes given different settings and you can see that there are a few more css bugs especially with the 'not applicable' serving size setting being true

Let me know if you need help.

Thanks

[majin22]

Hi Team,

@genesis23rd and I finally finished version 4.0.4 of this plugin.

You can check the changelog for what we have changed - http://dev2.nutritionix.com/html/label-jquery-plugin/changelog.txt

---

@shirleend please test the textboxes that appears on these test pages. Don't worry about the different cases / settings as @mattsilv already reviewed it yesterday (we chatted about this task).

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo.html

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo-texbox-case1-a.html

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo-texbox-case1-b.html

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo-texbox-case2-a.html

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo-texbox-case2-b.html

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo-texbox-case3-a.html

http://dev2.nutritionix.com/html/label-jquery-plugin/html/demo-texbox-case3-b.html

You have tested the old version before, the only difference is the placement of the textbox and the default value but you don't need to concern yourself about testing that as Matt already did that.

To have more idea about this, check the changelog (see link above) and/or check the different settings on the demo and see the result. The reason for those different demo links is because I found out that there are a lot of possible outcome (generated label) depending on the setting.

Let me know if you have questions.

---

Thanks

[majin22]

@mattsilv this will be implemented on dev2 and devm after this task have been tested thoroughly

[shirleend]

The text boxes are working properly on supported browsers

[majin22]

@mattsilv @shirleend @genesis23rd and @ditchx I will consider this as completed even though it is passed to @ditchx for testing. i'll just create a new task if he found some bugs or room for improvements.

there are a few tasks that need this to be completed and Rommel and I have worked on this thoroughly and @shirleend already did the thorough testing so I am confident to apply it asap on the dev2 and devm pages asap

[ditchx]

Looks good. Just a suggestion, have the changelog list the recent changes first, the oldest last.

[majin22]

@ditchx good idea. noted