Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-11 00:14:50 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use less jQuery, more native

Browse source
This commit is contained in:
djmaze 2020-08-27 15:45:47 +02:00
parent 24cb874c87
commit bdb36ec128
35 changed files with 492 additions and 779 deletions
Download patch file Download diff file Expand all files Collapse all files

13
dev/View/Admin/Login.js
View file

@ -1,7 +1,5 @@
import ko from 'ko';
import { triggerAutocompleteInputChange } from 'Common/Utils';
import { StorageResultType, Notification } from 'Common/Enums';
import { getNotification } from 'Common/Translator';
@ -37,8 +35,6 @@ class LoginAdminView extends AbstractViewNext {
this.loginErrorAnimation = ko.observable(false).extend({ 'falseTimeout': 500 });
this.passwordErrorAnimation = ko.observable(false).extend({ 'falseTimeout': 500 });
// this.loginFocus = ko.observable(false);
this.formHidden = ko.observable(false);
this.formError = ko.computed(() => this.loginErrorAnimation() || this.passwordErrorAnimation());
@ -59,8 +55,6 @@ class LoginAdminView extends AbstractViewNext {
@command((self) => !self.submitRequest())
submitCommand() {
triggerAutocompleteInputChange();
this.loginError(false);
this.passwordError(false);
@ -98,13 +92,6 @@ class LoginAdminView extends AbstractViewNext {
routeOff();
}
onHide() {
}
onBuild() {
triggerAutocompleteInputChange(true);
}
submitForm() {
this.submitCommand();
}

9
dev/View/Popup/Compose.js
View file

@ -13,7 +13,6 @@ import {
import {
isNonEmptyArray,
clearBqSwitcher,
replySubjectAdd,
encodeHtml,
inFocus,
@ -855,13 +854,7 @@ class ComposePopupView extends AbstractViewNext {
sDate = momentorFormat(message.dateTimeStampInUTC(), 'FULL');
sSubject = message.subject();
aDraftInfo = message.aDraftInfo;
const clonedText = jQuery(message.body).clone();
if (clonedText) {
clearBqSwitcher(clonedText);
sText = clonedText.html();
}
sText = message.bodyAsHTML();
let resplyAllParts = null;
switch (lineComposeType) {

4
dev/View/Popup/Contacts.js
View file

@ -610,9 +610,7 @@ class ContactsPopupView extends AbstractViewNext {
}
onBuild(dom) {
this.oContentVisible = jQuery('.b-list-content', dom);
this.selector.init(this.oContentVisible, this.oContentVisible, KeyState.ContactList);
this.selector.init(dom[0].querySelector('.b-list-content'), KeyState.ContactList);
key('delete', KeyState.ContactList, () => {
this.deleteCommand();

6
dev/View/Popup/MessageOpenPgp.js
View file

@ -120,10 +120,8 @@ class MessageOpenPgpPopupView extends AbstractViewNext {
this.privateKeys(privateKeys);
if (this.viewModelDom) {
this.viewModelDom
.find('.key-list__item')
.first()
.click();
const el = this.viewModelDom.querySelector('.key-list__item');
el && el.click();
}
}
}

19
dev/View/User/Login.js
View file

@ -8,7 +8,7 @@ import {
Notification
} from 'Common/Enums';
import { convertLangName, triggerAutocompleteInputChange } from 'Common/Utils';
import { convertLangName } from 'Common/Utils';
import { getNotification, getNotificationFromResponse, reload as translatorReload } from 'Common/Translator';
@ -72,9 +72,6 @@ class LoginUserView extends AbstractViewNext {
(this.additionalCode.visibility() && this.additionalCode.errorAnimation())
);
// this.emailFocus = ko.observable(false);
// this.passwordFocus = ko.observable(false);
this.email.subscribe(() => {
this.emailError(false);
this.additionalCode('');
@ -144,8 +141,6 @@ class LoginUserView extends AbstractViewNext {
@command((self) => !self.submitRequest())
submitCommand() {
triggerAutocompleteInputChange();
this.emailError(false);
this.passwordError(false);
@ -280,8 +275,6 @@ class LoginUserView extends AbstractViewNext {
);
});
}, 50);
triggerAutocompleteInputChange(true);
}
submitForm() {
@ -291,16 +284,6 @@ class LoginUserView extends AbstractViewNext {
selectLanguage() {
showScreenPopup(require('View/Popup/Languages'), [this.language, this.languages(), LanguageStore.userLanguage()]);
}
selectLanguageOnTab(bShift) {
if (!bShift) {
// setTimeout(() => this.emailFocus(true), 50);
return false;
}
return true;
}
}
export { LoginUserView, LoginUserView as default };

94
dev/View/User/MailBox/FolderList.js
View file

@ -17,8 +17,6 @@ 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,
@ -28,7 +26,6 @@ class FolderListMailBoxUserView extends AbstractViewNext {
constructor() {
super();
this.oContentVisible = null;
this.oContentScrollable = null;
this.composeInEdit = AppStore.composeInEdit;
@ -61,10 +58,8 @@ class FolderListMailBoxUserView extends AbstractViewNext {
}
onBuild(dom) {
this.oContentVisible = $('.b-content', dom);
this.oContentScrollable = this.oContentVisible ? this.oContentVisible[0] : null;
const self = this,
qs = s => dom[0].querySelector(s),
isMobile = Settings.appSettingsGet('mobile'),
fSelectFolder = (el, event, starred) => {
const isMove = moveAction();
@ -108,6 +103,8 @@ 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
@ -132,21 +129,22 @@ class FolderListMailBoxUserView extends AbstractViewNext {
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');
$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;
}
}
if (EventKeyCode.Up === keyCode && 0 < index) {
index -= 1;
--index;
} else if (EventKeyCode.Down === keyCode && index < $items.length - 1) {
index += 1;
++index;
}
$items.eq(index).addClass('focused');
$items[index].classList.add('focused');
self.scrollToFocused();
}
@ -154,24 +152,22 @@ class FolderListMailBoxUserView extends AbstractViewNext {
});
key('enter', KeyState.FolderList, () => {
const $items = $('.b-folders .e-item .e-link:not(.hidden).focused', dom);
if ($items.length && $items[0]) {
const item = qs('.b-folders .e-item .e-link:not(.hidden).focused');
if (item) {
AppStore.focusedState(Focused.MessageList);
$items.click();
item.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);
}
const item = qs('.b-folders .e-item .e-link:not(.hidden).focused'),
folder = item && ko.dataFor(item);
if (folder) {
const collapsed = folder.collapsed();
getApp().setExpandedFolder(folder.fullNameHash, collapsed);
folder.collapsed(!collapsed);
}
return false;
@ -183,10 +179,12 @@ class FolderListMailBoxUserView extends AbstractViewNext {
return false;
});
AppStore.focusedState.subscribe((value) => {
$('.b-folders .e-item .e-link.focused', dom).removeClass('focused');
AppStore.focusedState.subscribe(value => {
let el = qs('.b-folders .e-item .e-link.focused');
el && qs('.b-folders .e-item .e-link.focused').classList.remove('focused');
if (Focused.FolderList === value) {
$('.b-folders .e-item .e-link.selected', dom).addClass('focused');
el = qs('.b-folders .e-item .e-link.selected');
el && qs('.b-folders .e-item .e-link.selected').classList.add('focused');
}
});
}
@ -206,28 +204,20 @@ class FolderListMailBoxUserView extends AbstractViewNext {
}
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;
const scrollable = this.oContentScrollable;
if (scrollable) {
let block, focused = scrollable.querySelector('.e-item .e-link.focused');
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');
}
return true;
}
return false;
}
/**
@ -237,9 +227,9 @@ class FolderListMailBoxUserView extends AbstractViewNext {
*/
messagesDrop(toFolder, ui) {
if (toFolder && ui && ui.helper) {
const fromFolderFullNameRaw = ui.helper.data('rl-folder'),
const fromFolderFullNameRaw = ui.helper.rlFolder,
copy = $htmlCL.contains('rl-ctrl-key-pressed'),
uids = ui.helper.data('rl-uids');
uids = ui.helper.rlUids;
if (fromFolderFullNameRaw && Array.isArray(uids)) {
getApp().moveMessagesToFolder(fromFolderFullNameRaw, uids, toFolder.fullNameRaw, copy);

26
dev/View/User/MailBox/MessageList.js
View file

@ -15,7 +15,7 @@ import { UNUSED_OPTION_VALUE } from 'Common/Consts';
import { bMobileDevice, leftPanelDisabled, moveAction } from 'Common/Globals';
import { computedPagenatorHelper, draggablePlace, friendlySize } from 'Common/Utils';
import { computedPagenatorHelper, friendlySize, htmlToElement } from 'Common/Utils';
import { mailBox, append } from 'Common/Links';
import { Selector } from 'Common/Selector';
@ -267,9 +267,9 @@ class MessageListMailBoxUserView extends AbstractViewNext {
}
});
MessageStore.messageListEndHash.subscribe(() => {
this.selector.scrollToTop();
});
MessageStore.messageListEndHash.subscribe((() =>
this.selector.scrollToFocused()
).throttle(50));
}
@command()
@ -502,14 +502,20 @@ class MessageListMailBoxUserView extends AbstractViewNext {
oMessageListItem.checked(true);
}
const el = draggablePlace(),
const el = htmlToElement('<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>' +
'</div>'),
updateUidsInfo = () => {
const uids = MessageStore.messageListCheckedOrSelectedUidsWithSubMails();
el.data('rl-uids', uids);
el.find('.text').text('' + uids.length);
el.rlUids = uids;
el.querySelector('.text').textContent = uids.length;
};
el.data('rl-folder', FolderStore.currentFolderFullNameRaw());
document.getElementById('rl-hidden').append(el);
el.rlFolder = FolderStore.currentFolderFullNameRaw();
updateUidsInfo();
setTimeout(updateUidsInfo,1);
@ -735,9 +741,7 @@ class MessageListMailBoxUserView extends AbstractViewNext {
onBuild(dom) {
const self = this;
this.oContentVisible = jQuery('.b-content', dom);
this.selector.init(this.oContentVisible, this.oContentVisible, KeyState.MessageList);
this.selector.init(dom[0].querySelector('.b-content'), KeyState.MessageList);
if (this.mobile) {
dom.on('click', () => {

61
dev/View/User/MailBox/MessageView.js
View file

@ -243,8 +243,8 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
return '';
});
this.messageActiveDom.subscribe((dom) => {
this.bodyBackgroundColor(dom ? this.detectDomBackgroundColor(dom) : '');
this.messageActiveDom.subscribe(dom => {
this.bodyBackgroundColor(this.detectDomBackgroundColor(dom));
}, this);
this.message.subscribe((message) => {
@ -357,45 +357,26 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
}
detectDomBackgroundColor(dom) {
let limit = 5,
result = '';
let color = '';
const fFindDom = function(inputDom) {
const children = inputDom ? inputDom.children() : null;
return children && 1 === children.length && children.is('table,div,center') ? children : null;
},
fFindColor = function(inputDom) {
let color = '';
if (inputDom) {
color = inputDom.css('background-color') || '';
if (!inputDom.is('table')) {
color = isTransparent(color) ? '' : color;
}
}
if (dom) {
let limit = 5,
aC = dom;
while (!color && aC && limit--) {
let children = aC.children;
if (!children || 1 !== children.length || !children[0].matches('table,div,center')) break;
return color;
};
if (dom && 1 === dom.length) {
let aC = dom;
while (!result) {
limit -= 1;
if (0 >= limit) {
break;
}
aC = fFindDom(aC);
if (aC) {
result = fFindColor(aC);
} else {
break;
aC = children[0];
color = aC.style.backgroundColor || '';
if (!aC.matches('table')) {
color = isTransparent(color) ? '' : color;
}
}
result = isTransparent(result) ? '' : result;
color = isTransparent(color) ? '' : color;
}
return result;
return color;
}
fullScreen() {
@ -545,7 +526,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
!!event &&
3 !== event.which &&
mailToHelper(
jQuery(this).attr('href'),
this.href,
Settings.capa(Capa.Composer) ? require('View/Popup/Compose') : null // eslint-disable-line no-invalid-this
)
);
@ -701,13 +682,11 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
// toggle message blockquotes
key('b', [KeyState.MessageList, KeyState.MessageView], () => {
if (MessageStore.message() && MessageStore.message().body) {
MessageStore.message()
.body.find('.rlBlockquoteSwitcher')
.click();
const message = MessageStore.message();
if (message && message.body) {
message.body.querySelectorAll('.rlBlockquoteSwitcher').forEach(node => node.click());
return false;
}
return true;
});
@ -878,7 +857,7 @@ class MessageViewMailBoxUserView extends AbstractViewNext {
*/
showImages(message) {
if (message && message.showExternalImages) {
message.showExternalImages(true);
message.showExternalImages();
}
}