projects/booket: booket.js comparison

comparison 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

comparison

equal deleted inserted replaced

-:ef5d75bcac5e
+:948048e40fab
 var tagCount;
 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);
 // apply tag filter and search added bookmarks
 if (this._tagCount.has(tag)) {
 tagCount = this._tagCount.get(tag);
 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);
 needUpdateFilterTags = true;
 }
 /*
 * view
 */
 var TagView = function () {
+var tagsElement;
 ObservableMixin.call(this);
-this.tagListElement = document.querySelector('#tags ul.tag-list');
+tagsElement = document.querySelector('#tags');
-this.tagListElement.addEventListener('click', this);
+tagsElement.addEventListener('click', this);
+this.tagListElement = tagsElement.querySelector('ul.tag-list');
 this.tagDatalistElement = document.querySelector('#tag-datalist');
 this.tagTemplate = document.querySelector('#tag-template');
 };
 extend(TagView, ObservableMixin);
-TagView.prototype.onTagAdded = function (tag) {
+TagView.prototype.onTagAdded = function (tag, tagCount) {
 var newNode;
 var tagElement;
 var setTagButton;
 var toggleTagButton;
 var tagElements;
 }
 this.tagListElement.insertBefore(newNode, (referenceNode !== undefined) ?
 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++) {
 if (this.tagDatalistElement.options[i].value == tag) {
 isInDatalist = true;
 tagOptionElement.value = tag;
 this.tagDatalistElement.appendChild(tagOptionElement);
 }
 };
+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,
 newFilterTags, newSearchTerm) {
 var tagElements;
 }
 }
 };
 TagView.prototype.handleEvent = function (e) {
-if (e.type === 'click' && (e.target.name === 'set-tag' ||
+if (e.type === 'click') {
-e.target.name === 'toggle-tag')) {
+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);
+}
 }
 };
 var ActionsView = function () {