More jQuery to native (including bootstrap.js)

dev/View/Admin/Settings/Menu.js

@@ -26,7 +26,7 @@ class MenuSettingsAdminView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
-		key('up, down', KeyState.Settings, settingsMenuKeysHandler(jQuery('.b-admin-menu .e-item', dom)));
+		key('up, down', KeyState.Settings, settingsMenuKeysHandler(dom.querySelectoAll('.b-admin-menu .e-item')));
 	}
 }
 

dev/View/Popup/ComposeOpenPgp.js

@@ -99,7 +99,7 @@ class ComposeOpenPgpPopupView extends AbstractViewNext {
 			this.defautOptionsAfterRender(domOption, item);
 
 			if (item && undefined !== item.class && domOption) {
-				jQuery(domOption).addClass(item.class);
+				domOption.classList.add(item.class);
 			}
 		};
 

dev/View/Popup/Contacts.js

@@ -610,7 +610,7 @@ class ContactsPopupView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
-		this.selector.init(dom[0].querySelector('.b-list-content'), KeyState.ContactList);
+		this.selector.init(dom.querySelector('.b-list-content'), KeyState.ContactList);
 
 		key('delete', KeyState.ContactList, () => {
 			this.deleteCommand();
@@ -624,11 +624,10 @@ class ContactsPopupView extends AbstractViewNext {
 
 		const self = this;
 
-		dom.on('click', '.e-pagenator .e-page', function() {
-			// eslint-disable-line prefer-arrow-callback
-			const page = ko.dataFor(this); // eslint-disable-line no-invalid-this
-			if (page) {
-				self.contactsPage(pInt(page.value));
+		dom.addEventListener('click', event => {
+			let el = event.target.closestWithin('.e-pagenator .e-page', dom);
+			if (el && ko.dataFor(el)) {
+				self.contactsPage(pInt(ko.dataFor(el).value));
 				self.reloadContactList();
 			}
 		});

dev/View/Popup/KeyboardShortcutsHelp.js

@@ -14,27 +14,27 @@ class KeyboardShortcutsHelpPopupView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
+		dom.querySelectorAll('a[data-toggle="tab"]').forEach(node => node.Tab || new BSN.Tab(node));
+
 		key(
 			'tab, shift+tab, left, right',
 			KeyState.PopupKeyboardShortcutsHelp,
 			((event, handler)=>{
 				if (event && handler) {
-					const $tabs = dom.find('.nav.nav-tabs > li'),
-						isNext = handler && ('tab' === handler.shortcut || 'right' === handler.shortcut);
+					const tabs = dom.querySelectorAll('.nav.nav-tabs > li'),
+						last = tabs.length - 1;
+					let next = 0;
+					tabs.forEach((node, index) => {
+						if (node.matches('.active')) {
+							if (['tab','right'].includes(handler.shortcut)) {
+								next = index < last ? index+1 : 0;
+							} else {
+								next = index ? index-1 : last;
+							}
+						}
+					});
 
-					let index = $tabs.index($tabs.filter('.active'));
-					if (!isNext && 0 < index) {
-						index -= 1;
-					} else if (isNext && index < $tabs.length - 1) {
-						index += 1;
-					} else {
-						index = isNext ? 0 : $tabs.length - 1;
-					}
-
-					$tabs
-						.eq(index)
-						.find('a[data-toggle="tab"]')
-						.tab('show');
+					tabs[next].querySelector('a[data-toggle="tab"]').Tab.show();
 				}
 			}).throttle(100)
 		);

dev/View/Popup/MessageOpenPgp.js

@@ -90,22 +90,18 @@ class MessageOpenPgpPopupView extends AbstractViewNext {
 
 		const self = this;
 
-		oDom.on('click', '.key-list__item', function() {
-			// eslint-disable-line prefer-arrow-callback
+		oDom.addEventListener('click', event => {
+			const el = event.target.closestWithin('.key-list__item', oDom);
+			if (el) {
+				oDom.querySelectorAll('.key-list__item .key-list__item__radio').forEach(node => {
+					node.classList.toggle('icon-radio-unchecked', el !== node);
+					node.classList.toggle('icon-radio-checked', el === node);
+				});
 
-			oDom
-				.find('.key-list__item .key-list__item__radio')
-				.addClass('icon-radio-unchecked')
-				.removeClass('icon-radio-checked');
+				self.selectedKey(ko.dataFor(el)); // eslint-disable-line no-invalid-this
 
-			jQuery(this)
-				.find('.key-list__item__radio') // eslint-disable-line no-invalid-this
-				.removeClass('icon-radio-unchecked')
-				.addClass('icon-radio-checked');
-
-			self.selectedKey(ko.dataFor(this)); // eslint-disable-line no-invalid-this
-
-//			this.querySelector('.inputPassword').focus();
+//				this.querySelector('.inputPassword').focus();
+			}
 		});
 	}
 

dev/View/User/MailBox/FolderList.js

@@ -1,6 +1,6 @@
 import ko from 'ko';
 
-import { Capa, Focused, Layout, KeyState, EventKeyCode } from 'Common/Enums';
+import { Capa, Focused, Layout, KeyState } from 'Common/Enums';
 import { $htmlCL, leftPanelDisabled, moveAction } from 'Common/Globals';
 import { mailBox, settings } from 'Common/Links';
 import { setFolderHash } from 'Common/Cache';
@@ -58,8 +58,8 @@ class FolderListMailBoxUserView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
-		const self = this,
-			qs = s => dom[0].querySelector(s),
+		const qs = s => dom.querySelector(s),
+			eqs = (ev, s) => ev.target.closestWithin(s, dom),
 			isMobile = Settings.appSettingsGet('mobile'),
 			fSelectFolder = (el, event, starred) => {
 				const isMove = moveAction();
@@ -105,11 +105,11 @@ class FolderListMailBoxUserView extends AbstractViewNext {
 
 		this.oContentScrollable = qs('.b-content');
 
-		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) {
+		dom.addEventListener('click', event => {
+			let el = eqs(event, '.b-folders .e-item .e-link .e-collapsed-sign');
+			if (el) {
+				const folder = ko.dataFor(el);
+				if (folder) {
 					const collapsed = folder.collapsed();
 					getApp().setExpandedFolder(folder.fullNameHash, collapsed);
 
@@ -117,35 +117,34 @@ class FolderListMailBoxUserView extends AbstractViewNext {
 					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
-			});
+			}
+
+			el = eqs(event, '.b-folders .e-item .e-link.selectable .inbox-star-icon');
+			el && fSelectFolder(el, event, !this.isInboxStarred());
+
+			el = eqs(event, '.b-folders .e-item .e-link.selectable');
+			el && fSelectFolder(el, event, false);
+		});
 
 		key('up, down', KeyState.FolderList, (event, handler) => {
-			const keyCode = handler && 'up' === handler.shortcut ? EventKeyCode.Up : EventKeyCode.Down,
-				$items = jQuery('.b-folders .e-item .e-link:not(.hidden):visible', dom);
-			let index = $items.length;
-			if (event && index) {
-				while (index--) {
-					if ($items[index].matches('.focused')) {
-						$items[index].classList.remove('focused');
-						break;
+			let items = [], index = 0;
+			dom.querySelectorAll('.b-folders .e-item .e-link:not(.hidden)').forEach(node => {
+				if (node.offsetHeight || node.getClientRects().length) {
+					items.push(node);
+					if (node.matches('.focused')) {
+						node.classList.remove('focused');
+						index = items.length - 1;
 					}
 				}
-				if (EventKeyCode.Up === keyCode && 0 < index) {
-					--index;
-				} else if (EventKeyCode.Down === keyCode && index < $items.length - 1) {
+			});
+			if (items.length) {
+				if (handler && 'up' === handler.shortcut) {
+					index && --index;
+				} else if (index < items.length - 1) {
 					++index;
 				}
-
-				$items[index].classList.add('focused');
-				self.scrollToFocused();
+				items[index].classList.add('focused');
+				this.scrollToFocused();
 			}
 
 			return false;

dev/View/User/MailBox/MessageList.js

@@ -15,7 +15,7 @@ import { UNUSED_OPTION_VALUE } from 'Common/Consts';
 
 import { bMobileDevice, leftPanelDisabled, moveAction } from 'Common/Globals';
 
-import { computedPagenatorHelper, friendlySize, htmlToElement } from 'Common/Utils';
+import { computedPagenatorHelper, friendlySize } from 'Common/Utils';
 
 import { mailBox, append } from 'Common/Links';
 import { Selector } from 'Common/Selector';
@@ -502,7 +502,7 @@ class MessageListMailBoxUserView extends AbstractViewNext {
 			oMessageListItem.checked(true);
 		}
 
-		const el = htmlToElement('<div class="draggablePlace">' +
+		const el = Element.fromHTML('<div class="draggablePlace">' +
 			'<span class="text"></span>&nbsp;' +
 			'<i class="icon-copy icon-white visible-on-ctrl"></i>' +
 			'<i class="icon-mail icon-white hidden-on-ctrl"></i>' +
@@ -739,41 +739,33 @@ class MessageListMailBoxUserView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
-		const self = this;
+		const eqs = (ev, s) => ev.target.closestWithin(s, dom);
 
-		this.selector.init(dom[0].querySelector('.b-content'), KeyState.MessageList);
+		this.selector.init(dom.querySelector('.b-content'), KeyState.MessageList);
 
-		if (this.mobile) {
-			dom.on('click', () => {
-				leftPanelDisabled(true);
-			});
-		}
+		dom.addEventListener('click', event => {
+			this.mobile && leftPanelDisabled(true);
 
-		dom
-			.on('click', '.messageList .b-message-list-wrapper', () => {
-				if (Focused.MessageView === AppStore.focusedState()) {
-					AppStore.focusedState(Focused.MessageList);
-				}
-			})
-			.on('click', '.e-pagenator .e-page', function() {
-				// eslint-disable-line prefer-arrow-callback
-				self.gotoPage(ko.dataFor(this)); // eslint-disable-line no-invalid-this
-			})
-			.on('click', '.messageList .checkboxCkeckAll', () => {
-				this.checkAll(!this.checkAll());
-			})
-			.on('click', '.messageList .messageListItem .flagParent', function() {
-				// eslint-disable-line prefer-arrow-callback
-				self.flagMessages(ko.dataFor(this)); // eslint-disable-line no-invalid-this
-			})
-			.on('click', '.messageList .messageListItem .threads-len', function() {
-				// eslint-disable-line prefer-arrow-callback
-				self.gotoThread(ko.dataFor(this)); // eslint-disable-line no-invalid-this
-			})
-			.on('dblclick', '.messageList .messageListItem .actionHandle', function() {
-				// eslint-disable-line prefer-arrow-callback
-				self.gotoThread(ko.dataFor(this)); // eslint-disable-line no-invalid-this
-			});
+			if (eqs(event, '.messageList .b-message-list-wrapper') && Focused.MessageView === AppStore.focusedState()) {
+				AppStore.focusedState(Focused.MessageList);
+			}
+
+			let el = eqs(event, '.e-pagenator .e-page');
+			el && this.gotoPage(ko.dataFor(el));
+
+			eqs(event, '.messageList .checkboxCkeckAll') && this.checkAll(!this.checkAll());
+
+			el = eqs(event, '.messageList .messageListItem .flagParent');
+			el && this.flagMessages(ko.dataFor(el));
+
+			el = eqs(event, '.messageList .messageListItem .threads-len');
+			el && this.gotoThread(ko.dataFor(el));
+		});
+
+		dom.addEventListener('dblclick', event => {
+			let  el = eqs(event, '.messageList .messageListItem .actionHandle');
+			el && this.gotoThread(ko.dataFor(el));
+		});
 
 		this.initUploaderForAppend();
 		this.initShortcuts();

dev/View/User/MailBox/MessageView.js

@@ -74,7 +74,6 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 				}
 			}, this.messageVisibility);
 
-		this.oDom = null;
 		this.oHeaderDom = null;
 		this.oMessageScrollerDom = null;
 
@@ -488,10 +487,6 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
-		const self = this;
-
-		this.oDom = dom;
-
 		this.fullScreenMode.subscribe((value) => {
 			if (value && this.message()) {
 				AppStore.focusedState(Focused.MessageView);
@@ -502,7 +497,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 			Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0');
 		});
 
-		this.oHeaderDom = dom[0].querySelector('.messageItemHeader');
+		this.oHeaderDom = dom.querySelector('.messageItemHeader');
 		if (this.oHeaderDom) {
 			if (!this.resizeObserver) {
 				this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.throttle(50).bind(this));
@@ -512,37 +507,30 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 			this.resizeObserver.disconnect();
 		}
 
-		if (this.mobile) {
-			dom.on('click', () => {
-				leftPanelDisabled(true);
-			});
-		}
+		const eqs = (ev, s) => ev.target.closestWithin(s, dom);
+		dom.addEventListener('click', event => {
+			this.mobile && leftPanelDisabled(true);
 
-		dom
-			.on('click', 'a', function(event) {
-				// eslint-disable-line prefer-arrow-callback
-				// setup maito protocol
+			let el = eqs(event, 'a');
+			if (el) {
 				return !(
 					!!event &&
 					3 !== event.which &&
 					mailToHelper(
-						this.href,
-						Settings.capa(Capa.Composer) ? require('View/Popup/Compose') : null // eslint-disable-line no-invalid-this
+						el.href,
+						Settings.capa(Capa.Composer) ? require('View/Popup/Compose') : null
 					)
 				);
-			})
-			.on('click', '.attachmentsPlace .attachmentIconParent', (event) => {
-				if (event && event.stopPropagation) {
-					event.stopPropagation();
-				}
-			})
-			.on('click', '.attachmentsPlace .showPreplay', function(event) {
-				// eslint-disable-line prefer-arrow-callback
-				if (event && event.stopPropagation) {
-					event.stopPropagation();
-				}
+			}
 
-				const attachment = ko.dataFor(this); // eslint-disable-line no-invalid-this
+			if (eqs(event, '.attachmentsPlace .attachmentIconParent')) {
+				event.stopPropagation();
+			}
+
+			el = eqs(event, '.attachmentsPlace .showPreplay');
+			if (el) {
+				event.stopPropagation();
+				const attachment = ko.dataFor(el); // eslint-disable-line no-invalid-this
 				if (attachment && Audio.supported) {
 					switch (true) {
 						case Audio.supportedMp3 && attachment.isMp3():
@@ -557,17 +545,17 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 						// no default
 					}
 				}
-			})
-			.on('click', '.attachmentsPlace .attachmentItem .attachmentNameParent', function() {
+			}
+
+			el = eqs(event, '.attachmentsPlace .attachmentItem .attachmentNameParent');
+			if (el) {
+				const attachment = ko.dataFor(el);
+				attachment && attachment.download && getApp().download(attachment.linkDownload());
+			}
+
+			if (eqs(event, '.messageItemHeader .subjectParent .flagParent')) {
 				// eslint-disable-line prefer-arrow-callback
-				const attachment = ko.dataFor(this); // eslint-disable-line no-invalid-this
-				if (attachment && attachment.download) {
-					getApp().download(attachment.linkDownload());
-				}
-			})
-			.on('click', '.messageItemHeader .subjectParent .flagParent', function() {
-				// eslint-disable-line prefer-arrow-callback
-				const message = self.message();
+				const message = this.message();
 				if (message) {
 					getApp().messageListAction(
 						message.folderFullNameRaw,
@@ -575,10 +563,12 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 						[message]
 					);
 				}
-			})
-			.on('click', '.thread-list .flagParent', function() {
+			}
+
+			el = eqs(event, '.thread-list .flagParent');
+			if (el) {
 				// eslint-disable-line prefer-arrow-callback
-				const message = ko.dataFor(this); // eslint-disable-line no-invalid-this
+				const message = ko.dataFor(el); // eslint-disable-line no-invalid-this
 				if (message && message.folder && message.uid) {
 					getApp().messageListAction(
 						message.folder,
@@ -587,10 +577,11 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 					);
 				}
 
-				self.threadsDropdownTrigger(true);
+				this.threadsDropdownTrigger(true);
 
 				return false;
-			});
+			}
+		});
 
 		AppStore.focusedState.subscribe((value) => {
 			if (Focused.MessageView !== value) {
@@ -603,8 +594,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
 			this.messageDomFocused(KeyState.MessageView === value && !inFocus());
 		});
 
-		const node = dom.find('.messageItem');
-		this.oMessageScrollerDom = node && node[0] ? node[0] : null;
+		this.oMessageScrollerDom = dom.querySelector('.messageItem');
 
 		this.initShortcuts();
 	}

dev/View/User/Settings/Menu.js

@@ -29,12 +29,12 @@ class MenuSettingsUserView extends AbstractViewNext {
 
 	onBuild(dom) {
 		if (this.mobile) {
-			dom.on('click', '.b-settings-menu .e-item.selectable', () => {
-				leftPanelDisabled(true);
-			});
+			dom.addEventListener('click', event =>
+				event.target.closestWithin('.b-settings-menu .e-item.selectable', dom) && leftPanelDisabled(true)
+			);
 		}
 
-		key('up, down', KeyState.Settings, settingsMenuKeysHandler(jQuery('.b-settings-menu .e-item', dom)));
+		key('up, down', KeyState.Settings, settingsMenuKeysHandler(dom.querySelectoAll('.b-settings-menu .e-item')));
 	}
 
 	link(route) {

dev/View/User/Settings/Pane.js

@@ -42,11 +42,7 @@ class PaneSettingsUserView extends AbstractViewNext {
 	}
 
 	onBuild(dom) {
-		if (this.mobile) {
-			dom.on('click', () => {
-				leftPanelDisabled(true);
-			});
-		}
+		this.mobile && dom.addEventListener('click', () => leftPanelDisabled(true));
 	}
 
 	backToMailBoxClick() {