iD/modules/ui/disclosure.js

import { dispatch as d3_dispatch } from 'd3-dispatch';
import { event as d3_event } from 'd3-selection';

import { svgIcon } from '../svg';
import { utilRebind } from '../util/rebind';
import { uiToggle } from './toggle';
import { textDirection } from '../util/locale';


export function uiDisclosure(context, key, expandedDefault) {
    var dispatch = d3_dispatch('toggled');
    var _preference = (context.storage('disclosure.' + key + '.expanded'));
    var _expanded = (_preference === null ? !!expandedDefault : (_preference === 'true'));
    var _title;
    var _updatePreference = true;
    var _content = function () {};


    var disclosure = function(selection) {
        var hideToggle = selection.selectAll('.hide-toggle-' + key)
            .data([0]);

        // enter
        var hideToggleEnter = hideToggle.enter()
            .append('a')
            .attr('href', '#')
            .attr('class', 'hide-toggle hide-toggle-' + key)
            .call(svgIcon('', 'pre-text', 'hide-toggle-icon'));

        hideToggleEnter
            .append('span')
            .attr('class', 'hide-toggle-text');

        // update
        hideToggle = hideToggleEnter
            .merge(hideToggle);

        hideToggle
            .on('click', toggle)
            .classed('expanded', _expanded);

        hideToggle.selectAll('.hide-toggle-text')
            .text(_title);

        hideToggle.selectAll('.hide-toggle-icon')
            .attr('xlink:href', _expanded ? '#iD-icon-down'
                : (textDirection === 'rtl') ? '#iD-icon-backward' : '#iD-icon-forward'
            );


        var wrap = selection.selectAll('.disclosure-wrap')
            .data([0]);

        wrap = wrap.enter()
            .append('div')
            .attr('class', 'disclosure-wrap disclosure-wrap-' + key)
            .merge(wrap);

        wrap
            .classed('hide', !_expanded)
            .call(_content);


        function toggle() {
            d3_event.preventDefault();

            _expanded = !_expanded;

            if (_updatePreference) {
                context.storage('disclosure.' + key + '.expanded', _expanded);
            }

            hideToggle
                .classed('expanded', _expanded);

            hideToggle.selectAll('.hide-toggle-icon')
                .attr('xlink:href', _expanded ? '#iD-icon-down'
                    : (textDirection === 'rtl') ? '#iD-icon-backward' : '#iD-icon-forward'
                );

            wrap
                .call(uiToggle(_expanded));

            dispatch.call('toggled', this, _expanded);
        }
    };


    disclosure.title = function(_) {
        if (!arguments.length) return _title;
        _title = _;
        return disclosure;
    };


    disclosure.expanded = function(_) {
        if (!arguments.length) return _expanded;
        _expanded = _;
        return disclosure;
    };


    disclosure.updatePreference = function(_) {
        if (!arguments.length) return _updatePreference;
        _updatePreference = _;
        return disclosure;
    };


    disclosure.content = function(_) {
        if (!arguments.length) return _content;
        _content = _;
        return disclosure;
    };


    return utilRebind(disclosure, dispatch, 'on');
}