aflores/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
<style id="jsbin-css">
#cstagButtons ul {
    list-style-type: none;
    margin: 2;
    padding: 2;
    font-family: verdana;
    font-size: 12px;
    overflow: hidden;
}

#cstagButtons li {
   display: inline-block;
   min-width: 40px;
   padding: 3px;
   border: #ccc 1px solid;
   text-align: center;
   margin: 3px;
}
.csTagSelect {
  background-color: #C4F4CC
}
</style>
</head>
<body>
  <div id="cstagButtons"><ul></ul></div>
<div>
  <h3>Items to be controller by tags (ex. Rules)</h3>
<ul>
  <li><span data-cstags-key="0" data-cstags="">Rule zero</span></li>
  <li><span data-cstags-key="1" data-cstags="">Rule one</span></li>
  <li><span data-cstags-key="2" data-cstags="">Rule two</span></li>
  <li><span data-cstags-key="3" data-cstags="">Rule three</span></li>
  <li><span data-cstags-key="4" data-cstags="">Rule four</span></li>
  <li><span data-cstags-key="5" data-cstags="">Rule five</span></li>
  </ul>
 </div>
<script id="jsbin-javascript">
/*
** csTaggable
**
** A mechanism to show/hide content based on dynamically injected tags
**
** How it works
**
** - a tag consists of a key and a label
** - the key should uniquely identify an application domain item (ie. a rule)
** - these items will be referred to as tagees
** -
** - the data-cstags-key must contain the tagee's key
** -
**
**
**
**
*/
function csTaggable() {

  var self = this;
   self.tagPool = [];
   self.activeTags = [];

  // add tag to the component  tag = { key: nnn, label: sss }
  self.addTag = function(tag) {
    self.tagPool.push(tag);

    return self;
  }

  // add multiple tags (array)
  self.addTags = function(tags) {
    tags.forEach(function(tag) {
      self.addTag(tag);
    });

    return self;
  }

  // return current tags
  self.getTagPool = function() {
    return self.tagPool;
  }

  // append to the data-cstag attribute to tagees
  // depends on data-cstag-keys to identify targers
  //
  self.injectTags = function() {
    $('[data-cstags-key]').attr('data-cstags',''); // reset tagees
    self.tagPool.forEach(function(tag) {
      var cstags = $("[data-cstags-key='" + tag.key + "']").attr('data-cstags');
      $("[data-cstags-key='" + tag.key + "']").attr('data-cstags', cstags + '#' + tag.label)
    });

    return self;
  }

  // show tag buttons ( build a list inside "#cstagButtons ul")
  self.showButtons = function() {

    // lbls only
    var lbls = self.tagPool.map(function(t) {
       return t.label;
    });

    lbls.sort();

    // no dups then create buttons
    if (lbls.length > 0){
      var uniqLbls =[lbls[0]];
      for(var i=1; i < lbls.length; i++) {
        if(uniqLbls.indexOf(lbls[i]) == -1) {
          uniqLbls.push(lbls[i]);
        }
      }
      // render
      $("#cstagButtons ul").empty();
      uniqLbls.forEach(function(label) {
        $("#cstagButtons ul").append("<li class='cstag-button'>" +
         label + "</li>");
      });

    }

    // set button click event handle
    $("#cstagButtons ul").on('click','li', function() {

      var tag = $(this).text();

      var ix = self.activeTags.indexOf(tag);
      if (ix == -1) {
        self.activeTags.push(tag);
        $(this).addClass('csTagSelect');
      } else {
        self.activeTags.splice(ix,1);
        $(this).removeClass('csTagSelect');
      }
      self.activateTags(csTaggable.activeTags);
    });

    return self;
  }

  // show container of tagees with matching selector
  self.showTagees = function(sel) {
        $(sel).parent().show();
  }

  // hide container of tagees with matching selector
  self.hideTagees = function(sel) {
        $(sel).parent().hide();
  }

  // show hide things based on activeTags
  self.activateTags = function() {

    var tagCount = self.activeTags.length;

    // start by hiding all tagees' parent
    self.hideTagees('[data-cstags]');

    // determine which ones to show
    if (tagCount == 0) {
      // no tags active, show all tagees
      self.showTagees('[data-cstags]');

    } else { // show tagees for tags in the active list
      var tageesToShow = '';
      self.activeTags.sort();

      self.activeTags.forEach(function(tag) {
        tageesToShow = tageesToShow + "[data-cstags*='#" + tag + "']";
      });

    //  console.log(tageesToShow);
      self.showTagees(tageesToShow);
    }

    return self;
  }

  // full activation of the module
  self.initialize = function(tags) {
    self.tagPool = [];
    self.activeTags = [];
    self.addTags(tags)
        .injectTags()
        .activateTags()
        .showButtons();

    return self;
  }

  return self;
}
</script>


<script id="jsbin-source-javascript" type="text/javascript">
/*
** csTaggable
**
** A mechanism to show/hide content based on dynamically injected tags
**
** How it works
**
** - a tag consists of a key and a label
** - the key should uniquely identify an application domain item (ie. a rule)
** - these items will be referred to as tagees
** -
** - the data-cstags-key must contain the tagee's key
** -
**
**
**
**
*/
function csTaggable() {

  var self = this;
   self.tagPool = [];
   self.activeTags = [];

  // add tag to the component  tag = { key: nnn, label: sss }
  self.addTag = function(tag) {
    self.tagPool.push(tag);

    return self;
  }

  // add multiple tags (array)
  self.addTags = function(tags) {
    tags.forEach(function(tag) {
      self.addTag(tag);
    });

    return self;
  }

  // return current tags
  self.getTagPool = function() {
    return self.tagPool;
  }

  // append to the data-cstag attribute to tagees
  // depends on data-cstag-keys to identify targers
  //
  self.injectTags = function() {
    $('[data-cstags-key]').attr('data-cstags',''); // reset tagees
    self.tagPool.forEach(function(tag) {
      var cstags = $("[data-cstags-key='" + tag.key + "']").attr('data-cstags');
      $("[data-cstags-key='" + tag.key + "']").attr('data-cstags', cstags + '#' + tag.label)
    });

    return self;
  }

  // show tag buttons ( build a list inside "#cstagButtons ul")
  self.showButtons = function() {

    // lbls only
    var lbls = self.tagPool.map(function(t) {
       return t.label;
    });

    lbls.sort();

    // no dups then create buttons
    if (lbls.length > 0){
      var uniqLbls =[lbls[0]];
      for(var i=1; i < lbls.length; i++) {
        if(uniqLbls.indexOf(lbls[i]) == -1) {
          uniqLbls.push(lbls[i]);
        }
      }
      // render
      $("#cstagButtons ul").empty();
      uniqLbls.forEach(function(label) {
        $("#cstagButtons ul").append("<li class='cstag-button'>" +
         label + "</li>");
      });

    }

    // set button click event handle
    $("#cstagButtons ul").on('click','li', function() {

      var tag = $(this).text();

      var ix = self.activeTags.indexOf(tag);
      if (ix == -1) {
        self.activeTags.push(tag);
        $(this).addClass('csTagSelect');
      } else {
        self.activeTags.splice(ix,1);
        $(this).removeClass('csTagSelect');
      }
      self.activateTags(csTaggable.activeTags);
    });

    return self;
  }

  // show container of tagees with matching selector
  self.showTagees = function(sel) {
        $(sel).parent().show();
  }

  // hide container of tagees with matching selector
  self.hideTagees = function(sel) {
        $(sel).parent().hide();
  }

  // show hide things based on activeTags
  self.activateTags = function() {

    var tagCount = self.activeTags.length;

    // start by hiding all tagees' parent
    self.hideTagees('[data-cstags]');

    // determine which ones to show
    if (tagCount == 0) {
      // no tags active, show all tagees
      self.showTagees('[data-cstags]');

    } else { // show tagees for tags in the active list
      var tageesToShow = '';
      self.activeTags.sort();

      self.activeTags.forEach(function(tag) {
        tageesToShow = tageesToShow + "[data-cstags*='#" + tag + "']";
      });

    //  console.log(tageesToShow);
      self.showTagees(tageesToShow);
    }

    return self;
  }

  // full activation of the module
  self.initialize = function(tags) {
    self.tagPool = [];
    self.activeTags = [];
    self.addTags(tags)
        .injectTags()
        .activateTags()
        .showButtons();

    return self;
  }

  return self;
}</script></body>
</html>

## jsbin.vafigo.css
#cstagButtons ul {
    list-style-type: none;
    margin: 2;
    padding: 2;
    font-family: verdana;
    font-size: 12px;
    overflow: hidden;
}

#cstagButtons li {
   display: inline-block;
   min-width: 40px;
   padding: 3px;
   border: #ccc 1px solid;
   text-align: center;
   margin: 3px;
}
.csTagSelect {
  background-color: #C4F4CC
}

## jsbin.vafigo.js
/*
** csTaggable
**
** A mechanism to show/hide content based on dynamically injected tags
**
** How it works
**
** - a tag consists of a key and a label
** - the key should uniquely identify an application domain item (ie. a rule)
** - these items will be referred to as tagees
** -
** - the data-cstags-key must contain the tagee's key
** -
**
**
**
**
*/
function csTaggable() {

  var self = this;
   self.tagPool = [];
   self.activeTags = [];

  // add tag to the component  tag = { key: nnn, label: sss }
  self.addTag = function(tag) {
    self.tagPool.push(tag);

    return self;
  }

  // add multiple tags (array)
  self.addTags = function(tags) {
    tags.forEach(function(tag) {
      self.addTag(tag);
    });

    return self;
  }

  // return current tags
  self.getTagPool = function() {
    return self.tagPool;
  }

  // append to the data-cstag attribute to tagees
  // depends on data-cstag-keys to identify targers
  //
  self.injectTags = function() {
    $('[data-cstags-key]').attr('data-cstags',''); // reset tagees
    self.tagPool.forEach(function(tag) {
      var cstags = $("[data-cstags-key='" + tag.key + "']").attr('data-cstags');
      $("[data-cstags-key='" + tag.key + "']").attr('data-cstags', cstags + '#' + tag.label)
    });

    return self;
  }

  // show tag buttons ( build a list inside "#cstagButtons ul")
  self.showButtons = function() {

    // lbls only
    var lbls = self.tagPool.map(function(t) {
       return t.label;
    });

    lbls.sort();

    // no dups then create buttons
    if (lbls.length > 0){
      var uniqLbls =[lbls[0]];
      for(var i=1; i < lbls.length; i++) {
        if(uniqLbls.indexOf(lbls[i]) == -1) {
          uniqLbls.push(lbls[i]);
        }
      }
      // render
      $("#cstagButtons ul").empty();
      uniqLbls.forEach(function(label) {
        $("#cstagButtons ul").append("<li class='cstag-button'>" +
         label + "</li>");
      });

    }

    // set button click event handle
    $("#cstagButtons ul").on('click','li', function() {

      var tag = $(this).text();

      var ix = self.activeTags.indexOf(tag);
      if (ix == -1) {
        self.activeTags.push(tag);
        $(this).addClass('csTagSelect');
      } else {
        self.activeTags.splice(ix,1);
        $(this).removeClass('csTagSelect');
      }
      self.activateTags(csTaggable.activeTags);
    });

    return self;
  }

  // show container of tagees with matching selector
  self.showTagees = function(sel) {
        $(sel).parent().show();
  }

  // hide container of tagees with matching selector
  self.hideTagees = function(sel) {
        $(sel).parent().hide();
  }

  // show hide things based on activeTags
  self.activateTags = function() {

    var tagCount = self.activeTags.length;

    // start by hiding all tagees' parent
    self.hideTagees('[data-cstags]');

    // determine which ones to show
    if (tagCount == 0) {
      // no tags active, show all tagees
      self.showTagees('[data-cstags]');

    } else { // show tagees for tags in the active list
      var tageesToShow = '';
      self.activeTags.sort();

      self.activeTags.forEach(function(tag) {
        tageesToShow = tageesToShow + "[data-cstags*='#" + tag + "']";
      });

    //  console.log(tageesToShow);
      self.showTagees(tageesToShow);
    }

    return self;
  }

  // full activation of the module
  self.initialize = function(tags) {
    self.tagPool = [];
    self.activeTags = [];
    self.addTags(tags)
        .injectTags()
        .activateTags()
        .showButtons();

    return self;
  }

  return self;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
	<style id="jsbin-css">
	#cstagButtons ul {
	list-style-type: none;
	margin: 2;
	padding: 2;
	font-family: verdana;
	font-size: 12px;
	overflow: hidden;
	}

	#cstagButtons li {
	display: inline-block;
	min-width: 40px;
	padding: 3px;
	border: #ccc 1px solid;
	text-align: center;
	margin: 3px;
	}
	.csTagSelect {
	background-color: #C4F4CC
	}
	</style>
	</head>
	<body>
	<div id="cstagButtons"><ul></ul></div>
	<div>
	<h3>Items to be controller by tags (ex. Rules)</h3>
	<ul>
	<li><span data-cstags-key="0" data-cstags="">Rule zero</span></li>
	<li><span data-cstags-key="1" data-cstags="">Rule one</span></li>
	<li><span data-cstags-key="2" data-cstags="">Rule two</span></li>
	<li><span data-cstags-key="3" data-cstags="">Rule three</span></li>
	<li><span data-cstags-key="4" data-cstags="">Rule four</span></li>
	<li><span data-cstags-key="5" data-cstags="">Rule five</span></li>
	</ul>
	</div>
	<script id="jsbin-javascript">
	/*
	** csTaggable
	**
	** A mechanism to show/hide content based on dynamically injected tags
	**
	** How it works
	**
	** - a tag consists of a key and a label
	** - the key should uniquely identify an application domain item (ie. a rule)
	** - these items will be referred to as tagees
	** -
	** - the data-cstags-key must contain the tagee's key
	** -
	**
	**
	**
	**
	*/
	function csTaggable() {

	var self = this;
	self.tagPool = [];
	self.activeTags = [];

	// add tag to the component tag = { key: nnn, label: sss }
	self.addTag = function(tag) {
	self.tagPool.push(tag);

	return self;
	}

	// add multiple tags (array)
	self.addTags = function(tags) {
	tags.forEach(function(tag) {
	self.addTag(tag);
	});

	return self;
	}

	// return current tags
	self.getTagPool = function() {
	return self.tagPool;
	}

	// append to the data-cstag attribute to tagees
	// depends on data-cstag-keys to identify targers
	//
	self.injectTags = function() {
	$('[data-cstags-key]').attr('data-cstags',''); // reset tagees
	self.tagPool.forEach(function(tag) {
	var cstags = $("[data-cstags-key='" + tag.key + "']").attr('data-cstags');
	$("[data-cstags-key='" + tag.key + "']").attr('data-cstags', cstags + '#' + tag.label)
	});

	return self;
	}

	// show tag buttons ( build a list inside "#cstagButtons ul")
	self.showButtons = function() {

	// lbls only
	var lbls = self.tagPool.map(function(t) {
	return t.label;
	});

	lbls.sort();

	// no dups then create buttons
	if (lbls.length > 0){
	var uniqLbls =[lbls[0]];
	for(var i=1; i < lbls.length; i++) {
	if(uniqLbls.indexOf(lbls[i]) == -1) {
	uniqLbls.push(lbls[i]);
	}
	}
	// render
	$("#cstagButtons ul").empty();
	uniqLbls.forEach(function(label) {
	$("#cstagButtons ul").append("<li class='cstag-button'>" +
	label + "</li>");
	});

	}

	// set button click event handle
	$("#cstagButtons ul").on('click','li', function() {

	var tag = $(this).text();

	var ix = self.activeTags.indexOf(tag);
	if (ix == -1) {
	self.activeTags.push(tag);
	$(this).addClass('csTagSelect');
	} else {
	self.activeTags.splice(ix,1);
	$(this).removeClass('csTagSelect');
	}
	self.activateTags(csTaggable.activeTags);
	});

	return self;
	}

	// show container of tagees with matching selector
	self.showTagees = function(sel) {
	$(sel).parent().show();
	}

	// hide container of tagees with matching selector
	self.hideTagees = function(sel) {
	$(sel).parent().hide();
	}

	// show hide things based on activeTags
	self.activateTags = function() {

	var tagCount = self.activeTags.length;

	// start by hiding all tagees' parent
	self.hideTagees('[data-cstags]');

	// determine which ones to show
	if (tagCount == 0) {
	// no tags active, show all tagees
	self.showTagees('[data-cstags]');

	} else { // show tagees for tags in the active list
	var tageesToShow = '';
	self.activeTags.sort();

	self.activeTags.forEach(function(tag) {
	tageesToShow = tageesToShow + "[data-cstags*='#" + tag + "']";
	});

	// console.log(tageesToShow);
	self.showTagees(tageesToShow);
	}

	return self;
	}

	// full activation of the module
	self.initialize = function(tags) {
	self.tagPool = [];
	self.activeTags = [];
	self.addTags(tags)
	.injectTags()
	.activateTags()
	.showButtons();

	return self;
	}

	return self;
	}
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">
	/*
	** csTaggable
	**
	** A mechanism to show/hide content based on dynamically injected tags
	**
	** How it works
	**
	** - a tag consists of a key and a label
	** - the key should uniquely identify an application domain item (ie. a rule)
	** - these items will be referred to as tagees
	** -
	** - the data-cstags-key must contain the tagee's key
	** -
	**
	**
	**
	**
	*/
	function csTaggable() {

	var self = this;
	self.tagPool = [];
	self.activeTags = [];

	// add tag to the component tag = { key: nnn, label: sss }
	self.addTag = function(tag) {
	self.tagPool.push(tag);

	return self;
	}

	// add multiple tags (array)
	self.addTags = function(tags) {
	tags.forEach(function(tag) {
	self.addTag(tag);
	});

	return self;
	}

	// return current tags
	self.getTagPool = function() {
	return self.tagPool;
	}

	// append to the data-cstag attribute to tagees
	// depends on data-cstag-keys to identify targers
	//
	self.injectTags = function() {
	$('[data-cstags-key]').attr('data-cstags',''); // reset tagees
	self.tagPool.forEach(function(tag) {
	var cstags = $("[data-cstags-key='" + tag.key + "']").attr('data-cstags');
	$("[data-cstags-key='" + tag.key + "']").attr('data-cstags', cstags + '#' + tag.label)
	});

	return self;
	}

	// show tag buttons ( build a list inside "#cstagButtons ul")
	self.showButtons = function() {

	// lbls only
	var lbls = self.tagPool.map(function(t) {
	return t.label;
	});

	lbls.sort();

	// no dups then create buttons
	if (lbls.length > 0){
	var uniqLbls =[lbls[0]];
	for(var i=1; i < lbls.length; i++) {
	if(uniqLbls.indexOf(lbls[i]) == -1) {
	uniqLbls.push(lbls[i]);
	}
	}
	// render
	$("#cstagButtons ul").empty();
	uniqLbls.forEach(function(label) {
	$("#cstagButtons ul").append("<li class='cstag-button'>" +
	label + "</li>");
	});

	}

	// set button click event handle
	$("#cstagButtons ul").on('click','li', function() {

	var tag = $(this).text();

	var ix = self.activeTags.indexOf(tag);
	if (ix == -1) {
	self.activeTags.push(tag);
	$(this).addClass('csTagSelect');
	} else {
	self.activeTags.splice(ix,1);
	$(this).removeClass('csTagSelect');
	}
	self.activateTags(csTaggable.activeTags);
	});

	return self;
	}

	// show container of tagees with matching selector
	self.showTagees = function(sel) {
	$(sel).parent().show();
	}

	// hide container of tagees with matching selector
	self.hideTagees = function(sel) {
	$(sel).parent().hide();
	}

	// show hide things based on activeTags
	self.activateTags = function() {

	var tagCount = self.activeTags.length;

	// start by hiding all tagees' parent
	self.hideTagees('[data-cstags]');

	// determine which ones to show
	if (tagCount == 0) {
	// no tags active, show all tagees
	self.showTagees('[data-cstags]');

	} else { // show tagees for tags in the active list
	var tageesToShow = '';
	self.activeTags.sort();

	self.activeTags.forEach(function(tag) {
	tageesToShow = tageesToShow + "[data-cstags*='#" + tag + "']";
	});

	// console.log(tageesToShow);
	self.showTagees(tageesToShow);
	}

	return self;
	}

	// full activation of the module
	self.initialize = function(tags) {
	self.tagPool = [];
	self.activeTags = [];
	self.addTags(tags)
	.injectTags()
	.activateTags()
	.showButtons();

	return self;
	}

	return self;
	}</script></body>
	</html>