snappymail/dev/View/User/MailBox/FolderList.js

import ko from 'ko';

import { Capa, Focused, Layout, KeyState, EventKeyCode } from 'Common/Enums';
import { $htmlCL, leftPanelDisabled, moveAction } from 'Common/Globals';
import { mailBox, settings } from 'Common/Links';
import { setFolderHash } from 'Common/Cache';

import AppStore from 'Stores/User/App';
import SettingsStore from 'Stores/User/Settings';
import FolderStore from 'Stores/User/Folder';
import MessageStore from 'Stores/User/Message';

import * as Settings from 'Storage/Settings';

import { getApp } from 'Helper/Apps/User';

import { view, ViewType, showScreenPopup, setHash } from 'Knoin/Knoin';
import { AbstractViewNext } from 'Knoin/AbstractViewNext';

const $ = jQuery;

@view({
	name: 'View/User/MailBox/FolderList',
	type: ViewType.Left,
	templateID: 'MailFolderList'
})
class FolderListMailBoxUserView extends AbstractViewNext {
	constructor() {
		super();

		this.oContentVisible = null;
		this.oContentScrollable = null;

		this.composeInEdit = AppStore.composeInEdit;

		this.messageList = MessageStore.messageList;
		this.folderList = FolderStore.folderList;
		this.folderListSystem = FolderStore.folderListSystem;
		this.foldersChanging = FolderStore.foldersChanging;

		this.moveAction = moveAction;

		this.foldersListWithSingleInboxRootFolder = FolderStore.foldersListWithSingleInboxRootFolder;

		this.leftPanelDisabled = leftPanelDisabled;

		this.iDropOverTimer = 0;

		this.allowComposer = !!Settings.capa(Capa.Composer);
		this.allowContacts = !!AppStore.contactsIsAllowed();
		this.allowFolders = !!Settings.capa(Capa.Folders);

		this.folderListFocused = ko.computed(() => Focused.FolderList === AppStore.focusedState());

		this.isInboxStarred = ko.computed(
			() =>
				FolderStore.currentFolder() &&
				FolderStore.currentFolder().isInbox() &&
				MessageStore.messageListSearch().trim().includes('is:flagged')
		);
	}

	onBuild(dom) {
		this.oContentVisible = $('.b-content', dom);
		this.oContentScrollable = this.oContentVisible ? this.oContentVisible[0] : null;

		const self = this,
			isMobile = Settings.appSettingsGet('mobile'),
			fSelectFolder = (el, event, starred) => {
				const isMove = moveAction();
				if (isMobile) {
					leftPanelDisabled(true);
				}

				event.preventDefault();

				if (starred) {
					event.stopPropagation();
				}

				const folder = ko.dataFor(el);
				if (folder) {
					if (isMove) {
						moveAction(false);
						getApp().moveMessagesToFolder(
							FolderStore.currentFolderFullNameRaw(),
							MessageStore.messageListCheckedOrSelectedUidsWithSubMails(),
							folder.fullNameRaw,
							false
						);
					} else {
						if (Layout.NoPreview === SettingsStore.layout()) {
							MessageStore.message(null);
						}

						if (folder.fullNameRaw === FolderStore.currentFolderFullNameRaw()) {
							setFolderHash(folder.fullNameRaw, '');
						}

						if (starred) {
							setHash(mailBox(folder.fullNameHash, 1, 'is:flagged'));
						} else {
							setHash(mailBox(folder.fullNameHash));
						}
					}

					AppStore.focusedState(Focused.MessageList);
				}
			};

		dom
			.on('click', '.b-folders .e-item .e-link .e-collapsed-sign', function(event) {
				// eslint-disable-line prefer-arrow-callback
				const folder = ko.dataFor(this); // eslint-disable-line no-invalid-this
				if (folder && event) {
					const collapsed = folder.collapsed();
					getApp().setExpandedFolder(folder.fullNameHash, collapsed);

					folder.collapsed(!collapsed);
					event.preventDefault();
					event.stopPropagation();
				}
			})
			.on('click', '.b-folders .e-item .e-link.selectable .inbox-star-icon', function(event) {
				// eslint-disable-line prefer-arrow-callback
				fSelectFolder(this, event, !self.isInboxStarred()); // eslint-disable-line no-invalid-this
			})
			.on('click', '.b-folders .e-item .e-link.selectable', function(event) {
				// eslint-disable-line prefer-arrow-callback
				fSelectFolder(this, event, false); // eslint-disable-line no-invalid-this
			});

		key('up, down', KeyState.FolderList, (event, handler) => {
			const keyCode = handler && 'up' === handler.shortcut ? EventKeyCode.Up : EventKeyCode.Down,
				$items = $('.b-folders .e-item .e-link:not(.hidden):visible', dom);

			if (event && $items.length) {
				let index = $items.index($items.filter('.focused'));
				if (-1 < index) {
					$items.eq(index).removeClass('focused');
				}

				if (EventKeyCode.Up === keyCode && 0 < index) {
					index -= 1;
				} else if (EventKeyCode.Down === keyCode && index < $items.length - 1) {
					index += 1;
				}

				$items.eq(index).addClass('focused');
				self.scrollToFocused();
			}

			return false;
		});

		key('enter', KeyState.FolderList, () => {
			const $items = $('.b-folders .e-item .e-link:not(.hidden).focused', dom);
			if ($items.length && $items[0]) {
				AppStore.focusedState(Focused.MessageList);
				$items.click();
			}

			return false;
		});

		key('space', KeyState.FolderList, () => {
			const $items = $('.b-folders .e-item .e-link:not(.hidden).focused', dom);
			if ($items.length && $items[0]) {
				const folder = ko.dataFor($items[0]);
				if (folder) {
					const collapsed = folder.collapsed();
					getApp().setExpandedFolder(folder.fullNameHash, collapsed);
					folder.collapsed(!collapsed);
				}
			}

			return false;
		});

		key('esc, tab, shift+tab, right', KeyState.FolderList, () => {
			AppStore.focusedState(Focused.MessageList);
			moveAction(false);
			return false;
		});

		AppStore.focusedState.subscribe((value) => {
			$('.b-folders .e-item .e-link.focused', dom).removeClass('focused');
			if (Focused.FolderList === value) {
				$('.b-folders .e-item .e-link.selected', dom).addClass('focused');
			}
		});
	}

	messagesDropOver(folder) {
		clearTimeout(this.iDropOverTimer);
		if (folder && folder.collapsed()) {
			this.iDropOverTimer = setTimeout(() => {
				folder.collapsed(false);
				getApp().setExpandedFolder(folder.fullNameHash, true);
			}, 500);
		}
	}

	messagesDropOut() {
		clearTimeout(this.iDropOverTimer);
	}

	scrollToFocused() {
		if (!this.oContentVisible || !this.oContentScrollable) {
			return false;
		}

		const offset = 20,
			focused = $('.e-item .e-link.focused', this.oContentScrollable),
			pos = focused.position(),
			visibleHeight = this.oContentVisible.height(),
			focusedHeight = focused.outerHeight();

		if (pos && (0 > pos.top || pos.top + focusedHeight > visibleHeight)) {
			let top = this.oContentScrollable.scrollTop + pos.top;
			if (0 > pos.top) {
				this.oContentScrollable.scrollTop = top - offset;
			} else {
				this.oContentScrollable.scrollTop = top - visibleHeight + focusedHeight + offset;
			}

			return true;
		}

		return false;
	}

	/**
	 * @param {FolderModel} toFolder
	 * @param {{helper:jQuery}} ui
	 * @returns {void}
	 */
	messagesDrop(toFolder, ui) {
		if (toFolder && ui && ui.helper) {
			const fromFolderFullNameRaw = ui.helper.data('rl-folder'),
				copy = $htmlCL.contains('rl-ctrl-key-pressed'),
				uids = ui.helper.data('rl-uids');

			if (fromFolderFullNameRaw && Array.isArray(uids)) {
				getApp().moveMessagesToFolder(fromFolderFullNameRaw, uids, toFolder.fullNameRaw, copy);
			}
		}
	}

	composeClick() {
		if (Settings.capa(Capa.Composer)) {
			showScreenPopup(require('View/Popup/Compose'));
		}
	}

	createFolder() {
		showScreenPopup(require('View/Popup/FolderCreate'));
	}

	configureFolders() {
		setHash(settings('folders'));
	}

	contactsClick() {
		if (this.allowContacts) {
			showScreenPopup(require('View/Popup/Contacts'));
		}
	}
}

export { FolderListMailBoxUserView, FolderListMailBoxUserView as default };