Keyword Tags and Highlighting working

To quickly jump to the end of todays achievements, I made

  • individual tags for the top keywords, with the tags displaying in a side column.
  • the ability to highlight each keyword individually, or highlight all the keywords using a checkbox tick.

Here is a screenshot of what it looks like now:

blog-2-jan-2016

Here is where today started, and the processes I went through:

Now I need to get the keywords to highlight/unhighlight using a checkbox.

Code looks like so, with the function being triggered by the check/uncheck of the checkbox:

function highlightText(checkboxElement){
if(checkboxElement.checked){
for(i=0;i<keywords.length;i++){
markInstance.mark(keywords[i]);}}
else{ markInstance.unmark();}}

Now want to get the keywords to appear ‘separately’, so the user will have the ability to check/uncheck each of the words individually.

So the keywords are now appearing as separate tags, and the user has the ability highlight/unhighlight individual keywords by clicking on the tags.

Created the individual keyword tags using vanilla javascript like so:

for(i=0;i<keywords.length;i++){
var key = keywords[i];
keywordButtons[i] = document.createElement(“button”)
keywordButtons[i].className=”btn btn-default btn-xs keyword-” + keywords[i];
keywordButtons[i].id = ‘keyword-‘ + keywords[i];
keywordButtons[i].value = false;
keywordButtons[i].onclick = function(){highlightKeyword(this);};
keywordButtons[i].appendChild(document.createTextNode(keywords[i]));
keywordsDiv.appendChild(keywordButtons[i]);}

The keywords can be (un)highlighted by clicking on the tags, which calls the following function:

function highlightKeyword(keywordButtonElement){
var keyword = keywordButtonElement.id.substring(8);
var options = {“className”:”highlighted-” + keyword};
if(keywordButtonElement.value == ‘false’){
keywordButtonElement.value = true;
keywordButtonElement.style.backgroundColor = ‘yellow’;
markInstance.mark(keyword, options);
}
else{
keywordButtonElement.value = false;
keywordButtonElement.style.backgroundColor = ‘white’;
var options = {“className”:”highlighted-” + keyword};
markInstance.unmark(options);}}

Also the checkbox function has been updated so that it gives each of the highlighted keywords a class name, which allows us to later access each keyword individually. The checkbox function also now updates the color and values of the keyword tags.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s