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);