Mercurial > projects > booket
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; |