selecton/src/js/makeItemContent.js

Selecton.js combines a searchbar and a dropdown menu with nested child lists.

import {select as d3select} from 'd3-selection';

export default function(d, searchTerm, renderFn){

    //////////////////////////////////////////
    // CREATE SPAN FOR LIST ITEM
    //////////////////////////////////////////
    var html        = '';
    var itemContent = d3select(document.createElement('span'));

    itemContent
        .attr('class', 'dropdown-list-item-content')
        .html(d._search_ ? d._search_ : renderFn(d));

    html += itemContent.node().outerHTML;

    //////////////////////////////////////////
    // IF ITEM HAS CHILDREN ADD TOGGLE BTN
    //////////////////////////////////////////
    if(d.children && d.children.length > 0 && !searchTerm){

        var closed     = d.children.every(function(el){ return el.closed === true || el.closed === undefined; });
        var itemExpand = d3select(document.createElement('span'));

        itemExpand
            .attr('class', 'dropdown-list-item-expand-toggle')
            .classed('dropdown-list-item-expand-toggle-closed', closed)
            .classed('dropdown-list-item-expand-toggle-open', !closed)
            .html(' ');

        html += itemExpand.node().outerHTML;
    }

    return html;
}