Mercurial > projects > booket

changeset 12:948048e40fab

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 bd822f25e285
files booket.css booket.html booket.js
diffstat 3 files changed, 113 insertions(+), 22 deletions(-) [+]
line wrap: on
line diff
--- a/booket.css	Wed Sep 17 21:12:38 2014 +0200
+++ b/booket.css	Thu Sep 18 20:28:09 2014 +0200
@@ -39,19 +39,10 @@
     font-weight: bold;
 }
 
-label,
-input[type="text"],
-input[type="file"],
-input[type="url"],
-textarea {
+label {
     display: block;
 }
 
-label {
-    font-weight: bold;
-    font-size: .75em;
-}
-
 kbd {
     display: inline-block;
     font-family: Courier, monospace;
@@ -134,6 +125,23 @@
     margin: 1em 0 0 0;
 }
 
+#actions input[type="text"],
+#actions input[type="file"],
+#actions input[type="url"],
+#actions textarea,
+.bookmark-editor-form input[type="text"],
+.bookmark-editor-form input[type="file"],
+.bookmark-editor-form input[type="url"],
+.bookmark-editor-form textarea {
+    display: block;
+}
+
+#actions label,
+.bookmark-editor-form label {
+    font-weight: bold;
+    font-size: .75em;
+}
+
 form.bookmark-editor-form img.bookmark-favicon {
     display: block;
     padding: 1px 0;
@@ -210,6 +218,52 @@
     display: none;
 }
 
+#tags label {
+    display: block;
+    margin: .25em 0 0 0;
+    font-size: .75em;
+}
+
+ul.tag-cloud .tag-frequency-1 * {
+    font-size: 1em;
+}
+
+ul.tag-cloud .tag-frequency-2 * {
+    font-size: 1.25em;
+}
+
+ul.tag-cloud .tag-frequency-3 * {
+    font-size: 1.5em;
+}
+
+ul.tag-cloud .tag-frequency-4 * {
+    font-size: 1.75em;
+}
+
+ul.tag-cloud .tag-frequency-5 * {
+    font-size: 2em;
+}
+
+ul.tag-cloud .tag-frequency-6 * {
+    font-size: 2.25em;
+}
+
+ul.tag-cloud .tag-frequency-7 * {
+    font-size: 2.5em;
+}
+
+ul.tag-cloud .tag-frequency-8 * {
+    font-size: 2.75em;
+}
+
+ul.tag-cloud .tag-frequency-9 * {
+    font-size: 3em;
+}
+
+ul.tag-cloud .tag-frequency-10 * {
+    font-size: 3.25em;
+}
+
 ul.tag-input-list,
 ul.tag-list {
     margin: 0;
--- a/booket.html	Wed Sep 17 21:12:38 2014 +0200
+++ b/booket.html	Thu Sep 18 20:28:09 2014 +0200
@@ -149,6 +149,9 @@
             name="toggle-tag"></button></li>
           </template>
         </ul>
+
+        <label><input type="checkbox" name="show-tag-cloud"></input> Show tag
+        cloud</label>
       </aside>
 
       <aside id="search">
--- 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);
+        }
     }
 };