diff options
Diffstat (limited to 'src/js/tags-filter.js')
-rwxr-xr-x | src/js/tags-filter.js | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/src/js/tags-filter.js b/src/js/tags-filter.js new file mode 100755 index 0000000..967e799 --- /dev/null +++ b/src/js/tags-filter.js @@ -0,0 +1,136 @@ +(function($) { + 'use strict'; + + // Filter posts by using their categories on categories page : `/categories` + + /** + * TagsFilter + * @param {String} tagsArchivesElem + * @constructor + */ + var TagsFilter = function(tagsArchivesElem) { + this.$form = $(tagsArchivesElem).find('#filter-form'); + this.$inputSearch = $(tagsArchivesElem + ' #filter-form input[name=tag]'); + this.$archiveResult = $(tagsArchivesElem).find('.archive-result'); + this.$tags = $(tagsArchivesElem).find('.tag'); + this.$posts = $(tagsArchivesElem).find('.archive'); + this.tags = tagsArchivesElem + ' .tag'; + this.posts = tagsArchivesElem + ' .archive'; + // Html data attribute without `data-` of `.archive` element which contains the name of tag + this.dataTag = 'tag'; + this.messages = { + zero: this.$archiveResult.data('message-zero'), + one: this.$archiveResult.data('message-one'), + other: this.$archiveResult.data('message-other') + }; + }; + + TagsFilter.prototype = { + /** + * Run TagsFilter feature + * @return {void} + */ + run: function() { + var self = this; + + // Detect keystroke of the user + self.$inputSearch.keyup(function() { + self.filter(self.getSearch()); + }); + + // Block submit action + self.$form.submit(function(e) { + e.preventDefault(); + }); + }, + + /** + * Get the search entered by user + * @returns {String} the name of tag entered by the user + */ + getSearch: function() { + return this.$inputSearch.val().toLowerCase(); + }, + + /** + * Show related posts form a tag and hide the others + * @param {String} tag - name of a tag + * @return {void} + */ + filter: function(tag) { + if (tag === '') { + this.showAll(); + this.showResult(-1); + } + else { + this.hideAll(); + this.showPosts(tag); + this.showResult(this.countTags(tag)); + } + }, + + /** + * Display results of the search + * @param {Number} numbTags - Number of tags found + * @return {void} + */ + showResult: function(numbTags) { + if (numbTags === -1) { + this.$archiveResult.html('').hide(); + } + else if (numbTags === 0) { + this.$archiveResult.html(this.messages.zero).show(); + } + else if (numbTags === 1) { + this.$archiveResult.html(this.messages.one).show(); + } + else { + this.$archiveResult.html(this.messages.other.replace(/\{n\}/, numbTags)).show(); + } + }, + + /** + * Count number of tags + * @param {String} tag + * @returns {Number} + */ + countTags: function(tag) { + return $(this.posts + '[data-' + this.dataTag + '*=\'' + tag + '\']').length; + }, + + /** + * Show all posts from a tag + * @param {String} tag - name of a tag + * @return {void} + */ + showPosts: function(tag) { + $(this.tags + '[data-' + this.dataTag + '*=\'' + tag + '\']').show(); + $(this.posts + '[data-' + this.dataTag + '*=\'' + tag + '\']').show(); + }, + + /** + * Show all tags and all posts + * @return {void} + */ + showAll: function() { + this.$tags.show(); + this.$posts.show(); + }, + + /** + * Hide all tags and all posts + * @return {void} + */ + hideAll: function() { + this.$tags.hide(); + this.$posts.hide(); + } + }; + + $(document).ready(function() { + if ($('#tags-archives').length) { + var tagsFilter = new TagsFilter('#tags-archives'); + tagsFilter.run(); + } + }); +})(jQuery); |