From 04cf441c5ae18400c6b4865b0b37a71718dc9d46 Mon Sep 17 00:00:00 2001 From: Ola Bini Date: Thu, 31 Jul 2014 19:29:33 -0300 Subject: Add web-ui based on previous code --- web-ui/app/js/page/default.js | 87 +++++++++++++++ web-ui/app/js/page/events.js | 168 +++++++++++++++++++++++++++++ web-ui/app/js/page/pane_contract_expand.js | 34 ++++++ web-ui/app/js/page/router.js | 51 +++++++++ web-ui/app/js/page/router/url_params.js | 40 +++++++ 5 files changed, 380 insertions(+) create mode 100644 web-ui/app/js/page/default.js create mode 100644 web-ui/app/js/page/events.js create mode 100644 web-ui/app/js/page/pane_contract_expand.js create mode 100644 web-ui/app/js/page/router.js create mode 100644 web-ui/app/js/page/router/url_params.js (limited to 'web-ui/app/js/page') diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js new file mode 100644 index 00000000..e47b2f4d --- /dev/null +++ b/web-ui/app/js/page/default.js @@ -0,0 +1,87 @@ +define( + [ + 'mail_view/ui/compose_box', + 'mail_list_actions/ui/mail_list_actions', + 'user_alerts/ui/user_alerts', + 'mail_list/ui/mail_list', + 'mail_view/ui/no_message_selected_pane', + 'mail_view/ui/mail_view', + 'mail_view/ui/mail_actions', + 'mail_view/ui/reply_section', + 'mail_view/data/mail_sender', + 'services/mail_service', + 'services/delete_service', + 'tags/ui/tag_list', + 'tags/data/tags', + 'page/router', + 'dispatchers/right_pane_dispatcher', + 'dispatchers/middle_pane_dispatcher', + 'dispatchers/left_pane_dispatcher', + 'search/search_trigger', + 'search/results_highlighter', + 'foundation/off_canvas', + 'page/pane_contract_expand', + 'views/i18n', + 'views/recipientListFormatter', + 'flight/lib/logger' + ], + + function ( + composeBox, + mailListActions, + userAlerts, + mailList, + noMessageSelectedPane, + mailView, + mailViewActions, + replyButton, + mailSender, + mailService, + deleteService, + tagList, + tags, + router, + rightPaneDispatcher, + middlePaneDispatcher, + leftPaneDispatcher, + searchTrigger, + resultsHighlighter, + offCanvas, + paneContractExpand, + viewI18n, + recipientListFormatter, + withLogging) { + + 'use strict'; + function initialize(path) { + viewI18n.init(path); + paneContractExpand.attachTo(document); + + userAlerts.attachTo('#user-alerts'); + + mailList.attachTo('#mail-list'); + mailListActions.attachTo('#list-actions'); + + searchTrigger.attachTo('#search-trigger'); + resultsHighlighter.attachTo(document); + + mailSender.attachTo(document); + + mailService.attachTo(document); + deleteService.attachTo(document); + + tags.attachTo(document); + tagList.attachTo('#tag-list'); + + router.attachTo(document); + + rightPaneDispatcher.attachTo(document); + middlePaneDispatcher.attachTo(document); + leftPaneDispatcher.attachTo(document); + + offCanvas.attachTo(document); + } + + return initialize; + } +); diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js new file mode 100644 index 00000000..6b39096c --- /dev/null +++ b/web-ui/app/js/page/events.js @@ -0,0 +1,168 @@ +define(function () { + 'use strict'; + + var events = { + router: { + pushState: 'router:pushState' + }, + ui: { + sendbutton: { + enable: 'ui:sendbutton:enable' + }, + middlePane: { + expand: 'ui:middlePane:expand', + contract: 'ui:middlePane:contract' + }, + userAlerts: { + displayMessage: 'ui:userAlerts:displayMessage' + }, + tag: { + selected: 'ui:tagSelected', + select: 'ui:tagSelect' + }, + tags: { + loaded: 'ui:tagsLoaded' + }, + tagList: { + refresh: 'ui:tagList:refresh', + load: 'ui:tagList:load' + }, + mails: { + refresh: 'ui:mails:refresh', + fetchByTag: 'ui:mails:fetchByTag', + cleanSelected: 'ui:mails:cleanSelected', + checkAll: 'ui:mails:checkAll', + uncheckAll: 'ui:mails:uncheckAll', + hasMailsChecked: 'ui:mails:hasMailsChecked' + }, + mail: { + open: 'ui:mail:open', + updateSelected: 'ui:mail:updateSelected', + delete: 'ui:mail:delete', + deleteMany: 'ui:mail:deleteMany', + wantChecked: 'ui:mail:wantChecked', + hereChecked: 'ui:mail:hereChecked', + checked: 'ui:mail:checked', + unchecked: 'ui:mail:unchecked', + changedSinceLastSave: 'ui:mail:changedSinceLastSave', + send: 'ui:mail:send', + recipientsUpdated: 'ui:mail:recipientsUpdated' + }, + page: { + previous: 'ui:page:previous', + next: 'ui:page:next', + changed: 'ui:page:changed' + }, + composeBox: { + newMessage: 'ui:composeBox:newMessage', + newReply: 'ui:composeBox:newReply', + trashReply: 'ui:composeBox:trashReply', + requestCancelReply: 'ui:composeBox:requestCancelReply' + }, + replyBox: { + showReply: 'ui:replyBox:showReply', + showReplyAll: 'ui:replyBox:showReplyAll' + }, + recipients: { + entered: 'ui:recipients:entered', + updated: 'ui:recipients:updated', + deleteLast: 'ui:recipients:deleteLast', + selectLast: 'ui:recipients:selectLast', + unselectAll: 'ui:recipients:unselectAll', + addressesExist: 'ui:recipients:addressesExist', + inputHasMail: 'ui:recipients:inputHasMail', + inputHasNoMail: 'ui:recipients:inputHasNoMail', + doCompleteInput: 'ui:recipients:doCompleteInput', + doCompleteRecipients: 'ui:recipients:doCompleteRecipients' + } + }, + search: { + perform: 'search:perform', + results: 'search:results', + empty: 'search:empty', + highlightResults: 'search:highlightResults' + }, + mail: { + here: 'mail:here', + want: 'mail:want', + send: 'mail:send', + sent: 'mail:sent', + read: 'mail:read', + unread: 'mail:unread', + delete: 'mail:delete', + deleteMany: 'mail:deleteMany', + deleted: 'mail:deleted', + saveDraft: 'draft:save', + draftSaved: 'draft:saved', + draftReply: { + want: 'mail:draftReply:want', + here: 'mail:draftReply:here', + notFound: 'mail:draftReply:notFound' + }, + notFound: 'mail:notFound', + save: 'mail:saved', + tags: { + update: 'mail:tags:update', + updated: 'mail:tags:updated' + } + }, + mails: { + available: 'mails:available', + availableForRefresh: 'mails:available:refresh', + teardown: 'mails:teardown' + }, + tags: { + want: 'tags:want', + received: 'tags:received', + teardown: 'tags:teardown' + }, + route: { + toUrl: 'route:toUrl' + }, + + components: { + composeBox: { + open: 'components:composeBox:open', + close: 'components:composeBox:close' + }, + mailPane: { + open: 'components:mailPane:open', + close: 'components:mailPane:close' + }, + mailView: { + show: 'components:mailView:show', + close: 'components:mailView:close' + }, + replySection: { + initialize: 'components:replySection:initialize', + close: 'components:replySection:close' + }, + noMessageSelectedPane: { + open: 'components:noMessageSelectedPane:open', + close: 'components:noMessageSelectedPane:close' + } + }, + + dispatchers: { + rightPane: { + openComposeBox: 'dispatchers:rightPane:openComposeBox', + openNoMessageSelected: 'dispatchers:rightPane:openNoMessageSelected', + openNoMessageSelectedWithoutPushState: 'dispatchers:rightPane:openNoMessageSelectedWithoutPushState', + refreshMailList: 'dispatchers:rightPane:refreshMailList', + openDraft: 'dispatchers:rightPane:openDraft', + selectTag: 'dispatchers:rightPane:selectTag', + clear: 'dispatchers:rightPane:clear' + }, + middlePane: { + refreshMailList: 'dispatchers:middlePane:refreshMailList', + cleanSelected: 'dispatchers:middlePane:unselect', + resetScroll: 'dispatchers:middlePane:resetScroll' + }, + tags: { + refreshTagList: 'dispatchers:tag:refresh' + } + } + }; + + return events; +}); diff --git a/web-ui/app/js/page/pane_contract_expand.js b/web-ui/app/js/page/pane_contract_expand.js new file mode 100644 index 00000000..464c78b0 --- /dev/null +++ b/web-ui/app/js/page/pane_contract_expand.js @@ -0,0 +1,34 @@ +'use strict'; + +define(['flight/lib/component', 'page/events'], function (describeComponent, events) { + + return describeComponent(paneContractExpand); + + function paneContractExpand() { + this.defaultAttrs({ + RIGHT_PANE_EXPAND_CLASSES: 'small-7 medium-7 large-7 columns', + RIGHT_PANE_CONTRACT_CLASSES: 'small-7 medium-4 large-4 columns', + MIDDLE_PANE_EXPAND_CLASSES: 'small-5 medium-8 large-8 columns no-padding', + MIDDLE_PANE_CONTRACT_CLASSES: 'small-5 medium-5 large-5 columns no-padding' + }); + + this.expandMiddlePaneContractRightPane = function () { + $('#middle-pane-container').attr('class', this.attr.MIDDLE_PANE_EXPAND_CLASSES); + $('#right-pane').attr('class', this.attr.RIGHT_PANE_CONTRACT_CLASSES); + }; + + this.contractMiddlePaneExpandRightPane = function () { + $('#middle-pane-container').attr('class', this.attr.MIDDLE_PANE_CONTRACT_CLASSES); + $('#right-pane').attr('class', this.attr.RIGHT_PANE_EXPAND_CLASSES); + }; + + this.after('initialize', function () { + this.on(document, events.ui.mail.open, this.contractMiddlePaneExpandRightPane); + this.on(document, events.dispatchers.rightPane.openComposeBox, this.contractMiddlePaneExpandRightPane); + this.on(document, events.dispatchers.rightPane.openDraft, this.contractMiddlePaneExpandRightPane); + this.on(document, events.dispatchers.rightPane.openNoMessageSelected, this.expandMiddlePaneContractRightPane); + this.expandMiddlePaneContractRightPane() + }); + + } +}); diff --git a/web-ui/app/js/page/router.js b/web-ui/app/js/page/router.js new file mode 100644 index 00000000..cc51100b --- /dev/null +++ b/web-ui/app/js/page/router.js @@ -0,0 +1,51 @@ +define(['flight/lib/component', 'page/events', 'page/router/url_params'], function (defineComponent, events, urlParams) { + 'use strict'; + + return defineComponent(function () { + this.defaultAttrs({ + history: window.history + }); + + function createHash(data) { + var hash = "/#/" + data.tag; + if (!_.isUndefined(data.mailIdent)) { + hash += '/mail/' + data.mailIdent; + } + return hash; + } + + function createState(data, previousState) { + return { + tag: data.tag || (previousState && previousState.tag) || urlParams.defaultTag(), + mailIdent: data.mailIdent, + isDisplayNoMessageSelected: !!data.isDisplayNoMessageSelected + }; + } + + this.smailPushState = function (ev, data) { + if (!data.fromPopState) { + var nextState = createState(data, this.attr.history.state); + this.attr.history.pushState(nextState, '', createHash(nextState)); + } + }; + + this.smailPopState = function (ev) { + var state = ev.state || {}; + + this.trigger(document, events.ui.tag.select, { + tag: state.tag || urlParams.getTag(), + mailIdent: state.mailIdent, + fromPopState: true + }); + + if (ev.state.isDisplayNoMessageSelected) { + this.trigger(document, events.dispatchers.rightPane.openNoMessageSelectedWithoutPushState); + } + }; + + this.after('initialize', function () { + this.on(document, events.router.pushState, this.smailPushState); + window.onpopstate = this.smailPopState.bind(this); + }); + }); +}); diff --git a/web-ui/app/js/page/router/url_params.js b/web-ui/app/js/page/router/url_params.js new file mode 100644 index 00000000..d4fb28f5 --- /dev/null +++ b/web-ui/app/js/page/router/url_params.js @@ -0,0 +1,40 @@ +define([], function () { + + function defaultTag() { + return 'inbox'; + } + + function getDocumentHash() { + return document.location.hash.replace(/\/$/, ''); + } + + function hashTag(hash) { + if (hasMailIdent(hash)) { + return /\/(.+)\/mail\/\d+$/.exec(getDocumentHash())[1]; + } + return hash.substring(2); + } + + + function getTag() { + if (document.location.hash !== '') { + return hashTag(getDocumentHash()); + } + return defaultTag(); + } + + function hasMailIdent() { + return getDocumentHash().match(/mail\/\d+$/); + } + + function getMailIdent() { + return /mail\/(\d+)$/.exec(getDocumentHash())[1]; + } + + return { + getTag: getTag, + hasMailIdent: hasMailIdent, + getMailIdent: getMailIdent, + defaultTag: defaultTag + }; +}); -- cgit v1.2.3