// ToDo: consider re-using existing popinOverlay div?
$('body').append('<div id="zoomPopupOverlay"></div><div id="zoomPopupWrapper"><a href="#" class="zoomPopupClose"></a></div>');
- $(document).on('click', '.zoomPopup', function(e) {
+ $(document).on('click', '.zoomPopup', function (e) {
e.preventDefault();
$this.zoomLink(this);
return false;
});
- $(document).on('click touchend', '#zoomPopupOverlay, .zoomPopupClose', function(e) {
+ $(document).on('click touchend', '#zoomPopupOverlay, .zoomPopupClose', function (e) {
console.log('closing zoomPopup...');
$this.zoomLinkReset();
});
}
},
- zoomLink: function(link) {
+ zoomLink: function (link) {
var $this = this;
- if($('body').hasClass('zoomPopup')) return false; // Ignore clicks on other zoom links if popup is already open
+ // Todo : should be impossible thanks to the overlay
+ if ($('body').hasClass('zoomPopup')) return false; // Ignore clicks on other zoom links if popup is already open
// If the interface is zoomed in, we must zoom out first
- if ($('body').hasClass('zoomed')) {
+ 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
- $(document).one('fluidbookZoomOutEnded', function() {
+ $(document).one('fluidbook.zoom.out.end', function () {
$this.zoomLink(link);
});
// Zoom out
- this.fluidbook.resetZoom();
-
+ this.fluidbook.zoom.resetZoom();
return false;
}
availableHeight = $(window).height() - (2 * zoomMargin),
$link = $(link),
box = $link[0].getBoundingClientRect(),
- parent = $link.parent('.link'),
+ parent = $link.closest('.link'),
+ linkId = $(parent).attr('id').split('_', 2)[1],
maxZoom = parseInt($link.data('maxzoom')) || 2,
- zoomImage = $link.data('zoomimage'),
+ zoomImage = 'data/links/zoom_' + linkId + '.png',
x,
y,
zoomWidth,
zoomHeight = box.height * zoomScale;
// Calculate translate co-ordinates
- x = availableWidth/2 - parent.offset().left - zoomWidth/2 + zoomMargin;
- y = availableHeight/2 - parent.offset().top - zoomHeight/2 + zoomMargin;
+ x = availableWidth / 2 - parent.offset().left - zoomWidth / 2 + zoomMargin;
+ y = availableHeight / 2 - parent.offset().top - zoomHeight / 2 + zoomMargin;
// console.log(parent);
// console.info(box);
width: box.width,
height: box.height,
left: box.left,
- top: box.top
- //backgroundImage: 'url('+ zoomImage +')'
+ top: box.top,
+ backgroundImage: 'url(' + zoomImage + ')'
});
z.show();
- setTimeout(function(){
+ setTimeout(function () {
z.css({
- transform: 'translateX('+ x +'px) translateY('+ y +'px)',
+ transform: 'translateX(' + x + 'px) translateY(' + y + 'px)',
width: zoomWidth,
height: zoomHeight
});
z.data('scale', zoomScale);
+ // Todo : still useful ?
$('body').addClass('zoomPopup');
},
- zoomLinkReset: function() {
+ zoomLinkReset: function () {
if (!$('body').hasClass('zoomPopup')) return false; // Already open
// Hide popup after transition completes
// ToDo: use CSS transition end event to do this without needing a timeout value (or use Web Animation API)
// ToDo: see https://davidwalsh.name/css-animation-callback
- setTimeout(function() {
+ setTimeout(function () {
$('#zoomPopupWrapper').hide();
$('body').removeClass('zoomPopup');
}, 500);