1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-04 15:09:16 +02:00

IE css fixes

This commit is contained in:
fchasen 2015-08-31 23:14:53 -04:00
parent b329e634ef
commit 38a88f6cc9
4 changed files with 169 additions and 150 deletions

View file

@ -20,19 +20,21 @@ body {
width: 100%;
height: 100%;
right: 0;
/* left: 40px; */
/* left: 40px; */
/* -webkit-transform: translate(40px, 0);
-moz-transform: translate(40px, 0); */
/* border-radius: 5px 0px 0px 5px; */
border-radius: 5px;
background: #fff;
overflow: hidden;
-webkit-transition: -webkit-transform .4s, width .2s;
-moz-transition: -webkit-transform .4s, width .2s;
-ms-transition: -webkit-transform .4s, width .2s;
-moz-box-shadow: inset 0 0 50px rgba(0,0,0,.1);
-webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.1);
-ms-box-shadow: inset 0 0 50px rgba(0,0,0,.1);
box-shadow: inset 0 0 50px rgba(0,0,0,.1);
}
@ -50,6 +52,7 @@ body {
text-align: center;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
z-index: 10;
}
@ -70,7 +73,7 @@ body {
#titlebar a::before {
visibility: visible;
}
}
#titlebar a:hover {
opacity: .8;
@ -84,6 +87,7 @@ body {
/* margin: 1px -1px -1px 1px; */
-moz-box-shadow: inset 0 0 6px rgba(155,155,155,.8);
-webkit-box-shadow: inset 0 0 6px rgba(155,155,155,.8);
-ms-box-shadow: inset 0 0 6px rgba(155,155,155,.8);
box-shadow: inset 0 0 6px rgba(155,155,155,.8);
}
@ -114,7 +118,7 @@ body {
left: 40px;
}
#next {
#next {
right: 40px;
}
@ -132,7 +136,7 @@ body {
.arrow:hover {
color: #777;
}
.arrow:active,
.arrow.active {
color: #000;
@ -150,7 +154,8 @@ body {
height: 100%;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-ms-transition: -moz-transform .5s;
overflow: hidden;
}
@ -164,6 +169,7 @@ body {
/* left: 300px; */
-webkit-transform: translate(300px, 0);
-moz-transform: translate(300px, 0);
-ms-transform: translate(300px, 0);
}
#main.single {
@ -185,6 +191,7 @@ body {
height: 14px;
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.6);
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.6);
-ms-box-shadow: 0px 1px 3px rgba(0,0,0,.6);
box-shadow: 0px 1px 3px rgba(0,0,0,.6);
}
@ -240,7 +247,7 @@ body {
float: left;
margin-left: 10px;
margin-top: -1px;
/*
/*
border-radius: 5px;
background: #9b9b9b;
float: left;
@ -250,7 +257,7 @@ body {
color: #000;
border: none;
outline: none; */
}
input::-webkit-input-placeholder {
@ -259,6 +266,9 @@ input::-webkit-input-placeholder {
input:-moz-placeholder {
color: #454545;
}
input:-ms-placeholder {
color: #454545;
}
#divider {
position: absolute;
@ -296,6 +306,7 @@ input:-moz-placeholder {
visibility: hidden;
-webkit-transition: visibility 0 ease .5s;
-moz-transition: visibility 0 ease .5s;
-ms-transition: visibility 0 ease .5s;
}
@ -306,6 +317,7 @@ input:-moz-placeholder {
visibility: visible;
-webkit-transition: visibility 0 ease 0;
-moz-transition: visibility 0 ease 0;
-ms-transition: visibility 0 ease 0;
}
#sidebar.open #tocView {
@ -320,7 +332,7 @@ input:-moz-placeholder {
display: block;
}
#tocView li,
#tocView li,
#bookmarksView li {
margin-bottom:10px;
width: 225px;
@ -379,6 +391,7 @@ input:-moz-placeholder {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@ -522,13 +535,13 @@ input:-moz-placeholder {
left: 50%;
width: 50%;
width: 630px;
height: auto;
z-index: 2000;
visibility: hidden;
margin-left: -320px;
margin-top: -160px;
}
.overlay {
@ -543,6 +556,7 @@ input:-moz-placeholder {
background: rgba(255,255,255,0.8);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
@ -612,6 +626,7 @@ input:-moz-placeholder {
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
@ -637,7 +652,7 @@ input:-moz-placeholder {
width: 50%;
margin-left: 25%;
}
#divider,
#divider.show {
display: none;
@ -653,8 +668,8 @@ input:-moz-placeholder {
#prev {
left: 20px;
}
#next {
#next {
right: 20px;
}
}
@ -664,51 +679,54 @@ input:-moz-placeholder {
width: 80%;
margin-left: 10%;
}
#prev {
left: 0;
}
#next {
#next {
right: 0;
}
.arrow {
height: 100%;
top: 45px;
width: 10%;
text-indent: -10000px;
}
#main {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-webkit-transition: -webkit-transform .3s;
-moz-transition: -moz-transform .3s;
-ms-transition: -moz-transform .3s;
}
#main.closed {
-webkit-transform: translate(260px, 0);
-moz-transform: translate(260px, 0);
-ms-transform: translate(260px, 0);
}
#titlebar {
/* font-size: 16px; */
/* margin: 0 50px 0 50px; */
}
#metainfo {
font-size: 10px;
}
#tocView {
width: 260px;
}
#tocView li {
font-size: 12px;
}
#tocView > ul{
padding-left: 10px;
}
@ -753,23 +771,23 @@ input:-moz-placeholder {
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* you can be more comfortable with increased icons size */
font-size: 112%;
}
.icon-search:before { content: '\e807'; } /* '' */
.icon-resize-full-1:before { content: '\e804'; } /* '' */
.icon-cancel-circled2:before { content: '\e80f'; } /* '' */
@ -791,4 +809,4 @@ input:-moz-placeholder {
.icon-list-numbered:before { content: '\e801'; } /* '' */
.icon-columns:before { content: '\e810'; } /* '' */
.icon-list:before { content: '\e800'; } /* '' */
.icon-resize-small:before { content: '\e808'; } /* '' */
.icon-resize-small:before { content: '\e808'; } /* '' */

View file

@ -14,56 +14,56 @@
<script src="js/libs/jquery-2.1.0.min.js"></script>
<script src="js/libs/zip.min.js"></script>
<script src="js/libs/zip.min.js"></script>
<script>
"use strict";
document.onreadystatechange = function () {
document.onreadystatechange = function () {
if (document.readyState == "complete") {
EPUBJS.filePath = "js/libs/";
EPUBJS.cssPath = "css/";
// fileStorage.filePath = EPUBJS.filePath;
var reader = ePubReader("moby-dick/");
}
}
};
</script>
<!-- Render -->
<script src="js/epub.min.js"></script>
<!-- Hooks -->
<script src="js/hooks.min.js"></script>
<!-- Reader -->
<script src="js/reader.min.js"></script>
<!-- Plugins -->
<script src="js/plugins/search.js"></script>
<!-- Highlights -->
<script src="js/libs/jquery.highlight.js"></script>
<script src="js/hooks/extensions/highlight.js"></script>
<!-- File Storage -->
<!-- <script src="js/libs/fileStorage.min.js"></script> -->
<!-- <script src="js/libs/localforage.min.js"></script> -->
<!-- Full Screen -->
<script src="js/libs/screenfull.min.js"></script>
<!-- Render -->
<script src="js/epub.min.js"></script>
<!-- Hooks -->
<script src="js/hooks.min.js"></script>
<!-- Reader -->
<script src="js/reader.min.js"></script>
<!-- Plugins -->
<script src="js/plugins/search.js"></script>
<!-- Highlights -->
<!-- <script src="js/libs/jquery.highlight.js"></script> -->
<!-- <script src="js/hooks/extensions/highlight.js"></script> -->
</head>
<body>
<div id="sidebar">
<div id="panels">
<input id="searchBox" placeholder="search" type="search">
<a id="show-Search" class="show_view icon-search" data-view="Search">Search</a>
<a id="show-Toc" class="show_view icon-list-1 active" data-view="Toc">TOC</a>
<a id="show-Bookmarks" class="show_view icon-bookmark" data-view="Bookmarks">Bookmarks</a>
<a id="show-Notes" class="show_view icon-edit" data-view="Notes">Notes</a>
</div>
<div id="tocView" class="view">
</div>
@ -82,7 +82,7 @@
</div>
</div>
<div id="main">
<div id="titlebar">
<div id="opener">
<a id="slider" class="icon-menu">Menu</a>
@ -98,12 +98,12 @@
<a id="fullscreen" class="icon-resize-full">Fullscreen</a>
</div>
</div>
<div id="divider"></div>
<div id="prev" class="arrow"></div>
<div id="viewer"></div>
<div id="next" class="arrow"></div>
<div id="loader"><img src="img/loader.gif"></div>
</div>
<div class="modal md-effect-1" id="settings-modal">
@ -111,7 +111,7 @@
<h3>Settings</h3>
<div>
<p>
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">Reflow text when sidebars are open.</input>
<input type="checkbox" id="sidebarReflow" name="sidebarReflow">Reflow text when sidebars are open.
</p>
</div>
<div class="closer icon-cancel-circled"></div>

View file

@ -20,7 +20,7 @@ EPUBJS.reader.ControlsController = function(book) {
reader.offline = true;
// $store.attr("src", $icon.data("saved"));
};
var fullscreen = false;
book.on("book:online", goOnline);
@ -42,21 +42,22 @@ EPUBJS.reader.ControlsController = function(book) {
$fullscreen.on("click", function() {
screenfull.toggle($('#container')[0]);
});
document.addEventListener(screenfull.raw.fullscreenchange, function() {
fullscreen = screenfull.isFullscreen;
if(fullscreen) {
$fullscreen
.addClass("icon-resize-small")
.removeClass("icon-resize-full");
} else {
$fullscreen
.addClass("icon-resize-full")
.removeClass("icon-resize-small");
}
});
if(screenfull.raw) {
document.addEventListener(screenfull.raw.fullscreenchange, function() {
fullscreen = screenfull.isFullscreen;
if(fullscreen) {
$fullscreen
.addClass("icon-resize-small")
.removeClass("icon-resize-full");
} else {
$fullscreen
.addClass("icon-resize-full")
.removeClass("icon-resize-small");
}
});
}
}
$settings.on("click", function() {
reader.SettingsController.show();
});
@ -64,17 +65,17 @@ EPUBJS.reader.ControlsController = function(book) {
$bookmark.on("click", function() {
var cfi = reader.book.getCurrentLocationCfi();
var bookmarked = reader.isBookmarked(cfi);
if(bookmarked === -1) { //-- Add bookmark
reader.addBookmark(cfi);
$bookmark
.addClass("icon-bookmark")
.removeClass("icon-bookmark-empty");
.removeClass("icon-bookmark-empty");
} else { //-- Remove Bookmark
reader.removeBookmark(cfi);
$bookmark
.removeClass("icon-bookmark")
.addClass("icon-bookmark-empty");
.addClass("icon-bookmark-empty");
}
});
@ -86,15 +87,15 @@ EPUBJS.reader.ControlsController = function(book) {
if(bookmarked === -1) { //-- Not bookmarked
$bookmark
.removeClass("icon-bookmark")
.addClass("icon-bookmark-empty");
.addClass("icon-bookmark-empty");
} else { //-- Bookmarked
$bookmark
.addClass("icon-bookmark")
.removeClass("icon-bookmark-empty");
.removeClass("icon-bookmark-empty");
}
reader.currentLocationCfi = cfi;
// Update the History Location
if(reader.settings.history &&
window.location.hash != cfiFragment) {
@ -102,7 +103,7 @@ EPUBJS.reader.ControlsController = function(book) {
history.pushState({}, '', cfiFragment);
}
});
book.on('book:pageChanged', function(location){
// console.log("page", location.page, location.percentage)
});
@ -110,4 +111,4 @@ EPUBJS.reader.ControlsController = function(book) {
return {
};
};
};

View file

@ -5,19 +5,19 @@ EPUBJS.Parser = function(baseUrl){
EPUBJS.Parser.prototype.container = function(containerXml){
//-- <rootfile full-path="OPS/package.opf" media-type="application/oebps-package+xml"/>
var rootfile, fullpath, folder, encoding;
if(!containerXml) {
console.error("Container File Not Found");
return;
}
rootfile = containerXml.querySelector("rootfile");
if(!rootfile) {
console.error("No RootFile Found");
return;
}
fullpath = rootfile.getAttribute('full-path');
folder = EPUBJS.core.uri(fullpath).directory;
encoding = containerXml.xmlEncoding;
@ -32,19 +32,19 @@ EPUBJS.Parser.prototype.container = function(containerXml){
EPUBJS.Parser.prototype.identifier = function(packageXml){
var metadataNode;
if(!packageXml) {
console.error("Package File Not Found");
return;
}
metadataNode = packageXml.querySelector("metadata");
if(!metadataNode) {
console.error("No Metadata Found");
return;
}
return this.getElementText(metadataNode, "identifier");
};
@ -56,41 +56,41 @@ EPUBJS.Parser.prototype.packageContents = function(packageXml, baseUrl){
var spine;
var spineIndexByURL;
var metadata;
if(baseUrl) this.baseUrl = baseUrl;
if(!packageXml) {
console.error("Package File Not Found");
return;
}
metadataNode = packageXml.querySelector("metadata");
if(!metadataNode) {
console.error("No Metadata Found");
return;
}
manifestNode = packageXml.querySelector("manifest");
if(!manifestNode) {
console.error("No Manifest Found");
return;
}
spineNode = packageXml.querySelector("spine");
if(!spineNode) {
console.error("No Spine Found");
return;
}
manifest = parse.manifest(manifestNode);
navPath = parse.findNavPath(manifestNode);
tocPath = parse.findTocPath(manifestNode, spineNode);
coverPath = parse.findCoverPath(manifestNode);
spineNodeIndex = Array.prototype.indexOf.call(spineNode.parentNode.childNodes, spineNode);
spine = parse.spine(spineNode, manifest);
spineIndexByURL = {};
spine.forEach(function(item){
spineIndexByURL[item.href] = item.index;
@ -124,9 +124,9 @@ EPUBJS.Parser.prototype.findNavPath = function(manifestNode){
EPUBJS.Parser.prototype.findTocPath = function(manifestNode, spineNode){
var node = manifestNode.querySelector("item[media-type='application/x-dtbncx+xml']");
var tocId;
// If we can't find the toc by media-type then try to look for id of the item in the spine attributes as
// according to http://www.idpf.org/epub/20/spec/OPF_2.0.1_draft.htm#Section2.4.1.2,
// according to http://www.idpf.org/epub/20/spec/OPF_2.0.1_draft.htm#Section2.4.1.2,
// "The item that describes the NCX must be referenced by the spine toc attribute."
if (!node) {
tocId = spineNode.getAttribute("toc");
@ -134,7 +134,7 @@ EPUBJS.Parser.prototype.findTocPath = function(manifestNode, spineNode){
node = manifestNode.querySelector("item[id='" + tocId + "']");
}
}
return node ? node.getAttribute('href') : false;
};
@ -148,24 +148,24 @@ EPUBJS.Parser.prototype.findCoverPath = function(manifestNode){
EPUBJS.Parser.prototype.metadata = function(xml){
var metadata = {},
p = this;
metadata.bookTitle = p.getElementText(xml, 'title');
metadata.creator = p.getElementText(xml, 'creator');
metadata.description = p.getElementText(xml, 'description');
metadata.pubdate = p.getElementText(xml, 'date');
metadata.publisher = p.getElementText(xml, 'publisher');
metadata.identifier = p.getElementText(xml, "identifier");
metadata.language = p.getElementText(xml, "language");
metadata.rights = p.getElementText(xml, "rights");
metadata.modified_date = p.querySelectorText(xml, "meta[property='dcterms:modified']");
metadata.layout = p.querySelectorText(xml, "meta[property='rendition:layout']");
metadata.orientation = p.querySelectorText(xml, "meta[property='rendition:orientation']");
metadata.spread = p.querySelectorText(xml, "meta[property='rendition:spread']");
return metadata;
};
@ -174,7 +174,7 @@ EPUBJS.Parser.prototype.getElementText = function(xml, tag){
el;
if(!found || found.length === 0) return '';
el = found[0];
if(el.childNodes.length){
@ -182,7 +182,7 @@ EPUBJS.Parser.prototype.getElementText = function(xml, tag){
}
return '';
};
EPUBJS.Parser.prototype.querySelectorText = function(xml, q){
@ -198,34 +198,34 @@ EPUBJS.Parser.prototype.querySelectorText = function(xml, q){
EPUBJS.Parser.prototype.manifest = function(manifestXml){
var baseUrl = this.baseUrl,
manifest = {};
//-- Turn items into an array
var selected = manifestXml.querySelectorAll("item"),
items = Array.prototype.slice.call(selected);
//-- Create an object with the id as key
items.forEach(function(item){
var id = item.getAttribute('id'),
href = item.getAttribute('href') || '',
type = item.getAttribute('media-type') || '',
properties = item.getAttribute('properties') || '';
manifest[id] = {
'href' : href,
'url' : baseUrl + href, //-- Absolute URL for loading with a web worker
'type' : type,
'properties' : properties
};
});
return manifest;
};
EPUBJS.Parser.prototype.spine = function(spineXml, manifest){
var spine = [];
var selected = spineXml.getElementsByTagName("itemref"),
items = Array.prototype.slice.call(selected);
@ -254,20 +254,20 @@ EPUBJS.Parser.prototype.spine = function(spineXml, manifest){
};
spine.push(vert);
});
return spine;
};
EPUBJS.Parser.prototype.nav = function(navHtml, spineIndexByURL, bookSpine){
var navEl = navHtml.querySelector('nav[*|type="toc"]'), //-- [*|type="toc"] * Doesn't seem to work
idCounter = 0;
if(!navEl) return [];
// Implements `> ol > li`
function findListItems(parent){
var items = [];
Array.prototype.slice.call(parent.childNodes).forEach(function(node){
if('ol' == node.tagName){
Array.prototype.slice.call(node.childNodes).forEach(function(item){
@ -277,33 +277,33 @@ EPUBJS.Parser.prototype.nav = function(navHtml, spineIndexByURL, bookSpine){
});
}
});
return items;
}
// Implements `> a, > span`
function findAnchorOrSpan(parent){
var item = null;
Array.prototype.slice.call(parent.childNodes).forEach(function(node){
if('a' == node.tagName || 'span' == node.tagName){
item = node;
}
});
return item;
}
function getTOC(parent){
var list = [],
nodes = findListItems(parent),
items = Array.prototype.slice.call(nodes),
length = items.length,
node;
if(length === 0) return false;
items.forEach(function(item){
var id = item.getAttribute('id') || false,
content = findAnchorOrSpan(item),
@ -315,7 +315,7 @@ EPUBJS.Parser.prototype.nav = function(navHtml, spineIndexByURL, bookSpine){
spinePos = spineIndexByURL[baseUrl],
spineItem = bookSpine[spinePos],
cfi = spineItem ? spineItem.cfi : '';
if(!id) {
if(spinePos) {
spineItem = bookSpine[spinePos];
@ -325,7 +325,7 @@ EPUBJS.Parser.prototype.nav = function(navHtml, spineIndexByURL, bookSpine){
id = 'epubjs-autogen-toc-id-' + (idCounter++);
}
}
item.setAttribute('id', id); // Ensure all elements have an id
list.push({
"id": id,
@ -335,24 +335,24 @@ EPUBJS.Parser.prototype.nav = function(navHtml, spineIndexByURL, bookSpine){
"parent" : parent ? parent.getAttribute('id') : null,
"cfi" : cfi
});
});
return list;
}
return getTOC(navEl);
};
EPUBJS.Parser.prototype.toc = function(tocXml, spineIndexByURL, bookSpine){
var navMap = tocXml.querySelector("navMap");
if(!navMap) return [];
function getTOC(parent){
var list = [],
snapshot = tocXml.evaluate("*[local-name()='navPoint']", parent, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null),
length = snapshot.snapshotLength;
if(length === 0) return [];
for ( var i=length-1 ; i >= 0; i-- ) {
@ -403,11 +403,11 @@ EPUBJS.Parser.prototype.pageList = function(navHtml, spineIndexByURL, bookSpine)
idCounter = 0;
if(!navEl) return [];
// Implements `> ol > li`
function findListItems(parent){
var items = [];
Array.prototype.slice.call(parent.childNodes).forEach(function(node){
if('ol' == node.tagName){
Array.prototype.slice.call(node.childNodes).forEach(function(item){
@ -417,33 +417,33 @@ EPUBJS.Parser.prototype.pageList = function(navHtml, spineIndexByURL, bookSpine)
});
}
});
return items;
}
// Implements `> a, > span`
function findAnchorOrSpan(parent){
var item = null;
Array.prototype.slice.call(parent.childNodes).forEach(function(node){
if('a' == node.tagName || 'span' == node.tagName){
item = node;
}
});
return item;
}
function getPages(parent){
var list = [],
nodes = findListItems(parent),
items = Array.prototype.slice.call(nodes),
length = items.length,
node;
if(length === 0) return false;
items.forEach(function(item){
var id = item.getAttribute('id') || false,
content = findAnchorOrSpan(item),
@ -454,7 +454,7 @@ EPUBJS.Parser.prototype.pageList = function(navHtml, spineIndexByURL, bookSpine)
split,
packageUrl,
cfi;
if(isCfi != -1) {
split = href.split("#");
packageUrl = split[0];
@ -473,9 +473,9 @@ EPUBJS.Parser.prototype.pageList = function(navHtml, spineIndexByURL, bookSpine)
}
});
return list;
}
return getPages(navEl);
};