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

Fix for column rendering in Safari (#614)

Browse source 
* Fix for column rendering in Safari

* Set body to display inline in Columns css
This commit is contained in:
Fred Chasen 2017-05-09 16:42:30 -04:00 • committed by GitHub
parent 042793157b
commit 2d3f1cc039
5 changed files with 51 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

10
examples/spreads.html
View file

@ -18,9 +18,12 @@
<a id="next" href="#next" class="arrow">›</a>
<script>
var currentSectionIndex = 0;
var params = new URLSearchParams(document.location.search.substring(1));
var url = params && params.get("url") && decodeURIComponent(params.get("url"));
var currentSectionIndex = (params && params.get("loc")) ? params.get("loc") : 0;
// Load the opf
var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
var book = ePub(url || "https://s3.amazonaws.com/moby-dick/moby-dick.epub");
var rendition = book.renderTo("viewer", {
width: "100%",
height: 600
@ -64,7 +67,8 @@
rendition.on("rendered", function(section){
var nextSection = section.next();
var prevSection = section.prev();
var current = book.navigation.get(section.href);
var current = book.navigation && book.navigation.get(section.href);
if (current) {
title.textContent = current.label;

62
src/contents.js
View file

@ -185,7 +185,15 @@ class Contents {
var _width, _height, _scale, _minimum, _maximum, _scalable;
var width, height, scale, minimum, maximum, scalable;
var $viewport = this.document.querySelector("meta[name='viewport']");
var newContent = "";
var parsed = {
"width": undefined,
"height": undefined,
"scale": undefined,
"minimum": undefined,
"maximum": undefined,
"scalable": undefined
};
var newContent = [];
/*
* check for the viewport size
@ -199,37 +207,42 @@ class Contents {
let _minimum = content.match(/minimum-scale\s*=\s*([^,]*)/g);
let _maximum = content.match(/maximum-scale\s*=\s*([^,]*)/g);
let _scalable = content.match(/user-scalable\s*=\s*([^,]*)/g);
if(_width[1]){
width = _width[1];
if(_width && _width.length && typeof _width[1] !== "undefined"){
parsed.width = _width[1];
}
if(_height[1]){
height = _height[1];
if(_height && _height.length && typeof _height[1] !== "undefined"){
parsed.height = _height[1];
}
if(_scale[1]){
scale = _scale[1];
if(_scale && _scale.length && typeof _scale[1] !== "undefined"){
parsed.scale = _scale[1];
}
if(_minimum[1]){
minimum = _minimum[1];
if(_minimum && _minimum.length && typeof _minimum[1] !== "undefined"){
parsed.minimum = _minimum[1];
}
if(_maximum[1]){
maximum = _maximum[1];
if(_maximum && _maximum.length && typeof _maximum[1] !== "undefined"){
parsed.maximum = _maximum[1];
}
if(_scalable[1]){
scalable = _scalable[1];
if(_scalable && _scalable.length && typeof _scalable[1] !== "undefined"){
parsed.scalable = _scalable[1];
}
}
if (options) {
newContent += "width=" + (options.width || width);
newContent += ", height=" + (options.height || height);
if (options.scale || scale) {
newContent += ", initial-scale=" + (options.scale || scale);
if (options.width || parsed.width) {
newContent.push("width=" + (options.width || parsed.width));
}
if (options.scalable || scalable) {
newContent += ", minimum-scale=" + (options.scale || minimum);
newContent += ", maximum-scale=" + (options.scale || maximum);
newContent += ", user-scalable=" + (options.scalable || scalable);
if (options.height || parsed.height) {
newContent.push("height=" + (options.height || parsed.height));
}
if (options.scale || parsed.scale) {
newContent.push("initial-scale=" + (options.scale || parsed.scale));
}
if (options.scalable || parsed.scalable) {
newContent.push("minimum-scale=" + (options.scale || parsed.minimum));
newContent.push("maximum-scale=" + (options.scale || parsed.maximum));
newContent.push("user-scalable=" + (options.scalable || parsed.scalable));
}
if (!$viewport) {
@ -238,7 +251,7 @@ class Contents {
this.document.querySelector("head").appendChild($viewport);
}
$viewport.setAttribute("content", newContent);
$viewport.setAttribute("content", newContent.join(", "));
}
@ -316,7 +329,6 @@ class Contents {
};
this.pane && this.pane.render();
this.emit("resize", this._size);
}
@ -699,7 +711,7 @@ class Contents {
// Deal with Mobile trying to scale to viewport
this.viewport({ width: width, height: height, scale: 1.0, scalable: "no" });
// this.overflowY("hidden");
this.css("display", "inline-block"); // Fixes Safari column cut offs
this.css("overflow-y", "hidden");
this.css("margin", "0", true);
this.css("padding", "0", true);

3
src/managers/continuous/index.js
View file

@ -113,6 +113,7 @@ class ContinuousViewManager extends DefaultViewManager {
this._stageSize = this.stage.size(width, height);
this._bounds = this.bounds();
console.log("set bounds", this._bounds);
// Update for new views
this.viewSettings.width = this._stageSize.width;
@ -275,7 +276,7 @@ class ContinuousViewManager extends DefaultViewManager {
var offset = horizontal ? this.scrollLeft : this.scrollTop;
var visibleLength = horizontal ? bounds.width : bounds.height;
var contentLength = horizontal ? this.container.scrollWidth : this.container.scrollHeight;
console.log(bounds);
if (offset + visibleLength + delta >= contentLength) {
last = this.views.last();
next = last && last.section.next();

6
src/managers/helpers/stage.js
View file

@ -187,11 +187,11 @@ class Stage {
}
bounds(){
if(!this.container) {
let box = this.container && this.container.getBoundingClientRect();
if(!box || !box.width || !box.height) {
return windowBounds();
} else {
return this.container.getBoundingClientRect();
return box;
}
}

3
src/utils/core.js
View file

@ -475,7 +475,8 @@ export function querySelectorByType(html, element, type){
if(!query || query.length === 0) {
query = qsa(html, element);
for (var i = 0; i < query.length; i++) {
if(query[i].getAttributeNS("http://www.idpf.org/2007/ops", "type") === type) {
if(query[i].getAttributeNS("http://www.idpf.org/2007/ops", "type") === type ||
query[i].getAttribute("epub:type") === type) {
return query[i];
}
}