projects/booket

changeset 12:948048e40fab

Add option for displaying tag list as a tag cloud
author Guido Berhoerster <guido+booket@berhoerster.name>
date Thu Sep 18 20:28:09 2014 +0200 (2014-09-18)
parents ef5d75bcac5e
children bd822f25e285
files booket.css booket.html booket.js
line diff
     1.1 --- a/booket.css	Wed Sep 17 21:12:38 2014 +0200
     1.2 +++ b/booket.css	Thu Sep 18 20:28:09 2014 +0200
     1.3 @@ -39,19 +39,10 @@
     1.4      font-weight: bold;
     1.5  }
     1.6  
     1.7 -label,
     1.8 -input[type="text"],
     1.9 -input[type="file"],
    1.10 -input[type="url"],
    1.11 -textarea {
    1.12 +label {
    1.13      display: block;
    1.14  }
    1.15  
    1.16 -label {
    1.17 -    font-weight: bold;
    1.18 -    font-size: .75em;
    1.19 -}
    1.20 -
    1.21  kbd {
    1.22      display: inline-block;
    1.23      font-family: Courier, monospace;
    1.24 @@ -134,6 +125,23 @@
    1.25      margin: 1em 0 0 0;
    1.26  }
    1.27  
    1.28 +#actions input[type="text"],
    1.29 +#actions input[type="file"],
    1.30 +#actions input[type="url"],
    1.31 +#actions textarea,
    1.32 +.bookmark-editor-form input[type="text"],
    1.33 +.bookmark-editor-form input[type="file"],
    1.34 +.bookmark-editor-form input[type="url"],
    1.35 +.bookmark-editor-form textarea {
    1.36 +    display: block;
    1.37 +}
    1.38 +
    1.39 +#actions label,
    1.40 +.bookmark-editor-form label {
    1.41 +    font-weight: bold;
    1.42 +    font-size: .75em;
    1.43 +}
    1.44 +
    1.45  form.bookmark-editor-form img.bookmark-favicon {
    1.46      display: block;
    1.47      padding: 1px 0;
    1.48 @@ -210,6 +218,52 @@
    1.49      display: none;
    1.50  }
    1.51  
    1.52 +#tags label {
    1.53 +    display: block;
    1.54 +    margin: .25em 0 0 0;
    1.55 +    font-size: .75em;
    1.56 +}
    1.57 +
    1.58 +ul.tag-cloud .tag-frequency-1 * {
    1.59 +    font-size: 1em;
    1.60 +}
    1.61 +
    1.62 +ul.tag-cloud .tag-frequency-2 * {
    1.63 +    font-size: 1.25em;
    1.64 +}
    1.65 +
    1.66 +ul.tag-cloud .tag-frequency-3 * {
    1.67 +    font-size: 1.5em;
    1.68 +}
    1.69 +
    1.70 +ul.tag-cloud .tag-frequency-4 * {
    1.71 +    font-size: 1.75em;
    1.72 +}
    1.73 +
    1.74 +ul.tag-cloud .tag-frequency-5 * {
    1.75 +    font-size: 2em;
    1.76 +}
    1.77 +
    1.78 +ul.tag-cloud .tag-frequency-6 * {
    1.79 +    font-size: 2.25em;
    1.80 +}
    1.81 +
    1.82 +ul.tag-cloud .tag-frequency-7 * {
    1.83 +    font-size: 2.5em;
    1.84 +}
    1.85 +
    1.86 +ul.tag-cloud .tag-frequency-8 * {
    1.87 +    font-size: 2.75em;
    1.88 +}
    1.89 +
    1.90 +ul.tag-cloud .tag-frequency-9 * {
    1.91 +    font-size: 3em;
    1.92 +}
    1.93 +
    1.94 +ul.tag-cloud .tag-frequency-10 * {
    1.95 +    font-size: 3.25em;
    1.96 +}
    1.97 +
    1.98  ul.tag-input-list,
    1.99  ul.tag-list {
   1.100      margin: 0;
     2.1 --- a/booket.html	Wed Sep 17 21:12:38 2014 +0200
     2.2 +++ b/booket.html	Thu Sep 18 20:28:09 2014 +0200
     2.3 @@ -149,6 +149,9 @@
     2.4              name="toggle-tag"></button></li>
     2.5            </template>
     2.6          </ul>
     2.7 +
     2.8 +        <label><input type="checkbox" name="show-tag-cloud"></input> Show tag
     2.9 +        cloud</label>
    2.10        </aside>
    2.11  
    2.12        <aside id="search">
     3.1 --- a/booket.js	Wed Sep 17 21:12:38 2014 +0200
     3.2 +++ b/booket.js	Thu Sep 18 20:28:09 2014 +0200
     3.3 @@ -490,10 +490,10 @@
     3.4              if (this._tagCount.has(tag)) {
     3.5                  tagCount = this._tagCount.get(tag) + 1;
     3.6                  this._tagCount.set(tag, tagCount);
     3.7 -                this.notify('tag-count-changed', tag, tagCount);
     3.8 +                this.notify('tag-count-changed', tag, this._tagCount);
     3.9              } else {
    3.10                  this._tagCount.set(tag, 1);
    3.11 -                this.notify('tag-added', tag);
    3.12 +                this.notify('tag-added', tag, this._tagCount);
    3.13              }
    3.14          }, this);
    3.15      }, this);
    3.16 @@ -537,10 +537,10 @@
    3.17                      if (tagCount > 1) {
    3.18                          tagCount--;
    3.19                          this._tagCount.set(tag, tagCount);
    3.20 -                        this.notify('tag-count-changed', tag, tagCount);
    3.21 +                        this.notify('tag-count-changed', tag, this._tagCount);
    3.22                      } else {
    3.23                          this._tagCount.delete(tag);
    3.24 -                        this.notify('tag-deleted', tag);
    3.25 +                        this.notify('tag-deleted', tag, this._tagCount);
    3.26  
    3.27                          if (this._filterTags.has(tag)) {
    3.28                              this._filterTags.delete(tag);
    3.29 @@ -886,10 +886,14 @@
    3.30   */
    3.31  
    3.32  var TagView = function () {
    3.33 +    var tagsElement;
    3.34 +
    3.35      ObservableMixin.call(this);
    3.36  
    3.37 -    this.tagListElement = document.querySelector('#tags ul.tag-list');
    3.38 -    this.tagListElement.addEventListener('click', this);
    3.39 +    tagsElement = document.querySelector('#tags');
    3.40 +    tagsElement.addEventListener('click', this);
    3.41 +
    3.42 +    this.tagListElement = tagsElement.querySelector('ul.tag-list');
    3.43  
    3.44      this.tagDatalistElement = document.querySelector('#tag-datalist');
    3.45  
    3.46 @@ -898,7 +902,7 @@
    3.47  
    3.48  extend(TagView, ObservableMixin);
    3.49  
    3.50 -TagView.prototype.onTagAdded = function (tag) {
    3.51 +TagView.prototype.onTagAdded = function (tag, tagCount) {
    3.52      var newNode;
    3.53      var tagElement;
    3.54      var setTagButton;
    3.55 @@ -938,7 +942,7 @@
    3.56          referenceNode.nextSibling : this.tagListElement.firstChild);
    3.57  
    3.58      // initialize tag count
    3.59 -    this.onTagCountChanged(tag, 1);
    3.60 +    this.onTagCountChanged(tag, tagCount);
    3.61  
    3.62      // add to datalist
    3.63      for (i = 0; i < this.tagDatalistElement.options.length; i++) {
    3.64 @@ -954,18 +958,44 @@
    3.65      }
    3.66  };
    3.67  
    3.68 +TagView.prototype.updateTagCloud = function (tagCount) {
    3.69 +    var tagElements;
    3.70 +    var i;
    3.71 +    var j;
    3.72 +    var tagCountMax = 1;
    3.73 +
    3.74 +    tagCount.forEach(function (count) {
    3.75 +        if (count > tagCountMax) {
    3.76 +            tagCountMax = count;
    3.77 +        }
    3.78 +    }, this);
    3.79 +
    3.80 +    tagElements = this.tagListElement.querySelectorAll('ul.tag-list > li');
    3.81 +    for (i = 0; i < tagElements.length; i++) {
    3.82 +        for (j = 1; j <= 10; j++) {
    3.83 +            tagElements[i].classList.remove('tag-frequency-' + j);
    3.84 +        }
    3.85 +        tagElements[i].classList.add('tag-frequency-' +
    3.86 +            (Math.floor(tagCount.get(tagElements[i].dataset.tag) /
    3.87 +            (tagCountMax / 9)) + 1));
    3.88 +    }
    3.89 +};
    3.90 +
    3.91  TagView.prototype.onTagCountChanged = function (tag, tagCount) {
    3.92      this.tagListElement.querySelector('li' + createDatasetSelector('tag', tag) +
    3.93 -        ' .tag-count').textContent = '(' + tagCount + ')';
    3.94 +        ' .tag-count').textContent = '(' + tagCount.get(tag) + ')';
    3.95 +    this.updateTagCloud(tagCount);
    3.96  };
    3.97  
    3.98 -TagView.prototype.onTagDeleted = function (tag) {
    3.99 +TagView.prototype.onTagDeleted = function (tag, tagCount) {
   3.100      var tagElement;
   3.101  
   3.102      // remove from tag list
   3.103      tagElement = this.tagListElement.querySelector('li' +
   3.104          createDatasetSelector('tag', tag));
   3.105      tagElement.parentNode.removeChild(tagElement);
   3.106 +
   3.107 +    this.updateTagCloud(tagCount);
   3.108  };
   3.109  
   3.110  TagView.prototype.onFilterTagsSearchChanged = function (filteredBookmarks,
   3.111 @@ -993,12 +1023,16 @@
   3.112  };
   3.113  
   3.114  TagView.prototype.handleEvent = function (e) {
   3.115 -    if (e.type === 'click' && (e.target.name === 'set-tag' ||
   3.116 -            e.target.name === 'toggle-tag')) {
   3.117 +    if (e.type === 'click') {
   3.118 +        if (e.target.name === 'set-tag' ||
   3.119 +            e.target.name === 'toggle-tag') {
   3.120          e.target.blur();
   3.121  
   3.122          this.notify(e.target.name, getAncestorElementDatasetItem(e.target,
   3.123              'tag'));
   3.124 +        } else if (e.target.name === 'show-tag-cloud') {
   3.125 +            this.tagListElement.classList.toggle('tag-cloud', e.target.checked);
   3.126 +        }
   3.127      }
   3.128  };
   3.129