Skip to content
This repository was archived by the owner on Dec 9, 2018. It is now read-only.

adding GUI similar to pdf.js #505

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

adding GUI similar to pdf.js #505

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 165 additions & 3 deletions share/base.css.in
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,18 @@
/* Part 1: Web Page Layout: Free to modify, except for a few of them which are required by pdf2htmlEX.js, see the comments */
#sidebar { /* Sidebar */
position:absolute;
top:0;
top:32px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To adjust the fixed top bar nav height.

left:0;
bottom:0;
width:250px;
padding:0;
margin:0px;
overflow:auto;
display:none; /* we will show it when user toggle the sidebar from navbar */
}
#page-container { /* PDF container */
position:absolute; /* required for calculating relative positions of pages in pdf2htmlEX.js */
top:0;
top:32px;
left:0px;
margin:0;
padding:0;
Expand Down Expand Up @@ -79,7 +80,7 @@
position:relative;
background-color:white;
overflow: hidden;
margin:0;
margin:0 auto;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On Safari the CSS_PAGE_FRAME_CN class with margin:0; results in the content shifted to left instead of staying at center, adding auto fixed it.

border:0; /* required by pdf2htmlEX.js for page visibility test */
}
.@CSS_PAGE_CONTENT_BOX_CN@ { /* content of a page */
Expand Down Expand Up @@ -190,4 +191,165 @@
-ms-transform-origin:0% 100%;
-webkit-transform-origin:0% 100%;
}
/* Nav Bar CSS START */
/* Mostly taken from the pdf.js styling */
.pull-left {
float: left
}
.pull-right {
float: right;
}
.hide {
display: none !important;
}
.show {
display: inline-block !important;
}
nav.fixed-nav-bar {
box-shadow: 1px 0 0 hsla(0, 0%, 100%, 0.08) inset, 0 1px 1px hsla(0, 0%, 0%, 0.15) inset, 0 -1px 0 hsla(0, 0%, 100%, 0.05) inset, 0 1px 0 hsla(0, 0%, 0%, 0.15), 0 1px 1px hsla(0, 0%, 0%, 0.1);
height: 32px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
nav.fixed-nav-bar ul {
list-style: none;
margin-top: 4px;
}
nav.fixed-nav-bar .splitToolbarButton {
display: inline-block;
margin: 0 2px 0 15px;
}
nav.fixed-nav-bar .splitToolbarButtonSeparator {
background-color: hsla(0, 0%, 0%, 0.5);
box-shadow: 0 0 0 1px hsla(0, 0%, 100%, 0.08);
display: inline-block;
padding: 8px 0;
width: 1px;
z-index: 99;
}
nav.fixed-nav-bar .toolbarButton {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
height: 25px;
width: 32px;
cursor: default;
}
nav.fixed-nav-bar .toolbarButton:hover, nav.fixed-nav-bar .toolbarButton.active {
background-color: hsla(0,0%,0%,.12);
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;
transition-property: background-color, border-color, box-shadow;
transition-duration: 150ms;
transition-timing-function: ease;
}
nav.fixed-nav-bar .toolbarButton[disabled] {
opacity: 0.5;
}

nav.fixed-nav-bar .toolbarButton.sidebarToggle::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAqElEQVR4Aa3QoQrCUBSH8W/3JdZtIqgPZPIxVoaGYVpcNwoGm0bBRxh2rZchw7C0e64Xxk7RYdn/FwYL34Fr+DMD/uxfAy4e42FBM2AOBmiR4ykpkgKJVr3tBqEFAwgyu2VlViL+2ksPSIABHG7aAODQ+Tcu6E4EAOgX6P5rAbSgG6cw5onJV2GJFiRYswuEu9rrQ9kHQk0VCJWqEfu0GEucR+lvcR7zAZWDlG3B7eMJAAAAAElFTkSuQmCC');
}

nav.fixed-nav-bar .toolbarButton.pageUp::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAvUlEQVR4AZXPMcrCQBDF8WksLHMCz2Bh6YfgLSwtvIp4BFsLWwmRxMJGVFAQBAshEPkkBNEDJE2K54PssktcC/ObZtg/hJEfP6xIbAJbhAdF34IQGVLKELqCJZ/uSsqtFgT4x83gFtiBjwRxTQJfBwuuV4eYLyKctvSEcDG4E1/sD2fDfebJ0nQE5Q4HLe/kUuFozzn2WjEppMLRpgNssFWO6H/8Qrzx8DUr18yIyQieCVTCw7rqxD9pSUPkDcScIefy5+KaAAAAAElFTkSuQmCC');
}
nav.fixed-nav-bar .toolbarButton.pageDown::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAtUlEQVR4AY3KQQqCQBTG8QdBJ6hFq+7gCTpEB4k6ULQQEUQYqBNI0CIIWgRFgZSFONLehX3F1PON2aL5LebB96c/HrqYIMXdSDDHACQIRG3qT8e4IHm54vZI7YS/zsHFmRWLglh1zIaIWXksiVXHqIeThZgcLeyFHYidqAcKsbG1xIYyATlaYdOkFTn0eU4eYl2XhzKbJAuwElnAs5VoH8s37duznXiIEGlP5mbialfmn8n3/ATF/vfFQRwIrAAAAABJRU5ErkJggg==');
}
nav.fixed-nav-bar .toolbarButton.search::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAA/ElEQVQYGZ3Bv0oCAQDH8d8QNCrkJm0NTunQmGtYtPQCprj1AG05mDnW2hM4BKVjCkXYP5SDAz0kRQfxEHuCrPPu26J4UQ31+Uh/Q4ISAwaU2dZ3HDHGZsgQmzHH+ootbLdXyW/s7O5V8m4Pm4T8JiX61ZzCWtKywtc5+pOy/FyLTiqimVSEjmvJzzFpd8Kaqa/Qdkz5vV7SfMto5iNNc3wlv8dDTK9FkgABkl4L8yKjBaLTBgYGFl26WBjmqUKaI+o1qE/vq9lR0ak5tVHx/EBrmmOdZ56md4W0VhVTXHHFFNKCd8ODc3uSUlA/ezl7rxT2FdSvItpUUP/zCZK2jEiR7TfaAAAAAElFTkSuQmCC');
}
nav.fixed-nav-bar .toolbarButton.presentationMode::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABCElEQVQoU2NgIAz+v4PCOrhIHUwMwn0CgpfmMijB9ShdnA0RhSh4BILfjvwXhpvA920PRBTCfXBp1sfD/x/+OwBR8p/v3/b/j76cvDzn/wOwgtOTGVTcnD4c/H/vRzqI/z3p//3Px0M8GVSBMhAbgZjVzWlHE4MMmC+1pxUozQ6VgQNWqDQIyIKlSQT/ef8Hwdlh/4WQpdJB0v/W/L/6PxIqffXfFpCS/+kQBRf/5/5b9f/Mp60NeiB+jsb7Df9P/9v8v+D/RYiCo//P/T/5abO/O9RprPaO79f9PwkUPQpRcBgEzzQjuZz1dANEFKLgIBie/J8Md1Xy/1MQUQjfAQrl4CbIwcUYAPaYrBx6Om1JAAAAAElFTkSuQmCC');
}
nav.fixed-nav-bar .toolbarButton.zoomOut::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAH0lEQVR4AWMYUeD/OyyQAQSBCAwvYUIUBQwOWOAwAgBbHjPhdhuBHAAAAABJRU5ErkJggg==');
}
nav.fixed-nav-bar .toolbarButton.zoomIn::before {
content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAT0lEQVR4AWOgO/j/DggZkCHLf1QV39C1sKDx/5CsgBFqxWMo/wsQ80DZssgmvAcRGGyEAsY8qC/6gOwifN48CYRo3qTUFwyoBjI4ACGVAQCo9CsjniAahgAAAABJRU5ErkJggg==');
}
nav.fixed-nav-bar .toolbarLabel {
-moz-user-select: none;
border: 1px solid transparent;
border-radius: 2px;
color: hsl(0, 0%, 85%);
cursor: default;
font-size: 12px;
line-height: 14px;
min-width: 16px;
padding-left: 5px;
text-align: left;
font: message-box;
}
nav.fixed-nav-bar .toolbarField.pageNumber {
-moz-appearance: textfield;
min-width: 16px;
text-align: right;
width: 40px;
}
nav.fixed-nav-bar .toolbarField {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-clip: padding-box;
background-color: hsla(0, 0%, 100%, 0.09);
background-image: linear-gradient(hsla(0, 0%, 100%, 0.05), hsla(0, 0%, 100%, 0));
border-color: hsla(0, 0%, 0%, 0.32) hsla(0, 0%, 0%, 0.38) hsla(0, 0%, 0%, 0.42);
border-image: none;
border-radius: 2px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.05) inset, 0 1px 0 hsla(0, 0%, 100%, 0.05);
color: hsl(0, 0%, 95%);
font-size: 12px;
line-height: 14px;
outline-style: none;
padding: 3px 6px;
transition-duration: 150ms;
transition-property: background-color, border-color, box-shadow;
transition-timing-function: ease;
}
nav.fixed-nav-bar .left-menu {
float: left;
margin-left: 5px;
padding: 0px;
}
nav.fixed-nav-bar .right-menu {
float: right;
margin-right: 5px;
padding: 0px;
}
nav.fixed-nav-bar .middle-menu {
float: right;
margin-right: 50%;
padding: 0px;
}
nav.fixed-nav-bar .left-menu li {
float: left;
}
nav.fixed-nav-bar .right-menu li {
float: right;
}
.sbl_active{
color: #0cf !important;
}
/* disable text input type=number spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Nav Bar CSS END */
/* Base CSS END */
32 changes: 18 additions & 14 deletions share/build_js.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,23 @@
BASEDIR=$(dirname $0)
CLOSURE_COMPILER_DIR="$BASEDIR/../3rdparty/closure-compiler"
CLOSURE_COMPILER_JAR="$CLOSURE_COMPILER_DIR/compiler.jar"
INPUT="$BASEDIR/pdf2htmlEX.js"
OUTPUT_FN="pdf2htmlEX.min.js"
OUTPUT="$BASEDIR/$OUTPUT_FN"
build () {
INPUT="$BASEDIR/$1"
OUTPUT_FN="$2"
OUTPUT="$BASEDIR/$OUTPUT_FN"

(echo "Building $OUTPUT_FN with closure-compiler..." && \
java -jar "$CLOSURE_COMPILER_JAR" \
--compilation_level ADVANCED_OPTIMIZATIONS \
--warning_level VERBOSE \
--output_wrapper "(function(){%output%})();" \
--js "$INPUT" \
--js_output_file "$OUTPUT" && \
echo 'Done.') || \
(echo 'Failed. Read `3rdparty/closure-compiler/README` for more detail.' && \
echo 'Using the uncompressed version.' && \
cat "$INPUT" > "$OUTPUT")
(echo "Building $OUTPUT_FN with closure-compiler..." && \
java -jar "$CLOSURE_COMPILER_JAR" \
--compilation_level $3 \
--warning_level VERBOSE \
--output_wrapper "(function(){%output%})();" \
--js "$INPUT" \
--js_output_file "$OUTPUT" && \
echo 'Done.') || \
(echo 'Failed. Read `3rdparty/closure-compiler/README` for more detail.' && \
echo 'Using the uncompressed version.' && \
cat "$INPUT" > "$OUTPUT")
}

build "pdf2htmlEX.js.in" "pdf2htmlEX.min.js" "ADVANCED_OPTIMIZATIONS"
build "navbar.js.in" "navbar.min.js" "SIMPLE_OPTIMIZATIONS"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Somehow the ADVANCED_OPTIMIZATIONS breaks the code, had to compile the navbar.js with SIMPLE_OPTIMIZATIONS compilation level.

43 changes: 43 additions & 0 deletions share/manifest
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,14 @@
@base.min.css
# fancy CSS styles - Optional
@fancy.min.css
"""
<style>
body, #page-container, nav.fixed-nav-bar {
background-color: #404040; /* set what ever color you like the navbar will adopt it */
background-image: url('data:image/png;base64,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');
}
</style>
"""
# PDF specific CSS styles - Do not modify
$css

Expand All @@ -56,13 +64,48 @@ try{
}catch(e){}
</script>
"""
# must be included after @pdf2htmlEX.min.js and initialization of pdf2htmlEX.Viewer
@navbar.min.js

#############
# Do not modify
"""
<title></title>
</head>
<body>
<nav class="fixed-nav-bar">
<ul class="left-menu">
<li>
<button tabindex="11" title="Toggle Sidebar" class="toolbarButton sidebarToggle hide" id="sidebarToggle"></button>
</li>
<li>
<div class="splitToolbarButton">
<button tabindex="12" id="previous" title="Previous Page (alt+pageUp)" class="toolbarButton pageUp" disabled=""></button>
<div class="splitToolbarButtonSeparator"></div>
<button tabindex="13" id="next" title="Next Page (alt+pageDown)" class="toolbarButton pageDown"></button>
</div>
</li>
<li>
<label id="pageNumberLabel" class="toolbarLabel" for="pageNumber">Page:</label>
<input id="pageNumber" class="toolbarField pageNumber" type="number" tabindex="14" min="1" size="4" value="1" max="">
<span id="numPages" class="toolbarLabel"></span>
</li>
</ul>
<ul class="right-menu">
<li>
<button tabindex="17" id="presentationMode" title="Switch to presentation mode" class="toolbarButton presentationMode"></button>
</li>
</ul>
<ul class="middle-menu">
<li>
<div class="splitToolbarButton">
<button tabindex="15" title="Zoom Out (ctrl-)" class="toolbarButton zoomOut" id="zoomOut"></button>
<div class="splitToolbarButtonSeparator"></div>
<button tabindex="16" title="Zoom In (ctrl+)" class="toolbarButton zoomIn" id="zoomIn"></button>
</div>
</li>
</ul>
</nav>
"""

#############
Expand Down
Loading