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

centralize elementById('rl-app')

Browse source
This commit is contained in:
the-djmaze 2023-02-20 15:47:46 +01:00
parent ec3e99c6ab
commit 8a8d1d756e
4 changed files with 31 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

15
dev/Common/Fullscreen.js
View file

@ -1,20 +1,19 @@
import { doc, elementById, $htmlCL } from 'Common/Globals'; import { doc, appEl, $htmlCL } from 'Common/Globals';
// Fullscreen must be on app, else other popups fail // Fullscreen must be on app, else other popups fail
export const export const
app = elementById('rl-app'), appFullscreen = () => (doc.fullscreenElement || doc.webkitFullscreenElement) === appEl,
appFullscreen = () => (doc.fullscreenElement || doc.webkitFullscreenElement) === app,
exitFullscreen = () => appFullscreen() && (doc.exitFullscreen || doc.webkitExitFullscreen).call(doc), exitFullscreen = () => appFullscreen() && (doc.exitFullscreen || doc.webkitExitFullscreen).call(doc),
isFullscreen = ko.observable(false), isFullscreen = ko.observable(false),
toggleFullscreen = () => isFullscreen() ? exitFullscreen() : app.requestFullscreen(); toggleFullscreen = () => isFullscreen() ? exitFullscreen() : appEl.requestFullscreen();
if (app) { if (appEl) {
let event = 'fullscreenchange'; let event = 'fullscreenchange';
if (!app.requestFullscreen && app.webkitRequestFullscreen) { if (!appEl.requestFullscreen && appEl.webkitRequestFullscreen) {
app.requestFullscreen = app.webkitRequestFullscreen; appEl.requestFullscreen = appEl.webkitRequestFullscreen;
event = 'webkit'+event; event = 'webkit'+event;
} }
if (app.requestFullscreen) { if (appEl.requestFullscreen) {
doc.addEventListener(event, () => { doc.addEventListener(event, () => {
isFullscreen(appFullscreen()); isFullscreen(appFullscreen());
$htmlCL.toggle('rl-fullscreen', appFullscreen()); $htmlCL.toggle('rl-fullscreen', appFullscreen());

2
dev/Common/Globals.js
View file

@ -11,6 +11,8 @@ export const
elementById = id => doc.getElementById(id), elementById = id => doc.getElementById(id),
appEl = elementById('rl-app'),
Settings = rl.settings, Settings = rl.settings,
SettingsGet = Settings.get, SettingsGet = Settings.get,
SettingsCapa = name => name && !!(SettingsGet('Capa') || {})[name], SettingsCapa = name => name && !!(SettingsGet('Capa') || {})[name],

32
dev/Common/Html.js
View file

@ -3,7 +3,7 @@ import { forEachObjectEntry, pInt } from 'Common/Utils';
import { SettingsUserStore } from 'Stores/User/Settings'; import { SettingsUserStore } from 'Stores/User/Settings';
const const
tpl = createElement('template'), tmpl = createElement('template'),
htmlre = /[&<>"']/g, htmlre = /[&<>"']/g,
httpre = /^(https?:)?\/\//i, httpre = /^(https?:)?\/\//i,
htmlmap = { htmlmap = {
@ -24,8 +24,8 @@ const
blockquoteSwitcher = () => { blockquoteSwitcher = () => {
SettingsUserStore.collapseBlockquotes() && SettingsUserStore.collapseBlockquotes() &&
// tpl.content.querySelectorAll('blockquote').forEach(node => { // tmpl.content.querySelectorAll('blockquote').forEach(node => {
[...tpl.content.querySelectorAll('blockquote')].reverse().forEach(node => { [...tmpl.content.querySelectorAll('blockquote')].reverse().forEach(node => {
const el = createElement('details', {class:'sm-bq-switcher'}); const el = createElement('details', {class:'sm-bq-switcher'});
el.innerHTML = '<summary>•••</summary>'; el.innerHTML = '<summary>•••</summary>';
node.replaceWith(el); node.replaceWith(el);
@ -264,7 +264,7 @@ export const
msgId = 0; msgId = 0;
} }
tpl.innerHTML = html tmpl.innerHTML = html
// Strip Microsoft comments // Strip Microsoft comments
.replace(/<!--\[if[\s\S]*?endif\]-->/gi, '') .replace(/<!--\[if[\s\S]*?endif\]-->/gi, '')
// .replace(/<pre[^>]*>[\s\S]*?<\/pre>/gi, pre => pre.replace(/\n/g, '\n<br>')) // .replace(/<pre[^>]*>[\s\S]*?<\/pre>/gi, pre => pre.replace(/\n/g, '\n<br>'))
@ -282,17 +282,17 @@ export const
// \MailSo\Base\HtmlUtils::ClearComments() // \MailSo\Base\HtmlUtils::ClearComments()
// https://github.com/the-djmaze/snappymail/issues/187 // https://github.com/the-djmaze/snappymail/issues/187
const nodeIterator = document.createNodeIterator(tpl.content, NodeFilter.SHOW_COMMENT); const nodeIterator = document.createNodeIterator(tmpl.content, NodeFilter.SHOW_COMMENT);
while (nodeIterator.nextNode()) { while (nodeIterator.nextNode()) {
nodeIterator.referenceNode.remove(); nodeIterator.referenceNode.remove();
} }
tpl.content.querySelectorAll( tmpl.content.querySelectorAll(
disallowedTags disallowedTags
+ (0 < bqLevel ? ',' + (new Array(1 + bqLevel).fill('blockquote').join(' ')) : '') + (0 < bqLevel ? ',' + (new Array(1 + bqLevel).fill('blockquote').join(' ')) : '')
).forEach(oElement => oElement.remove()); ).forEach(oElement => oElement.remove());
[...tpl.content.querySelectorAll('*')].forEach(oElement => { [...tmpl.content.querySelectorAll('*')].forEach(oElement => {
const name = oElement.tagName, const name = oElement.tagName,
oStyle = oElement.style; oStyle = oElement.style;
@ -555,8 +555,8 @@ export const
blockquoteSwitcher(); blockquoteSwitcher();
// return tpl.content.firstChild; // return tmpl.content.firstChild;
result.html = tpl.innerHTML.trim(); result.html = tmpl.innerHTML.trim();
return result; return result;
}, },
@ -567,7 +567,7 @@ export const
htmlToPlain = html => { htmlToPlain = html => {
const const
hr = '⎯'.repeat(64), hr = '⎯'.repeat(64),
forEach = (selector, fn) => tpl.content.querySelectorAll(selector).forEach(fn), forEach = (selector, fn) => tmpl.content.querySelectorAll(selector).forEach(fn),
blockquotes = node => { blockquotes = node => {
let bq; let bq;
while ((bq = node.querySelector('blockquote'))) { while ((bq = node.querySelector('blockquote'))) {
@ -595,7 +595,7 @@ export const
html = html.replace(/\n*<\/(div|tr)(\s[\s\S]*?)?>\n*/gi, '\n'); html = html.replace(/\n*<\/(div|tr)(\s[\s\S]*?)?>\n*/gi, '\n');
} }
tpl.innerHTML = html tmpl.innerHTML = html
.replace(/<t[dh](\s[\s\S]*?)?>/gi, '\t') .replace(/<t[dh](\s[\s\S]*?)?>/gi, '\t')
.replace(/<\/tr(\s[\s\S]*?)?>/gi, '\n'); .replace(/<\/tr(\s[\s\S]*?)?>/gi, '\n');
@ -645,16 +645,16 @@ export const
forEach('i,em', i => i.replaceWith(`*${i.textContent}*`)); forEach('i,em', i => i.replaceWith(`*${i.textContent}*`));
// Convert line-breaks // Convert line-breaks
tpl.innerHTML = tpl.innerHTML tmpl.innerHTML = tmpl.innerHTML
.replace(/\n{3,}/gm, '\n\n') .replace(/\n{3,}/gm, '\n\n')
.replace(/\n<br[^>]*>/g, '\n') .replace(/\n<br[^>]*>/g, '\n')
.replace(/<br[^>]*>\n/g, '\n'); .replace(/<br[^>]*>\n/g, '\n');
forEach('br', br => br.replaceWith('\n')); forEach('br', br => br.replaceWith('\n'));
// Blockquotes must be last // Blockquotes must be last
blockquotes(tpl.content); blockquotes(tmpl.content);
return (tpl.content.textContent || '').trim(); return (tmpl.content.textContent || '').trim();
}, },
/** /**
@ -708,7 +708,7 @@ export const
aText = aNextText; aText = aNextText;
} while (bDo); } while (bDo);
tpl.innerHTML = aText.join('\n') tmpl.innerHTML = aText.join('\n')
// .replace(/~~~\/blockquote~~~\n~~~blockquote~~~/g, '\n') // .replace(/~~~\/blockquote~~~\n~~~blockquote~~~/g, '\n')
.replace(/&/g, '&amp;') .replace(/&/g, '&amp;')
.replace(/>/g, '&gt;') .replace(/>/g, '&gt;')
@ -723,7 +723,7 @@ export const
.replace(/\s*~~~\/blockquote~~~/g, '</blockquote>') .replace(/\s*~~~\/blockquote~~~/g, '</blockquote>')
.replace(/\n/g, '<br>'); .replace(/\n/g, '<br>');
blockquoteSwitcher(); blockquoteSwitcher();
return tpl.innerHTML.trim(); return tmpl.innerHTML.trim();
}, },
WYSIWYGS = ko.observableArray(); WYSIWYGS = ko.observableArray();

14
dev/Stores/Theme.js
View file

@ -1,5 +1,5 @@
import ko from 'ko'; import ko from 'ko';
import { $htmlCL, elementById, leftPanelDisabled, Settings, SettingsGet } from 'Common/Globals'; import { $htmlCL, appEl, elementById, leftPanelDisabled, Settings, SettingsGet } from 'Common/Globals';
import { isArray, arrayLength } from 'Common/Utils'; import { isArray, arrayLength } from 'Common/Utils';
import { cssLink, serverRequestRaw } from 'Common/Links'; import { cssLink, serverRequestRaw } from 'Common/Links';
import { SaveSettingStatus } from 'Common/Enums'; import { SaveSettingStatus } from 'Common/Enums';
@ -7,8 +7,6 @@ import { SaveSettingStatus } from 'Common/Enums';
let __themeTimer = 0; let __themeTimer = 0;
export const export const
appEl = () => elementById('rl-app'),
ThemeStore = { ThemeStore = {
theme: ko.observable(''), theme: ko.observable(''),
themes: ko.observableArray(), themes: ko.observableArray(),
@ -66,7 +64,7 @@ ThemeStore.isMobile.subscribe(value => $htmlCL.toggle('rl-mobile', value));
ThemeStore.fontSansSerif.subscribe(value => { ThemeStore.fontSansSerif.subscribe(value => {
if (null != value) { if (null != value) {
let cl = appEl().classList; let cl = appEl.classList;
cl.forEach(name => { cl.forEach(name => {
if (name.startsWith('font') && !/font(Serif|Mono)/.test(name)) { if (name.startsWith('font') && !/font(Serif|Mono)/.test(name)) {
cl.remove(name); cl.remove(name);
@ -77,20 +75,20 @@ ThemeStore.fontSansSerif.subscribe(value => {
}); });
ThemeStore.fontSerif.subscribe(value => { ThemeStore.fontSerif.subscribe(value => {
if (null != value) { if (null != value) {
let cl = appEl().classList; let cl = appEl.classList;
cl.forEach(name => name.startsWith('fontSerif') && cl.remove(name)); cl.forEach(name => name.startsWith('fontSerif') && cl.remove(name));
value && cl.add('fontSerif'+value); value && cl.add('fontSerif'+value);
} }
}); });
ThemeStore.fontMono.subscribe(value => { ThemeStore.fontMono.subscribe(value => {
if (null != value) { if (null != value) {
let cl = appEl().classList; let cl = appEl.classList;
cl.forEach(name => name.startsWith('fontMono') && cl.remove(name)); cl.forEach(name => name.startsWith('fontMono') && cl.remove(name));
value && cl.add('fontMono'+value); value && cl.add('fontMono'+value);
} }
}); });
ThemeStore.userBackgroundHash.subscribe(value => { ThemeStore.userBackgroundHash.subscribe(value => {
appEl().classList.toggle('UserBackground', !!value); appEl.classList.toggle('UserBackground', !!value);
appEl().style.backgroundImage = value ? "url("+serverRequestRaw('UserBackground', value)+")" : null; appEl.style.backgroundImage = value ? "url("+serverRequestRaw('UserBackground', value)+")" : null;
}); });