Skip to content

Commit

Permalink
Added support for base:unstructured content type
Browse files Browse the repository at this point in the history
  • Loading branch information
hjelmevold committed Nov 30, 2018
1 parent 6541519 commit 836a085
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 12 deletions.
48 changes: 48 additions & 0 deletions README.md
@@ -0,0 +1,48 @@
# Attachment Viewer app for Enonic XP

This [Enonic XP](https://github.com/enonic/xp) application extends the amount of file types that can be viewed directly in the browser, both in the preview window in Content Studio and even on a site, if enabled. This includes the following file types:

* Audio files
* Documents and PDFs (1)
* Plain text files
* Unstructured files (JSON data with content type 'base:unstructured')
* Video files

(1) Also Microsoft Office files, but those won't show in preview mode (only on a site, if enabled) and are only supported in Internet Explorer

## Installation

Go into the Enonic XP Application admin tool and install the app from the [Enonic Market](https://market.enonic.com/).

The **Attachment viewer** app will then be available to add to your websites through the Content Studio admin tool in Enonic XP. Edit your site content to add this app. Remember to save the site after you've configured the app.

## How to use this app

After adding this app to any site inside your Enonic XP environment, all supported attachments are shown inside Content Studio right away. However, you may also enable viewing attachments on the site that the app has been added to.

### App settings

**"Allow viewing on site"**
If enabled, links of type "content" can be used to view attachments in the browser instead of downloading them. Example: Inside an HTML area, you can add dynamic links. Without this app, the only way to add a link to a PDF would be by using the "Attachment" option, which would cause the user to download the PDF when following the link. With this app and with this setting enabled, you may also successfully choose to add a link using the "Content" option. This will cause the user to view the PDF in the browser when following the link, provided that the browser supports this.

All modern browsers support viewing PDFs directly, it's mostly older versions of Internet Explorer (IE 8 or 9 in Compatibility Mode and earlier versions) that will download the file instead. On the flip side, Internet Explorer supports viewing Office Documents direcly in the browser, but all other browsers will download those files instead.

The Content Studio in Enonic XP does not support Internet Explorer, so Office Documents can't be shown inside the Content Studio preview window.

## Releases and Compatibility

| App version | XP version |
| ------------- | ------------- |
| 2.0.0 | 6.13.0 |
| 1.0.0 | 6.15.4 |

## Changelog

### Version 2.0.0

* Added support for viewing the 'base:unstructured' content type, shown as plain text with indentation
* Removed the included page template in favor of using automatic controller mappings (Old page tempaltes using this app will no longer work)

### Version 1.0.0

* Initial release
4 changes: 2 additions & 2 deletions gradle.properties
Expand Up @@ -5,5 +5,5 @@ group = com.hjelmevold.app
projectName = attachmentviewer
appName = com.hjelmevold.app.attachmentviewer
displayName = Attachment Viewer
xpVersion = 6.15.4
version = 1.0.0
xpVersion = 6.13.0
version = 2.0.0
43 changes: 43 additions & 0 deletions src/main/resources/lib/attachment/attachment.html
@@ -0,0 +1,43 @@
<html lang="en">
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="https://www.docxjs.com/js/build/latest.jsviewer.min.js"></script>
</head>
<body>
<input id="inputFiles" type="file" name="files[]" multiple="false"></input>
<div id="loaded-layout" style="width:100%;height:800px;"></div>
<script>
$(document).ready(function(){
//Input File
var $inputFiles = $('#inputFiles');

//File Change Event
$inputFiles.on('change', function (e) {

//File Object Information
var files = e.target.files;

//Create DocxJS or CellJS or SlideJS
var docxJS = new DocxJS();

//File Parsing
docxJS.parse(
files[0],
function () {
//After Rendering
docxJS.render($('#loaded-layout')[0], function (result) {
if (result.isError) {
console.log(result.msg);
} else {
console.log("Success Render");
}
});
}, function (e) {
console.log("Error!", e);
}
);
});
});
</script>
</body>
</html>
54 changes: 54 additions & 0 deletions src/main/resources/lib/attachment/attachment.js
@@ -0,0 +1,54 @@
var libs = {
content: require('/lib/xp/content'),
portal: require('/lib/xp/portal')
};

var viewFile = resolve('./attachment.html');

// Response to a GET request
function handleGet(request) {
var content = libs.portal.getContent();
var config = libs.portal.getSiteConfig();

var isEditOrPreview = (request.mode === 'edit' || request.mode === 'preview');
var allowViewOnSite = (config && config.allowViewOnSite);

// View attachments
if (!content.data.media) {
return null;
} else {
var attachment = content.attachments[content.data.media.attachment];

// Don't display Microsoft Word documents in Content Studio preview window, since Chrome/Firefox will download instead of view them
// MIME type source: https://filext.com/faq/office_mime_types.html
if (isEditOrPreview && (attachment.mimeType.startsWith('application/msword') || attachment.mimeType.startsWith('application/vnd.'))) {
return {
body: '[Microsoft Office document. Preview not supported.]'
};
} else {
var stream = libs.content.getAttachmentStream({
key: content._id,
name: attachment.name
});

if (!isEditOrPreview && !allowViewOnSite) {
// Download attachment
return {
body: stream,
contentType: attachment.mimeType,
headers: {
'Content-Disposition': 'attachment; filename="' + attachment.name + '"' // TODO: check if attachment.name is what's supposed to be written here
}
}
} else {
// View attachment
return {
body: stream,
contentType: attachment.mimeType
}
}
}
}
}

exports.get = handleGet;
17 changes: 17 additions & 0 deletions src/main/resources/lib/attachment/unstructured.js
@@ -0,0 +1,17 @@
var libs = {
portal: require('/lib/xp/portal')
};

function handleGet(request) {
var content = libs.portal.getContent();

// View unstructured content as JSON in plain text
if (content && content.type === 'base:unstructured') {
return {
body: JSON.stringify(content, null, 4),
contentType: 'text/plain; charset=utf-8'
}
}
}

exports.get = handleGet;
26 changes: 16 additions & 10 deletions src/main/resources/site/site.xml
Expand Up @@ -14,38 +14,44 @@
</field-set>
</config>
<mappings>
<mapping controller="/site/pages/attachment/attachment.js">
<!-- Attachment types that are directly viewable in the browser -->
<mapping controller="/lib/attachment/attachment.js">
<match>type:'media:audio'</match>
</mapping>
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/attachment/attachment.js">
<match>type:'media:document'</match>
</mapping>
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/attachment/attachment.js">
<match>type:'media:text'</match>
</mapping>
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/attachment/attachment.js">
<match>type:'media:video'</match>
</mapping>

<!-- Unstructured JSON viewed as plain text-->
<mapping controller="/lib/attachment/unstructured.js">
<match>type:'base:unstructured'</match>
</mapping>

<!-- Disabled because this is supported by default in Enonic
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/attachment/attachment.js">
<match>type:'media:image'</match>
</mapping>
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/attachment/attachment.js">
<match>type:'media:vector'</match>
</mapping-->

<!-- Disabled because this cannot be viewed in Chrome/Firefox, but triggers a download instead
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/pages/attachment/attachment.js">
<match>type:'media:code'</match>
</mapping>
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/pages/attachment/attachment.js">
<match>type:'media:data'</match>
</mapping>
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/pages/attachment/attachment.js">
<match>type:'media:presentation'</match>
</mapping>
<mapping controller="/site/pages/attachment/attachment.js">
<mapping controller="/lib/pages/attachment/attachment.js">
<match>type:'media:spreadsheet'</match>
</mapping-->
</mappings>
Expand Down

0 comments on commit 836a085

Please sign in to comment.