Integrate odf viewer
Victor Dubiniuk
11 years ago
parent
96949606b3
commit
adf5aafe70
@ -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
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -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);
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue