NEW DESIGN - Bring back the inline editing of ingredients

[teolemon]

What

• Bring back the inline editing of ingredients

  Screenshot

  

Part of

• 7295

[github-actions[bot]]

This issue is stale because it has been open 90 days with no activity.

[stephanegigandet]

Related code is still visible on Open Beauty Facts, when logged in as a moderator or admin.

            <div class="button_div" id="editingredientsbuttondiv"><button id="editingredients" class="small button" type="button">Edit ingredients (fr)</div>
            <div class="button_div" id="saveingredientsbuttondiv_status" style="display:none"></div>
            <div class="button_div" id="saveingredientsbuttondiv" style="display:none"><button id="saveingredients" class="small button" type="button">Save ingredients (fr)</div>

            <div class="button_div" id="wipeingredientsbuttondiv"><button id="wipeingredients" class="small button" type="button">Ingredients (fr) are completely bogus, erase them.</button></div>

and

<script>
$(function() {
$('.f-dropdown').on('opened.fndtn.dropdown', function() {
   $(document).foundation('equalizer', 'reflow');
});
    $(".unselectbutton_front_fr").click({imagefield:"front_fr"},function(event) {
        event.stopPropagation();
        event.preventDefault();
        // alert(event.data.imagefield);
        $('div.unselectbuttondiv_front_fr').html('<img src="https://static.openbeautyfacts.org/images/misc/loading2.gif"> Unselecting image');
        $.post('/cgi/product_image_unselect.pl',
                {code: "3600541888302", id: "front_fr" }, function(data) {

            if (data.status_code === 0) {
                $('div.unselectbuttondiv_front_fr').html("Unselected image");
                $('div[id="image_box_front"]').html("");
            }
            else {
                $('div.unselectbuttondiv_front_fr').html("Could not unselect image");
            }
            $(document).foundation('equalizer', 'reflow');
        }, 'json');

        $(document).foundation('equalizer', 'reflow');

    });
    $(".unselectbutton_ingredients_fr").click({imagefield:"ingredients_fr"},function(event) {
        event.stopPropagation();
        event.preventDefault();
        // alert(event.data.imagefield);
        $('div.unselectbuttondiv_ingredients_fr').html('<img src="https://static.openbeautyfacts.org/images/misc/loading2.gif"> Unselecting image');
        $.post('/cgi/product_image_unselect.pl',
                {code: "3600541888302", id: "ingredients_fr" }, function(data) {

            if (data.status_code === 0) {
                $('div.unselectbuttondiv_ingredients_fr').html("Unselected image");
                $('div[id="image_box_ingredients"]').html("");
            }
            else {
                $('div.unselectbuttondiv_ingredients_fr').html("Could not unselect image");
            }
            $(document).foundation('equalizer', 'reflow');
        }, 'json');

        $(document).foundation('equalizer', 'reflow');

    });

    var editableText;

    $("#editingredients").click({},function(event) {
        event.stopPropagation();
        event.preventDefault();

        var divHtml = $("#ingredients_list").html();
        var allergens = /(<span class="allergen">|<\/span>)/g;
        divHtml = divHtml.replace(allergens, '_');

        var editableText = $('<textarea id="ingredients_list" style="height:8rem" lang="fr" />');
        editableText.val(divHtml);
        $("#ingredients_list").replaceWith(editableText);
        editableText.focus();

        $("#editingredientsbuttondiv").hide();
        $("#saveingredientsbuttondiv").show();

        $(document).foundation('equalizer', 'reflow');

    });

    $("#saveingredients").click({},function(event) {
        event.stopPropagation();
        event.preventDefault();

        $('div[id="saveingredientsbuttondiv"]').hide();
        $('div[id="saveingredientsbuttondiv_status"]').html('<img src="https://static.openbeautyfacts.org/images/misc/loading2.gif"> Saving ingredients_texts_fr');
        $('div[id="saveingredientsbuttondiv_status"]').show();

        $.post('/cgi/product_jqm_multilingual.pl',
            {code: "3600541888302", ingredients_text_fr :  $("#ingredients_list").val(), comment: "Updated ingredients_texts_fr" },
            function(data) {

                $('div[id="saveingredientsbuttondiv_status"]').html('Saved ingredients_texts_fr');
                $('div[id="saveingredientsbuttondiv"]').show();

                $(document).foundation('equalizer', 'reflow');
            },
            'json'
        );

        $(document).foundation('equalizer', 'reflow');

    });

    $("#wipeingredients").click({},function(event) {
        event.stopPropagation();
        event.preventDefault();
        // alert(event.data.imagefield);
        $('div[id="wipeingredientsbuttondiv"]').html('<img src="https://static.openbeautyfacts.org/images/misc/loading2.gif"> Erasing ingredients_texts_fr');
        $.post('/cgi/product_jqm_multilingual.pl',
            {code: "3600541888302", ingredients_text_fr : "", comment: "Erased ingredients_texts_fr: too much bad data" },
            function(data) {

                $('div[id="wipeingredientsbuttondiv"]').html("Erased ingredients_texts_fr");
                $('div[id="ingredients_list"]').html("");

                $(document).foundation('equalizer', 'reflow');
            },
            'json'
        );

        $(document).foundation('equalizer', 'reflow');

    });