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/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 +++++++++-------------------------- 5 files changed, 66 insertions(+), 65 deletions(-) (limited to 'web-ui/app/js/tags') 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); }); -- cgit v1.2.3 From b0720edaa0d51ee9e807495fa536d890d332c50d Mon Sep 17 00:00:00 2001 From: Alexandre Pretto Nunes Date: Tue, 6 Jan 2015 16:19:36 -0200 Subject: Update tests to refactored events behaviour --- web-ui/app/js/tags/ui/tag.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'web-ui/app/js/tags') diff --git a/web-ui/app/js/tags/ui/tag.js b/web-ui/app/js/tags/ui/tag.js index e6375034..dfedb137 100644 --- a/web-ui/app/js/tags/ui/tag.js +++ b/web-ui/app/js/tags/ui/tag.js @@ -65,6 +65,8 @@ define( this.triggerSelect = function () { this.trigger(document, events.ui.tag.select, { tag: this.attr.tag.name }); + + this.removeSearchingClass(); }; this.addSearchingClass = function() { -- cgit v1.2.3