Feufochmar
/
apmail
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show attachments of messages.

This commit is contained in:
Feufochmar 2020-03-31 17:27:05 +02:00
parent 4aaabcda3d
commit 5e5f498328
4 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apmail.css
View File

@ -215,3 +215,14 @@ section.actor-content {
padding-top: 0.3em;
padding-bottom: 0.3em;
}
.attachment-display {
display: block;
border-style: solid;
border-width: thin;
padding: 0.1em;
margin: 0;
margin-left: 0.1em;
margin-right: 0.1em;
background-color: hsl(240, 10%, 85%);
}

8
index.html
View File

@ -7,7 +7,7 @@
<link href="apmail.css" rel="stylesheet" type="text/css" media="all" />
<script src="render.js"></script>
</head>
<body onload="UI.checkConnection()">
<body onload="UI.checkConnection();">
<!-- Navigation column -->
<nav id="tab-bar" class="column">
<!-- Send page tab -->
@ -135,13 +135,9 @@
<p id="activity-object-content"><p>
</section>
<details>
<summary>Attachments</summary>
<summary>Attachments (<span id="activity-object-attachments-number"></span>)</summary>
<ul id="activity-object-attachments" class="attachments"></ul>
</details>
<details>
<summary>Tags</summary>
<ul id="activity-object-tags" class="tags"></ul>
</details>
<details>
<summary>Show source</summary>
<p id="activity-object-code-source" class="code-source"></p>

54
render.js
View File

@ -36,18 +36,43 @@ const Render = {
display = display + '</section>'
return display
},
// Raw data conversion
rawData: function(rawData) {
var str_data = JSON.stringify(rawData, null, 1)
var replace_map = {
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
'\'': '&#039;'
// Render an attachment
attachment: function(attachment) {
// If a string => link
var display = ''
if (typeof attachment === 'string') {
display = display + '<a href="' + attachment + '">Link to object</a>'
} else {
const type = attachment.type
const name = attachment.name
const url = attachment.url
const media_type = attachment.mediaType
// If the url is a string, display the element
if (typeof url === 'string') {
display = display + Render.attachmentFrom(type, name, media_type, url)
} else if (Array.isArray(url)) {
// Array of urls => unsupported
} else if (url.type && url.type === 'Link') {
// Object
display = display + Render.attachmentFrom(type, name, url.mediaType ? url.mediaType : media_type, url.href)
} else {
// Unsupported
}
}
str_data = str_data.replace(/[&<>"']/g, x => replace_map[x])
return str_data
return display
},
attachmentFrom: function(type, name, media_type, url) {
// Show a link
var display = (type ? type : 'Document') + '<br/><a href="' + url + '">' + (name ? name : url) + '</a>'
// Show the attachment if it's an image, an audio, or a video
if (type && ((type === 'Image') || (type === 'Document' && media_type && media_type.startsWith('image/')))) {
display = display + '<br/><img src="' + url + '" width="300" ' + (name ? ('alt="' + name + '"') : '') + ' />'
} else if (type && ((type === 'Audio') || (type === 'Document' && media_type && media_type.startsWith('audio/')))) {
display = display + '<br/><audio controls preload="none" src="' + url + '">' + (name ? name : url) + '</audio>'
} else if (type && ((type === 'Video') || (type === 'Document' && media_type && media_type.startsWith('video/')))) {
display = display + '<br/><video controls preload="none" src="' + url + '" width="300" >' + (name ? name : url) + '</video>'
}
return display
}
}
@ -181,8 +206,11 @@ const UI = {
Elem('activity-object-summary').innerText = activity.object.summary
Elem('activity-object-content').innerHTML = activity.object.content
// If there are attachments on the object, display them
// Elem('activity-object-attachments')
// Elem('activity-object-tags')
Elem('activity-object-attachments-number').innerText = activity.object.attachments.length
Elem('activity-object-attachments').innerHTML = activity.object.attachments.map(
function(element) {
return '<li class="attachment-display">' + Render.attachment(element) + '</li>'
}).join('')
} else {
// Hide the element
Elem('activity-object').style.display = 'none'

2
src/activity-object.js
View File

@ -14,6 +14,8 @@ const ASObject = function(raw_object) {
this.actor = new Actor()
this.to = []
this.cc = []
//
this.attachments = (raw_object.attachment && Array.isArray(raw_object.attachment)) ? raw_object.attachment : []
}
// Fetch function
// Callback takes 3 parameters: load_ok, fetched_object, failure_message