function drawListItems()

in modules/ui/issues.js [547:634]


    function drawListItems(selection, data, type, name, change, active) {
        var items = selection.selectAll('li')
            .data(data);

        // Exit
        items.exit()
            .remove();

        // Enter
        var enter = items.enter()
            .append('li');

        if (name === 'rule') {
            enter
                .call(tooltip()
                    .title(function(d) { return t('issues.' + d + '.tip'); })
                    .placement('top')
                );
        }

        var label = enter
            .append('label');

        label
            .append('input')
            .attr('type', type)
            .attr('name', name)
            .on('change', change);

        label
            .append('span')
            .html(function(d) {
                var params = {};
                if (d === 'unsquare_way') {
                    params.val = '<span class="square-degrees"></span>';
                }
                return t('issues.' + d + '.title', params);
            });

        // Update
        items = items
            .merge(enter);

        items
            .classed('active', active)
            .selectAll('input')
            .property('checked', active)
            .property('indeterminate', false);


        // user-configurable square threshold
        var degStr = context.storage('validate-square-degrees');
        if (degStr === null) {
            degStr = '' + DEFAULTSQUARE;
        }

        var span = items.selectAll('.square-degrees');
        var input = span.selectAll('.square-degrees-input')
            .data([0]);

        // enter / update
        input.enter()
            .append('input')
            .attr('type', 'number')
            .attr('min', '' + MINSQUARE)
            .attr('max', '' + MAXSQUARE)
            .attr('step', '0.5')
            .attr('class', 'square-degrees-input')
            .call(utilNoAuto)
            .on('input', function() {
                this.style.width = (this.value.length + 2.5) + 'ch';   // resize
            })
            .on('click', function () {
                d3_event.preventDefault();
                d3_event.stopPropagation();
                this.select();
            })
            .on('keyup', function () {
                if (d3_event.keyCode === 13) { // enter
                    this.blur();
                    this.select();
                }
            })
            .on('blur', changeSquare)
            .merge(input)
            .property('value', degStr)
            .style('width', (degStr.length + 2.5) + 'ch');   // resize
    }