+body {
+ background-color: #939598;
+ font-size: 67.5%;
+ margin: 0;
+ padding: 0;
+}
+h3 {
+ font-size: 20px;
+ font-family: "News Gothic MT","Trebuchet MS",Geneva,Helvetica,sans-serif;
+ font-weight: 700;
+ color: #dedede;
+}
#BookReader {
- border:1px solid black;
position:absolute;
font-family: arial, sans-serif;
+ left:0;
+ right:0;
+ top:0;
+ bottom:0;
}
-
#BRtoolbar {
- height:25px;
- width:100%;
- background-color: #E6E4E1;
- overflow: hidden;
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 50px;
+ padding: 0;
+ width: 100%;
+ z-index: 100;
+ background-color: #e2dcc5;
}
-
#BRtoolbar .label {
- font-size: 0.9em;
+ font-size: 1.1em;
+ color: #999;
+}
+#BRtoolbar a {
+ color: #ccc!important;
+ text-decoration: underline;
}
#BRcontainer {
- /*height:95%;*/
- top:25px;
- bottom:0px;
+ top:5px;
+ bottom:5px;
width:100%;
+ z-index: 1;
overflow-x:auto;
overflow-y:scroll;
- /*text-align: center;*/
- background-color: #FCFCFC;
position:absolute;
}
#BRpageview {
- background-color: #FCFCFC;
+ background-color: #939598;
}
.BRpagediv1up {
- background-color: #FFFFEE;
+ background-color: #939598;
overflow:hidden;
- border-right: 2px solid #717171;
- border-bottom: 2px solid #717171;
- border-left: 1px solid #909090;
- border-top: 1px solid #909090;
cursor: move;
}
.BRpagedivthumb {
- background-color: #FFFFEE;
+ background-color: #939598;
overflow:hidden;
- border: 1px solid #909090;
}
.BRpagedivthumb a {
/* Must come after .BRpagedivthumb rules in order to override them */
.BRpagedivthumb_highlight {
- background-color: #FFFFEE;
+ background-color: #939598;
overflow:hidden;
- border: 1px solid #000000;
}
.BRpagediv2up {
border-style: solid none solid solid;
border-color: rgb(51, 51, 34);
border-width: 1px 0px 1px 1px;
- background: transparent url(images/left_edges.png) repeat scroll 0% 0%;
+ /* background: transparent url(images/left_edges.png) repeat scroll 0% 0%; */
+ background: transparent url(image/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
position: absolute;
}
border-style: solid none solid solid;
border-color: rgb(51, 51, 34);
border-width: 1px 0px 1px 1px;
- background: transparent url(images/left_edges.png) repeat scroll 0% 0%;
+ /* background: transparent url(images/left_edges.png) repeat scroll 0% 0%; */
+ background: transparent url(images/back_pages.png) repeat scroll 0% 0%; /* XXXmang replace file */
position: absolute;
}
filter: alpha(opacity = 20);
background-color: #00f;
position:absolute;
+
+.hidden {
+ display: none;
}
.BRpageform {
display: inline;
}
+#BRpagenum {
+ border: none;
+ background-color: #939598;
+ color: #ccc;
+ font-family: arial, sans-serif;
+ font-size: 12px;
+ font-weight: 700;
+}
.BRicon {
- width: 24px;
- height: 24px;
- padding: 0px;
+ display: block;
+ float: left;
+ width: 50px;
+ height: 50px;
+ padding: 0;
+ margin: 0;
vertical-align: middle;
border: none;
+ cursor: pointer;
+ background-color: transparent;
+ background-image: url(images/BRicons.png);
+ background-repeat: no-repeat;
}
/* Absolute path used since the html might be generated at /stream/id or elsewhere */
-.BRicon.logo { background: url(images/logo_icon.png) no-repeat; }
-.BRicon.zoom_out { background: url(images/zoom_out_icon.png) no-repeat; }
-.BRicon.zoom_in { background: url(images/zoom_in_icon.png) no-repeat; }
-.BRicon.one_page_mode { background: url(images/one_page_mode_icon.png) no-repeat; }
-.BRicon.two_page_mode { background: url(images/two_page_mode_icon.png) no-repeat; }
-.BRicon.thumbnail_mode { background: url(images/thumbnail_mode_icon.png) no-repeat; }
-.BRicon.embed { background: url(images/embed_icon.png) no-repeat; }
-.BRicon.print { background: url(images/print_icon.png) no-repeat; }
-.BRicon.book_left { background: url(images/book_left_icon.png) no-repeat; }
-.BRicon.book_right { background: url(images/book_right_icon.png) no-repeat; }
-.BRicon.book_up { background: url(images/book_up_icon.png) no-repeat; }
-.BRicon.book_down { background: url(images/book_down_icon.png) no-repeat; }
-.BRicon.book_leftmost { background: url(images/book_leftmost_icon.png) no-repeat; }
-.BRicon.book_rightmost { background: url(images/book_rightmost_icon.png) no-repeat; }
-.BRicon.book_top { background: url(images/book_top_icon.png) no-repeat; }
-.BRicon.book_bottom { background: url(images/book_bottom_icon.png) no-repeat; }
-
-
-.BRicon.play { background: url(images/control_play_icon.png) no-repeat; }
-.BRicon.pause { background: url(images/control_pause_icon.png) no-repeat; }
-
-/* Icons with this class should have a 48x24 image which contains
- the regular and hover images side-by-side */
-.BRicon.rollover:hover { background-position: -24px 0; }
-
-/* Special logic for the logo, which is an actual link */
-a.BRicon {
+.BRicon.logo {background-position:0 0;}
+.BRicon.fit {background-position:-50px 0;}
+.BRicon.fit:hover {background-position:-100px 0;}
+.BRicon.glass {background-position:-150px 0;cursor:default;}
+/*.BRicon.glass:hover {background-position:-200px 0;}*/
+.BRicon.bookmark {background-position:-250px 0;}
+.BRicon.bookmark:hover {background-position:-300px 0;}
+.BRicon.print {background-position:-350px 0;}
+.BRicon.print:hover {background-position:-400px 0;}
+.BRicon.link {background-position:-450px 0;}
+.BRicon.link:hover {background-position:-500px 0;}
+.BRicon.embed {background-position:-550px;}
+.BRicon.embed:hover {background-position:-600px 0;}
+.BRicon.read {background-position:-650px 0;}
+.BRicon.read:hover {background-position:-700px 0;}
+.BRicon.full {background-position:-750px 0;}
+.BRicon.full:hover {background-position:-800px 0;}
+.BRicon.thumb {background-position:-850px 0;}
+.BRicon.thumb:hover {background-position:-900px 0;}
+.BRicon.twopg {background-position:-950px 0;display:none;}
+.BRicon.twopg:hover {background-position:-1000px 0;}
+
+/* NOT CURRENTLY IN USE
+.BRicon.zoom_out {background-position:;}
+.BRicon.zoom_out:hover {background-position:;}
+.BRicon.zoom_in {background-position:;}
+.BRicon.zoom_in:hover {background-position:;}
+.BRicon.one_page_mode {background-position:;}
+.BRicon.two_page_mode {background-position:;}
+.BRicon.thumbnail_mode {background-position:;}
+.BRicon.book_left {background-position:;}
+.BRicon.book_right {background-position:;}
+.BRicon.book_up {background-position:;}
+.BRicon.book_down {background-position:;}
+.BRicon.book_leftmost {background-position:;}
+.BRicon.book_rightmost {background-position:;}
+.BRicon.book_top {background-position:;}
+.BRicon.book_bottom {background-position:;}
+.BRicon.play {background-position:;}
+.BRicon.pause {background-position:;}
+*/
+a.logo {
display: block;
- text-decoration: none;
- border: none;
float: left;
+ width: 57px;
+ height: 46px;
+ background: transparent url(images/icon_home.png) no-repeat 0 0;
+ margin: 12px 10px 0 10px;
+}
+a.popOff {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ width: 24px;
+ height: 24px;
+ background-image: url(images/BRicons.png);
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: -1050px 0;
+ outline: none;
+}
+a.popOff:hover {
+ background-position: -1100px 0;
+}
+a.popOff span {
+ position: absolute;
+ left: -10000px;
}
-/* footer stuff, from Rebecca's demo */
-#BRfooter {
- position:absolute;
- bottom: 1px; /* ensure no vertical scroll bar in FF */
- left: 0px;
- /*width: 100%;*/ /* this causes horizontal scroll bar in FF */
- right: 0px;
- clear: both;
- color: #000000;
- padding: 0px 0px 0px 10px;
- background: #CCCCCC;
- height: 2em;
- line-height: 25px;
- vertical-align: middle;
- font-family: arial, sans-serif;
+form#booksearch {
+ float: left;
+ margin-right: 40px;
+}
+form#booksearch input[type=search] {
+ width: 216px;
+ height: 24px;
+ line-height: 24px;
+ font-family: "Arial", sans-serif;
font-size: 12px;
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: field;
+ margin-top: 13px;
+}
+form#booksearch button {
+ width: 30px;
+ height: 24px;
+ line-height: 24px;
+ border: none;
+ background-color: #000;
+ text-align: center;
+ color: #fff;
+ font-family: "News Gothic MT","Trebuchet MS",Geneva,Helvetica,sans-serif;
+ font-weight: 700;
+ font-size: 11px;
+ text-transform: uppercase;
+ margin: 10px 0 0 5px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
}
.BRlogotype {
a.BRwhite:hover { text-decoration: none; }
a.BRwhite:visited { color: #fff }
-a.BRblack { color: #000000 }
+a.BRblack { color: #000; }
a.BRblack:hover { text-decoration: none; }
-a.BRblack:visited { color: #000000 }
+a.BRblack:visited { color: #000; }
+
+a.BRgrey { color: #999; }
+a.BRgrey:hover { text-decoration: none; }
+a.BRgrey:visited { color: #666; }
.BRnavlinks {
float:right;
- padding: 0px 20px 0px 0px;
- margin: 0px;
+ padding: 0 20px 0 0;
+ margin: 0;
height: 25px;
line-height: 25px;
vertical-align: middle;
height: 65px;
bottom: 25px;
width: 100%;
- background-color: #f8f8f8;
- border-top: 1px solid #ccc;
+ background-color: #222;
text-align: right;
padding: 0px 0px 0px 0px;
}
background-image: url(images/transparent.png); # Required to capture mouse on IE
}
+/* XXXmang still needed? */
.BRtwoPagePopUp {
border: 1px solid black;
padding: 2px 6px;
font-size: 14px;
background-color: rgb(255, 255, 238);
opacity: 0.85;
-}
\ No newline at end of file
+}
+
+/* COLORBOX POP-UP */
+
+#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999;}
+#cboxOverlay{position:fixed; width:100%; height:100%;background:#000;opacity:0.75;filter:Alpha(Opacity=75);}
+#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
+#cboxContent{position:relative;}
+#cboxLoadedContent{overflow:visible!important;}
+#cboxLoadedContent iframe{display:block;border:0;}
+#cboxTitle{margin:0;display:none!important;}
+#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:25px; left:25px; width:100%;}
+#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
+#cboxClose{display:none!important;}
+
+#colorBox{}
+ #cboxContent{background:#fff;padding:0;border:10px solid #615132;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;-moz-box-shadow: 1px 3px 10px #000;-webkit-box-shadow: 1px 3px 10px #000;box-shadow: 1px 3px 10px #000;}
+ #cboxLoadedContent{background:#fff;margin:0;}
+ #cboxLoadingOverlay{background:transparent;}
+ /* XXXmang where is icon_close? */
+ #cboxClose{position:absolute;top:20px;right:20px;display:block;width:32px;height:32px;background-image:url(/images/icons/icon_close-pop.png);background-position:0 0;background-repeat:no-repeat;}
+ #cboxClose:hover{background-position:0 -32px;}
+
+div#BRnav {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 50px;
+ overflow: visible;
+ z-index: 100;
+ background-color: #e2dcc5;
+}
+div#BRnavpos {
+ position: relative;
+ width: 100%;
+ height: 50px;
+}
+div#BRnavline {
+ position: relative;
+ margin: 0 20px;
+ height: 2px;
+ width: auto;
+ background-color: #000;
+ top: 24px;
+}
+div.chapter {
+ position: absolute;
+ top: 0;
+ width: 18px;
+ height: 27px;
+ background: transparent url(images/marker_chap.png) no-repeat;
+ cursor: pointer;
+}
+div.chapter div.title {
+ display: none;
+}
+div.title span {
+ color: #666;
+ padding: 0 5px;
+}
+div.search {
+ position: absolute;
+ top: 0;
+ width: 18px;
+ height: 27px;
+ background-color: transparent;
+ background-image: url(images/marker_srch-off.png);
+ background-repeat: no-repeat;
+ cursor: pointer;
+}
+div.search.front {
+ background: transparent url(images/marker_srch-on.png) no-repeat;
+}
+div.search div.query,div.searchChap div.query {
+ display: none;
+}
+div.query {
+ position: relative;
+}
+div.query strong {
+ color: #000;
+ font-weight: 700;
+}
+div.query span {
+ font-size: 10px;
+ color: #666;
+ font-style: italic;
+}
+div.query div.queryChap {
+ position: absolute;
+ top: -40px;
+ left: -13px;
+ width: 256px;
+ overflow: hidden;
+ text-align: center;
+ background: #000;
+ padding: 5px 10px;
+ color: #fff;
+ font-weight: 700;
+ font-size: 11px;
+}
+div.query div.queryChap span {
+ color: #666;
+ padding: 0 5px;
+ font-style: normal;
+}
+div.search div.pointer {
+ position: absolute;
+ left: 121px;
+ bottom: -14px;
+ width: 18px;
+ height: 27px;
+ background: transparent url(images/marker_srch-on.png) no-repeat;
+}
+div.searchChap {
+ position: absolute;
+ top: 0;
+ width: 18px;
+ height: 27px;
+ background-color: transparent;
+ background-image: url(images/marker_srchchap-off.png);
+ background-repeat: no-repeat;
+ cursor: pointer;
+}
+div.searchChap.front {
+ background-image: url(images/marker_srchchap-on.png);
+}
+#BRnav .front {
+ z-index: 10001;
+}
+div#pager {
+ position: absolute;
+ top: 11px;
+ left: 5px;
+ width: 30px;
+ height: 30px;
+ background: transparent url(images/focus_chap.png) no-repeat 0 0;
+ cursor: e-resize;
+}
function BookReader() {
this.reduce = 4;
- this.padding = 10;
+ this.padding = 0;
this.mode = 1; //1, 2, 3
this.ui = 'full'; // UI mode
// Object to hold parameters related to 2up mode
this.twoPage = {
- coverInternalPadding: 10, // Width of cover
- coverExternalPadding: 10, // Padding outside of cover
- bookSpineDivWidth: 30, // Width of book spine $$$ consider sizing based on book length
- autofit: 'auto'
+ coverInternalPadding: 0, // Width of cover
+ coverExternalPadding: 0, // Padding outside of cover
+ bookSpineDivWidth: 0, // Width of book spine $$$ consider sizing based on book length
+ autofit: true
};
return this;
top: top+'px',
height: this.twoPage.height +'px', // $$$ height forced the same for both pages
width: this.twoPage.scaledWL + 'px',
- borderRight: '1px solid black',
zIndex: 2
}).appendTo('#BRtwopageview');
top: top+'px',
height: this.twoPage.height + 'px', // $$$ height forced the same for both pages
width: this.twoPage.scaledWR + 'px',
- borderLeft: '1px solid black',
zIndex: 2
}).appendTo('#BRtwopageview');
this.removeSearchHilites();
this.mode = mode;
- this.switchToolbarMode(mode);
+ //this.switchToolbarMode(mode);
// reinstate scale if moving from thumbnail view
if (this.pageScale != this.reduce) {
this.reduce = this.quantizeReduce(this.reduce, this.onePage.reductionFactors);
this.prepareOnePageView();
} else if (3 == mode) {
- this.reduce = this.quantizeReduce(this.reduce, this.reductionFactors);
+ $('button.thumb').hide();
+ $('button.twopg').show();
this.prepareThumbnailView();
+ this.reduce = this.quantizeReduce(this.reduce);
} else {
// $$$ why don't we save autofit?
this.twoPage.autofit = null; // Take zoom level from other mode
this.twoPageCalculateReductionFactors();
this.reduce = this.quantizeReduce(this.reduce, this.twoPage.reductionFactors);
+ $('button.thumb').show();
+ $('button.twopg').hide();
this.prepareTwoPageView();
this.twoPageCenterView(0.5, 0.5); // $$$ TODO preserve center
}
height: this.twoPage.bookCoverDivHeight+'px',
visibility: 'visible',
position: 'absolute',
+ backgroundColor: 'transparent',
+ backgroundImage: 'url(back_pages.png)',
left: this.twoPage.bookCoverDivLeft + 'px',
- top: this.twoPage.bookCoverDivTop+'px'
+ top: this.twoPage.bookCoverDivTop+'px',
+ MozBoxShadow: '0 0 2px #000',
+ WebkitBoxShadow: '0 0 2px #000'
}).appendTo('#BRtwopageview');
this.leafEdgeR = document.createElement('div');
this.leafEdgeR.className = 'BRleafEdgeR';
$(this.leafEdgeR).css({
+ background: 'transparent url(back_pages.png) repeat scroll 0% 0%',
width: this.twoPage.leafEdgeWidthR + 'px',
height: this.twoPage.height-1 + 'px',
left: this.twoPage.gutter+this.twoPage.scaledWR+'px',
top: this.twoPageFlipAreaTop() + 'px',
cursor: 'w-resize',
zIndex: 100
- }).bind('click', function(e) {
+ }).click(function(e) {
self.left();
}).bind('mousedown', function(e) {
e.preventDefault();
top: this.twoPageFlipAreaTop() + 'px',
cursor: 'e-resize',
zIndex: 100
- }).bind('click', function(e) {
+ }).click(function(e) {
self.right();
}).bind('mousedown', function(e) {
e.preventDefault();
this.twoPagePopUp.className = 'BRtwoPagePopUp';
$(this.twoPagePopUp).css({
zIndex: '1000'
+ // XXXmang move to CSS
+ padding: '6px',
+ position: 'absolute',
+ fontFamily: 'Arial,sans-serif',
+ fontSize: '11px',
+ color: 'white',
+ zIndex: '1000',
+ backgroundColor: '#939598',
+ opacity: 0.85,
+ webkitBorderRadius: '4px',
+ mozBorderRadius: '4px',
+ borderRadius: '4px',
+ whiteSpace: 'nowrap'
}).appendTo('#BRcontainer');
$(this.twoPagePopUp).hide();
// $$$ TODO: Make sure popup is positioned so that it is in view
// (https://bugs.edge.launchpad.net/gnubook/+bug/327456)
$(e.data.twoPagePopUp).css({
- left: e.pageX- $('#BRcontainer').offset().left + $('#BRcontainer').scrollLeft() + 20 + 'px',
+ left: e.pageX- $('#BRcontainer').offset().left + $('#BRcontainer').scrollLeft() - 100 + 'px',
top: e.pageY - $('#BRcontainer').offset().top + $('#BRcontainer').scrollTop() + 'px'
});
});
// $$$ TODO: Make sure popup is positioned so that it is in view
// (https://bugs.edge.launchpad.net/gnubook/+bug/327456)
$(e.data.twoPagePopUp).css({
- left: e.pageX - $('#BRcontainer').offset().left + $('#BRcontainer').scrollLeft() - $(e.data.twoPagePopUp).width() - 25 + 'px',
+ left: e.pageX - $('#BRcontainer').offset().left + $('#BRcontainer').scrollLeft() - $(e.data.twoPagePopUp).width() + 100 + 'px',
top: e.pageY-$('#BRcontainer').offset().top + $('#BRcontainer').scrollTop() + 'px'
});
});
top: top+'px',
height: this.twoPage.height,
width: scaledW+'px',
- borderRight: '1px solid black',
+ borderRight: '1px solid black', // XXXmang check
zIndex: 1
}
right: '',
top: top+'px',
height: this.twoPage.height,
- width: '0px',
- borderLeft: '1px solid black',
+ borderLeft: '1px solid black', // XXXmang check
+ width: '0',
zIndex: 2
}
top: top+'px',
height: this.twoPage.height,
width: scaledW+'px',
- borderLeft: '1px solid black',
zIndex: 1
});
top: top+'px',
height: this.twoPage.height,
width: 0+'px', // Start at 0 width, then grow to the left
- borderRight: '1px solid black',
zIndex: 2
});
// showEmbedCode()
//______________________________________________________________________________
BookReader.prototype.showEmbedCode = function() {
- if (null != this.embedPopup) { // check if already showing
- return;
- }
- this.autoStop();
this.embedPopup = document.createElement("div");
$(this.embedPopup).css({
position: 'absolute',
- top: '20px',
+ top: ($('#BRcontainer').attr('clientHeight')-250)/2 + 'px',
left: ($('#BRcontainer').attr('clientWidth')-400)/2 + 'px',
width: '400px',
- padding: "20px",
- border: "3px double #999999",
- zIndex: 3,
- backgroundColor: "#fff"
+ height: '250px',
+ padding: '0',
+ fontSize: '12px',
+ color: '#333',
+ zIndex: 300,
+ border: '10px solid #615132',
+ backgroundColor: "#fff",
+ MozBorderRadius: '8px',
+ MozBoxShadow: '0 0 6px #000',
+ WebkitBorderRadius: '8px',
+ WebkitBoxShadow: '0 0 6px #000'
}).appendTo('#BookReader');
- htmlStr = '<p style="text-align:center;"><b>Embed Bookreader in your blog!</b></p>';
- htmlStr += '<p>The bookreader uses iframes for embedding. It will not work on web hosts that block iframes. The embed feature has been tested on blogspot.com blogs as well as self-hosted Wordpress blogs. This feature will NOT work on wordpress.com blogs.</p>';
- htmlStr += '<p>Embed Code: <input type="text" size="40" value="' + this.getEmbedCode() + '"></p>';
- htmlStr += '<p style="text-align:center;"><a href="" onclick="br.embedPopup = null; $(this.parentNode.parentNode).remove(); return false">Close popup</a></p>';
+ htmlStr = '<h3 style="background:#615132;padding:10px;margin:0 0 10px;color:#fff;">Embed Bookreader</h3>';
+ htmlStr += '<p style="padding:10px;line-height:18px;">The bookreader uses iframes for embedding. It will not work on web hosts that block iframes. The embed feature has been tested on blogspot.com blogs as well as self-hosted Wordpress blogs. This feature will NOT work on wordpress.com blogs.</p>';
+ htmlStr += '<textarea rows="2" cols="40" style="margin-left:10px;width:368px;height:40px;color:#333;font-size:12px;border:2px inset #ccc;background:#efefef;padding:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;">' + this.getEmbedCode() + '</textarea>';
+ htmlStr += '<a href="javascript:;" class="popOff" onclick="$(this.parentNode).remove();$(\'.coverUp\').hide();return false" style="color:#999;"><span>Close</span></a>';
this.embedPopup.innerHTML = htmlStr;
- $(this.embedPopup).find('input').bind('click', function() {
+ $('#BookReader').append('<div class="coverUp" style="position:absolute;z-index:299;width:100%;height:100%;background:#000;opacity:.4;filter:alpha(opacity=40);" onclick="$(\'.popped\').hide();$(this).hide();"></div>');
+ $(this.embedPopup).find('textarea').click(function() {
+ this.select();
+ })
+ $(this.embedPopup).addClass("popped");
+}
+
+// showBookmarkCode()
+//______________________________________________________________________________
+BookReader.prototype.showBookmarkCode = function() {
+ this.bookmarkPopup = document.createElement("div");
+ $(this.bookmarkPopup).css({
+ position: 'absolute',
+ top: ($('#BRcontainer').attr('clientHeight')-250)/2 + 'px',
+ left: ($('#BRcontainer').attr('clientWidth')-400)/2 + 'px',
+ width: '400px',
+ height: '250px',
+ padding: '0',
+ fontSize: '12px',
+ color: '#333',
+ zIndex: 300,
+ border: '10px solid #615132',
+ backgroundColor: "#fff",
+ MozBorderRadius: '8px',
+ MozBoxShadow: '0 0 6px #000',
+ WebkitBorderRadius: '8px',
+ WebkitBoxShadow: '0 0 6px #000'
+ }).appendTo('#BookReader');
+
+ htmlStr = '<h3 style="background:#615132;padding:10px;margin:0 0 10px;color:#fff;">Add a bookmark</h3>';
+ htmlStr += '<p style="padding:10px;line-height:18px;">You can add a bookmark to any page in any book. If you elect to make your bookmark public, other readers will be able to see it. <em>You must be logged in to your <a href="">Open Library account</a> to add bookmarks.</em></p>';
+ htmlStr += '<form name="bookmark" id="bookmark" style="line-height:20px;margin-left:10px;"><label style="padding-bottom"10px;><input type="radio" name="privacy" id="p2" disabled="disabled" checked="checked"/> Make this bookmark public.</label><br/><label style="padding-bottom:10px;"><input type="radio" name="privacy" id="p1" disabled="disabled"/> Keep this bookmark private.</label><br/><br/><button type="submit" style="font-size:20px;" disabled="disabled">Add a bookmark</button></form>';
+ htmlStr += '<a href="javascript:;" class="popOff" onclick="$(this.parentNode).remove();$(\'.coverUp\').hide();return false;" style="color:#999;"><span>Close</span></a>';
+
+ this.bookmarkPopup.innerHTML = htmlStr;
+ $('#BookReader').append('<div class="coverUp" style="position:absolute;z-index:299;width:100%;height:100%;background:#000;opacity:.4;filter:alpha(opacity=40);" onclick="$(\'.popped\').hide();$(this).hide();"></div>');
+ $(this.bookmarkPopup).find('textarea').click(function() {
this.select();
})
+ $(this.bookmarkPopup).addClass("popped");
}
+
// autoToggle()
//______________________________________________________________________________
BookReader.prototype.autoToggle = function() {
BookReader.prototype.initToolbar = function(mode, ui) {
- $("#BookReader").append("<div id='BRtoolbar'>"
- + "<span id='BRtoolbarbuttons' style='float: right'>"
- + "<button class='BRicon print rollover' /> <button class='BRicon rollover embed' />"
- + "<form class='BRpageform' action='javascript:' onsubmit='br.jumpToPage(this.elements[0].value)'> <span class='label'>Page:<input id='BRpagenum' type='text' size='3' onfocus='br.autoStop();'></input></span></form>"
- + "<div class='BRtoolbarmode2' style='display: none'><button class='BRicon rollover book_leftmost' /><button class='BRicon rollover book_left' /><button class='BRicon rollover book_right' /><button class='BRicon rollover book_rightmost' /></div>"
- + "<div class='BRtoolbarmode1' style='display: none'><button class='BRicon rollover book_top' /><button class='BRicon rollover book_up' /> <button class='BRicon rollover book_down' /><button class='BRicon rollover book_bottom' /></div>"
- + "<div class='BRtoolbarmode3' style='display: none'><button class='BRicon rollover book_top' /><button class='BRicon rollover book_up' /> <button class='BRicon rollover book_down' /><button class='BRicon rollover book_bottom' /></div>"
- + "<button class='BRicon rollover play' /><button class='BRicon rollover pause' style='display: none' />"
+ $("body").append("<div id='BRtoolbar'>"
+ + "<span id='BRtoolbarbuttons' style='float:right;'>"
+ + "<button class='BRicon bookmark modal'></button>"
+ + "<button class='BRicon link modal'></button>"
+ + "<button class='BRicon embed modal'></button>"
+ + "<button class='BRicon read modal'></button>"
+ + "<button class='BRicon full'></button>"
+// + "<div class='BRtoolbarmode2' style='display: none'><button class='BRicon book_leftmost'></button><button class='BRicon book_left'></button><button class='BRicon book_right'></button><button class='BRicon book_rightmost'></button></div>"
+// + "<div class='BRtoolbarmode1' style='display: none'><button class='BRicon book_top'></button><button class='BRicon book_up'></button> <button class='BRicon book_down'></button><button class='BRicon book_bottom'></button></div>"
+// + "<div class='BRtoolbarmode3' style='display: none'><button class='BRicon book_top'></button><button class='BRicon book_up'></button> <button class='BRicon book_down'></button><button class='BRicon book_bottom'></button></div>"
+// + "<button class='BRicon play'></button><button class='BRicon pause' style='display: none'></button>"
+ "</span>"
+ "<span>"
- + "<a class='BRicon logo rollover' href='" + this.logoURL + "'> </a>"
- + " <button class='BRicon rollover zoom_out' onclick='br.zoom(-1); return false;'/>"
- + "<button class='BRicon rollover zoom_in' onclick='br.zoom(1); return false;'/>"
- + " <span class='label'>Zoom: <span id='BRzoom'>"+parseInt(100/this.reduce)+"</span></span>"
- + " <button class='BRicon rollover one_page_mode' onclick='br.switchMode(1); return false;'/>"
- + " <button class='BRicon rollover two_page_mode' onclick='br.switchMode(2); return false;'/>"
- + " <button class='BRicon rollover thumbnail_mode' onclick='br.switchMode(3); return false;'/>"
+ + "<a class='logo' href='" + this.logoURL + "'></a>"
+ + "<button class='BRicon glass'></button>"
+ + "<form method='get' id='booksearch'><input type='search' id='textSrch' name='textSrch' val='' placeholder='Search'/><button type='submit' id='btnSrch' name='btnSrch'>GO</button></form>"
+ + "<button class='BRicon fit'></button>"
+ + "<button class='BRicon thumb' onclick='br.switchMode(3); return false;'></button>"
+ + "<button class='BRicon twopg' onclick='br.switchMode(2); return false;'></button>"
+ "</span>"
- + "<span id='#BRbooktitle'>"
- + " <a class='BRblack title' href='"+this.bookUrl+"' target='_blank'>"+this.bookTitle+"</a>"
- + "</span>"
+ "</div>");
this.updateToolbarZoom(this.reduce); // Pretty format
var titles = { '.logo': 'Go to Archive.org',
'.zoom_in': 'Zoom in',
'.zoom_out': 'Zoom out',
- '.one_page_mode': 'One-page view',
- '.two_page_mode': 'Two-page view',
- '.thumbnail_mode': 'Thumbnail view',
+ '.onepg': 'One-page view',
+ '.twopg': 'Two-page view',
+ '.thumb': 'Thumbnail view',
'.print': 'Print this page',
- '.embed': 'Embed bookreader',
+ '.embed': 'Embed BookReader',
+ '.link': 'Link to this book (and page)',
+ '.bookmark': 'Bookmark this page',
+ '.read': 'Allow BookReader to read this aloud',
+ '.full': 'Show fullscreen',
'.book_left': 'Flip left',
'.book_right': 'Flip right',
'.book_up': 'Page up',
}
// Switch to requested mode -- binds other click handlers
- this.switchToolbarMode(mode);
+ //this.switchToolbarMode(mode);
}
var self = this; // closure
- jToolbar.find('.book_left').bind('click', function(e) {
+ jToolbar.find('.book_left').click(function(e) {
self.left();
return false;
});
- jToolbar.find('.book_right').bind('click', function(e) {
+ jToolbar.find('.book_right').click(function(e) {
self.right();
return false;
});
return false;
});
- jToolbar.find('.print').bind('click', function(e) {
+ jToolbar.find('.print').click(function(e) {
self.printPage();
return false;
});
- jToolbar.find('.embed').bind('click', function(e) {
+ jToolbar.find('.embed').click(function(e) {
self.showEmbedCode();
return false;
});
- jToolbar.find('.play').bind('click', function(e) {
+ jToolbar.find('.bookmark').click(function(e) {
+ self.showBookmarkCode();
+ return false;
+ });
+
+ jToolbar.find('.play').click(function(e) {
self.autoToggle();
return false;
});
- jToolbar.find('.pause').bind('click', function(e) {
+ jToolbar.find('.pause').click(function(e) {
self.autoToggle();
return false;
});
- jToolbar.find('.book_top').bind('click', function(e) {
+ jToolbar.find('.book_top').click(function(e) {
self.first();
return false;
});
- jToolbar.find('.book_bottom').bind('click', function(e) {
+ jToolbar.find('.book_bottom').click(function(e) {
self.last();
return false;
});
- jToolbar.find('.book_leftmost').bind('click', function(e) {
+ jToolbar.find('.book_leftmost').click(function(e) {
self.leftmost();
return false;
});
- jToolbar.find('.book_rightmost').bind('click', function(e) {
+ jToolbar.find('.book_rightmost').click(function(e) {
self.rightmost();
return false;
});
projects / bookreader.git / commitdiff
