Mercurial > projects > booket
diff booket.js @ 12:948048e40fab
Add option for displaying tag list as a tag cloud
author | Guido Berhoerster <guido+booket@berhoerster.name> |
---|---|
date | Thu, 18 Sep 2014 20:28:09 +0200 |
parents | ef5d75bcac5e |
children | 64272f2105da |
line wrap: on
line diff
--- a/booket.js Wed Sep 17 21:12:38 2014 +0200 +++ b/booket.js Thu Sep 18 20:28:09 2014 +0200 @@ -490,10 +490,10 @@ if (this._tagCount.has(tag)) { tagCount = this._tagCount.get(tag) + 1; this._tagCount.set(tag, tagCount); - this.notify('tag-count-changed', tag, tagCount); + this.notify('tag-count-changed', tag, this._tagCount); } else { this._tagCount.set(tag, 1); - this.notify('tag-added', tag); + this.notify('tag-added', tag, this._tagCount); } }, this); }, this); @@ -537,10 +537,10 @@ if (tagCount > 1) { tagCount--; this._tagCount.set(tag, tagCount); - this.notify('tag-count-changed', tag, tagCount); + this.notify('tag-count-changed', tag, this._tagCount); } else { this._tagCount.delete(tag); - this.notify('tag-deleted', tag); + this.notify('tag-deleted', tag, this._tagCount); if (this._filterTags.has(tag)) { this._filterTags.delete(tag); @@ -886,10 +886,14 @@ */ var TagView = function () { + var tagsElement; + ObservableMixin.call(this); - this.tagListElement = document.querySelector('#tags ul.tag-list'); - this.tagListElement.addEventListener('click', this); + tagsElement = document.querySelector('#tags'); + tagsElement.addEventListener('click', this); + + this.tagListElement = tagsElement.querySelector('ul.tag-list'); this.tagDatalistElement = document.querySelector('#tag-datalist'); @@ -898,7 +902,7 @@ extend(TagView, ObservableMixin); -TagView.prototype.onTagAdded = function (tag) { +TagView.prototype.onTagAdded = function (tag, tagCount) { var newNode; var tagElement; var setTagButton; @@ -938,7 +942,7 @@ referenceNode.nextSibling : this.tagListElement.firstChild); // initialize tag count - this.onTagCountChanged(tag, 1); + this.onTagCountChanged(tag, tagCount); // add to datalist for (i = 0; i < this.tagDatalistElement.options.length; i++) { @@ -954,18 +958,44 @@ } }; +TagView.prototype.updateTagCloud = function (tagCount) { + var tagElements; + var i; + var j; + var tagCountMax = 1; + + tagCount.forEach(function (count) { + if (count > tagCountMax) { + tagCountMax = count; + } + }, this); + + tagElements = this.tagListElement.querySelectorAll('ul.tag-list > li'); + for (i = 0; i < tagElements.length; i++) { + for (j = 1; j <= 10; j++) { + tagElements[i].classList.remove('tag-frequency-' + j); + } + tagElements[i].classList.add('tag-frequency-' + + (Math.floor(tagCount.get(tagElements[i].dataset.tag) / + (tagCountMax / 9)) + 1)); + } +}; + TagView.prototype.onTagCountChanged = function (tag, tagCount) { this.tagListElement.querySelector('li' + createDatasetSelector('tag', tag) + - ' .tag-count').textContent = '(' + tagCount + ')'; + ' .tag-count').textContent = '(' + tagCount.get(tag) + ')'; + this.updateTagCloud(tagCount); }; -TagView.prototype.onTagDeleted = function (tag) { +TagView.prototype.onTagDeleted = function (tag, tagCount) { var tagElement; // remove from tag list tagElement = this.tagListElement.querySelector('li' + createDatasetSelector('tag', tag)); tagElement.parentNode.removeChild(tagElement); + + this.updateTagCloud(tagCount); }; TagView.prototype.onFilterTagsSearchChanged = function (filteredBookmarks, @@ -993,12 +1023,16 @@ }; TagView.prototype.handleEvent = function (e) { - if (e.type === 'click' && (e.target.name === 'set-tag' || - e.target.name === 'toggle-tag')) { + if (e.type === 'click') { + if (e.target.name === 'set-tag' || + e.target.name === 'toggle-tag') { e.target.blur(); this.notify(e.target.name, getAncestorElementDatasetItem(e.target, 'tag')); + } else if (e.target.name === 'show-tag-cloud') { + this.tagListElement.classList.toggle('tag-cloud', e.target.checked); + } } };