function renderMultilingual()

in modules/ui/fields/localized.js [444:543]
77 lines of code
4 McCabe index (conditional complexity)

    function renderMultilingual(selection) {
        var entries = selection.selectAll('div.entry')
            .data(_multilingual, function(d) { return d.lang; });

        entries.exit()
            .style('top', '0')
            .style('max-height', '240px')
            .transition()
            .duration(200)
            .style('opacity', '0')
            .style('max-height', '0px')
            .remove();

        var entriesEnter = entries.enter()
            .append('div')
            .attr('class', 'entry')
            .each(function() {
                var wrap = d3_select(this);

                var label = wrap
                    .append('label')
                    .attr('class', 'field-label');

                var text = label
                    .append('span')
                    .attr('class', 'label-text');

                text
                    .append('span')
                    .attr('class', 'label-textvalue')
                    .text(t('translate.localized_translation_label'));

                text
                    .append('span')
                    .attr('class', 'label-textannotation');

                label
                    .append('button')
                    .attr('class', 'remove-icon-multilingual')
                    .on('click', function(d, index) {
                        if (field.locked()) return;
                        d3_event.preventDefault();

                        if (!d.lang || !d.value) {
                            _multilingual.splice(index, 1);
                            renderMultilingual(selection);
                        } else {
                            // remove from entity tags
                            var t = {};
                            t[key(d.lang)] = undefined;
                            dispatch.call('change', this, t);
                        }

                    })
                    .call(svgIcon('#iD-operation-delete'));

                wrap
                    .append('input')
                    .attr('class', 'localized-lang')
                    .attr('type', 'text')
                    .attr('placeholder', t('translate.localized_translation_language'))
                    .on('blur', changeLang)
                    .on('change', changeLang)
                    .call(langCombo);

                wrap
                    .append('input')
                    .attr('type', 'text')
                    .attr('placeholder', t('translate.localized_translation_name'))
                    .attr('class', 'localized-value')
                    .on('blur', changeValue)
                    .on('change', changeValue);
            });

        entriesEnter
            .style('margin-top', '0px')
            .style('max-height', '0px')
            .style('opacity', '0')
            .transition()
            .duration(200)
            .style('margin-top', '10px')
            .style('max-height', '240px')
            .style('opacity', '1')
            .on('end', function() {
                d3_select(this)
                    .style('max-height', '')
                    .style('overflow', 'visible');
            });

        entries = entries.merge(entriesEnter);

        entries.order();

        utilGetSetValue(entries.select('.localized-lang'), function(d) {
            return languageName(d.lang);
        });

        utilGetSetValue(entries.select('.localized-value'),
            function(d) { return d.value; });
    }