Skip to content

Instantly share code, notes, and snippets.

@aflores

aflores/index.html

Created March 15, 2017 20:40
Show Gist options
  • Save aflores/36b84f9d3e4dd0be6c6e041f376c286a to your computer and use it in GitHub Desktop.
Save aflores/36b84f9d3e4dd0be6c6e041f376c286a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/vafigo
Raw
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>
Raw
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
}
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment