eesur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    I needed some simple yes/no buttons that could be dropped into a prototype UI.
These toggle boolean yes and no buttons can be added into DOM as reusable UI elements. They can be passed custom click events.
Call the function and pass in container/selection as the argument:
var myButtons = noYesBtns('#some-id');

Optional overrides that can be chained via the api (showing defaults):
nTxt('no') // string for NO button
yTxt('yes') // string for YES button
nBg('grey') // string for unselected background for NO
yBg('grey') // string for unselected bg for YES
nBgActive('green'), // string for selected bg for NO
yBgActive('green'); // string for selected bg for YES

Note: examples in index.html

  
## d3_code_toggle_yn.js
(function(global) {
    'use strict';

    // convenience variables
    var defaultCol = '#eee',
        activeCol = '#7AC143';

    var noYesBtns = function(_selection) {

        global.noYesBtns = noYesBtns;

        var instance = {};

        var dispatch = d3.dispatch('_click');

        // some default values
        var nTxt = 'no', // text for NO button
            yTxt = 'yes', // text for YES button
            nBg = defaultCol, // unselected background for NO
            yBg = defaultCol, // unselected bg for YES
            nBgActive = activeCol, // selected bg for NO
            yBgActive = activeCol; // selected bg for YES

        instance.render = function() {

            var container = d3.select(_selection);

            var btn = function(txt, bg, bgActive) {
                container.append('button')
                    .attr({
                        class: 'ny-btn ny-btn-unselected'
                    })
                    .style({
                        background: bg
                    })
                    .text(txt)
                    .on('click', function () {
                        d3.select(_selection).selectAll('.ny-btn')
                            .style('background', bg)
                            .classed('ny-btn-unselected', true)
                            .classed('ny-btn-selected', false);

                        d3.select(this)
                            .style('background', activeCol)
                            .classed('ny-btn-unselected', false)
                            .classed('ny-btn-selected', true);

                        dispatch._click.apply(this, arguments);
                    });
            };

            var n = btn(nTxt, nBg, nBgActive);
            var y = btn(yTxt, yBg, yBgActive);

            return instance;
        };

        instance.nBg = function(value) {
            if (!arguments.length) return nBg;
            nBg = value;
            return this;
        };
        instance.yBg = function(value) {
            if (!arguments.length) return yBg;
            yBg = value;
            return this;
        };
        instance.nBgActive = function(value) {
            if (!arguments.length) return nBgActive;
            nBgActive = value;
            return this;
        };
        instance.yBgActive = function(value) {
            if (!arguments.length) return yBgActive;
            yBgActive = value;
            return this;
        };
        instance.nTxt = function(value) {
            if (!arguments.length) return nTxt;
            nTxt = value;
            return this;
        };
        instance.yTxt = function(value) {
            if (!arguments.length) return yTxt;
            yTxt = value;
            return this;
        };

        d3.rebind(instance, dispatch, 'on');
        return instance;
    };

    // allow access out ot IIFE
    global.noYesBtns = noYesBtns;

}(window));

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <style>
        body {
            font-family: Consolas, monaco, monospace;
            font-size: 14px;
            width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            font-size: 18px;
            font-weight: normal;
        }
        section {
            margin: 20px 0;
            padding-bottom: 20px;
            border-bottom: 1px dotted #ccc;
        }
        #q3 button.ny-btn {
            font-size: 72px;
        }
    </style>
    <!-- css for reusable  d3 buttons -->
    <link rel="stylesheet" href="noYesBtns.css">
</head>

<body>

    <header>
        <h1>Toggle reusable boolean buttons:</h1>
    </header>
    <section id="q1"></section>

    <section id="q2"></section>

    <section id="q3"></section>

    <footer>Feedback: <span id="feedback"></span> </footer>

    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <!-- js for reusable  d3 buttons -->
    <script src="d3_code_toggle_yn.js" charset="utf-8"></script>

    <script>
        var q1 = noYesBtns('#q1')
            .on('_click', function () {
                d3.select('#feedback').text('just selected: ' + this.firstChild.data);
            })
            .render();

        var q2 = noYesBtns('#q2')
            .nTxt('false')
            .yTxt('true')
            .on('_click', function () {
                d3.select(this).style('background', '#FDBB30');
                d3.select('#feedback').text('just selected: ' + this.firstChild.data);
            })
            .render();

        var q3 = noYesBtns('#q3')
            .nTxt('0')
            .yTxt('1')
            .on('_click', function () {
                d3.select('#feedback').text('just selected: ' + this.firstChild.data);
            })
            .render();
    </script>

</body>
</html>

## noYesBtns.css
button.ny-btn {
    font-family: Consolas, monaco, monospace;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color:  #130C0E; /* black */
    background-color: #4CAF50; /* green */
    width: 88px;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    display: inline-block;
    margin: 4px;
}
button.ny-btn:focus {
    outline:0;
}


## thumbnail.png

      
    Raw
  

              thumbnail.png
	(function(global) {
	'use strict';

	// convenience variables
	var defaultCol = '#eee',
	activeCol = '#7AC143';

	var noYesBtns = function(_selection) {

	global.noYesBtns = noYesBtns;

	var instance = {};

	var dispatch = d3.dispatch('_click');

	// some default values
	var nTxt = 'no', // text for NO button
	yTxt = 'yes', // text for YES button
	nBg = defaultCol, // unselected background for NO
	yBg = defaultCol, // unselected bg for YES
	nBgActive = activeCol, // selected bg for NO
	yBgActive = activeCol; // selected bg for YES

	instance.render = function() {

	var container = d3.select(_selection);

	var btn = function(txt, bg, bgActive) {
	container.append('button')
	.attr({
	class: 'ny-btn ny-btn-unselected'
	})
	.style({
	background: bg
	})
	.text(txt)
	.on('click', function () {
	d3.select(_selection).selectAll('.ny-btn')
	.style('background', bg)
	.classed('ny-btn-unselected', true)
	.classed('ny-btn-selected', false);

	d3.select(this)
	.style('background', activeCol)
	.classed('ny-btn-unselected', false)
	.classed('ny-btn-selected', true);

	dispatch._click.apply(this, arguments);
	});
	};

	var n = btn(nTxt, nBg, nBgActive);
	var y = btn(yTxt, yBg, yBgActive);

	return instance;
	};

	instance.nBg = function(value) {
	if (!arguments.length) return nBg;
	nBg = value;
	return this;
	};
	instance.yBg = function(value) {
	if (!arguments.length) return yBg;
	yBg = value;
	return this;
	};
	instance.nBgActive = function(value) {
	if (!arguments.length) return nBgActive;
	nBgActive = value;
	return this;
	};
	instance.yBgActive = function(value) {
	if (!arguments.length) return yBgActive;
	yBgActive = value;
	return this;
	};
	instance.nTxt = function(value) {
	if (!arguments.length) return nTxt;
	nTxt = value;
	return this;
	};
	instance.yTxt = function(value) {
	if (!arguments.length) return yTxt;
	yTxt = value;
	return this;
	};

	d3.rebind(instance, dispatch, 'on');
	return instance;
	};

	// allow access out ot IIFE
	global.noYesBtns = noYesBtns;

	}(window));
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset='utf-8'>
	<style>
	body {
	font-family: Consolas, monaco, monospace;
	font-size: 14px;
	width: 400px;
	margin: 0 auto;
	padding: 20px;
	}
	h1 {
	font-size: 18px;
	font-weight: normal;
	}
	section {
	margin: 20px 0;
	padding-bottom: 20px;
	border-bottom: 1px dotted #ccc;
	}
	#q3 button.ny-btn {
	font-size: 72px;
	}
	</style>
	<!-- css for reusable d3 buttons -->
	<link rel="stylesheet" href="noYesBtns.css">
	</head>

	<body>

	<header>
	<h1>Toggle reusable boolean buttons:</h1>
	</header>
	<section id="q1"></section>

	<section id="q2"></section>

	<section id="q3"></section>

	<footer>Feedback: <span id="feedback"></span> </footer>

	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<!-- js for reusable d3 buttons -->
	<script src="d3_code_toggle_yn.js" charset="utf-8"></script>

	<script>
	var q1 = noYesBtns('#q1')
	.on('_click', function () {
	d3.select('#feedback').text('just selected: ' + this.firstChild.data);
	})
	.render();

	var q2 = noYesBtns('#q2')
	.nTxt('false')
	.yTxt('true')
	.on('_click', function () {
	d3.select(this).style('background', '#FDBB30');
	d3.select('#feedback').text('just selected: ' + this.firstChild.data);
	})
	.render();

	var q3 = noYesBtns('#q3')
	.nTxt('0')
	.yTxt('1')
	.on('_click', function () {
	d3.select('#feedback').text('just selected: ' + this.firstChild.data);
	})
	.render();
	</script>

	</body>
	</html>
	button.ny-btn {
	font-family: Consolas, monaco, monospace;
	font-size: 14px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: #130C0E; /* black */
	background-color: #4CAF50; /* green */
	width: 88px;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	display: inline-block;
	margin: 4px;
	}
	button.ny-btn:focus {
	outline:0;
	}