Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3408 from brendandahl/fix-multiresolution

Browse Source 
[B2G] UI tweak for multi-resolution devices support on B2G
This commit is contained in:
Brendan Dahl 2013-06-28 10:11:18 -07:00
commit 4e831233a4
5 changed files with 94 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
extensions/b2g/images/div_line_left@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
extensions/b2g/images/div_line_right@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

158
extensions/b2g/viewer.css
View File

@ -35,30 +35,30 @@ body {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
padding-bottom: 50px; padding-bottom: 5rem;
} }
section { section {
overflow: hidden; overflow: hidden;
font-size: 10px; font-size: 1rem;
position: absolute; position: absolute;
top: 0px; top: 0;
left: 0px; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-size: 20px; font-size: 2rem;
} }
footer { footer {
background-image: url(images/toolbar_background.png); background-image: url(images/toolbar_background.png);
height: 40px; height: 4rem;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
z-index: 1; z-index: 1;
box-shadow: 0px -2px 5px rgba(50, 50, 50, 0.75); box-shadow: 0 -0.2rem 0.5rem rgba(50, 50, 50, 0.75);
} }
@ -78,6 +78,7 @@ footer {
height: 100%; height: 100%;
left: 0; left: 0;
background-image: url(images/icon_previous_page.png); background-image: url(images/icon_previous_page.png);
background-size: 2rem;
} }
.toolbarButton.pageDown { .toolbarButton.pageDown {
@ -86,6 +87,7 @@ footer {
height: 100%; height: 100%;
left: 18%; left: 18%;
background-image: url(images/icon_next_page.png); background-image: url(images/icon_next_page.png);
background-size: 2rem;
} }
#pageNumber { #pageNumber {
@ -96,7 +98,7 @@ footer {
text-align: center; text-align: center;
border: 0; border: 0;
background-color: transparent; background-color: transparent;
font-size: 9pt; font-size: 1.2rem;
color: #FFF; color: #FFF;
background-image: url(images/div_line_left.png), url(images/div_line_right.png); background-image: url(images/div_line_left.png), url(images/div_line_right.png);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -109,6 +111,7 @@ footer {
height: 100%; height: 100%;
left: 64%; left: 64%;
background-image: url(images/icon_zoom_out.png); background-image: url(images/icon_zoom_out.png);
background-size: 2.4rem;
} }
.toolbarButton.zoomIn { .toolbarButton.zoomIn {
@ -117,6 +120,7 @@ footer {
height: 100%; height: 100%;
left: 82%; left: 82%;
background-image: url(images/icon_zoom_in.png); background-image: url(images/icon_zoom_in.png);
background-size: 2.4rem;
} }
.toolbarButton[disabled] { .toolbarButton[disabled] {
@ -134,8 +138,8 @@ footer {
position: absolute; position: absolute;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
top: 50px; top: 5rem;
bottom: 40px; bottom: 4rem;
left: 0; left: 0;
right: 0; right: 0;
} }
@ -147,9 +151,9 @@ canvas {
.page { .page {
direction: ltr; direction: ltr;
width: 816px; width: 81.6rem;
height: 1056px; height: 105.6rem;
margin: 10px auto; margin: 1rem auto;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background-color: white; background-color: white;
@ -163,7 +167,7 @@ canvas {
.loadingIcon { .loadingIcon {
width: 2.9rem; width: 2.9rem;
height: 2.9rem; height: 2.9rem;
background: url("images/spinner.png") no-repeat scroll left top transparent; background: url("images/spinner.png") no-repeat left top / 38rem ;
border: medium none; border: medium none;
animation: 1s steps(10, end) 0s normal none infinite moveDefault; animation: 1s steps(10, end) 0s normal none infinite moveDefault;
display: block; display: block;
@ -178,79 +182,75 @@ canvas {
} }
to { to {
background-position: -390px top; background-position: -39rem top;
} }
} }
#loadingBox {
position: absolute;
top: 50%;
margin-top: -25px;
left: 0;
right: 0;
text-align: center;
color: #ddd;
font-size: 14px;
}
#loadingBar { #loadingBar {
display: inline-block; position: relative;
clear: both; height: .6rem;
margin: 0px; background-color: #333;
margin-top: 5px; border-bottom: 1px solid #333;
line-height: 0; margin-top: 5rem;
border-radius: 2px;
width: 200px;
height: 25px;
background-color: hsla(0,0%,0%,.3);
background-image: -moz-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));
border: 1px solid #000;
box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
0 0 1px hsla(0,0%,0%,.2) inset,
0 0 1px 1px rgba(255, 255, 255, 0.1);
} }
#loadingBar .progress { #loadingBar .progress {
display: inline-block; position: absolute;
float: left; left: 0;
background: #666;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2b2b2), color-stop(100%,#898989));
background: -webkit-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: -moz-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: -ms-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: -o-linear-gradient(top, #b2b2b2 0%,#898989 100%);
background: linear-gradient(top, #b2b2b2 0%,#898989 100%);
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
width: 0%; width: 0%;
height: 100%; height: 100%;
} background-color: #ddd;
overflow: hidden;
#loadingBar .progress.full { -moz-transition: width 200ms;
border-top-right-radius: 2px; -ms-transition: width 200ms;
border-bottom-right-radius: 2px; -webkit-transition: width 200ms;
} transition: width 200ms;
#loadingBar .progress.indeterminate {
width: 100%;
height: 25px;
background-image: -moz-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
background-image: -webkit-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
background-image: -ms-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
background-image: -o-linear-gradient( 30deg, #404040, #404040 15%, #898989, #404040 85%, #404040);
background-size: 75px 25px;
-moz-animation: progressIndeterminate 1s linear infinite;
-webkit-animation: progressIndeterminate 1s linear infinite;
} }
@-moz-keyframes progressIndeterminate { @-moz-keyframes progressIndeterminate {
from { background-position: 0px 0px; } 0% { left: 0%; }
to { background-position: 75px 0px; } 50% { left: 100%; }
100% { left: 100%; }
}
@-ms-keyframes progressIndeterminate {
0% { left: 0%; }
50% { left: 100%; }
100% { left: 100%; }
}
@-webkit-keyframes progressIndeterminate {
0% { left: 0%; }
50% { left: 100%; }
100% { left: 100%; }
}
@keyframes progressIndeterminate {
0% { left: 0%; }
50% { left: 100%; }
100% { left: 100%; }
}
#loadingBar .progress.indeterminate {
background-color: #999;
-moz-transition: none;
-ms-transition: none;
-webkit-transition: none;
transition: none;
}
#loadingBar .indeterminate .glimmer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 5rem;
background-image: linear-gradient(to right, #999 0%, #fff 50%, #999 100%);
background-size: 100% 100% no-repeat;
-moz-animation: progressIndeterminate 2s linear infinite;
-ms-animation: progressIndeterminate 2s linear infinite;
-webkit-animation: progressIndeterminate 2s linear infinite;
animation: progressIndeterminate 2s linear infinite;
} }
#errorWrapper { #errorWrapper {
@ -259,9 +259,9 @@ canvas {
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 32px; top: 3.2rem;
z-index: 1000; z-index: 1000;
padding: 3px; padding: 0.3rem;
font-size: 0.8em; font-size: 0.8em;
} }
@ -276,7 +276,7 @@ canvas {
#errorMoreInfo { #errorMoreInfo {
background-color: #FFFFFF; background-color: #FFFFFF;
color: black; color: black;
padding: 3px; padding: 0.3rem;
margin: 3px; margin: 0.3rem;
width: 98%; width: 98%;
} }

20
extensions/b2g/viewer.html
View File

@ -25,6 +25,7 @@ limitations under the License.
<link rel="resource" type="application/l10n" href="locale.properties"/> <link rel="resource" type="application/l10n" href="locale.properties"/>
<link rel="stylesheet" href="/shared/style/headers.css" type="text/css" /> <link rel="stylesheet" href="/shared/style/headers.css" type="text/css" />
<link rel="stylesheet" href="viewer-b2g.css" type="text/css" /> <link rel="stylesheet" href="viewer-b2g.css" type="text/css" />
<link rel="stylesheet" href="/shared/style/responsive.css" type="text/css" />
<script type="text/javascript" src="l10n.js"></script> <script type="text/javascript" src="l10n.js"></script>
<script type="text/javascript" src="../build/pdf.js"></script> <script type="text/javascript" src="../build/pdf.js"></script>
<script type="text/javascript" src="/shared/js/async_storage.js"></script> <script type="text/javascript" src="/shared/js/async_storage.js"></script>
@ -51,8 +52,8 @@ limitations under the License.
<input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1"> <input type="number" id="pageNumber" class="toolbarField pageNumber" value="1" size="4" min="1">
<button class="toolbarButton zoomOut" title="Zoom Out" id="zoom_out" data-l10n-id="zoom_out"></button> <button class="toolbarButton zoomOut" title="Zoom Out" id="zoomOut" data-l10n-id="zoom_out"></button>
<button class="toolbarButton zoomIn" title="Zoom In" id="zoom_in" data-l10n-id="zoom_in"></button> <button class="toolbarButton zoomIn" title="Zoom In" id="zoomIn" data-l10n-id="zoom_in"></button>
</footer> </footer>
</section> </section>
@ -60,9 +61,9 @@ limitations under the License.
<div id="viewer"></div> <div id="viewer"></div>
</div> </div>
<div id="loadingBox"> <div id="loadingBar">
<div id="loading"></div> <div class="progress"></div>
<div id="loadingBar"><div class="progress"></div></div> <div class="glimmer"></div>
</div> </div>
<div id="errorWrapper" hidden='true'> <div id="errorWrapper" hidden='true'>
@ -119,6 +120,7 @@ limitations under the License.
<span id="numPages"></span> <span id="numPages"></span>
</div> </div>
<div id="toolbarViewerRight"> <div id="toolbarViewerRight">
<button id="presentationMode"></button>
<input id="fileInput" type="file" /> <input id="fileInput" type="file" />
<button id="fullscreen"></button> <button id="fullscreen"></button>
<button id="openFile"></button> <button id="openFile"></button>
@ -147,10 +149,10 @@ limitations under the License.
</div> </div>
</div> </div>
<menu type="context" id="viewerContextMenu"> <menu type="context" id="viewerContextMenu">
<menuitem id="first_page"></menuitem> <menuitem id="firstPage"></menuitem>
<menuitem id="last_page"></menuitem> <menuitem id="lastPage"></menuitem>
<menuitem id="page_rotate_ccw"></menuitem> <menuitem id="pageRotateCcw"></menuitem>
<menuitem id="page_rotate_cw"></menuitem> <menuitem id="pageRotateCw"></menuitem>
</menu> </menu>
</div> <!-- mainContainer --> </div> <!-- mainContainer -->

4
src/network.js
View File

@ -46,7 +46,11 @@ var NetworkManager = (function NetworkManagerClosure() {
this.httpHeaders = args.httpHeaders || {}; this.httpHeaders = args.httpHeaders || {};
this.getXhr = args.getXhr || this.getXhr = args.getXhr ||
function NetworkManager_getXhr() { function NetworkManager_getXhr() {
//#if B2G
// return new XMLHttpRequest({ mozSystem: true });
//#else
return new XMLHttpRequest(); return new XMLHttpRequest();
//#endif
}; };
this.currXhrId = 0; this.currXhrId = 0;