Created
March 14, 2017 12:06
-
-
Save aflores/0a1f8212d802dc58a0b4e9a1fa4b90c8 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/vafigo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| </head> | |
| <body> | |
| <div id="tagButtons"><ul></ul></div> | |
| <div> | |
| <h3>Items to be controller by tags (ex. Rules)</h3> | |
| <ul> | |
| <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> | |
| </ul> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| csTaggable = { | |
| // | |
| // es5, i assume no lodash or underscore is not available | |
| // | |
| tagPool: [], | |
| activeTags: [], | |
| // add tag to the component tag = { key: nnn, label: sss } | |
| addTag: function(tag) { | |
| csTaggable.tagPool.push(tag); | |
| }, | |
| // add cstag attribute to tagees | |
| injectTags : function(tagPool) { | |
| tagPool.forEach(function(tag) { | |
| var cstags = $("[data-cstags-key='" + tag.key + "']").attr('data-cstags'); | |
| // console.log(cstags); | |
| $("[data-cstags-key='" + tag.key + "']").attr('data-cstags', cstags + '#' + tag.label) | |
| // console.log($("[data-cstags-key='" + tag.key + "']").data('data-cstags')); | |
| }); | |
| }, | |
| // show tag buttons | |
| renderTagButtons: function(tagPool) { | |
| // lbls only | |
| var lbls = tagPool.map(function(t) { | |
| return t.label; | |
| }); | |
| lbls.sort(); | |
| // no dups and 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 | |
| $("#tagButtons ul").empty(); | |
| uniqLbls.forEach(function(label) { | |
| $("#tagButtons ul").append("<li class='cstag-button'>" + | |
| label + "</li>"); | |
| }); | |
| } | |
| $("#tagButtons ul").on('click','li', function() { | |
| var tag = $(this).text(); | |
| var ix = csTaggable.activeTags.indexOf(tag); | |
| if (ix == -1) { | |
| csTaggable.activeTags.push(tag); | |
| $(this).css('background-color','#ffc') | |
| } else { | |
| csTaggable.activeTags.splice(ix,1); | |
| $(this).css('background-color','#fff') | |
| } | |
| csTaggable.activateTags(csTaggable.activeTags); | |
| }); | |
| }, | |
| // show container of tagees with matching tag | |
| showWithTag : function(tag) { | |
| var sel = "[data-cstags*='#" + tag + "']"; | |
| $(sel).parent().show(); | |
| }, | |
| // show hide things based on activeTags | |
| activateTags: function(activeList) { | |
| var tagCount = activeList.length; | |
| // start by hiding all tagees | |
| $("[data-cstags]").parent().hide() | |
| ; | |
| // determine which ones to show | |
| if (tagCount === 0) // no tags active, show all tagees | |
| $("[data-cstags]").parent().show() | |
| else // show tagees for tags in the active list | |
| activeList.forEach(function(tag) { | |
| csTaggable.showWithTag(tag); | |
| }); | |
| } | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">csTaggable = { | |
| // | |
| // es5, i assume no lodash or underscore is not available | |
| // | |
| tagPool: [], | |
| activeTags: [], | |
| // add tag to the component tag = { key: nnn, label: sss } | |
| addTag: function(tag) { | |
| csTaggable.tagPool.push(tag); | |
| }, | |
| // add cstag attribute to tagees | |
| injectTags : function(tagPool) { | |
| tagPool.forEach(function(tag) { | |
| var cstags = $("[data-cstags-key='" + tag.key + "']").attr('data-cstags'); | |
| // console.log(cstags); | |
| $("[data-cstags-key='" + tag.key + "']").attr('data-cstags', cstags + '#' + tag.label) | |
| // console.log($("[data-cstags-key='" + tag.key + "']").data('data-cstags')); | |
| }); | |
| }, | |
| // show tag buttons | |
| renderTagButtons: function(tagPool) { | |
| // lbls only | |
| var lbls = tagPool.map(function(t) { | |
| return t.label; | |
| }); | |
| lbls.sort(); | |
| // no dups and 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 | |
| $("#tagButtons ul").empty(); | |
| uniqLbls.forEach(function(label) { | |
| $("#tagButtons ul").append("<li class='cstag-button'>" + | |
| label + "</li>"); | |
| }); | |
| } | |
| $("#tagButtons ul").on('click','li', function() { | |
| var tag = $(this).text(); | |
| var ix = csTaggable.activeTags.indexOf(tag); | |
| if (ix == -1) { | |
| csTaggable.activeTags.push(tag); | |
| $(this).css('background-color','#ffc') | |
| } else { | |
| csTaggable.activeTags.splice(ix,1); | |
| $(this).css('background-color','#fff') | |
| } | |
| csTaggable.activateTags(csTaggable.activeTags); | |
| }); | |
| }, | |
| // show container of tagees with matching tag | |
| showWithTag : function(tag) { | |
| var sel = "[data-cstags*='#" + tag + "']"; | |
| $(sel).parent().show(); | |
| }, | |
| // show hide things based on activeTags | |
| activateTags: function(activeList) { | |
| var tagCount = activeList.length; | |
| // start by hiding all tagees | |
| $("[data-cstags]").parent().hide() | |
| ; | |
| // determine which ones to show | |
| if (tagCount === 0) // no tags active, show all tagees | |
| $("[data-cstags]").parent().show() | |
| else // show tagees for tags in the active list | |
| activeList.forEach(function(tag) { | |
| csTaggable.showWithTag(tag); | |
| }); | |
| } | |
| }</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| csTaggable = { | |
| // | |
| // es5, i assume no lodash or underscore is not available | |
| // | |
| tagPool: [], | |
| activeTags: [], | |
| // add tag to the component tag = { key: nnn, label: sss } | |
| addTag: function(tag) { | |
| csTaggable.tagPool.push(tag); | |
| }, | |
| // add cstag attribute to tagees | |
| injectTags : function(tagPool) { | |
| tagPool.forEach(function(tag) { | |
| var cstags = $("[data-cstags-key='" + tag.key + "']").attr('data-cstags'); | |
| // console.log(cstags); | |
| $("[data-cstags-key='" + tag.key + "']").attr('data-cstags', cstags + '#' + tag.label) | |
| // console.log($("[data-cstags-key='" + tag.key + "']").data('data-cstags')); | |
| }); | |
| }, | |
| // show tag buttons | |
| renderTagButtons: function(tagPool) { | |
| // lbls only | |
| var lbls = tagPool.map(function(t) { | |
| return t.label; | |
| }); | |
| lbls.sort(); | |
| // no dups and 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 | |
| $("#tagButtons ul").empty(); | |
| uniqLbls.forEach(function(label) { | |
| $("#tagButtons ul").append("<li class='cstag-button'>" + | |
| label + "</li>"); | |
| }); | |
| } | |
| $("#tagButtons ul").on('click','li', function() { | |
| var tag = $(this).text(); | |
| var ix = csTaggable.activeTags.indexOf(tag); | |
| if (ix == -1) { | |
| csTaggable.activeTags.push(tag); | |
| $(this).css('background-color','#ffc') | |
| } else { | |
| csTaggable.activeTags.splice(ix,1); | |
| $(this).css('background-color','#fff') | |
| } | |
| csTaggable.activateTags(csTaggable.activeTags); | |
| }); | |
| }, | |
| // show container of tagees with matching tag | |
| showWithTag : function(tag) { | |
| var sel = "[data-cstags*='#" + tag + "']"; | |
| $(sel).parent().show(); | |
| }, | |
| // show hide things based on activeTags | |
| activateTags: function(activeList) { | |
| var tagCount = activeList.length; | |
| // start by hiding all tagees | |
| $("[data-cstags]").parent().hide() | |
| ; | |
| // determine which ones to show | |
| if (tagCount === 0) // no tags active, show all tagees | |
| $("[data-cstags]").parent().show() | |
| else // show tagees for tags in the active list | |
| activeList.forEach(function(tag) { | |
| csTaggable.showWithTag(tag); | |
| }); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment