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

54
render.js
View File

@ -36,18 +36,43 @@ const Render = {
display = display + '</section>' display = display + '</section>'
return display return display
}, },
// Raw data conversion // Render an attachment
rawData: function(rawData) { attachment: function(attachment) {
var str_data = JSON.stringify(rawData, null, 1) // If a string => link
var replace_map = { var display = ''
'&': '&amp;', if (typeof attachment === 'string') {
'<': '&lt;', display = display + '<a href="' + attachment + '">Link to object</a>'
'>': '&gt;', } else {
'"': '&quot;', const type = attachment.type
'\'': '&#039;' 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 display
return str_data },
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-summary').innerText = activity.object.summary
Elem('activity-object-content').innerHTML = activity.object.content Elem('activity-object-content').innerHTML = activity.object.content
// If there are attachments on the object, display them // If there are attachments on the object, display them
// Elem('activity-object-attachments') Elem('activity-object-attachments-number').innerText = activity.object.attachments.length
// Elem('activity-object-tags') Elem('activity-object-attachments').innerHTML = activity.object.attachments.map(
function(element) {
return '<li class="attachment-display">' + Render.attachment(element) + '</li>'
}).join('')
} else { } else {
// Hide the element // Hide the element
Elem('activity-object').style.display = 'none' 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.actor = new Actor()
this.to = [] this.to = []
this.cc = [] this.cc = []
//
this.attachments = (raw_object.attachment && Array.isArray(raw_object.attachment)) ? raw_object.attachment : []
} }
// Fetch function // Fetch function
// Callback takes 3 parameters: load_ok, fetched_object, failure_message // Callback takes 3 parameters: load_ok, fetched_object, failure_message