mirror of
https://github.com/mjl-/mox.git
synced 2024-12-26 16:33:47 +03:00
96d86ad6f1
if files {webmail,webaccount,webadmin}.{css,js} exist in the configdir (where
the mox.conf file lives), their contents are included in the web apps.
the webmail now uses css variables, mostly for colors. so you can write a
custom webmail.css that changes the variables, e.g.:
:root {
--color: blue
}
you can also look at css class names and override their styles.
in the future, we may want to make some css variables configurable in the
per-user settings in the webmail. should reduce the number of variables first.
any custom javascript is loaded first. if it defines a global function
"moxBeforeDisplay", that is called each time a page loads (after
authentication) with the DOM element of the page content as parameter. the
webmail is a single persistent page. this can be used to make some changes to
the DOM, e.g. inserting some elements. we'll have to see how well this works in
practice. perhaps some patterns emerge (e.g. adding a logo), and we can make
those use-cases easier to achieve.
helps partially with issue #114, and based on questions from laura-lilly on
matrix.
74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
// Javascript is generated from typescript, do not modify generated javascript because changes will be overwritten.
|
|
|
|
// Loaded from synchronous javascript.
|
|
declare let messageItem: api.MessageItem
|
|
// From customization script.
|
|
declare let moxBeforeDisplay: (root: HTMLElement) => void
|
|
|
|
const init = () => {
|
|
const mi = api.parser.MessageItem(messageItem)
|
|
document.title = '"' + mi.Envelope.Subject + '"- from '+((mi.Envelope.From || []).map(a => formatAddress(a)).join(', ') || '-') + ' (id '+mi.Message.ID+')'
|
|
|
|
let msgattachmentview = dom.div()
|
|
if (mi.Attachments && mi.Attachments.length > 0) {
|
|
dom._kids(msgattachmentview,
|
|
dom.div(
|
|
css('msgAttachments', {borderTop: '1px solid', borderTopColor: styles.borderColor}),
|
|
dom.div(dom._class('pad'),
|
|
'Attachments: ',
|
|
join(mi.Attachments.map(a => a.Filename || '(unnamed)'), () => ', '),
|
|
),
|
|
)
|
|
)
|
|
}
|
|
|
|
const msgheaderview = dom.table(styleClasses.msgHeaders)
|
|
loadMsgheaderView(msgheaderview, mi, [], null, true)
|
|
|
|
const l = window.location.pathname.split('/')
|
|
const w = l[l.length-1]
|
|
let iframepath: string
|
|
if (w === 'msgtext') {
|
|
iframepath = 'text'
|
|
} else if (w === 'msghtml') {
|
|
iframepath = 'html'
|
|
} else if (w === 'msghtmlexternal') {
|
|
iframepath = 'htmlexternal'
|
|
} else {
|
|
window.alert('Unknown message type '+w)
|
|
return
|
|
}
|
|
iframepath += '?sameorigin=true'
|
|
|
|
let iframe: HTMLIFrameElement
|
|
const page = document.getElementById('page')!
|
|
const root = dom.div(
|
|
dom.div(
|
|
css('msgMeta', {backgroundColor: styles.backgroundColorMild, borderBottom: '1px solid', borderBottomColor: styles.borderColor}),
|
|
msgheaderview,
|
|
msgattachmentview,
|
|
),
|
|
iframe=dom.iframe(
|
|
attr.title('Message body.'),
|
|
attr.src(iframepath),
|
|
css('msgIframe', {width: '100%', height: '100%'}),
|
|
function load() {
|
|
// Note: we load the iframe content specifically in a way that fires the load event only when the content is fully rendered.
|
|
iframe.style.height = iframe.contentDocument!.documentElement.scrollHeight+'px'
|
|
if (window.location.hash === '#print') {
|
|
window.print()
|
|
}
|
|
},
|
|
)
|
|
)
|
|
if (typeof moxBeforeDisplay !== 'undefined') {
|
|
moxBeforeDisplay(root)
|
|
}
|
|
dom._kids(page, root)
|
|
}
|
|
|
|
try {
|
|
init()
|
|
} catch (err) {
|
|
window.alert('Error: ' + ((err as any).message || '(no message)'))
|
|
}
|