}
this.menu.closeView(function () {
if (page != $this.currentPage) {
- console.log()
$this.pageTransition(page);
$this.stats.track(0, page);
}
// If the interface is zoomed in, we must zoom out first
if (this.fluidbook.zoom.zoom > 1) {
- console.log('zooming out before opening zoom box');
//currentScale = this.fluidbook.desktop.desktopScale; // Get current scale so the size of the popup can be calculated correctly
// Wait for clickZoom out to finish before trying again to open zoom link
return $(img).get(0).outerHTML;
},
getThumbImage: function (page, div) {
+ var returnHTML = false;
if (div == undefined) {
-
var div = $('<div />');
+ div = $('<div />');
}
var h = this.fluidbook.datas.thumbHeight;
var s = Math.floor(page / 100);
backgroundImage: 'url("data/thumbnails/s' + s + '.jpg")',
backgroundPositionX: -left,
backgroundPositionY: -top
- });
- return div;
+ }).addClass('img');
+ return $(div).get(0).outerHTML;
},
loadImage: function (src, width, height, type, callback) {
var img = new Image();
}
var s = Math.min(w / nw, h / nh);
- console.log('scale : ' + s);
if (iframe.is('img')) {
s = Math.min(1, s);
}
FluidbookSlider.prototype = {
init: function () {
- $("#interface").append('<div id="slider"><div id="sliderthumb"><div class="doubleThumb"><div class="thumb left"><a href="#"><
img src=""></a><span class="number"></span><a href="#" class="bookmark left"></a></div><div class="thumb right"><a href="#"><img src="data/thumbnails/p3.jpg"></a><span class="number"></span><a href="#" class="bookmark right"></a></div></div></div><div id="sliderback"><div class="visible"></div></div><div id="slidercursor"><div class="visible"></div></div></div>');
+ $("#interface").append('<div id="slider"><div id="sliderthumb"><div class="doubleThumb"><div class="thumb left"><a href="#"><
div class="img"></div></a><span class="number"></span><a href="#" class="bookmark left"></a></div><div class="thumb right"><a href="#"><div class="img"></div></a><span class="number"></span><a href="#" class="bookmark right"></a></div></div></div><div id="sliderback"><div class="visible"></div></div><div id="slidercursor"><div class="visible"></div></div></div>');
var $this = this;
$(this.fluidbook).on('fluidbook.page.change.end', function (e, page) {
$this.updateCursorPosition();
if (gotoPage == undefined) {
gotoPage = true;
}
-
- var page = Math.floor(pos / this.snapsWidth);
- if (this.fluidbook.resize.orientation != 'portrait') {
- page *= 2;
+ var page;
+ if (this.fluidbook.resize.orientation == 'portrait') {
+ page = Math.floor(pos / (this.sliderWidth / this.snapsCount)) + 1;
+ pageMin = 1;
+ } else {
+ page = Math.floor(pos / (this.sliderWidth / this.snapsCount)) * 2;
+ pageMin = 0;
}
- page = Math.min(this.fluidbook.datas.pages, Math.max(0, page));
+
+ page = Math.min(this.fluidbook.datas.pages, Math.max(pageMin, page));
if (gotoPage) {
this.fluidbook.setCurrentPage(page);
$("#slider")
.css({width: this.sliderWidth, left: (ww - this.sliderWidth) / 2, top: hh - bottom})
.transform({scaleY: this.fluidbook.resize.interfaceScale});
+ $("#sliderthumb").transform({scaleX: this.fluidbook.resize.interfaceScale});
this.updateSnaps(single);
- this.cursorWidth = Math.max(30, this.snapsWidth);
+
$("#slidercursor").css('width', this.cursorWidth);
this.updateCursorPosition();
},
updateSnaps: function (single) {
-
if (single) {
this.snapsCount = this.fluidbook.datas.pages;
} else {
- var total = this.fluidbook.datas.pages;
- if (total % 2 == 0) {
- this.snapsCount = this.fluidbook.datas.pages / 2 + 1;
- } else {
- this.snapsCount = Math.ceil(this.fluidbook.datas.pages / 2);
- }
+ this.snapsCount = Math.floor(this.fluidbook.datas.pages / 2) + 1;
}
- this.snapsWidth = this.sliderWidth / this.snapsCount;
+ this.cursorWidth = Math.max(30, this.sliderWidth / this.snapsCount);
+ this.snapsWidth = (this.sliderWidth - this.cursorWidth) / (this.snapsCount - 1);
},
updateCursorPosition: function (page) {
}
var left;
if (this.fluidbook.resize.orientation == 'portrait') {
- left = this.snapsWidth * (Math.max(1, page) - 1);
+ left = this.snapsWidth * (page - 1);
} else {
- var current = page;
- if (current % 2 == 1 && page != this.fluidbook.datas.pages) {
- current--;
- }
- left = this.snapsWidth * (current / 2);
+ var current = Math.floor(page / 2);
+ left = this.snapsWidth * current;
}
- $("#slidercursor").css('left', left);
+ var x = Math.max(0, Math.min(left, this.sliderWidth - this.cursorWidth));
+ $("#slidercursor").css('left', x);
if ($("#sliderthumb").is(':visible')) {
this.updateThumb(page);
- $("#sliderthumb").css('left', left + (this.cursorWidth / 2) - (230 / 2));
+ $("#sliderthumb").css('left', x + (this.cursorWidth / 2) - ($("#sliderthumb").outerWidth() / 2));
}
},
}
if (single) {
- $("#sliderthumb .doubleThumb").addClass('single');
+ $("#sliderthumb").addClass('single');
} else {
- $("#sliderthumb .doubleThumb").removeClass('single');
+ $("#sliderthumb").removeClass('single');
if (left == 0 || right == 0) {
$("#sliderthumb .doubleThumb").addClass('simple');
if (left == 0) {
}
- if (left != 0) {
- var t=$("#sliderthumb .doubleThumb").find('.thumb.left');
- }
-
- if (right == 0) {
+ this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.left'), left);
+ this.setThumb($("#sliderthumb .doubleThumb").find('.thumb.right'), right);
+ },
+ setThumb: function (thumb, page) {
+ if (page > 0 && page <= this.fluidbook.datas.pages) {
+ thumb.css('visibility', 'visible');
+ this.fluidbook.loader.getThumbImage(page, thumb.find('.img'));
+ thumb.find('.number').text(this.fluidbook.physicalToVirtual(page));
} else {
-
+ thumb.css('visibility', 'hidden');
}
- },
-};
\ No newline at end of file
+ }
+};
function FluidbookIndex(fluidbook) {
- this.fluidbook = fluidbook;
- this.init();
+ this.fluidbook = fluidbook;
+ this.init();
}
FluidbookIndex.prototype = {
- init: function() {
- this.normalHTML = '';
- this.padHTML = '';
- },
- getView: function(group) {
- if (this.fluidbook.pad.enabled) {
- return this.getPadView(group);
- } else {
- return this.getNormalView();
- }
- },
- getPadView: function(group) {
- return this.fluidbook.bookmarks.getIndex(true, group);
- },
- getNormalView: function() {
+ init: function () {
+ this.normalHTML = '';
+ this.padHTML = '';
+ },
+ getView: function (group) {
+ if (this.fluidbook.pad.enabled) {
+ return this.getPadView(group);
+ } else {
+ return this.getNormalView();
+ }
+ },
+ getPadView: function (group) {
+ return this.fluidbook.bookmarks.getIndex(true, group);
+ },
+ getNormalView: function () {
- if (this.normalHTML == '') {
-
this.normalHTML += '<div class="content"><div id="indexView">';
- var j = 0;
- var ix1 = '', ix2 = '', ix = '';
- var c = '';
- var s1, s2;
+ if (this.normalHTML == '') {
+ this.normalHTML += '<div class="content"><div id="indexView">';
+ var j = 0;
+ var ix1 = '', ix2 = '', ix = '';
+ var c = '';
+ var s1, s2;
- for (var i = 0; i <= this.fluidbook.datas.pages; i += 2) {
- var pages = [];
- j = i + 1;
- ix1 = '';
- ix2 = '';
- c = '';
+ for (var i = 0; i <= this.fluidbook.datas.pages; i += 2) {
+ var pages = [];
+ j = i + 1;
+ ix1 = '';
+ ix2 = '';
+ c = '';
- if (this.fluidbook.l10n.dir == 'ltr') {
- s1 = 'left';
- s2 = 'right'
- } else {
- s1 = 'right';
- s2 = 'left'
- }
+ if (this.fluidbook.l10n.dir == 'ltr') {
+ s1 = 'left';
+ s2 = 'right'
+ } else {
+ s1 = 'right';
+ s2 = 'left'
+ }
- if (i > 0) {
- ix1 += '<div class="thumb ' + s1 + '"><a href="#/page/' + i + '">' + this.fluidbook.loader.getImage('data/thumbnails/p' + i + '.jpg') + '</a><span class="number">' + this.fluidbook.physicalToVirtual(i) + '</span>';
- if (this.fluidbook.bookmarks.enabled) {
- ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true);
- }
- pages.push(i);
- ix1 += '</div>';
+ if (i > 0) {
+ ix1 += '<div class="thumb ' + s1 + '"><a href="#/page/' + i + '">' + this.fluidbook.loader.getThumbImage(i) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(i) + '</span>';
+ if (this.fluidbook.bookmarks.enabled) {
+ ix1 += this.fluidbook.bookmarks.getBookmarkForPage(i, true);
+ }
+ pages.push(i);
+ ix1 += '</div>';
- } else {
- c = ' simple ' + s2;
- }
+ } else {
+ c = ' simple ' + s2;
+ }
- if (this.fluidbook.l10n.dir == 'rtl') {
- s1 = 'left';
- s2 = 'right'
- } else {
- s1 = 'right';
- s2 = 'left'
- }
+ if (this.fluidbook.l10n.dir == 'rtl') {
+ s1 = 'left';
+ s2 = 'right'
+ } else {
+ s1 = 'right';
+ s2 = 'left'
+ }
- if (j < this.fluidbook.datas.pages) {
- ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getImage('data/thumbnails/p' + j + '.jpg') + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
- if (this.fluidbook.bookmarks.enabled) {
- ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
- }
- ix2 += '</div>';
- pages.push(j);
- } else {
- c = ' simple ' + s2;
- }
- ix = ix1 + ix2;
-
this.normalHTML += '<div class="doubleThumb' + c + '" page="' + i + '" data-pages="' + pages.join(',') + '">' + ix;
- this.normalHTML += '</div>';
- }
- for (i = 0; i < 5; i++) {
-
this.normalHTML += '<div class="padding"></div>';
- }
- this.normalHTML += '</div></div>';
- }
+ if (j < this.fluidbook.datas.pages) {
+ ix2 += '<div class="thumb ' + s1 + '"><a href="#/page/' + j + '">' + this.fluidbook.loader.getThumbImage(j) + '</a><span class="number">' + this.fluidbook.physicalToVirtual(j) + '</span>';
+ if (this.fluidbook.bookmarks.enabled) {
+ ix2 += this.fluidbook.bookmarks.getBookmarkForPage(j, true);
+ }
+ ix2 += '</div>';
+ pages.push(j);
+ } else {
+ c = ' simple ' + s2;
+ }
+ ix = ix1 + ix2;
+ this.normalHTML += '<div class="doubleThumb' + c + '" page="' + i + '" data-pages="' + pages.join(',') + '">' + ix;
+ this.normalHTML += '</div>';
+ }
+ for (i = 0; i < 5; i++) {
+ this.normalHTML += '<div class="padding"></div>';
+ }
+ this.normalHTML += '</div></div>';
+ }
- return this.normalHTML;
- }
+ return this.normalHTML;
+ }
}
/* Desktop devices */
.desktop #links {
- cursor: url("../images/cur-zoom-in.png");
- cursor: zoom-in;
+ cursor: url("images/cur-zoom-in.cur"), url("../images/cur-zoom-in.cur"), zoom-in;
}
.desktop.zoomed #links {
- cursor: url("../images/cur-zoom-out.png");
- cursor: zoom-out;
+ cursor: url("images/cur-zoom-out.cur"), url("../images/cur-zoom-out.cur"), zoom-out;
}
#links .link {
left: 50px;
}
}
-
}
+
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0px;
font-size: 12px;
- img {
+ .img {
width: 100px;
height: @thumb-height;
background: #fff;
+@slider-background: rgba(0, 0, 0, 0.1);
+@slider-thumb-background: rgba(0, 0, 0, 0.2);
+
#slider {
position: absolute;
height: 6px;
}
&.drag {
- z-index: 12;
+
}
+ z-index: 12;
#sliderback {
position: absolute;
z-index: 0;
height: 46px;
.visible {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: @slider-background;
}
}
}
@sliderthumb-height: unit(@thumb-height+40, px);
- @sliderthumb-top: unit(-1*(@sliderthumb-height+30), px);
+ @sliderthumb-top: unit(-1*(@sliderthumb-height+24), px);
#sliderthumb {
position: absolute;
top: @sliderthumb-top;
left: 0;
- background-color: @menu-background;
- padding: 10px;
+ background-color: @slider-thumb-background;
+ padding: 15px;
//display: none;
width: 230px;
height: @sliderthumb-height;
+
+ &.single {
+ width: 130px;
+ &:after {
+ left: 53px;
+ }
+ }
+
+ &:after {
+ content: "";
+ position: absolute;
+ bottom: -16px;
+ left: 103px;
+ width: 0;
+ height: 0;
+ border-left: 12px solid transparent;
+ border-right: 12px solid transparent;
+ border-top: 16px solid @slider-thumb-background;
+ display: block;
+ }
+
+ .doubleThumb {
+ position: relative;
+ }
+
+ .number {
+ color: #fff;
+ }
}
&.drag {
#sliderthumb {
projects / fluidbook-html5.git / commitdiff