Merge pull request #223 from pixelated-project/refactoring-events

Refactoring events on web-ui left-pane

5 files changed, 67 insertions, 64 deletions

diff --git a/web-ui/app/js/tags/data/tags.js b/web-ui/app/js/tags/data/tags.js
index 40614fea..401b41f7 100644
--- a/web-ui/app/js/tags/data/tags.js
+++ b/web-ui/app/js/tags/data/tags.js
@@ -14,12 +14,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
  */
-define(['flight/lib/component', 'page/events', 'helpers/monitored_ajax', 'mixins/with_feature_toggle'], function (defineComponent, events, monitoredAjax,  withFeatureToggle) {
+define(['flight/lib/component', 'page/events', 'helpers/monitored_ajax', 'mixins/with_feature_toggle', 'mixins/with_auto_refresh'], function (defineComponent, events, monitoredAjax,  withFeatureToggle, withAutoRefresh) {
   'use strict';
 
   var DataTags = defineComponent(dataTags, withFeatureToggle('tags', function() {
     $(document).trigger(events.ui.mails.refresh);
-  }));
+  }), withAutoRefresh('refreshTags'));
 
   DataTags.all = {
     name: 'all',
@@ -34,13 +34,11 @@ define(['flight/lib/component', 'page/events', 'helpers/monitored_ajax', 'mixins
     }
   };
 
-  return DataTags;
-
   function dataTags() {
     function sendTagsBackTo(on, params) {
       return function(data) {
         data.push(DataTags.all);
-        on.trigger(params.caller, events.tags.received, {tags: data, skipMailListRefresh: params.skipMailListRefresh});
+        on.trigger(params.caller, events.tags.received, {tags: data});
       };
     }
 
@@ -53,8 +51,14 @@ define(['flight/lib/component', 'page/events', 'helpers/monitored_ajax', 'mixins
         .done(sendTagsBackTo(this, params));
     };
 
+    this.refreshTags = function() {
+      this.fetchTags(null, {caller: document});
+    };
+
     this.after('initialize', function () {
       this.on(document, events.tags.want, this.fetchTags);
     });
   }
+
+  return DataTags;
 });
diff --git a/web-ui/app/js/tags/ui/tag.js b/web-ui/app/js/tags/ui/tag.js
index 0d2d2ebf..dfedb137 100644
--- a/web-ui/app/js/tags/ui/tag.js
+++ b/web-ui/app/js/tags/ui/tag.js
@@ -39,15 +39,16 @@ define(
     return Tag;
 
     function tag() {
-    
-      this.viewFor = function (tag, template) {
+
+      this.viewFor = function (tag, template, currentTag) {
         return template({
           tagName: tag.default ? i18n('tags.' + tag.name) : tag.name,
           ident: this.hashIdent(tag.ident),
           count: this.badgeType(tag) === 'total' ? tag.counts.total : (tag.counts.total - tag.counts.read),
           displayBadge: this.displayBadge(tag),
           badgeType: this.badgeType(tag),
-          icon: tag.icon
+          icon: tag.icon,
+          selected: tag.name === currentTag ? 'selected' : ''
         });
       };
 
@@ -55,7 +56,7 @@ define(
         var mailbox_and_tags = _.flatten([data.tags, data.mailbox]);
         if (_.contains(mailbox_and_tags, this.attr.tag.name)) {
           this.attr.tag.counts.read++;
-          this.$node.html(this.viewFor(this.attr.tag, templates.tags.tagInner));
+          this.$node.html(this.viewFor(this.attr.tag, templates.tags.tagInner, this.attr.currentTag));
           if (!_.isUndefined(this.attr.shortcut)) {
             this.attr.shortcut.reRender();
           }
@@ -64,23 +65,8 @@ define(
 
       this.triggerSelect = function () {
         this.trigger(document, events.ui.tag.select, { tag: this.attr.tag.name });
-        this.trigger(document, events.search.empty);
-      };
-
-      this.selectTag = function (ev, data) {
-        if(data.tag === this.attr.tag.name) { this.doSelect(data); }
-        else { this.doUnselect(); }
-      };
-
-      this.doUnselect = function () {
-        this.attr.selected = false;
-        this.$node.removeClass('selected');
-      };
 
-      this.doSelect = function (data) {
-        this.attr.selected = true;
-        this.$node.addClass('selected');
-        this.trigger(document, events.ui.tag.selected, data);
+        this.removeSearchingClass();
       };
 
       this.addSearchingClass = function() {
@@ -112,14 +98,13 @@ define(
 
       this.after('initialize', function () {
         this.on('click', this.triggerSelect);
-        this.on(document, events.ui.tag.select, this.selectTag);
         this.on(document, events.mail.read, this.decreaseReadCountIfMatchingTag);
         this.on(document, events.search.perform, this.addSearchingClass);
         this.on(document, events.search.empty, this.removeSearchingClass);
       });
 
       this.renderAndAttach = function (parent, data) {
-        var rendered = this.viewFor(data.tag, templates.tags.tag);
+        var rendered = this.viewFor(data.tag, templates.tags.tag, data.currentTag);
         parent.append(rendered);
         this.initialize('#tag-' + this.hashIdent(data.tag.ident), data);
         this.on(parent, events.tags.teardown, this.teardown);
diff --git a/web-ui/app/js/tags/ui/tag_base.js b/web-ui/app/js/tags/ui/tag_base.js
index 9b2a06a9..9dc1ccbb 100644
--- a/web-ui/app/js/tags/ui/tag_base.js
+++ b/web-ui/app/js/tags/ui/tag_base.js
@@ -34,6 +34,33 @@ define(['views/i18n', 'page/events'], function(i18n, events) {
       return _.include(TOTAL_BADGE, tag.name) ? 'total' : 'unread';
     };
 
+    this.doUnselect = function () {
+      this.$node.removeClass('selected');
+    };
+
+    this.doSelect = function () {
+      this.$node.addClass('selected');
+    };
+
+    this.selectTag = function (ev, data) {
+      this.attr.currentTag = data.tag;
+      if (data.tag === this.attr.tag.name) {
+        this.doSelect();
+      }
+      else {
+        this.doUnselect();
+      }
+    };
+
+    this.selectTagAll = function () {
+      this.selectTag(null, {tag: 'all'});
+    };
+
+    this.after('initialize', function () {
+      this.on(document, events.ui.tag.select, this.selectTag);
+      this.on(document, events.search.perform, this.selectTagAll);
+      this.on(document, events.search.empty, this.selectTagAll);
+    });
   }
 
   return tagBase;
diff --git a/web-ui/app/js/tags/ui/tag_list.js b/web-ui/app/js/tags/ui/tag_list.js
index 850a5fab..0c483abb 100644
--- a/web-ui/app/js/tags/ui/tag_list.js
+++ b/web-ui/app/js/tags/ui/tag_list.js
@@ -20,10 +20,11 @@ define(
     'tags/ui/tag',
     'views/templates',
     'page/events',
-    'tags/ui/tag_shortcut'
+    'tags/ui/tag_shortcut',
+    'page/router/url_params'
   ],
 
-  function(defineComponent, Tag, templates, events, TagShortcut) {
+  function(defineComponent, Tag, templates, events, TagShortcut, urlParams) {
     'use strict';
 
     var ICON_FOR = {
@@ -55,13 +56,13 @@ define(
       });
 
       this.renderShortcut = function (tag, tagComponent) {
-        return TagShortcut.appendedTo($('#tags-shortcuts'), { linkTo: tag, trigger: tagComponent});
+        return TagShortcut.appendedTo($('#tags-shortcuts'), { tag: tag, trigger: tagComponent, currentTag: this.getCurrentTag()});
       };
 
       function renderTag(tag, defaultList, customList) {
         var list = tag.default ? defaultList : customList;
 
-        var tagComponent = Tag.appendedTo(list, {tag: tag});
+        var tagComponent = Tag.appendedTo(list, {tag: tag, currentTag: this.getCurrentTag()});
         if (_.contains(_.keys(ORDER), tag.name)) {
           tagComponent.attr.shortcut = this.renderShortcut(tag, tagComponent);
         }
@@ -84,20 +85,23 @@ define(
         var defaultList = this.select('defaultTagList');
         var customList = this.select('customTagList');
 
-        resetTagList.bind(this, [defaultList, customList]).call();
+        resetTagList.call(this, [defaultList, customList]);
         this.resetShortcuts();
 
         tags.forEach(function (tag) {
-          renderTag.bind(this, tag, defaultList, customList).call();
+          renderTag.call(this, tag, defaultList, customList);
         }.bind(this));
       };
 
-      this.loadTagList = function(ev, data) {
+      this.displayTags = function(ev, data) {
         this.renderTagList(_.sortBy(data.tags, tagOrder));
-        this.trigger(document, events.ui.tags.loaded, { tag: this.attr.currentTag, skipMailListRefresh: data.skipMailListRefresh});
       };
 
-      this.saveTag = function(ev, data) {
+      this.getCurrentTag = function () {
+        return this.attr.currentTag || urlParams.getTag();
+      };
+
+      this.updateCurrentTag = function(ev, data) {
         this.attr.currentTag = data.tag;
       };
 
@@ -106,8 +110,8 @@ define(
       };
 
       this.after('initialize', function() {
-        this.on(document, events.ui.tagList.load, this.loadTagList);
-        this.on(document, events.ui.tag.selected, this.saveTag);
+        this.on(document, events.tags.received, this.displayTags);
+        this.on(document, events.ui.tag.select, this.updateCurrentTag);
         this.renderTagListTemplate();
       });
     }
diff --git a/web-ui/app/js/tags/ui/tag_shortcut.js b/web-ui/app/js/tags/ui/tag_shortcut.js
index 0fe92550..b5b76825 100644
--- a/web-ui/app/js/tags/ui/tag_shortcut.js
+++ b/web-ui/app/js/tags/ui/tag_shortcut.js
@@ -38,24 +38,25 @@ define(
 
     function tagShortcut() {
 
-      this.renderTemplate = function (linkTo) {
+      this.renderTemplate = function (tag, currentTag) {
         var model = {
-          tagName: linkTo.name,
-          displayBadge: this.displayBadge(linkTo),
-          badgeType: this.badgeType(linkTo),
-          count: this.badgeType(linkTo) === 'total' ? linkTo.counts.total : (linkTo.counts.total - linkTo.counts.read),
-          icon: iconFor[linkTo.name]
+          tagName: tag.name,
+          displayBadge: this.displayBadge(tag),
+          badgeType: this.badgeType(tag),
+          count: this.badgeType(tag) === 'total' ? tag.counts.total : (tag.counts.total - tag.counts.read),
+          icon: iconFor[tag.name],
+          selected: tag.name === currentTag ? 'selected' : ''
         };
         return templates.tags.shortcut(model);
       };
 
       this.renderAndAttach = function (parent, options) {
-        parent.append(this.renderTemplate(options.linkTo));
+        parent.append(this.renderTemplate(options.tag, options.currentTag));
         this.initialize(parent.children().last(), options);
       };
 
       this.reRender = function () {
-        this.$node.html(this.renderTemplate(this.attr.linkTo));
+        this.$node.html(this.renderTemplate(this.attr.tag, this.attr.currentTag));
       };
 
       var iconFor = {
@@ -66,23 +67,6 @@ define(
         'all': 'archive'
       };
 
-      this.selectTag = function (ev, data) {
-        if (data.tag === this.attr.linkTo.name) {
-          this.doSelect();
-        }
-        else {
-          this.doUnselect();
-        }
-      };
-
-      this.doUnselect = function () {
-        this.$node.removeClass('selected');
-      };
-
-      this.doSelect = function () {
-        this.$node.addClass('selected');
-      };
-
       this.doTeardown = function () {
         if (!jQuery.contains(document, this.$node[0])) {
           this.teardown();
@@ -93,7 +77,6 @@ define(
         this.on('click', function () {
           this.attr.trigger.triggerSelect();
         });
-        this.on(document, events.ui.tag.select, this.selectTag);
         this.on(document, events.tags.shortcuts.teardown, this.doTeardown);
       });