comparison booket.js @ 5:39c95b9826d2

Add autocompletion for tags
author Guido Berhoerster <guido+booket@berhoerster.name>
date Tue, 09 Sep 2014 20:23:58 +0200
parents 4786df0aec03
children e9ad4c625b7a
comparison
equal deleted inserted replaced
4:e78c3356b585 5:39c95b9826d2
692 ObservableMixin.call(this); 692 ObservableMixin.call(this);
693 693
694 this.tagListElement = document.querySelector('#tags ul.tag-list'); 694 this.tagListElement = document.querySelector('#tags ul.tag-list');
695 this.tagListElement.addEventListener('click', this); 695 this.tagListElement.addEventListener('click', this);
696 696
697 this.tagDatalistElement = document.querySelector('#tag-datalist');
698
697 this.tagTemplate = document.querySelector('#tag-template'); 699 this.tagTemplate = document.querySelector('#tag-template');
698 }; 700 };
699 701
700 extend(TagView, ObservableMixin); 702 extend(TagView, ObservableMixin);
701 703
706 var toggleTagButton; 708 var toggleTagButton;
707 var tagElements; 709 var tagElements;
708 var i; 710 var i;
709 var referenceTag = ''; 711 var referenceTag = '';
710 var referenceNode; 712 var referenceNode;
713 var tagOptionElement;
714 var i;
715 var isInDatalist = false;
711 716
712 // create new tag element from template 717 // create new tag element from template
713 newNode = document.importNode(this.tagTemplate.content, true); 718 newNode = document.importNode(this.tagTemplate.content, true);
714 719
715 tagElement = newNode.querySelector('li'); 720 tagElement = newNode.querySelector('li');
735 this.tagListElement.insertBefore(newNode, (referenceNode !== undefined) ? 740 this.tagListElement.insertBefore(newNode, (referenceNode !== undefined) ?
736 referenceNode.nextSibling : this.tagListElement.firstChild); 741 referenceNode.nextSibling : this.tagListElement.firstChild);
737 742
738 // initialize tag count 743 // initialize tag count
739 this.onTagCountChanged(tag, 1); 744 this.onTagCountChanged(tag, 1);
745
746 // add to datalist
747 for (i = 0; i < this.tagDatalistElement.options.length; i++) {
748 if (this.tagDatalistElement.options[i].value == tag) {
749 isInDatalist = true;
750 break;
751 }
752 }
753 if (!isInDatalist) {
754 tagOptionElement = document.createElement('option');
755 tagOptionElement.value = tag;
756 this.tagDatalistElement.appendChild(tagOptionElement);
757 }
740 }; 758 };
741 759
742 TagView.prototype.onTagCountChanged = function (tag, tagCount) { 760 TagView.prototype.onTagCountChanged = function (tag, tagCount) {
743 this.tagListElement.querySelector('li' + createDatasetSelector('tag', tag) + 761 this.tagListElement.querySelector('li' + createDatasetSelector('tag', tag) +
744 ' .tag-count').textContent = '(' + tagCount + ')'; 762 ' .tag-count').textContent = '(' + tagCount + ')';
745 }; 763 };
746 764
747 TagView.prototype.onTagDeleted = function (tag) { 765 TagView.prototype.onTagDeleted = function (tag) {
748 var tagElement; 766 var tagElement;
749 767
768 // remove from tag list
750 tagElement = this.tagListElement.querySelector('li' + 769 tagElement = this.tagListElement.querySelector('li' +
751 createDatasetSelector('tag', tag)); 770 createDatasetSelector('tag', tag));
752 if (tagElement !== null) { 771 tagElement.parentNode.removeChild(tagElement);
753 tagElement.parentNode.removeChild(tagElement);
754 }
755 }; 772 };
756 773
757 TagView.prototype.onFilterTagsSearchChanged = function (filteredBookmarks, 774 TagView.prototype.onFilterTagsSearchChanged = function (filteredBookmarks,
758 newFilterTags, newSearchTerm) { 775 newFilterTags, newSearchTerm) {
759 var tagElements; 776 var tagElements;