Integrate odf viewer

appinfo/app.php

@@ -43,5 +43,8 @@ OC::$CLASSPATH['OCA\Documents\Db_Session'] = 'documents/lib/db/session.php';
 OC::$CLASSPATH['OCA\Documents\Db_Member'] = 'documents/lib/db/member.php';
 OC::$CLASSPATH['OCA\Documents\Db_Op'] = 'documents/lib/db/op.php';
 
+//Script for registering file actions
+OCP\Util::addScript('documents', 'viewer/viewer');
+
 //Listen to delete file signal
-\OCP\Util::connectHook('OC_Filesystem', 'delete', "OCA\Documents\Storage", "onDelete");
+OCP\Util::connectHook('OC_Filesystem', 'delete', "OCA\Documents\Storage", "onDelete");

css/viewer/odfviewer.css

@@ -0,0 +1,19 @@
+#odf-canvas{
+  position: relative;
+  top: 37px;
+  left: 1px;
+  border:1px solid darkgray; 
+  box-shadow: 0px 4px 10px #000;
+  -moz-box-shadow: 0px 4px 10px #000;
+  -webkit-box-shadow: 0px 4px 10px #000;
+}
+
+#odf_close{
+	margin-left: auto;
+	margin-right: 167px;	
+	float: right;
+}
+
+#odf-toolbar{
+    padding: 0 0 0 1em
+}

css/viewer/webodf.css

@@ -0,0 +1,320 @@
+@namespace draw url(urn:oasis:names:tc:opendocument:xmlns:drawing:1.0);
+@namespace fo url(urn:oasis:names:tc:opendocument:xmlns:xsl-fo-compatible:1.0);
+@namespace office url(urn:oasis:names:tc:opendocument:xmlns:office:1.0);
+@namespace presentation url(urn:oasis:names:tc:opendocument:xmlns:presentation:1.0);
+@namespace style url(urn:oasis:names:tc:opendocument:xmlns:style:1.0);
+@namespace svg url(urn:oasis:names:tc:opendocument:xmlns:svg-compatible:1.0);
+@namespace table url(urn:oasis:names:tc:opendocument:xmlns:table:1.0);
+@namespace text url(urn:oasis:names:tc:opendocument:xmlns:text:1.0);
+@namespace runtimens url(urn:webodf); /* namespace for runtime only */
+@namespace cursor url(urn:webodf:names:cursor);
+@namespace editinfo url(urn:webodf:names:editinfo);
+
+office|document > *, office|document-content > * {
+  display: none;
+}
+office|body, office|document {
+  display: inline-block;
+  position: relative;
+}
+
+text|p, text|h {
+  display: block;
+  padding: 0;
+  margin: 0;
+  line-height: normal;
+  position: relative;
+}
+*[runtimens|containsparagraphanchor] {
+  position: relative;
+}
+text|s:before { /* this needs to be the number of spaces given by text:c */
+  content: ' ';
+}
+text|tab:before {
+  display: inline;
+  content: '        ';
+}
+text|line-break {
+  content: " ";
+  display: block;
+}
+text|tracked-changes {
+  /*Consumers that do not support change tracking, should ignore changes.*/
+  display: none;
+}
+office|binary-data {
+  display: none;
+}
+office|text {
+  display: block;
+  width: 216mm; /* default to A4 width */
+  min-height: 279mm;
+  padding-left: 32mm;
+  padding-right: 32mm;
+  padding-top: 25mm;
+  padding-bottom: 13mm;
+  margin: 2px;
+  text-align: left;
+  overflow: hidden;
+}
+office|spreadsheet {
+  display: block;
+  border-collapse: collapse;
+  empty-cells: show;
+  font-family: sans-serif;
+  font-size: 10pt;
+  text-align: left;
+  page-break-inside: avoid;
+  overflow: hidden;
+}
+office|presentation {
+  display: inline-block;
+  text-align: left;
+}
+draw|page {
+  display: block;
+  height: 21cm;
+  width: 28cm;
+  margin: 3px;
+  position: relative;
+  overflow: hidden;
+}
+presentation|notes {
+    display: none;
+}
+@media print {
+  draw|page {
+    border: 1pt solid black;
+    page-break-inside: avoid;
+  }
+  presentation|notes {
+    /*TODO*/
+  }
+}
+office|spreadsheet text|p {
+  border: 0px;
+  padding: 1px;
+  margin: 0px;
+}
+office|spreadsheet table|table {
+  margin: 3px;
+}
+office|spreadsheet table|table:after {
+  /* show sheet name the end of the sheet */
+  /*content: attr(table|name);*/ /* gives parsing error in opera */
+}
+office|spreadsheet table|table-row {
+  counter-increment: row;
+}
+office|spreadsheet table|table-row:before {
+  width: 3em;
+  background: #cccccc;
+  border: 1px solid black;
+  text-align: center;
+  content: counter(row);
+  display: table-cell;
+}
+office|spreadsheet table|table-cell {
+  border: 1px solid #cccccc;
+}
+table|table {
+  display: table;
+}
+draw|frame table|table {
+  width: 100%;
+  height: 100%;
+  background: white;
+}
+table|table-header-rows {
+  display: table-header-group;
+}
+table|table-row {
+  display: table-row;
+}
+table|table-column {
+  display: table-column;
+}
+table|table-cell {
+  width: 0.889in;
+  display: table-cell;
+}
+draw|frame {
+  display: block;
+}
+draw|image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  -moz-background-size: 100% 100%;
+}
+/* only show the first image in frame */
+draw|frame > draw|image:nth-of-type(n+2) {
+  display: none;
+}
+text|list:before {
+    display: none;
+    content:"";
+}
+text|list {
+    counter-reset: list;
+}
+text|list-item {
+    display: block;
+}
+text|number {
+    display:none;
+}
+
+text|a {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+}
+text|note-citation {
+    vertical-align: super;
+    font-size: smaller;
+}
+text|note-body {
+    display: none;
+}
+text|note:hover text|note-citation {
+    background: #dddddd;
+}
+text|note:hover text|note-body {
+    display: block;
+    left:1em;
+    max-width: 80%;
+    position: absolute;
+    background: #ffffaa;
+}
+svg|title, svg|desc {
+    display: none;
+}
+video {
+    width: 100%;
+    height: 100%
+}
+
+/* below set up the cursor */
+cursor|cursor {
+    display: inline;
+    width: 0px;
+    height: 1em;
+    /* making the position relative enables the avatar to use
+       the cursor as reference for its absolute position */
+    position: relative;
+}
+cursor|cursor > span {
+    display: inline;
+    position: absolute;
+    height: 1em;
+    border-left: 2px solid black;
+    outline: none;
+}
+
+cursor|cursor > div {
+    padding: 3px;
+    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
+    border: none !important;
+    border-radius: 5px;
+    opacity: 0.3;
+}
+
+cursor|cursor > div > img {
+    border-radius: 5px;
+}
+
+cursor|cursor > div.active {
+    opacity: 0.8;
+}
+
+cursor|cursor > div:after {
+    content: ' ';
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-width: 8.7px 5px 0 5px;
+    border-color: black transparent transparent transparent;
+
+    top: 100%;
+    left: 43%;
+}
+
+
+.editInfoMarker {
+    position: absolute;
+    width: 10px;
+    height: 100%;
+    left: -20px;
+    opacity: 0.8;
+    top: 0;
+    border-radius: 5px;
+    background-color: transparent;
+    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
+}
+.editInfoMarker:hover {
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
+}
+
+.editInfoHandle {
+    position: absolute;
+    background-color: black;
+    padding: 5px;
+    border-radius: 5px;
+    opacity: 0.8;
+    box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.75);
+    bottom: 100%;
+    margin-bottom: 10px;
+    z-index: 3;
+    left: -25px;
+}
+.editInfoHandle:after {
+    content: ' ';
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-width: 8.7px 5px 0 5px;
+    border-color: black transparent transparent transparent;
+
+    top: 100%;
+    left: 5px;
+}
+.editInfo {
+    font-family: sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    text-decoration: none;
+    color: white;
+    width: 100%;
+    height: 12pt;
+}
+.editInfoColor {
+    float: left;
+    width: 10pt;
+    height: 10pt;
+    border: 1px solid white;
+}
+.editInfoAuthor {
+    float: left;
+    margin-left: 5pt;
+    font-size: 10pt;
+    text-align: left;
+    height: 12pt;
+    line-height: 12pt;
+}
+.editInfoTime {
+    float: right;
+    margin-left: 30pt;
+    font-size: 8pt;
+    font-style: italic;
+    color: yellow;
+    height: 12pt;
+    line-height: 12pt;
+}

js/viewer/viewer.js

@@ -0,0 +1,89 @@
+var odfViewer = {
+	supportedMimesRead: [
+		'application/vnd.oasis.opendocument.text',
+		'application/vnd.oasis.opendocument.spreadsheet',
+		'application/vnd.oasis.opendocument.graphics',
+		'application/vnd.oasis.opendocument.presentation'
+	],
+			
+	supportedMimesUpdate: [
+		'application/vnd.oasis.opendocument.text'
+	],
+			
+	register : function(){
+		for (var i = 0; i < odfViewer.supportedMimesRead.length; ++i) {
+			var mime = odfViewer.supportedMimesRead[i];
+			FileActions.register(mime, 'View', OC.PERMISSION_READ, '', odfViewer.dispatch);
+			FileActions.setDefault(mime, 'View');
+		}
+
+	},
+	
+	dispatch : function(filename){
+		if (odfViewer.supportedMimesUpdate.indexOf(FileActions.getCurrentMimeType()) !== -1
+		 && FileActions.getCurrentPermissions() & OC.PERMISSION_UPDATE
+		){
+			odfViewer.onEdit(filename);
+		} else {
+			odfViewer.onView(filename);
+		}
+	},
+	
+	onEdit : function(){
+		var fileId = FileActions.currentFile.parent().attr('data-id');
+		window.location = OC.linkTo('documents', 'index.php') + '#' + fileId;
+	},
+			
+	onView: function(filename) {
+		OC.addStyle('documents', 'viewer/webodf');
+		OC.addStyle('documents', 'viewer/odfviewer');
+		OC.addScript('documents', 'viewer/webodf').done(function() {
+			var location = fileDownloadPath($('#dir').val(), filename);
+
+			// fade out files menu and add odf menu
+			$('.actions,#file_action_panel').fadeOut('slow').promise().done(function() {
+				// odf action toolbar
+				var odfToolbarHtml =
+						'<div id="odf-toolbar">' +
+						'<button id="odf_close">' + t('documents', 'Close') +
+						'</button></div>';
+				$('#controls').append(odfToolbarHtml);
+
+			});
+
+			// fade out file list and show pdf canvas
+			$('table').fadeOut('slow').promise().done(function() {
+				;
+				var canvashtml = '<div id="odf-canvas"></div>';
+				$('table').after(canvashtml);
+				// in case we are on the public sharing page we shall display the odf into the preview tag
+				$('#preview').html(canvashtml);
+
+				var odfelement = document.getElementById("odf-canvas");
+				var odfcanvas = new odf.OdfCanvas(odfelement);
+				odfcanvas.load(location);
+			});
+		});
+	},
+	
+	onClose: function() {
+		// Fade out odf-toolbar
+		$('#odf-toolbar').fadeOut('slow');
+		// Fade out editor
+		$('#odf-canvas').fadeOut('slow', function() {
+			$('#odf-toolbar').remove();
+			$('#odf-canvas').remove();
+			$('.actions,#file_access_panel').fadeIn('slow');
+			$('table').fadeIn('slow');
+		});
+		is_editor_shown = false;
+	}
+};
+
+$(document).ready(function() {
+	if (typeof FileActions !== 'undefined') {
+		odfViewer.register();
+	}
+
+	$('#odf_close').live('click', odfViewer.onClose);
+});