2016-08-17 06:01:20 +08:00
|
|
|
import ko from 'ko';
|
|
|
|
|
2021-03-16 23:06:16 +08:00
|
|
|
import { Capa, Scope } from 'Common/Enums';
|
2021-02-17 03:12:23 +08:00
|
|
|
import { leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
|
2019-07-05 03:19:24 +08:00
|
|
|
import { mailBox, settings } from 'Common/Links';
|
|
|
|
import { setFolderHash } from 'Common/Cache';
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-03-11 05:41:35 +08:00
|
|
|
import { AppUserStore } from 'Stores/User/App';
|
|
|
|
import { SettingsUserStore } from 'Stores/User/Settings';
|
|
|
|
import { FolderUserStore } from 'Stores/User/Folder';
|
|
|
|
import { MessageUserStore } from 'Stores/User/Message';
|
2021-02-17 03:12:23 +08:00
|
|
|
import { ThemeStore } from 'Stores/Theme';
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-01-24 17:25:23 +08:00
|
|
|
import { showScreenPopup } from 'Knoin/Knoin';
|
|
|
|
import { AbstractViewLeft } from 'Knoin/AbstractViews';
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-03-10 18:43:23 +08:00
|
|
|
import { showMessageComposer } from 'Common/UtilsUser';
|
2021-01-26 05:00:13 +08:00
|
|
|
import { FolderCreatePopupView } from 'View/Popup/FolderCreate';
|
|
|
|
import { ContactsPopupView } from 'View/Popup/Contacts';
|
|
|
|
|
2021-02-12 21:56:16 +08:00
|
|
|
export class FolderListMailBoxUserView extends AbstractViewLeft {
|
2016-08-17 06:01:20 +08:00
|
|
|
constructor() {
|
2021-01-24 17:25:23 +08:00
|
|
|
super('User/MailBox/FolderList', 'MailFolderList');
|
2015-02-17 20:04:03 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.oContentScrollable = null;
|
2013-11-16 06:21:12 +08:00
|
|
|
|
2021-03-11 05:41:35 +08:00
|
|
|
this.composeInEdit = AppUserStore.composeInEdit;
|
2013-11-16 06:21:12 +08:00
|
|
|
|
2021-03-11 05:41:35 +08:00
|
|
|
this.folderList = FolderUserStore.folderList;
|
|
|
|
this.folderListSystem = FolderUserStore.folderListSystem;
|
|
|
|
this.foldersChanging = FolderUserStore.foldersChanging;
|
2014-06-03 07:22:36 +08:00
|
|
|
|
2017-02-09 01:48:53 +08:00
|
|
|
this.moveAction = moveAction;
|
|
|
|
|
2021-03-11 05:41:35 +08:00
|
|
|
this.foldersListWithSingleInboxRootFolder = FolderUserStore.foldersListWithSingleInboxRootFolder;
|
2015-04-02 02:18:15 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.leftPanelDisabled = leftPanelDisabled;
|
2016-04-29 04:32:54 +08:00
|
|
|
|
2021-03-10 18:43:23 +08:00
|
|
|
this.allowComposer = Settings.capa(Capa.Composer);
|
2021-03-17 17:05:22 +08:00
|
|
|
this.allowContacts = AppUserStore.allowContacts();
|
2014-04-08 05:03:58 +08:00
|
|
|
|
2021-03-16 23:06:16 +08:00
|
|
|
this.folderListFocused = ko.computed(() => Scope.FolderList === AppUserStore.focusedState());
|
2014-04-08 05:03:58 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
this.isInboxStarred = ko.computed(
|
2019-07-05 03:19:24 +08:00
|
|
|
() =>
|
2021-03-11 05:41:35 +08:00
|
|
|
FolderUserStore.currentFolder() &&
|
|
|
|
FolderUserStore.currentFolder().isInbox() &&
|
2021-03-12 23:54:37 +08:00
|
|
|
MessageUserStore.listSearch().trim().includes('is:flagged')
|
2016-08-17 06:01:20 +08:00
|
|
|
);
|
|
|
|
}
|
2014-08-21 23:08:34 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
onBuild(dom) {
|
2020-08-30 16:30:50 +08:00
|
|
|
const qs = s => dom.querySelector(s),
|
|
|
|
eqs = (ev, s) => ev.target.closestWithin(s, dom),
|
2016-08-17 06:01:20 +08:00
|
|
|
fSelectFolder = (el, event, starred) => {
|
2017-02-09 01:48:53 +08:00
|
|
|
const isMove = moveAction();
|
2021-02-17 03:12:23 +08:00
|
|
|
ThemeStore.isMobile() && leftPanelDisabled(true);
|
2016-04-29 04:32:54 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
event.preventDefault();
|
2016-04-29 04:32:54 +08:00
|
|
|
|
2019-07-05 03:19:24 +08:00
|
|
|
if (starred) {
|
2016-08-17 06:01:20 +08:00
|
|
|
event.stopPropagation();
|
|
|
|
}
|
2013-11-16 06:21:12 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
const folder = ko.dataFor(el);
|
2019-07-05 03:19:24 +08:00
|
|
|
if (folder) {
|
|
|
|
if (isMove) {
|
2017-02-09 01:48:53 +08:00
|
|
|
moveAction(false);
|
2020-09-15 15:29:25 +08:00
|
|
|
rl.app.moveMessagesToFolder(
|
2021-03-11 05:41:35 +08:00
|
|
|
FolderUserStore.currentFolderFullNameRaw(),
|
2021-03-12 23:54:37 +08:00
|
|
|
MessageUserStore.listCheckedOrSelectedUidsWithSubMails(),
|
2017-02-09 01:48:53 +08:00
|
|
|
folder.fullNameRaw,
|
2020-10-01 17:11:14 +08:00
|
|
|
event.ctrlKey
|
2017-02-09 01:48:53 +08:00
|
|
|
);
|
2019-07-05 03:19:24 +08:00
|
|
|
} else {
|
2021-03-11 05:41:35 +08:00
|
|
|
if (!SettingsUserStore.usePreviewPane()) {
|
|
|
|
MessageUserStore.message(null);
|
2017-02-09 01:48:53 +08:00
|
|
|
}
|
|
|
|
|
2021-03-11 05:41:35 +08:00
|
|
|
if (folder.fullNameRaw === FolderUserStore.currentFolderFullNameRaw()) {
|
2017-02-09 01:48:53 +08:00
|
|
|
setFolderHash(folder.fullNameRaw, '');
|
|
|
|
}
|
|
|
|
|
2020-09-17 02:35:29 +08:00
|
|
|
rl.route.setHash(starred
|
|
|
|
? mailBox(folder.fullNameHash, 1, 'is:flagged')
|
|
|
|
: mailBox(folder.fullNameHash)
|
|
|
|
);
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2017-02-09 01:48:53 +08:00
|
|
|
|
2021-03-16 23:06:16 +08:00
|
|
|
AppUserStore.focusedState(Scope.MessageList);
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
|
|
|
};
|
2014-02-04 04:06:35 +08:00
|
|
|
|
2020-08-27 21:45:47 +08:00
|
|
|
this.oContentScrollable = qs('.b-content');
|
|
|
|
|
2020-08-30 16:30:50 +08:00
|
|
|
dom.addEventListener('click', event => {
|
2020-10-09 23:12:56 +08:00
|
|
|
let el = event.target.closest('.e-collapsed-sign');
|
2020-08-30 16:30:50 +08:00
|
|
|
if (el) {
|
|
|
|
const folder = ko.dataFor(el);
|
|
|
|
if (folder) {
|
2016-08-17 06:01:20 +08:00
|
|
|
const collapsed = folder.collapsed();
|
2020-09-15 15:29:25 +08:00
|
|
|
rl.app.setExpandedFolder(folder.fullNameHash, collapsed);
|
2016-08-17 06:01:20 +08:00
|
|
|
|
|
|
|
folder.collapsed(!collapsed);
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
2020-10-09 23:12:56 +08:00
|
|
|
return;
|
2013-11-16 06:21:12 +08:00
|
|
|
}
|
2020-08-30 16:30:50 +08:00
|
|
|
}
|
|
|
|
|
2021-04-23 19:01:51 +08:00
|
|
|
el = eqs(event, '.b-folders .e-item a.selectable .inbox-star-icon');
|
2020-08-30 16:30:50 +08:00
|
|
|
el && fSelectFolder(el, event, !this.isInboxStarred());
|
|
|
|
|
2021-04-23 19:01:51 +08:00
|
|
|
el = eqs(event, '.b-folders .e-item a.selectable');
|
2020-08-30 16:30:50 +08:00
|
|
|
el && fSelectFolder(el, event, false);
|
|
|
|
});
|
2016-08-17 06:01:20 +08:00
|
|
|
|
2021-03-16 23:06:16 +08:00
|
|
|
shortcuts.add('arrowup,arrowdown', '', Scope.FolderList, event => {
|
2020-08-30 16:30:50 +08:00
|
|
|
let items = [], index = 0;
|
2021-04-23 19:01:51 +08:00
|
|
|
dom.querySelectorAll('.b-folders .e-item a:not(.hidden)').forEach(node => {
|
2020-08-30 16:30:50 +08:00
|
|
|
if (node.offsetHeight || node.getClientRects().length) {
|
|
|
|
items.push(node);
|
|
|
|
if (node.matches('.focused')) {
|
|
|
|
node.classList.remove('focused');
|
|
|
|
index = items.length - 1;
|
2020-08-27 21:45:47 +08:00
|
|
|
}
|
2014-08-21 23:08:34 +08:00
|
|
|
}
|
2020-08-30 16:30:50 +08:00
|
|
|
});
|
|
|
|
if (items.length) {
|
2020-09-26 06:02:29 +08:00
|
|
|
if ('ArrowUp' === event.key) {
|
2020-08-30 16:30:50 +08:00
|
|
|
index && --index;
|
|
|
|
} else if (index < items.length - 1) {
|
2020-08-27 21:45:47 +08:00
|
|
|
++index;
|
2014-08-21 23:08:34 +08:00
|
|
|
}
|
2020-08-30 16:30:50 +08:00
|
|
|
items[index].classList.add('focused');
|
|
|
|
this.scrollToFocused();
|
2014-04-13 08:32:07 +08:00
|
|
|
}
|
2014-08-21 23:08:34 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
return false;
|
|
|
|
});
|
2014-08-21 23:08:34 +08:00
|
|
|
|
2021-03-16 23:06:16 +08:00
|
|
|
shortcuts.add('enter,open', '', Scope.FolderList, () => {
|
2021-04-23 19:01:51 +08:00
|
|
|
const item = qs('.b-folders .e-item a:not(.hidden).focused');
|
2020-08-27 21:45:47 +08:00
|
|
|
if (item) {
|
2021-03-16 23:06:16 +08:00
|
|
|
AppUserStore.focusedState(Scope.MessageList);
|
2020-08-27 21:45:47 +08:00
|
|
|
item.click();
|
2014-04-13 08:32:07 +08:00
|
|
|
}
|
2014-06-03 07:22:36 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
return false;
|
|
|
|
});
|
2014-04-13 08:32:07 +08:00
|
|
|
|
2021-03-16 23:06:16 +08:00
|
|
|
shortcuts.add('space', '', Scope.FolderList, () => {
|
2021-04-23 19:01:51 +08:00
|
|
|
const item = qs('.b-folders .e-item a:not(.hidden).focused'),
|
2020-08-27 21:45:47 +08:00
|
|
|
folder = item && ko.dataFor(item);
|
|
|
|
if (folder) {
|
|
|
|
const collapsed = folder.collapsed();
|
2020-09-15 15:29:25 +08:00
|
|
|
rl.app.setExpandedFolder(folder.fullNameHash, collapsed);
|
2020-08-27 21:45:47 +08:00
|
|
|
folder.collapsed(!collapsed);
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
2014-04-13 08:32:07 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
2021-03-16 23:06:16 +08:00
|
|
|
// shortcuts.add('tab', 'shift', Scope.FolderList, () => {
|
|
|
|
shortcuts.add('escape,tab,arrowright', '', Scope.FolderList, () => {
|
|
|
|
AppUserStore.focusedState(Scope.MessageList);
|
2017-02-09 01:48:53 +08:00
|
|
|
moveAction(false);
|
2016-08-17 06:01:20 +08:00
|
|
|
return false;
|
|
|
|
});
|
|
|
|
|
2021-03-11 05:41:35 +08:00
|
|
|
AppUserStore.focusedState.subscribe(value => {
|
2021-04-23 19:01:51 +08:00
|
|
|
let el = qs('.b-folders .e-item a.focused');
|
|
|
|
el && qs('.b-folders .e-item a.focused').classList.remove('focused');
|
2021-03-16 23:06:16 +08:00
|
|
|
if (Scope.FolderList === value) {
|
2021-04-23 19:01:51 +08:00
|
|
|
el = qs('.b-folders .e-item a.selected');
|
|
|
|
el && qs('.b-folders .e-item a.selected').classList.add('focused');
|
2014-05-08 00:04:32 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
});
|
|
|
|
}
|
2014-05-08 00:04:32 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
scrollToFocused() {
|
2020-08-27 21:45:47 +08:00
|
|
|
const scrollable = this.oContentScrollable;
|
|
|
|
if (scrollable) {
|
2021-04-23 19:01:51 +08:00
|
|
|
let block, focused = scrollable.querySelector('.e-item a.focused');
|
2020-08-27 21:45:47 +08:00
|
|
|
if (focused) {
|
|
|
|
const fRect = focused.getBoundingClientRect(),
|
|
|
|
sRect = scrollable.getBoundingClientRect();
|
|
|
|
if (fRect.top < sRect.top) {
|
|
|
|
block = 'start';
|
|
|
|
} else if (fRect.bottom > sRect.bottom) {
|
|
|
|
block = 'end';
|
|
|
|
}
|
|
|
|
block && focused.scrollIntoView(block === 'start');
|
2014-08-21 23:08:34 +08:00
|
|
|
}
|
2015-05-20 06:05:54 +08:00
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
composeClick() {
|
2021-03-10 18:43:23 +08:00
|
|
|
showMessageComposer();
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
2014-06-03 07:22:36 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
createFolder() {
|
2021-01-26 05:00:13 +08:00
|
|
|
showScreenPopup(FolderCreatePopupView);
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
configureFolders() {
|
2020-09-17 02:35:29 +08:00
|
|
|
rl.route.setHash(settings('folders'));
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
|
2016-08-17 06:01:20 +08:00
|
|
|
contactsClick() {
|
2019-07-05 03:19:24 +08:00
|
|
|
if (this.allowContacts) {
|
2021-01-26 05:00:13 +08:00
|
|
|
showScreenPopup(ContactsPopupView);
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|
2016-06-30 08:02:45 +08:00
|
|
|
}
|
2016-08-17 06:01:20 +08:00
|
|
|
}
|