From 7ab9f9423004adf1df9cc1be1b2a5ae7eade4a95 Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Wed, 17 Dec 2014 19:19:25 -0200 Subject: Separate auto-refresh for mails and tags, and start moving away from having the left_pane_dispatcher as a middleman --- web-ui/app/js/dispatchers/left_pane_dispatcher.js | 9 +--- web-ui/app/js/dispatchers/right_pane_dispatcher.js | 1 + web-ui/app/js/helpers/monitored_ajax.js | 1 - web-ui/app/js/mail_list/ui/mail_items/mail_item.js | 2 + web-ui/app/js/mail_list/ui/mail_list.js | 17 ++----- web-ui/app/js/mixins/with_auto_refresh.js | 49 +++++++++++++++++++ web-ui/app/js/mixins/with_mail_edit_base.js | 1 + web-ui/app/js/page/router.js | 4 ++ web-ui/app/js/search/search_trigger.js | 7 ++- web-ui/app/js/services/mail_service.js | 57 +++++++++++----------- web-ui/app/js/tags/data/tags.js | 14 ++++-- web-ui/app/js/tags/ui/tag.js | 29 +++-------- web-ui/app/js/tags/ui/tag_base.js | 27 ++++++++++ web-ui/app/js/tags/ui/tag_list.js | 26 +++++----- web-ui/app/js/tags/ui/tag_shortcut.js | 35 ++++--------- web-ui/app/templates/tags/shortcut.hbs | 4 +- web-ui/app/templates/tags/tag.hbs | 2 +- web-ui/test/spec/mail_list/ui/mail_list.spec.js | 11 ----- 18 files changed, 162 insertions(+), 134 deletions(-) create mode 100644 web-ui/app/js/mixins/with_auto_refresh.js diff --git a/web-ui/app/js/dispatchers/left_pane_dispatcher.js b/web-ui/app/js/dispatchers/left_pane_dispatcher.js index 21898dca..0037a88f 100644 --- a/web-ui/app/js/dispatchers/left_pane_dispatcher.js +++ b/web-ui/app/js/dispatchers/left_pane_dispatcher.js @@ -47,19 +47,14 @@ define( this.trigger(document, events.router.pushState, data); } initialized = true; - - if (data.skipMailListRefresh) { - return; - } - - this.trigger(document, events.ui.mails.fetchByTag, data); }; this.after('initialize', function () { - this.on(this.$node, events.tags.received, this.loadTags); + //this.on(this.$node, events.tags.received, this.loadTags); this.on(document, events.dispatchers.tags.refreshTagList, this.refreshTagList); this.on(document, events.ui.tags.loaded, this.selectTag); this.on(document, events.ui.tag.selected, this.pushUrlState); + this.on(document, events.ui.tag.select, this.pushUrlState); this.trigger(document, events.tags.want, { caller: this.$node }); }); } diff --git a/web-ui/app/js/dispatchers/right_pane_dispatcher.js b/web-ui/app/js/dispatchers/right_pane_dispatcher.js index 092fca81..77d578e0 100644 --- a/web-ui/app/js/dispatchers/right_pane_dispatcher.js +++ b/web-ui/app/js/dispatchers/right_pane_dispatcher.js @@ -101,6 +101,7 @@ define( this.on(document, events.dispatchers.rightPane.openNoMessageSelected, this.openNoMessageSelectedPane); this.on(document, events.dispatchers.rightPane.selectTag, this.selectTag); this.on(document, events.ui.tag.selected, this.saveTag); + this.on(document, events.ui.tag.select, this.saveTag); this.on(document, events.dispatchers.rightPane.openNoMessageSelectedWithoutPushState, this.initializeNoMessageSelectedPane); this.initializeNoMessageSelectedPane(); }); diff --git a/web-ui/app/js/helpers/monitored_ajax.js b/web-ui/app/js/helpers/monitored_ajax.js index 42b2dcf7..c8c74d3e 100644 --- a/web-ui/app/js/helpers/monitored_ajax.js +++ b/web-ui/app/js/helpers/monitored_ajax.js @@ -56,7 +56,6 @@ define(['page/events', 'views/i18n'], function (events, i18n) { on.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n(msg) }); } }.bind(this)); - } return monitoredAjax; diff --git a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js index 24c7b043..ed1fd07f 100644 --- a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js +++ b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js @@ -32,6 +32,7 @@ define( this.doSelect = function () { this.$node.addClass('selected'); + this.checkCheckbox(); }; this.doUnselect = function () { @@ -72,6 +73,7 @@ define( this.attachListeners = function () { this.on(this.$node.find('input[type=checkbox]'), 'change', this.triggerMailChecked); this.on(document, events.ui.mails.cleanSelected, this.doUnselect); + this.on(document, events.ui.tag.select, this.doUnselect); this.on(document, events.ui.mails.uncheckAll, this.uncheckCheckbox); this.on(document, events.ui.mails.checkAll, this.checkCheckbox); }; diff --git a/web-ui/app/js/mail_list/ui/mail_list.js b/web-ui/app/js/mail_list/ui/mail_list.js index 56c5c4f9..11300346 100644 --- a/web-ui/app/js/mail_list/ui/mail_list.js +++ b/web-ui/app/js/mail_list/ui/mail_list.js @@ -121,23 +121,11 @@ define( }; this.respondWithCheckedMails = function (ev, caller) { - this.trigger(caller, events.ui.mail.hereChecked, { checkedMails: this.checkedMailsForCurrentTag()}); + this.trigger(caller, events.ui.mail.hereChecked, {checkedMails: self.attr.checkedMails}); }; this.updateCheckAllCheckbox = function () { - if (this.checkedMailsForCurrentTag().length > 0) { - this.trigger(document, events.ui.mails.hasMailsChecked, true); - } else { - this.trigger(document, events.ui.mails.hasMailsChecked, false); - } - }; - - this.checkedMailsForCurrentTag = function () { - var checkedMailsForCurrentTag = _.filter(self.attr.checkedMails, function (mail) { - return self.attr.currentTag === 'all' || mail.mailbox === self.attr.currentTag || _.contains(mail.tags, self.attr.currentTag); - }); - - return checkedMailsForCurrentTag.length > 0 ? checkedMailsForCurrentTag : {}; + this.trigger(document, events.ui.mails.hasMailsChecked, {hasMailsChecked: this.attr.checkedMails.length > 0}); }; this.addToSelectedMails = function (ev, data) { @@ -177,6 +165,7 @@ define( self = this; this.on(document, events.ui.mails.cleanSelected, this.cleanSelected); + this.on(document, events.ui.tag.select, this.cleanSelected); this.on(document, events.mails.available, this.showMails); this.on(document, events.mails.availableForRefresh, this.refreshMailList); diff --git a/web-ui/app/js/mixins/with_auto_refresh.js b/web-ui/app/js/mixins/with_auto_refresh.js new file mode 100644 index 00000000..f01903e0 --- /dev/null +++ b/web-ui/app/js/mixins/with_auto_refresh.js @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2014 ThoughtWorks, Inc. + * + * Pixelated is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * Pixelated is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Pixelated. If not, see . + */ +/*global Pixelated */ +/*global _ */ + +define(['features'], + function (features) { + 'use strict'; + + function withAutoRefresh(refreshMethod) { + return function () { + this.defaultAttrs({ + refreshInterval: 15000 + }); + + this.setupRefresher = function () { + clearTimeout(this.attr.refreshTimer); + this.attr.refreshTimer = setTimeout(function () { + this[refreshMethod](); + this.setupRefresher(); + }.bind(this), this.attr.refreshInterval); + }; + + this.after('initialize', function () { + if (features.isAutoRefreshEnabled()) { + this.setupRefresher(); + } + }); + }; + } + + return withAutoRefresh; + } +); + diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js index 4f811235..2af5fefa 100644 --- a/web-ui/app/js/mixins/with_mail_edit_base.js +++ b/web-ui/app/js/mixins/with_mail_edit_base.js @@ -212,6 +212,7 @@ define( this.on(document, events.ui.mail.send, this.sendMail); this.on(document, events.ui.tag.selected, this.saveTag); + this.on(document, events.ui.tag.select, this.saveTag); }); } diff --git a/web-ui/app/js/page/router.js b/web-ui/app/js/page/router.js index 3de2bba9..ce0d7d04 100644 --- a/web-ui/app/js/page/router.js +++ b/web-ui/app/js/page/router.js @@ -34,6 +34,7 @@ define(['flight/lib/component', 'page/events', 'page/router/url_params'], functi return { tag: data.tag || (previousState && previousState.tag) || urlParams.defaultTag(), mailIdent: data.mailIdent, + query: data.query, isDisplayNoMessageSelected: !!data.isDisplayNoMessageSelected }; } @@ -61,6 +62,9 @@ define(['flight/lib/component', 'page/events', 'page/router/url_params'], functi this.after('initialize', function () { this.on(document, events.router.pushState, this.pushState); + this.on(document, events.ui.tag.select, this.pushState); + this.on(document, events.search.perform, this.pushState); + this.on(document, events.search.empty, this.pushState); window.onpopstate = this.popState.bind(this); }); }); diff --git a/web-ui/app/js/search/search_trigger.js b/web-ui/app/js/search/search_trigger.js index 8f5bbb86..9f2dd45e 100644 --- a/web-ui/app/js/search/search_trigger.js +++ b/web-ui/app/js/search/search_trigger.js @@ -46,16 +46,14 @@ define( var value = input.val(); input.blur(); if(!_.isEmpty(value)){ - this.trigger(document, events.ui.tag.select, { tag: 'all', skipMailListRefresh: true }); this.trigger(document, events.search.perform, { query: value }); } else { - this.trigger(document, events.ui.tag.select, { tag: 'all'}); this.trigger(document, events.search.empty); } }; - this.clearInput = function(event, data) { - if (!data.skipMailListRefresh) { this.select('input').val(''); } + this.clearInput = function() { + this.select('input').val(''); }; this.showOnlySearchTerms = function(event){ @@ -77,6 +75,7 @@ define( this.on(this.select('input'), 'focus', this.showOnlySearchTerms); this.on(this.select('input'), 'blur', this.showSearchTermsAndPlaceHolder); this.on(document, events.ui.tag.selected, this.clearInput); + this.on(document, events.ui.tag.select, this.clearInput); }); } } diff --git a/web-ui/app/js/services/mail_service.js b/web-ui/app/js/services/mail_service.js index 2e92f542..1d5db40e 100644 --- a/web-ui/app/js/services/mail_service.js +++ b/web-ui/app/js/services/mail_service.js @@ -24,12 +24,14 @@ define( 'services/model/mail', 'helpers/monitored_ajax', 'page/events', - 'features' - ], function (defineComponent, i18n, Mail, monitoredAjax, events, features) { + 'features', + 'mixins/with_auto_refresh', + 'page/router/url_params' + ], function (defineComponent, i18n, Mail, monitoredAjax, events, features, withAutoRefresh, urlParams) { 'use strict'; - return defineComponent(mailService); + return defineComponent(mailService, withAutoRefresh('refreshMails')); function mailService() { var that; @@ -41,7 +43,7 @@ define( lastQuery: '', currentPage: 1, numPages: 1, - w: 25 + pageSize: 25 }); this.errorMessage = function (msg) { @@ -54,7 +56,7 @@ define( var ident = data.ident; var success = function (data) { - this.refreshResults(); + this.refreshMails(); $(document).trigger(events.mail.tags.updated, { ident: ident, tags: data.tags }); }; @@ -106,7 +108,7 @@ define( this.triggerMailsRead = function (mails) { return _.bind(function () { - this.refreshResults(); + this.refreshMails(); this.trigger(document, events.ui.mail.unchecked, { mails: mails }); this.trigger(document, events.ui.mails.hasMailsChecked, false); }, this); @@ -116,7 +118,7 @@ define( return _.bind(function () { var mails = dataToDelete.mails || [dataToDelete.mail]; - this.refreshResults(); + this.refreshMails(); this.trigger(document, events.ui.userAlerts.displayMessage, { message: dataToDelete.successMessage}); this.trigger(document, events.ui.mail.unchecked, { mails: mails }); this.trigger(document, events.ui.mails.hasMailsChecked, false); @@ -157,20 +159,16 @@ define( this.fetchByTag = function (ev, data) { this.attr.currentTag = data.tag; + this.attr.lastQuery = compileQuery(data); this.updateCurrentPageNumber(1); - this.fetchMail(compileQuery(data), this.attr.currentTag, false, data); - }; - - this.refreshResults = function (ev, data) { - var query = this.attr.lastQuery; - this.fetchMail(query, this.attr.currentTag, true); + this.refreshMails(); }; this.newSearch = function (ev, data) { - var query = data.query; + this.attr.lastQuery = data.query; this.attr.currentTag = 'all'; - this.fetchMail(query, 'all'); + this.refreshMails(); }; this.mailFromJSON = function (mail) { @@ -190,21 +188,19 @@ define( this.excludeTrashedEmailsForDraftsAndSent = function (query) { if (query === 'tag:"drafts"' || query === 'tag:"sent"') { return query + ' -in:"trash"'; - } else { - return query; } + return query; }; - this.fetchMail = function (query, tag, fromRefresh, eventData) { - var p = this.attr.currentPage; - var w = this.attr.w; - var url = this.attr.mailsResource + '?q=' + escaped(this.excludeTrashedEmailsForDraftsAndSent(query)) + '&p=' + p + '&w=' + w; - this.attr.lastQuery = this.excludeTrashedEmailsForDraftsAndSent(query); + this.refreshMails = function () { + var url = this.attr.mailsResource + '?q=' + escaped(this.attr.lastQuery) + '&p=' + this.attr.currentPage + '&w=' + this.attr.pageSize; + + this.attr.lastQuery = this.excludeTrashedEmailsForDraftsAndSent(this.attr.lastQuery); + monitoredAjax(this, url, { dataType: 'json' }) .done(function (data) { - this.attr.numPages = Math.ceil(data.stats.total / this.attr.w); - var eventToTrigger = fromRefresh ? events.mails.availableForRefresh : events.mails.available; - this.trigger(document, eventToTrigger, _.merge(_.merge({tag: tag }, eventData), this.parseMails(data))); + this.attr.numPages = Math.ceil(data.stats.total / this.attr.pageSize); + this.trigger(document, events.mails.available, _.merge(_.merge({tag: this.attr.currentTag }), this.parseMails(data))); }.bind(this)) .fail(function () { this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n('Could not fetch messages') }); @@ -232,14 +228,14 @@ define( this.previousPage = function () { if (this.attr.currentPage > 1) { this.updateCurrentPageNumber(this.attr.currentPage - 1); - this.refreshResults(); + this.refreshMails(); } }; this.nextPage = function () { if (this.attr.currentPage < (this.attr.numPages)) { this.updateCurrentPageNumber(this.attr.currentPage + 1); - this.refreshResults(); + this.refreshMails(); } }; @@ -281,10 +277,13 @@ define( this.on(document, events.mail.delete, this.deleteMail); this.on(document, events.mail.deleteMany, this.deleteManyMails); this.on(document, events.search.perform, this.newSearch); - this.on(document, events.ui.mails.fetchByTag, this.fetchByTag); - this.on(document, events.ui.mails.refresh, this.refreshResults); + this.on(document, events.ui.tag.selected, this.fetchByTag); + this.on(document, events.ui.tag.select, this.fetchByTag); + this.on(document, events.ui.mails.refresh, this.refreshMails); this.on(document, events.ui.page.previous, this.previousPage); this.on(document, events.ui.page.next, this.nextPage); + + this.fetchByTag(null, {tag: urlParams.getTag()}); }); } } 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 . */ -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..e6375034 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,6 @@ 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.addSearchingClass = function() { @@ -112,14 +96,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); }); diff --git a/web-ui/app/templates/tags/shortcut.hbs b/web-ui/app/templates/tags/shortcut.hbs index 49ddfdb2..5fa32320 100644 --- a/web-ui/app/templates/tags/shortcut.hbs +++ b/web-ui/app/templates/tags/shortcut.hbs @@ -1,4 +1,4 @@ -
  • +
  • {{#if displayBadge }} {{ count }} @@ -6,4 +6,4 @@
    {{ tagName }}
     -
    • \ No newline at end of file + diff --git a/web-ui/app/templates/tags/tag.hbs b/web-ui/app/templates/tags/tag.hbs index c645f782..a7b02e21 100644 --- a/web-ui/app/templates/tags/tag.hbs +++ b/web-ui/app/templates/tags/tag.hbs @@ -1,3 +1,3 @@ -
  • +
  • {{> tag_inner }}
    • diff --git a/web-ui/test/spec/mail_list/ui/mail_list.spec.js b/web-ui/test/spec/mail_list/ui/mail_list.spec.js index 003830de..3950f032 100644 --- a/web-ui/test/spec/mail_list/ui/mail_list.spec.js +++ b/web-ui/test/spec/mail_list/ui/mail_list.spec.js @@ -83,17 +83,6 @@ describeComponent('mail_list/ui/mail_list', function () { expect(mailHereCheckedEvent).toHaveBeenTriggeredOnAndWith(caller, { checkedMails: mailList }); }); - it('returns every checked mail when the curent tag is "all"', function () { - var caller = {}; - this.component.attr.checkedMails = mailList; - this.component.attr.currentTag = 'all'; - var mailHereCheckedEvent = spyOnEvent(caller, Pixelated.events.ui.mail.hereChecked); - - $(document).trigger(Pixelated.events.ui.mail.wantChecked, caller); - - expect(mailHereCheckedEvent).toHaveBeenTriggeredOnAndWith(caller, { checkedMails: mailList }); - }); - it('returns an empty list to whomever requests the checked mails if there are no checked mails with the current tag', function () { var caller = {}; var mailHereCheckedEvent = spyOnEvent(caller, Pixelated.events.ui.mail.hereChecked); -- cgit v1.2.3