Updated WebODF to the most recent version; implemented the viewer sample which adds zooming
This commit is contained in:
Thomas Bruederli
parent
38340461d5
commit
0e8cd47317
17 changed files with 3006 additions and 503 deletions
136
plugins/odfviewer/ODFViewerPlugin.js
Normal file
136
plugins/odfviewer/ODFViewerPlugin.js
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright (C) 2012 KO GmbH <copyright@kogmbh.com>
|
||||
*
|
||||
* @licstart
|
||||
* The JavaScript code in this page is free software: you can redistribute it
|
||||
* and/or modify it under the terms of the GNU Affero General Public License
|
||||
* (GNU AGPL) as published by the Free Software Foundation, either version 3 of
|
||||
* the License, or (at your option) any later version. The code is distributed
|
||||
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU AGPL for more details.
|
||||
*
|
||||
* As additional permission under GNU AGPL version 3 section 7, you
|
||||
* may distribute non-source (e.g., minimized or compacted) forms of
|
||||
* that code without the copy of the GNU GPL normally required by
|
||||
* section 4, provided you include this license notice and a URL
|
||||
* through which recipients can access the Corresponding Source.
|
||||
*
|
||||
* As a special exception to the AGPL, any HTML file which merely makes function
|
||||
* calls to this code, and for that purpose includes it by reference shall be
|
||||
* deemed a separate work for copyright law purposes. In addition, the copyright
|
||||
* holders of this code give you permission to combine this code with free
|
||||
* software libraries that are released under the GNU LGPL. You may copy and
|
||||
* distribute such a system following the terms of the GNU AGPL for this code
|
||||
* and the LGPL for the libraries. If you modify this code, you may extend this
|
||||
* exception to your version of the code, but you are not obligated to do so.
|
||||
* If you do not wish to do so, delete this exception statement from your
|
||||
* version.
|
||||
*
|
||||
* This license applies to this entire compilation.
|
||||
* @licend
|
||||
* @source: http://www.webodf.org/
|
||||
* @source: http://gitorious.org/webodf/webodf/
|
||||
*/
|
||||
|
||||
/*global runtime, document, odf, console*/
|
||||
|
||||
function ODFViewerPlugin() {
|
||||
"use strict";
|
||||
|
||||
// that should probably be provided by webodf
|
||||
function nsResolver(prefix) {
|
||||
var ns = {
|
||||
'draw' : "urn:oasis:names:tc:opendocument:xmlns:drawing:1.0",
|
||||
'presentation' : "urn:oasis:names:tc:opendocument:xmlns:presentation:1.0",
|
||||
'text' : "urn:oasis:names:tc:opendocument:xmlns:text:1.0",
|
||||
'office' : "urn:oasis:names:tc:opendocument:xmlns:office:1.0"
|
||||
};
|
||||
return ns[prefix] || console.log('prefix [' + prefix + '] unknown.');
|
||||
}
|
||||
|
||||
var self = this,
|
||||
odfCanvas = null,
|
||||
odfElement = null,
|
||||
initialized = false,
|
||||
root = null,
|
||||
documentType = null,
|
||||
pages = [],
|
||||
currentPage = null;
|
||||
|
||||
this.initialize = function (viewerElement, documentUrl) {
|
||||
odfElement = document.getElementById('canvas');
|
||||
odfCanvas = new odf.OdfCanvas(odfElement);
|
||||
odfCanvas.load(documentUrl);
|
||||
|
||||
odfCanvas.addListener('statereadychange', function () {
|
||||
root = odfCanvas.odfContainer().rootElement;
|
||||
initialized = true;
|
||||
documentType = odfCanvas.odfContainer().getDocumentType(root);
|
||||
if (documentType === 'text' && odfCanvas.enableAnnotations) {
|
||||
odfCanvas.enableAnnotations(true);
|
||||
}
|
||||
self.onLoad();
|
||||
});
|
||||
};
|
||||
|
||||
this.isSlideshow = function () {
|
||||
return documentType === 'presentation';
|
||||
};
|
||||
|
||||
this.onLoad = function () {};
|
||||
|
||||
this.getWidth = function () {
|
||||
return odfElement.clientWidth;
|
||||
};
|
||||
|
||||
this.getHeight = function () {
|
||||
return odfElement.clientHeight;
|
||||
};
|
||||
|
||||
this.fitToWidth = function (width) {
|
||||
odfCanvas.fitToWidth(width);
|
||||
};
|
||||
|
||||
this.fitToHeight = function (height) {
|
||||
odfCanvas.fitToHeight(height);
|
||||
};
|
||||
|
||||
this.fitToPage = function (width, height) {
|
||||
odfCanvas.fitToContainingElement(width, height);
|
||||
};
|
||||
|
||||
this.fitSmart = function (width) {
|
||||
odfCanvas.fitSmart(width);
|
||||
};
|
||||
|
||||
this.getZoomLevel = function () {
|
||||
return odfCanvas.getZoomLevel();
|
||||
};
|
||||
|
||||
this.setZoomLevel = function (value) {
|
||||
odfCanvas.setZoomLevel(value);
|
||||
};
|
||||
|
||||
// return a list of tuples (pagename, pagenode)
|
||||
this.getPages = function () {
|
||||
var pageNodes = Array.prototype.slice.call(root.getElementsByTagNameNS(nsResolver('draw'), 'page')),
|
||||
pages = [],
|
||||
i,
|
||||
tuple;
|
||||
|
||||
for (i = 0; i < pageNodes.length; i += 1) {
|
||||
tuple = [
|
||||
pageNodes[i].getAttribute('draw:name'),
|
||||
pageNodes[i]
|
||||
];
|
||||
pages.push(tuple);
|
||||
}
|
||||
return pages;
|
||||
};
|
||||
|
||||
this.showPage = function (n) {
|
||||
odfCanvas.showPage(n);
|
||||
};
|
||||
|
||||
}
|
||||
BIN
plugins/odfviewer/images/texture.png
Normal file
BIN
plugins/odfviewer/images/texture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
plugins/odfviewer/images/toolbarButton-download.png
Normal file
BIN
plugins/odfviewer/images/toolbarButton-download.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 512 B |
BIN
plugins/odfviewer/images/toolbarButton-fullscreen.png
Normal file
BIN
plugins/odfviewer/images/toolbarButton-fullscreen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 491 B |
BIN
plugins/odfviewer/images/toolbarButton-menuArrows.png
Normal file
BIN
plugins/odfviewer/images/toolbarButton-menuArrows.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 237 B |
BIN
plugins/odfviewer/images/toolbarButton-pageDown.png
Normal file
BIN
plugins/odfviewer/images/toolbarButton-pageDown.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 353 B |
BIN
plugins/odfviewer/images/toolbarButton-pageUp.png
Normal file
BIN
plugins/odfviewer/images/toolbarButton-pageUp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 B |
BIN
plugins/odfviewer/images/toolbarButton-presentation.png
Normal file
BIN
plugins/odfviewer/images/toolbarButton-presentation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
plugins/odfviewer/images/toolbarButton-zoomIn.png
Normal file
BIN
plugins/odfviewer/images/toolbarButton-zoomIn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 228 B |
BIN
plugins/odfviewer/images/toolbarButton-zoomOut.png
Normal file
BIN
plugins/odfviewer/images/toolbarButton-zoomOut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 B |
|
|
@ -1,39 +1,83 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<html dir="ltr" lang="en-US">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
|
||||
<title>Roundcube WebODF Viewer</title>
|
||||
<style type="text/css" media="screen">
|
||||
|
||||
body, div {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
border: 0px;
|
||||
background: #fff;
|
||||
}
|
||||
body.odfcanvas {
|
||||
height: 100%;
|
||||
background: black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" type="text/css" href="%%DOCROOT%%webodf.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="%%DOCROOT%%viewer.css"/>
|
||||
<script type="text/javascript" src="%%DOCROOT%%viewer.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="%%DOCROOT%%ODFViewerPlugin.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="%%DOCROOT%%webodf.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
function init() {
|
||||
var odfelement = document.getElementById("odf"),
|
||||
odfcanvas = new odf.OdfCanvas(odfelement);
|
||||
odfcanvas.load('%%DOCURL%%');
|
||||
}
|
||||
window.setTimeout(init, 0);
|
||||
// WebODF viewer code from https://gitorious.org/webodf/webodf/source/HEADe:programs/viewer
|
||||
|
||||
function init() {
|
||||
viewer = new Viewer(new ODFViewerPlugin(), '%%DOCURL%%');
|
||||
}
|
||||
window.setTimeout(init, 0);
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body class="odfcanvas">
|
||||
<div id="odf"></div>
|
||||
<body>
|
||||
<div id="viewer">
|
||||
<div id="titlebar">
|
||||
<div id="documentName"></div>
|
||||
<div id="toolbarRight">
|
||||
<button id="presentation" class="toolbarButton presentation" title="Presentation"></button>
|
||||
<button id="fullscreen" class="toolbarButton fullscreen" title="Fullscreen"></button>
|
||||
<button id="download" class="toolbarButton download" title="Download"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toolbarContainer">
|
||||
<div id="toolbar">
|
||||
<div id="toolbarLeft">
|
||||
<div id="navButtons" class="splitToolbarButton">
|
||||
<button id="previous" class="toolbarButton pageUp" title="Previous Page"></button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button id="next" class="toolbarButton pageDown" title="Next Page"></button>
|
||||
</div>
|
||||
<label id="pageNumberLabel" class="toolbarLabel" for="pageNumber">Page:</label>
|
||||
<input type="number" id="pageNumber" class="toolbarField pageNumber"></input>
|
||||
<span id="numPages" class="toolbarLabel"></span>
|
||||
</div>
|
||||
<div id="toolbarMiddleContainer" class="outerCenter">
|
||||
<div id="toolbarMiddle" class="innerCenter">
|
||||
<div id = 'zoomButtons' class="splitToolbarButton">
|
||||
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out"></button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In"></button>
|
||||
</div>
|
||||
<span id="scaleSelectContainer" class="dropdownToolbarButton">
|
||||
<select id="scaleSelect" title="Zoom" oncontextmenu="return false;">
|
||||
<option id="pageAutoOption" value="auto" selected>Automatic</option>
|
||||
<option id="pageActualOption" value="page-actual">Actual Size</option>
|
||||
<option id="pageWidthOption" value="page-width">Full Width</option>
|
||||
<option id="customScaleOption" value="custom"></option>
|
||||
<option value="0.5">50%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="1">100%</option>
|
||||
<option value="1.25">125%</option>
|
||||
<option value="1.5">150%</option>
|
||||
<option value="2">200%</option>
|
||||
</select>
|
||||
</span>
|
||||
<div id="sliderContainer">
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="canvasContainer">
|
||||
<div id="canvas"></div>
|
||||
</div>
|
||||
<div id="overlayNavigator">
|
||||
<div id="previousPage"></div>
|
||||
<div id="nextPage"></div>
|
||||
</div>
|
||||
<div id="overlayCloseButton">
|
||||
✖
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
* Render Open Documents directly in the preview window
|
||||
* by using the WebODF library by Tobias Hintze http://webodf.org/
|
||||
*
|
||||
* @version 0.2
|
||||
* @version 0.3
|
||||
* @author Thomas Bruederli <bruederli@kolabsys.com>
|
||||
*
|
||||
* Copyright (C) 2011, Kolab Systems AG
|
||||
* Copyright (C) 2011-2013, Kolab Systems AG
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
<email>bruederli@kolabsys.com</email>
|
||||
<active>yes</active>
|
||||
</lead>
|
||||
<date>2011-12-06</date>
|
||||
<time>12:12:00</time>
|
||||
<date>2013-10-03</date>
|
||||
<time>15:46:00</time>
|
||||
<version>
|
||||
<release>0.2</release>
|
||||
<api>0.2</api>
|
||||
<release>0.3</release>
|
||||
<api>0.3</api>
|
||||
</version>
|
||||
<stability>
|
||||
<release>beta</release>
|
||||
|
|
@ -28,8 +28,10 @@
|
|||
<contents>
|
||||
<dir baseinstalldir="/" name="/">
|
||||
<file name="odfviewer.php" role="php"></file>
|
||||
<file name="ODFViewerPlugin.js" role="data"></file>
|
||||
<file name="webodf.js" role="data"></file>
|
||||
<file name="webodf.css" role="data"></file>
|
||||
<file name="viewer.js" role="data"></file>
|
||||
<file name="viewer.css" role="data"></file>
|
||||
<file name="odf.html" role="data"></file>
|
||||
<file name="README" role="data"></file>
|
||||
<file name="LICENSE" role="data"></file>
|
||||
|
|
|
|||
654
plugins/odfviewer/viewer.css
Normal file
654
plugins/odfviewer/viewer.css
Normal file
|
|
@ -0,0 +1,654 @@
|
|||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.titlebar > span,
|
||||
.toolbarLabel,
|
||||
input,
|
||||
button,
|
||||
select {
|
||||
font: message-box;
|
||||
}
|
||||
|
||||
#titlebar {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.75);
|
||||
-moz-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.75);
|
||||
box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.75);
|
||||
|
||||
background-image: url(images/texture.png), linear-gradient(rgba(69, 69, 69, .95), rgba(82, 82, 82, .99));
|
||||
background-image: url(images/texture.png), -webkit-linear-gradient(rgba(69, 69, 69, .95), rgba(82, 82, 82, .99));
|
||||
background-image: url(images/texture.png), -moz-linear-gradient(rgba(69, 69, 69, .95), rgba(82, 82, 82, .99));
|
||||
background-image: url(images/texture.png), -ms-linear-gradient(rgba(69, 69, 69, .95), rgba(82, 82, 82, .99));
|
||||
background-image: url(images/texture.png), -o-linear-gradient(rgba(69, 69, 69, .95), rgba(82, 82, 82, .99));
|
||||
}
|
||||
|
||||
#documentName {
|
||||
margin-left: 10px;
|
||||
margin-top: 8px;
|
||||
color: #F2F2F2;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
#toolbarContainer {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-box-shadow: 0px -1px 3px rgba(50, 50, 50, 0.75);
|
||||
-moz-box-shadow: 0px -1px 3px rgba(50, 50, 50, 0.75);
|
||||
box-shadow: 0px -1px 3px rgba(50, 50, 50, 0.75);
|
||||
|
||||
background-image: url(images/texture.png), linear-gradient(rgba(82, 82, 82, .99), rgba(69, 69, 69, .95));
|
||||
background-image: url(images/texture.png), -webkit-linear-gradient(rgba(82, 82, 82, .99), rgba(69, 69, 69, .95));
|
||||
background-image: url(images/texture.png), -moz-linear-gradient(rgba(82, 82, 82, .99), rgba(69, 69, 69, .95));
|
||||
background-image: url(images/texture.png), -ms-linear-gradient(rgba(82, 82, 82, .99), rgba(69, 69, 69, .95));
|
||||
background-image: url(images/texture.png), -o-linear-gradient(rgba(82, 82, 82, .99), rgba(69, 69, 69, .95));
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#toolbarMiddleContainer, #toolbarLeft {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
html[dir='ltr'] #toolbarLeft {
|
||||
margin-left: -1px;
|
||||
}
|
||||
html[dir='rtl'] #toolbarRight {
|
||||
margin-left: -1px;
|
||||
}
|
||||
html[dir='ltr'] #toolbarLeft,
|
||||
html[dir='rtl'] #toolbarRight {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
html[dir='ltr'] #toolbarRight,
|
||||
html[dir='rtl'] #toolbarLeft {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
html[dir='ltr'] #toolbarLeft > *,
|
||||
html[dir='ltr'] #toolbarMiddle > *,
|
||||
html[dir='ltr'] #toolbarRight > * {
|
||||
float: left;
|
||||
}
|
||||
html[dir='rtl'] #toolbarLeft > *,
|
||||
html[dir='rtl'] #toolbarMiddle > *,
|
||||
html[dir='rtl'] #toolbarRight > * {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/* outer/inner center provides horizontal center */
|
||||
html[dir='ltr'] .outerCenter {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: 50%;
|
||||
}
|
||||
html[dir='rtl'] .outerCenter {
|
||||
float: left;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
}
|
||||
html[dir='ltr'] .innerCenter {
|
||||
float: right;
|
||||
position: relative;
|
||||
right: -50%;
|
||||
}
|
||||
html[dir='rtl'] .innerCenter {
|
||||
float: left;
|
||||
position: relative;
|
||||
left: -50%;
|
||||
}
|
||||
|
||||
html[dir='ltr'] .splitToolbarButton {
|
||||
margin: 3px 2px 4px 0;
|
||||
display: inline-block;
|
||||
}
|
||||
html[dir='rtl'] .splitToolbarButton {
|
||||
margin: 3px 0 4px 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
html[dir='ltr'] .splitToolbarButton > .toolbarButton {
|
||||
border-radius: 0;
|
||||
float: left;
|
||||
}
|
||||
html[dir='rtl'] .splitToolbarButton > .toolbarButton {
|
||||
border-radius: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.splitToolbarButton.toggled .toolbarButton {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toolbarButton {
|
||||
border: 0 none;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
width: 32px;
|
||||
height: 25px;
|
||||
border-radius: 2px;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
html[dir='ltr'] .toolbarButton,
|
||||
html[dir='ltr'] .dropdownToolbarButton {
|
||||
margin: 3px 2px 4px 0;
|
||||
}
|
||||
html[dir='rtl'] .toolbarButton,
|
||||
html[dir='rtl'] .dropdownToolbarButton {
|
||||
margin: 3px 0 4px 2px;
|
||||
}
|
||||
|
||||
.toolbarButton:hover,
|
||||
.toolbarButton:focus,
|
||||
.dropdownToolbarButton {
|
||||
background-color: hsla(0,0%,0%,.12);
|
||||
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-clip: padding-box;
|
||||
border: 1px solid hsla(0,0%,0%,.35);
|
||||
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
|
||||
0 0 1px hsla(0,0%,100%,.15) inset,
|
||||
0 1px 0 hsla(0,0%,100%,.05);
|
||||
}
|
||||
|
||||
.toolbarButton:hover:active,
|
||||
.dropdownToolbarButton:hover:active {
|
||||
background-color: hsla(0,0%,0%,.2);
|
||||
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
|
||||
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
|
||||
0 0 1px hsla(0,0%,0%,.2) inset,
|
||||
0 1px 0 hsla(0,0%,100%,.05);
|
||||
}
|
||||
|
||||
.splitToolbarButton:hover > .toolbarButton,
|
||||
.splitToolbarButton:focus > .toolbarButton,
|
||||
.splitToolbarButton.toggled > .toolbarButton,
|
||||
.toolbarButton.textButton {
|
||||
background-color: hsla(0,0%,0%,.12);
|
||||
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-clip: padding-box;
|
||||
border: 1px solid hsla(0,0%,0%,.35);
|
||||
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
|
||||
0 0 1px hsla(0,0%,100%,.15) inset,
|
||||
0 1px 0 hsla(0,0%,100%,.05);
|
||||
-webkit-transition-property: background-color, border-color, box-shadow;
|
||||
-webkit-transition-duration: 150ms;
|
||||
-webkit-transition-timing-function: ease;
|
||||
-moz-transition-property: background-color, border-color, box-shadow;
|
||||
-moz-transition-duration: 150ms;
|
||||
-moz-transition-timing-function: ease;
|
||||
-ms-transition-property: background-color, border-color, box-shadow;
|
||||
-ms-transition-duration: 150ms;
|
||||
-ms-transition-timing-function: ease;
|
||||
-o-transition-property: background-color, border-color, box-shadow;
|
||||
-o-transition-duration: 150ms;
|
||||
-o-transition-timing-function: ease;
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease;
|
||||
|
||||
}
|
||||
.splitToolbarButton > .toolbarButton:hover,
|
||||
.splitToolbarButton > .toolbarButton:focus,
|
||||
.dropdownToolbarButton:hover,
|
||||
.toolbarButton.textButton:hover,
|
||||
.toolbarButton.textButton:focus {
|
||||
background-color: hsla(0,0%,0%,.2);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
|
||||
0 0 1px hsla(0,0%,100%,.15) inset,
|
||||
0 0 1px hsla(0,0%,0%,.05);
|
||||
z-index: 199;
|
||||
}
|
||||
|
||||
|
||||
.splitToolbarButton:hover > .toolbarButton,
|
||||
.splitToolbarButton:focus > .toolbarButton,
|
||||
.splitToolbarButton.toggled > .toolbarButton,
|
||||
.toolbarButton.textButton {
|
||||
background-color: hsla(0,0%,0%,.12);
|
||||
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -ms-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: -o-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-clip: padding-box;
|
||||
border: 1px solid hsla(0,0%,0%,.35);
|
||||
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
|
||||
0 0 1px hsla(0,0%,100%,.15) inset,
|
||||
0 1px 0 hsla(0,0%,100%,.05);
|
||||
-webkit-transition-property: background-color, border-color, box-shadow;
|
||||
-webkit-transition-duration: 150ms;
|
||||
-webkit-transition-timing-function: ease;
|
||||
-moz-transition-property: background-color, border-color, box-shadow;
|
||||
-moz-transition-duration: 150ms;
|
||||
-moz-transition-timing-function: ease;
|
||||
-ms-transition-property: background-color, border-color, box-shadow;
|
||||
-ms-transition-duration: 150ms;
|
||||
-ms-transition-timing-function: ease;
|
||||
-o-transition-property: background-color, border-color, box-shadow;
|
||||
-o-transition-duration: 150ms;
|
||||
-o-transition-timing-function: ease;
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease;
|
||||
|
||||
}
|
||||
.splitToolbarButton > .toolbarButton:hover,
|
||||
.splitToolbarButton > .toolbarButton:focus,
|
||||
.dropdownToolbarButton:hover,
|
||||
.toolbarButton.textButton:hover,
|
||||
.toolbarButton.textButton:focus {
|
||||
background-color: hsla(0,0%,0%,.2);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
|
||||
0 0 1px hsla(0,0%,100%,.15) inset,
|
||||
0 0 1px hsla(0,0%,0%,.05);
|
||||
z-index: 199;
|
||||
}
|
||||
|
||||
.dropdownToolbarButton {
|
||||
border: 1px solid #333 !important;
|
||||
}
|
||||
|
||||
.toolbarButton,
|
||||
.dropdownToolbarButton {
|
||||
min-width: 16px;
|
||||
padding: 2px 6px 2px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
color: hsl(0,0%,95%);
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
/* Opera does not support user-select, use <... unselectable="on"> instead */
|
||||
cursor: default;
|
||||
-webkit-transition-property: background-color, border-color, box-shadow;
|
||||
-webkit-transition-duration: 150ms;
|
||||
-webkit-transition-timing-function: ease;
|
||||
-moz-transition-property: background-color, border-color, box-shadow;
|
||||
-moz-transition-duration: 150ms;
|
||||
-moz-transition-timing-function: ease;
|
||||
-ms-transition-property: background-color, border-color, box-shadow;
|
||||
-ms-transition-duration: 150ms;
|
||||
-ms-transition-timing-function: ease;
|
||||
-o-transition-property: background-color, border-color, box-shadow;
|
||||
-o-transition-duration: 150ms;
|
||||
-o-transition-timing-function: ease;
|
||||
transition-property: background-color, border-color, box-shadow;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
html[dir='ltr'] .toolbarButton,
|
||||
html[dir='ltr'] .dropdownToolbarButton {
|
||||
margin: 3px 2px 4px 0;
|
||||
}
|
||||
html[dir='rtl'] .toolbarButton,
|
||||
html[dir='rtl'] .dropdownToolbarButton {
|
||||
margin: 3px 0 4px 2px;
|
||||
}
|
||||
|
||||
.splitToolbarButton:hover > .splitToolbarButtonSeparator,
|
||||
.splitToolbarButton.toggled > .splitToolbarButtonSeparator {
|
||||
padding: 12px 0;
|
||||
margin: 0;
|
||||
box-shadow: 0 0 0 1px hsla(0,0%,100%,.03);
|
||||
-webkit-transition-property: padding;
|
||||
-webkit-transition-duration: 10ms;
|
||||
-webkit-transition-timing-function: ease;
|
||||
-moz-transition-property: padding;
|
||||
-moz-transition-duration: 10ms;
|
||||
-moz-transition-timing-function: ease;
|
||||
-ms-transition-property: padding;
|
||||
-ms-transition-duration: 10ms;
|
||||
-ms-transition-timing-function: ease;
|
||||
-o-transition-property: padding;
|
||||
-o-transition-duration: 10ms;
|
||||
-o-transition-timing-function: ease;
|
||||
transition-property: padding;
|
||||
transition-duration: 10ms;
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.toolbarButton.toggled:hover:active,
|
||||
.splitToolbarButton > .toolbarButton:hover:active {
|
||||
background-color: hsla(0,0%,0%,.4);
|
||||
border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
|
||||
box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
|
||||
0 0 1px hsla(0,0%,0%,.3) inset,
|
||||
0 1px 0 hsla(0,0%,100%,.05);
|
||||
}
|
||||
|
||||
html[dir='ltr'] .splitToolbarButton > .toolbarButton:first-child,
|
||||
html[dir='rtl'] .splitToolbarButton > .toolbarButton:last-child {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
margin-left: 4px;
|
||||
margin-right: -1px;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
html[dir='ltr'] .splitToolbarButton > .toolbarButton:last-child,
|
||||
html[dir='rtl'] .splitToolbarButton > .toolbarButton:first-child {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
margin-left: -1px;
|
||||
border-top-right-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
.splitToolbarButtonSeparator {
|
||||
padding: 8px 0;
|
||||
width: 1px;
|
||||
background-color: hsla(0,0%,00%,.5);
|
||||
z-index: 99;
|
||||
box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
|
||||
display: inline-block;
|
||||
margin: 5px 0;
|
||||
}
|
||||
html[dir='ltr'] .splitToolbarButtonSeparator {
|
||||
float:left;
|
||||
}
|
||||
html[dir='rtl'] .splitToolbarButtonSeparator {
|
||||
float:right;
|
||||
}
|
||||
|
||||
.dropdownToolbarButton {
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
padding: 4px 2px 4px;
|
||||
overflow: hidden;
|
||||
background: url(images/toolbarButton-menuArrows.png) no-repeat;
|
||||
}
|
||||
|
||||
.dropdownToolbarButton > select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none; /* in the future this might matter, see bugzilla bug #649849 */
|
||||
min-width: 140px;
|
||||
font-size: 12px;
|
||||
color: hsl(0,0%,95%);
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:none;
|
||||
background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
|
||||
}
|
||||
|
||||
.dropdownToolbarButton > select > option {
|
||||
background: hsl(0,0%,24%);
|
||||
}
|
||||
|
||||
#pageWidthOption {
|
||||
border-bottom: 1px rgba(255, 255, 255, .5) solid;
|
||||
}
|
||||
|
||||
|
||||
html[dir='ltr'] .dropdownToolbarButton {
|
||||
background-position: 95%;
|
||||
}
|
||||
html[dir='rtl'] .dropdownToolbarButton {
|
||||
background-position: 5%;
|
||||
}
|
||||
|
||||
|
||||
.toolbarButton.fullscreen::before {
|
||||
display: inline-block;
|
||||
content: url(images/toolbarButton-fullscreen.png);
|
||||
}
|
||||
|
||||
.toolbarButton.presentation::before {
|
||||
display: inline-block;
|
||||
content: url(images/toolbarButton-presentation.png);
|
||||
}
|
||||
|
||||
.toolbarButton.download::before {
|
||||
display: inline-block;
|
||||
content: url(images/toolbarButton-download.png);
|
||||
}
|
||||
|
||||
.toolbarButton.zoomOut::before {
|
||||
display: inline-block;
|
||||
content: url(images/toolbarButton-zoomOut.png);
|
||||
}
|
||||
|
||||
.toolbarButton.zoomIn::before {
|
||||
display: inline-block;
|
||||
content: url(images/toolbarButton-zoomIn.png);
|
||||
}
|
||||
|
||||
.toolbarButton.pageUp::before {
|
||||
display: inline-block;
|
||||
content: url(images/toolbarButton-pageUp.png);
|
||||
}
|
||||
|
||||
.toolbarButton.pageDown::before {
|
||||
display: inline-block;
|
||||
content: url(images/toolbarButton-pageDown.png);
|
||||
}
|
||||
|
||||
.toolbarField.pageNumber {
|
||||
min-width: 16px;
|
||||
text-align: right;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.toolbarField {
|
||||
padding: 3px 6px;
|
||||
margin: 4px 0 4px 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
background-color: hsla(0,0%,100%,.09);
|
||||
background-image: -moz-linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
|
||||
background-clip: padding-box;
|
||||
border: 1px solid hsla(0,0%,0%,.35);
|
||||
border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
|
||||
box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset,
|
||||
0 1px 0 hsla(0,0%,100%,.05);
|
||||
color: hsl(0,0%,95%);
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
outline-style: none;
|
||||
-moz-transition-property: background-color, border-color, box-shadow;
|
||||
-moz-transition-duration: 150ms;
|
||||
-moz-transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.toolbarField.pageNumber::-webkit-inner-spin-button,
|
||||
.toolbarField.pageNumber::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toolbarField:hover {
|
||||
background-color: hsla(0,0%,100%,.11);
|
||||
border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.43) hsla(0,0%,0%,.45);
|
||||
}
|
||||
|
||||
.toolbarField:focus {
|
||||
background-color: hsla(0,0%,100%,.15);
|
||||
border-color: hsla(204,100%,65%,.8) hsla(204,100%,65%,.85) hsla(204,100%,65%,.9);
|
||||
}
|
||||
|
||||
.toolbarLabel {
|
||||
min-width: 16px;
|
||||
padding: 3px 6px 3px 2px;
|
||||
margin: 4px 2px 4px 0;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 2px;
|
||||
color: hsl(0,0%,85%);
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: left;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#canvasContainer {
|
||||
overflow: auto;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 32px;
|
||||
left: 0;
|
||||
|
||||
text-align: center;
|
||||
|
||||
background-color: #888;
|
||||
background-image: url(images/texture.png);
|
||||
}
|
||||
|
||||
.presentationMode {
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
background-color: black !important;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);
|
||||
-webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);
|
||||
-moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);
|
||||
-ms-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);
|
||||
-o-box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
#sliderContainer {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#overlayNavigator {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
top: calc(50% - 50px);
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
z-index: 3;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 1s ease-out;
|
||||
-moz-transition: opacity 1s ease-out;
|
||||
transition: opacity 1s ease-out;
|
||||
}
|
||||
#previousPage {
|
||||
float: left;
|
||||
margin-left: 10px;
|
||||
|
||||
/* CSS triangle */
|
||||
border-top: 50px solid transparent;
|
||||
border-bottom: 50px solid transparent;
|
||||
border-right: 50px solid black;
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
#nextPage {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
|
||||
/* CSS triangle */
|
||||
border-top: 50px solid transparent;
|
||||
border-bottom: 50px solid transparent;
|
||||
border-left: 50px solid black;
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
#previousPage:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#nextPage:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
#overlayCloseButton {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 3;
|
||||
font-size: 35px;
|
||||
color: white;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
#overlayCloseButton:active {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) and (max-height: 1000px) {
|
||||
#canvasContainer {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
#titlebar, #toolbarContainer {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
background-image: none;
|
||||
}
|
||||
#overlayNavigator.touched {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
height: 100px;
|
||||
}
|
||||
#next, #previous {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
#titlebar, #toolbarContainer {
|
||||
display: none;
|
||||
}
|
||||
#canvasContainer {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
484
plugins/odfviewer/viewer.js
Normal file
484
plugins/odfviewer/viewer.js
Normal file
|
|
@ -0,0 +1,484 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright (C) 2013 KO GmbH <copyright@kogmbh.com>
|
||||
*
|
||||
* @licstart
|
||||
* The JavaScript code in this page is free software: you can redistribute it
|
||||
* and/or modify it under the terms of the GNU Affero General Public License
|
||||
* (GNU AGPL) as published by the Free Software Foundation, either version 3 of
|
||||
* the License, or (at your option) any later version. The code is distributed
|
||||
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU AGPL for more details.
|
||||
*
|
||||
* As additional permission under GNU AGPL version 3 section 7, you
|
||||
* may distribute non-source (e.g., minimized or compacted) forms of
|
||||
* that code without the copy of the GNU GPL normally required by
|
||||
* section 4, provided you include this license notice and a URL
|
||||
* through which recipients can access the Corresponding Source.
|
||||
*
|
||||
* As a special exception to the AGPL, any HTML file which merely makes function
|
||||
* calls to this code, and for that purpose includes it by reference shall be
|
||||
* deemed a separate work for copyright law purposes. In addition, the copyright
|
||||
* holders of this code give you permission to combine this code with free
|
||||
* software libraries that are released under the GNU LGPL. You may copy and
|
||||
* distribute such a system following the terms of the GNU AGPL for this code
|
||||
* and the LGPL for the libraries. If you modify this code, you may extend this
|
||||
* exception to your version of the code, but you are not obligated to do so.
|
||||
* If you do not wish to do so, delete this exception statement from your
|
||||
* version.
|
||||
*
|
||||
* This license applies to this entire compilation.
|
||||
* @licend
|
||||
* @source: http://www.webodf.org/
|
||||
* @source: http://gitorious.org/webodf/webodf/
|
||||
*/
|
||||
|
||||
/*global document, window*/
|
||||
|
||||
function Viewer(viewerPlugin, docurl) {
|
||||
"use strict";
|
||||
|
||||
var self = this,
|
||||
kScrollbarPadding = 40,
|
||||
kMinScale = 0.25,
|
||||
kMaxScale = 4.0,
|
||||
kDefaultScaleDelta = 1.1,
|
||||
kDefaultScale = 'auto',
|
||||
presentationMode = false,
|
||||
initialized = false,
|
||||
isSlideshow = false,
|
||||
url,
|
||||
viewerElement,
|
||||
canvasContainer = document.getElementById('canvasContainer'),
|
||||
overlayNavigator = document.getElementById('overlayNavigator'),
|
||||
pageSwitcher = document.getElementById('toolbarLeft'),
|
||||
zoomWidget = document.getElementById('toolbarMiddleContainer'),
|
||||
scaleSelector = document.getElementById('scaleSelect'),
|
||||
filename,
|
||||
pages = [],
|
||||
currentPage,
|
||||
scaleChangeTimer,
|
||||
touchTimer;
|
||||
|
||||
function isFullScreen() {
|
||||
// Note that the browser fullscreen (triggered by short keys) might
|
||||
// be considered different from content fullscreen when expecting a boolean
|
||||
return document.isFullScreen || document.mozFullScreen || document.webkitIsFullScreen;
|
||||
}
|
||||
|
||||
function selectScaleOption(value) {
|
||||
// Retrieve the options from the zoom level <select> element
|
||||
var options = scaleSelector.options,
|
||||
option,
|
||||
predefinedValueFound = false,
|
||||
i;
|
||||
|
||||
for (i = 0; i < options.length; i += 1) {
|
||||
option = options[i];
|
||||
if (option.value !== value) {
|
||||
option.selected = false;
|
||||
continue;
|
||||
}
|
||||
option.selected = true;
|
||||
predefinedValueFound = true;
|
||||
}
|
||||
return predefinedValueFound;
|
||||
}
|
||||
|
||||
function getPages() {
|
||||
return viewerPlugin.getPages();
|
||||
}
|
||||
|
||||
function setScale(val, resetAutoSettings, noScroll) {
|
||||
if (val === self.getZoomLevel()) {
|
||||
return;
|
||||
}
|
||||
|
||||
self.setZoomLevel(val);
|
||||
|
||||
var event = document.createEvent('UIEvents');
|
||||
event.initUIEvent('scalechange', false, false, window, 0);
|
||||
event.scale = val;
|
||||
event.resetAutoSettings = resetAutoSettings;
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
|
||||
function onScroll() {
|
||||
var pageNumber;
|
||||
|
||||
if (viewerPlugin.onScroll) {
|
||||
viewerPlugin.onScroll();
|
||||
}
|
||||
if (viewerPlugin.getPageInView) {
|
||||
pageNumber = viewerPlugin.getPageInView();
|
||||
if (pageNumber) {
|
||||
currentPage = pageNumber;
|
||||
document.getElementById('pageNumber').value = pageNumber;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function delayedRefresh(milliseconds) {
|
||||
window.clearTimeout(scaleChangeTimer);
|
||||
scaleChangeTimer = window.setTimeout(function () {
|
||||
onScroll();
|
||||
}, milliseconds);
|
||||
}
|
||||
|
||||
function parseScale(value, resetAutoSettings, noScroll) {
|
||||
var scale,
|
||||
maxWidth,
|
||||
maxHeight;
|
||||
|
||||
if (value === 'custom') {
|
||||
scale = parseFloat(document.getElementById('customScaleOption').textContent) / 100;
|
||||
} else {
|
||||
scale = parseFloat(value);
|
||||
}
|
||||
|
||||
if (scale) {
|
||||
setScale(scale, true, noScroll);
|
||||
delayedRefresh(300);
|
||||
return;
|
||||
}
|
||||
|
||||
maxWidth = canvasContainer.clientWidth - kScrollbarPadding;
|
||||
maxHeight = canvasContainer.clientHeight - kScrollbarPadding;
|
||||
|
||||
switch (value) {
|
||||
case 'page-actual':
|
||||
setScale(1, resetAutoSettings, noScroll);
|
||||
break;
|
||||
case 'page-width':
|
||||
viewerPlugin.fitToWidth(maxWidth);
|
||||
break;
|
||||
case 'page-height':
|
||||
viewerPlugin.fitToHeight(maxHeight);
|
||||
break;
|
||||
case 'page-fit':
|
||||
viewerPlugin.fitToPage(maxWidth, maxHeight);
|
||||
break;
|
||||
case 'auto':
|
||||
if (viewerPlugin.isSlideshow()) {
|
||||
viewerPlugin.fitToPage(maxWidth + kScrollbarPadding, maxHeight + kScrollbarPadding);
|
||||
} else {
|
||||
viewerPlugin.fitSmart(maxWidth);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
selectScaleOption(value);
|
||||
delayedRefresh(300);
|
||||
}
|
||||
|
||||
|
||||
this.initialize = function (url) {
|
||||
viewerElement = document.getElementById('viewer');
|
||||
filename = url.replace(/^.*[\\\/]/, '');
|
||||
document.title = filename;
|
||||
document.getElementById('documentName').innerHTML = document.title;
|
||||
|
||||
viewerPlugin.onLoad = function () {
|
||||
isSlideshow = viewerPlugin.isSlideshow();
|
||||
if (isSlideshow) {
|
||||
// No padding for slideshows
|
||||
canvasContainer.style.padding = 0;
|
||||
// Show page nav controls only for presentations
|
||||
pageSwitcher.style.visibility = 'visible';
|
||||
} else {
|
||||
// For text documents, show the zoom widget.
|
||||
zoomWidget.style.visibility = 'visible';
|
||||
// Only show the page switcher widget if the plugin supports page numbers
|
||||
if (viewerPlugin.getPageInView) {
|
||||
pageSwitcher.style.visibility = 'visible';
|
||||
}
|
||||
}
|
||||
|
||||
initialized = true;
|
||||
pages = getPages();
|
||||
document.getElementById('numPages').innerHTML = 'of ' + pages.length;
|
||||
|
||||
self.showPage(1);
|
||||
|
||||
// Set default scale
|
||||
parseScale(kDefaultScale);
|
||||
|
||||
canvasContainer.onscroll = onScroll;
|
||||
delayedRefresh();
|
||||
};
|
||||
|
||||
viewerPlugin.initialize(canvasContainer, url);
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows the 'n'th page. If n is larger than the page count,
|
||||
* shows the last page. If n is less than 1, shows the first page.
|
||||
* @return {undefined}
|
||||
*/
|
||||
this.showPage = function (n) {
|
||||
if (n <= 0) {
|
||||
n = 1;
|
||||
} else if (n > pages.length) {
|
||||
n = pages.length;
|
||||
}
|
||||
|
||||
viewerPlugin.showPage(n);
|
||||
|
||||
currentPage = n;
|
||||
document.getElementById('pageNumber').value = currentPage;
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows the next page. If there is no subsequent page, does nothing.
|
||||
* @return {undefined}
|
||||
*/
|
||||
this.showNextPage = function () {
|
||||
self.showPage(currentPage + 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* Shows the previous page. If there is no previous page, does nothing.
|
||||
* @return {undefined}
|
||||
*/
|
||||
this.showPreviousPage = function () {
|
||||
self.showPage(currentPage - 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* Attempts to 'download' the file.
|
||||
* @return {undefined}
|
||||
*/
|
||||
this.download = function () {
|
||||
var documentUrl = url.split('#')[0];
|
||||
documentUrl += '#viewer.action=download';
|
||||
window.open(documentUrl, '_parent');
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles the fullscreen state of the viewer
|
||||
* @return {undefined}
|
||||
*/
|
||||
this.toggleFullScreen = function () {
|
||||
var elem = viewerElement;
|
||||
if (!isFullScreen()) {
|
||||
if (elem.requestFullScreen) {
|
||||
elem.requestFullScreen();
|
||||
} else if (elem.mozRequestFullScreen) {
|
||||
elem.mozRequestFullScreen();
|
||||
} else if (elem.webkitRequestFullScreen) {
|
||||
elem.webkitRequestFullScreen();
|
||||
}
|
||||
} else {
|
||||
if (document.cancelFullScreen) {
|
||||
document.cancelFullScreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles the presentation mode of the viewer.
|
||||
* Presentation mode involves fullscreen + hidden UI controls
|
||||
*/
|
||||
this.togglePresentationMode = function () {
|
||||
var titlebar = document.getElementById('titlebar'),
|
||||
toolbar = document.getElementById('toolbarContainer'),
|
||||
overlayCloseButton = document.getElementById('overlayCloseButton');
|
||||
|
||||
if (!presentationMode) {
|
||||
titlebar.style.display = toolbar.style.display = 'none';
|
||||
overlayCloseButton.style.display = 'block';
|
||||
canvasContainer.className = 'presentationMode';
|
||||
isSlideshow = true;
|
||||
canvasContainer.onmousedown = function (event) {
|
||||
event.preventDefault();
|
||||
};
|
||||
canvasContainer.oncontextmenu = function (event) {
|
||||
event.preventDefault();
|
||||
};
|
||||
canvasContainer.onmouseup = function (event) {
|
||||
event.preventDefault();
|
||||
if (event.which === 1) {
|
||||
self.showNextPage();
|
||||
} else {
|
||||
self.showPreviousPage();
|
||||
}
|
||||
};
|
||||
parseScale('page-fit');
|
||||
} else {
|
||||
titlebar.style.display = toolbar.style.display = 'block';
|
||||
overlayCloseButton.style.display = 'none';
|
||||
canvasContainer.className = '';
|
||||
canvasContainer.onmouseup = function () {};
|
||||
canvasContainer.oncontextmenu = function () {};
|
||||
canvasContainer.onmousedown = function () {};
|
||||
parseScale('auto');
|
||||
isSlideshow = viewerPlugin.isSlideshow();
|
||||
}
|
||||
|
||||
presentationMode = !presentationMode;
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the zoom level of the document
|
||||
* @return {!number}
|
||||
*/
|
||||
this.getZoomLevel = function () {
|
||||
return viewerPlugin.getZoomLevel();
|
||||
};
|
||||
|
||||
/**
|
||||
* Set the zoom level of the document
|
||||
* @param {!number} value
|
||||
* @return {undefined}
|
||||
*/
|
||||
this.setZoomLevel = function (value) {
|
||||
viewerPlugin.setZoomLevel(value);
|
||||
};
|
||||
|
||||
/**
|
||||
* Zoom out by 10 %
|
||||
* @return {undefined}
|
||||
*/
|
||||
this.zoomOut = function () {
|
||||
// 10 % decrement
|
||||
var newScale = (self.getZoomLevel() / kDefaultScaleDelta).toFixed(2);
|
||||
newScale = Math.max(kMinScale, newScale);
|
||||
parseScale(newScale, true);
|
||||
};
|
||||
|
||||
/**
|
||||
* Zoom in by 10%
|
||||
* @return {undefined}
|
||||
*/
|
||||
this.zoomIn = function () {
|
||||
// 10 % increment
|
||||
var newScale = (self.getZoomLevel() * kDefaultScaleDelta).toFixed(2);
|
||||
newScale = Math.min(kMaxScale, newScale);
|
||||
parseScale(newScale, true);
|
||||
};
|
||||
|
||||
function cancelPresentationMode() {
|
||||
if (presentationMode && !isFullScreen()) {
|
||||
self.togglePresentationMode();
|
||||
}
|
||||
}
|
||||
|
||||
function showOverlayNavigator() {
|
||||
if (isSlideshow) {
|
||||
overlayNavigator.className = 'touched';
|
||||
window.clearTimeout(touchTimer);
|
||||
touchTimer = window.setTimeout(function () {
|
||||
overlayNavigator.className = '';
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
function init(docurl) {
|
||||
|
||||
self.initialize(docurl);
|
||||
|
||||
if (!(document.cancelFullScreen || document.mozCancelFullScreen || document.webkitCancelFullScreen)) {
|
||||
document.getElementById('fullscreen').style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
document.getElementById('overlayCloseButton').addEventListener('click', self.toggleFullScreen);
|
||||
document.getElementById('fullscreen').addEventListener('click', self.toggleFullScreen);
|
||||
document.getElementById('presentation').addEventListener('click', function () {
|
||||
if (!isFullScreen()) {
|
||||
self.toggleFullScreen();
|
||||
}
|
||||
self.togglePresentationMode();
|
||||
});
|
||||
|
||||
document.addEventListener('fullscreenchange', cancelPresentationMode);
|
||||
document.addEventListener('webkitfullscreenchange', cancelPresentationMode);
|
||||
document.addEventListener('mozfullscreenchange', cancelPresentationMode);
|
||||
|
||||
document.getElementById('download').addEventListener('click', function () {
|
||||
self.download();
|
||||
});
|
||||
|
||||
document.getElementById('zoomOut').addEventListener('click', function () {
|
||||
self.zoomOut();
|
||||
});
|
||||
|
||||
document.getElementById('zoomIn').addEventListener('click', function () {
|
||||
self.zoomIn();
|
||||
});
|
||||
|
||||
document.getElementById('previous').addEventListener('click', function () {
|
||||
self.showPreviousPage();
|
||||
});
|
||||
|
||||
document.getElementById('next').addEventListener('click', function () {
|
||||
self.showNextPage();
|
||||
});
|
||||
|
||||
document.getElementById('previousPage').addEventListener('click', function () {
|
||||
self.showPreviousPage();
|
||||
});
|
||||
|
||||
document.getElementById('nextPage').addEventListener('click', function () {
|
||||
self.showNextPage();
|
||||
});
|
||||
|
||||
document.getElementById('pageNumber').addEventListener('change', function () {
|
||||
self.showPage(this.value);
|
||||
});
|
||||
|
||||
document.getElementById('scaleSelect').addEventListener('change', function () {
|
||||
parseScale(this.value);
|
||||
});
|
||||
|
||||
canvasContainer.addEventListener('click', showOverlayNavigator);
|
||||
overlayNavigator.addEventListener('click', showOverlayNavigator);
|
||||
|
||||
window.addEventListener('scalechange', function (evt) {
|
||||
var customScaleOption = document.getElementById('customScaleOption'),
|
||||
predefinedValueFound = selectScaleOption(String(evt.scale));
|
||||
|
||||
customScaleOption.selected = false;
|
||||
|
||||
if (!predefinedValueFound) {
|
||||
customScaleOption.textContent = Math.round(evt.scale * 10000) / 100 + '%';
|
||||
customScaleOption.selected = true;
|
||||
}
|
||||
}, true);
|
||||
|
||||
window.addEventListener('resize', function (evt) {
|
||||
if (initialized &&
|
||||
(document.getElementById('pageWidthOption').selected ||
|
||||
document.getElementById('pageAutoOption').selected)) {
|
||||
parseScale(document.getElementById('scaleSelect').value);
|
||||
}
|
||||
showOverlayNavigator();
|
||||
});
|
||||
|
||||
window.addEventListener('keydown', function (evt) {
|
||||
var key = evt.keyCode,
|
||||
shiftKey = evt.shiftKey;
|
||||
|
||||
switch (key) {
|
||||
case 33: // pageUp
|
||||
case 38: // up
|
||||
case 37: // left
|
||||
self.showPreviousPage();
|
||||
break;
|
||||
case 34: // pageDown
|
||||
case 40: // down
|
||||
case 39: // right
|
||||
self.showNextPage();
|
||||
break;
|
||||
case 32: // space
|
||||
shiftKey ? self.showPreviousPage() : self.showNextPage();
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
init(docurl);
|
||||
}
|
||||
|
|
@ -1,192 +0,0 @@
|
|||
@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 */
|
||||
|
||||
office|document > *, office|document-content > * {
|
||||
display: none;
|
||||
}
|
||||
office|body, office|document {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
text|p, text|h {
|
||||
display: block;
|
||||
padding: 3px 3px 3px 3px;
|
||||
margin: 5px 5px 5px 5px;
|
||||
}
|
||||
text|h {
|
||||
font-weight: bold;
|
||||
}
|
||||
*[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);
|
||||
}
|
||||
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-row {
|
||||
display: table-row;
|
||||
}
|
||||
table|table-column {
|
||||
display: table-column;
|
||||
}
|
||||
table|table-cell {
|
||||
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%;
|
||||
}
|
||||
text|list {
|
||||
display: block;
|
||||
padding-left: 1.5em;
|
||||
counter-reset: list;
|
||||
}
|
||||
text|list-item {
|
||||
display: block;
|
||||
}
|
||||
text|list-item:before {
|
||||
display: inline-block;
|
||||
content: '•';
|
||||
counter-increment: list;
|
||||
width: 0.5em;
|
||||
margin-left: -0.5em;
|
||||
padding: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
text|list-item > *:first-child {
|
||||
display: inline-block;
|
||||
}
|
||||
text|a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue