first: function()

in toolkit/jb/svg.js [144:199]
55 lines of code
3 McCabe index (conditional complexity)

        first: function(bodyElm) {
            var paletteChange = Kefir.emitter();
            var productChange = Kefir.emitter();
            var lastSelected, lastHilitedLabel;
            var paletteGroups = [], labelText = {};
            d3.select(bodyElm)
                .append('g')
                .call(function(rootGroup) {
                    var labels = rootGroup.append('g')
                                          .attr('transform', 'translate(' + PALETTE_NODE_BODY_X +
                                                                     ', ' + ((-1 * PALETTE_NODE_HEIGHT / 2) + LABEL_Y_SHIFT) + ')');
                    PRODUCTS.forEach(function(product, i) {
                        labelText[product.id] =
                                    labels.append('text')
                                          .attr('class', 'rpd-jb-product-label')
                                          .attr('transform', 'translate(' + (i * 14) + ',  0)')
                                          .text(product.label);
                    });
                })
                .call(function(rootGroup) {
                    var palettes = rootGroup.append('g')
                                            .attr('transform', 'translate(' + PALETTE_NODE_BODY_X +
                                                                       ', ' + PALETTE_NODE_BODY_Y + ')');
                    PRODUCTS.forEach(function(product, i) {
                        var palette = product.palette;
                        palettes.append('g')
                                .attr('class', 'rpd-jb-palette-variant')
                                .attr('transform', 'translate(' + (i * 14) + ', ' +
                                                                (-1 * (palette.length / 2 * cellSide)) + ')')
                                .call((function(palette, productId) { return function(paletteGroup) {
                                    palette.forEach(function(color, i) {
                                        paletteGroup.append('rect').attr('rx', 4)
                                                    .attr('x', 0).attr('y', i * cellSide)
                                                    .attr('width', cellSide).attr('height', cellSide)
                                                    .attr('fill', color);
                                    });
                                    Kefir.fromEvents(paletteGroup.node(), 'click').onValue(function() {
                                        if (lastSelected) lastSelected.attr('class', 'rpd-jb-palette-variant');
                                        if (lastHilitedLabel) lastHilitedLabel.attr('class', 'rpd-jb-product-label');
                                        labelText[productId].attr('class', 'rpd-jb-product-label rpd-jb-active-label');
                                        paletteGroup.attr('class', 'rpd-jb-palette-variant rpd-jb-active-variant');
                                        lastSelected = paletteGroup;
                                        lastHilitedLabel = labelText[productId];
                                        paletteChange.emit(palette);
                                        productChange.emit(product.id);
                                    });
                                    paletteGroups.push(paletteGroup);
                                } })(palette, product.id));
                    });
                });

            lastSelected = paletteGroups[0];
            paletteGroups[0].attr('class', 'rpd-jb-palette-variant rpd-jb-active-variant');
            return { 'palette': { valueOut: paletteChange },
                     'product':  { valueOut: productChange } };
        }