327 lines
9.5 KiB
JavaScript
327 lines
9.5 KiB
JavaScript
$(document).ready(function() {
|
|
console.log("ready");
|
|
|
|
var _win = {
|
|
w:$(document).width(),
|
|
h:$(document).height()
|
|
},
|
|
_$root = $('#root'),
|
|
_total_dp_len = 58,
|
|
_active_pages_keys = [],
|
|
_current_dp_key = "0", _current_dp_ob, _first_dp = true, _last_dp = false,
|
|
_$page_left = $('#page-left'), _$page_right = $('#page-right'),
|
|
_$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'),
|
|
_$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'),
|
|
_bgs_prefix = "images/pages/",
|
|
_$railway = $('#railway'),
|
|
_$pagination = $('#pagination'),
|
|
_$pagi_l_arrow = $('.wrapper-l .l', _$pagination), _$pagi_r_arrow = $('.wrapper-r .l', _$pagination),
|
|
_$pagi_l_txt = $('.wrapper-l .p', _$pagination), _$pagi_r_txt = $('.wrapper-r .p', _$pagination);
|
|
|
|
// ____ _ __
|
|
// / _/___ (_) /_
|
|
// / // __ \/ / __/
|
|
// _/ // / / / / /_
|
|
// /___/_/ /_/_/\__/
|
|
|
|
function init(){
|
|
// console.log("init", _ACTIVE_PAGES[0].bg);
|
|
initLayout();
|
|
initData();
|
|
initRailway();
|
|
initkeyboard();
|
|
initPagination();
|
|
initHashNav();
|
|
changePages();
|
|
};
|
|
|
|
|
|
function initLayout(){
|
|
_$root.css({
|
|
'margin-top':(_win.h-_$root.height())/2
|
|
});
|
|
};
|
|
|
|
function initData(){
|
|
_active_pages_keys = Object.keys(_ACTIVE_PAGES);
|
|
console.log("_active_pages_keys", _active_pages_keys);
|
|
// for (var p = 0; p < _ACTIVE_PAGES.length; p++) {
|
|
// if(typeof _ACTIVE_PAGES[p][0].page !== "undefined"){
|
|
// _active_pages[(_ACTIVE_PAGES[p][0].page+1)/2] = p;
|
|
// }
|
|
// else if(typeof _ACTIVE_PAGES[p][1].page !== "undefined"){
|
|
// _active_pages[_ACTIVE_PAGES[p][1].page/2] = p;
|
|
// }
|
|
// }
|
|
};
|
|
|
|
// _ __
|
|
// / | / /___ __ __
|
|
// / |/ / __ `/ | / /
|
|
// / /| / /_/ /| |/ /
|
|
// /_/ |_/\__,_/ |___/
|
|
|
|
function initRailway(){
|
|
var $ul = $('<ul>').appendTo(_$railway);
|
|
var $li, adp, bgl, bgr, pl, pr;
|
|
|
|
// loop through double pages
|
|
for (var dp = 0; dp <= _total_dp_len; dp++) {
|
|
// console.log("-- DOUBLE PAGE --", dp);
|
|
|
|
$li = $('<li>')
|
|
.addClass('double-page-'+dp)
|
|
.appendTo($ul);
|
|
|
|
// check if current double page is active or not by checking if we have info for it in pages.json
|
|
// adp = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
|
|
adp = typeof _ACTIVE_PAGES[dp] !== "undefined" ? dp : false;
|
|
// console.log("adp",adp);
|
|
|
|
if(adp !== false){
|
|
// if active double page
|
|
$li.addClass('active');
|
|
// find for left and right pages if we have background info
|
|
bgl = typeof _ACTIVE_PAGES[adp][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][0].bg : false;
|
|
bgr = typeof _ACTIVE_PAGES[adp][1].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][1].bg : false;
|
|
}else{
|
|
// if not active double page, no background
|
|
bgl = bgr = false;
|
|
}
|
|
|
|
// get the real page left and right numbers from double page number
|
|
pr = dp*2;
|
|
pl = pr -1;
|
|
|
|
// add left page only if not first page (cover)
|
|
if(dp!=0)
|
|
$('<span>')
|
|
.addClass('page page-'+(pl)+' double-page-'+dp+' page-left')
|
|
.addClass(bgl ? 'active' : 0)
|
|
.css({'background-image': bgl ? "url("+bgl+")" : "none"})
|
|
.appendTo($li);
|
|
|
|
// add right page only if not last page (backcover)
|
|
if(dp<_total_dp_len)
|
|
$('<span>')
|
|
.addClass('page page-'+pr+' double-page-'+dp+' page-right')
|
|
.addClass(bgr ? 'active' : 0)
|
|
.css({'background-image': bgr ? "url("+bgr+")" : "none"})
|
|
.appendTo($li);
|
|
}
|
|
|
|
$('li.active', _$railway).on('click', function(event) {
|
|
dp = $(this).attr('class').match(/double-page-(\d+)/)[1];
|
|
_current_dp_key = dp; //_active_pages[dp];
|
|
changePages();
|
|
});
|
|
}
|
|
|
|
// ____
|
|
// / __ \____ _____ ____ _____
|
|
// / /_/ / __ `/ __ `/ _ \/ ___/
|
|
// / ____/ /_/ / /_/ / __(__ )
|
|
// /_/ \__,_/\__, /\___/____/
|
|
// /____/
|
|
|
|
function nextPages(){
|
|
var i = _active_pages_keys.indexOf(_current_dp_key) +1;
|
|
if(i <= _active_pages_keys.length-1){
|
|
_current_dp_key = _active_pages_keys[i];
|
|
changePages();
|
|
}
|
|
};
|
|
|
|
function prevPages(){
|
|
var i = _active_pages_keys.indexOf(_current_dp_key)-1;
|
|
if(i >= 0){
|
|
_current_dp_key = _active_pages_keys[i];
|
|
changePages();
|
|
}
|
|
};
|
|
|
|
function changePages(){
|
|
console.log("changePages", _current_dp_key);
|
|
|
|
$('li',_$railway).removeClass('current');
|
|
|
|
if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){
|
|
_current_dp_ob = _ACTIVE_PAGES[_current_dp_key];
|
|
|
|
updatePagesDisplay();
|
|
updatePaginationDisplay();
|
|
updateRailwayDisplay();
|
|
updateHash();
|
|
updatePagesOverlays();
|
|
}
|
|
};
|
|
|
|
function updatePagesDisplay(){
|
|
if (typeof _current_dp_ob[0].bg !== "undefined") {
|
|
var pl = _current_dp_ob[0];
|
|
// change display of main page left
|
|
_$page_left
|
|
.css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
|
|
.removeClass(pageClassToRemove)
|
|
.addClass('page-'+pl.page);
|
|
// change pagination
|
|
_$pagi_l_txt.text(pl.page);
|
|
}else{
|
|
_$page_left.css({'background-image': "none"});
|
|
_$pagi_l_txt.text("");
|
|
}
|
|
|
|
if (typeof _current_dp_ob[1].bg !== "undefined") {
|
|
var pr = _current_dp_ob[1];
|
|
_$page_right
|
|
.css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
|
|
.removeClass(pageClassToRemove)
|
|
.addClass('page-'+pr.page);
|
|
_$pagi_r_txt.text(pr.page);
|
|
}else{
|
|
_$page_right.css({'background-image': "none"});
|
|
_$pagi_r_txt.text("");
|
|
}
|
|
};
|
|
|
|
function pageClassToRemove(){
|
|
var c = $(this).attr('class').match(/page-+\d+/);
|
|
if(c && c.length)
|
|
return c[0];
|
|
};
|
|
|
|
function updatePaginationDisplay(){
|
|
// hide or show nav arrows for first annd last double page
|
|
var i = _active_pages_keys.indexOf(_current_dp_key);
|
|
if( i == 0){
|
|
_$pagi_l_arrow.addClass('hidden');
|
|
}else{
|
|
_$pagi_l_arrow.removeClass('hidden')
|
|
}
|
|
if(i == _active_pages_keys.length-1){
|
|
_$pagi_r_arrow.addClass('hidden');
|
|
}else{
|
|
_$pagi_r_arrow.removeClass('hidden')
|
|
}
|
|
};
|
|
|
|
function updateRailwayDisplay(){
|
|
// make railway db thumb current
|
|
$('li.double-page-'+_current_dp_key).addClass('current');
|
|
};
|
|
|
|
// ____ __
|
|
// / __ \_ _____ _____/ /___ ___ _______
|
|
// / / / / | / / _ \/ ___/ / __ `/ / / / ___/
|
|
// / /_/ /| |/ / __/ / / / /_/ / /_/ (__ )
|
|
// \____/ |___/\___/_/ /_/\__,_/\__, /____/
|
|
// /____/
|
|
|
|
function updatePagesOverlays(){
|
|
console.log("updatePagesOverlays");
|
|
|
|
// remove all pages overlays
|
|
resetOverlays();
|
|
|
|
// loop through left and right pages from the current double page
|
|
var lr = 0,
|
|
p_ob,
|
|
$p,
|
|
map;
|
|
for(var i in _current_dp_ob){
|
|
p_ob = _current_dp_ob[i];
|
|
console.log("p_ob", p_ob);
|
|
// first left, then right
|
|
$p = lr == 0 ? _$maps_left : _$maps_right;
|
|
// loop through overlays from each page
|
|
for(var m in p_ob.overlays){
|
|
map = p_ob.overlays[m];
|
|
console.log('map', map);
|
|
$p.append(
|
|
$('<div>')
|
|
.addClass("map")
|
|
.attr('overlay', map.over)
|
|
.attr('debug', map.debug)
|
|
.css({
|
|
"left":map.x+"mm",
|
|
"top":map.y+"mm",
|
|
"width":map.w+"mm",
|
|
"height":map.h+"mm"
|
|
})
|
|
.bind("mouseover", function(e){
|
|
$(this)
|
|
.parents('.page').find('.overlay')
|
|
.css({
|
|
'background-image':'url(images/overlays/'+$(this).attr('overlay')+')'
|
|
});
|
|
})
|
|
.bind("mouseout", function(e){
|
|
$(this)
|
|
.parents('.page').find('.overlay')
|
|
.css({'background-image':'none'});
|
|
})
|
|
);
|
|
}
|
|
lr++;
|
|
}
|
|
|
|
};
|
|
|
|
function resetOverlays(){
|
|
$('.overlay, .maps','.page').css({'background-image':'none'}).children().remove();
|
|
}
|
|
// ___ __
|
|
// / | ____ _____/ /_ ____ __________
|
|
// / /| | / __ \/ ___/ __ \/ __ \/ ___/ ___/
|
|
// / ___ |/ / / / /__/ / / / /_/ / / (__ )
|
|
// /_/ |_/_/ /_/\___/_/ /_/\____/_/ /____/
|
|
|
|
function initHashNav(){
|
|
h = window.location.hash;
|
|
console.log('hash',h);
|
|
_current_dp_key = h.match(/^#(\d+)$/)[1];
|
|
}
|
|
|
|
function updateHash(){
|
|
window.location.hash = _current_dp_key;
|
|
};
|
|
|
|
// __ __ __ __
|
|
// / //_/__ __ __/ /_ ____ ____ __________/ /
|
|
// / ,< / _ \/ / / / __ \/ __ \/ __ `/ ___/ __ /
|
|
// / /| / __/ /_/ / /_/ / /_/ / /_/ / / / /_/ /
|
|
// /_/ |_\___/\__, /_.___/\____/\__,_/_/ \__,_/
|
|
// /____/
|
|
function initkeyboard(){
|
|
keyboardJS.bind('right', function(event) {
|
|
// console.log(event);
|
|
nextPages();
|
|
});
|
|
keyboardJS.bind('left', function(event) {
|
|
// console.log(event);
|
|
prevPages();
|
|
});
|
|
};
|
|
|
|
// ____ _ __ _
|
|
// / __ \____ _____ _(_)___ ____ _/ /_(_)___ ____
|
|
// / /_/ / __ `/ __ `/ / __ \/ __ `/ __/ / __ \/ __ \
|
|
// / ____/ /_/ / /_/ / / / / / /_/ / /_/ / /_/ / / / /
|
|
// /_/ \__,_/\__, /_/_/ /_/\__,_/\__/_/\____/_/ /_/
|
|
// /____/
|
|
function initPagination(){
|
|
$('.wrapper-l .l', _$pagination).on('click', function(event) {
|
|
prevPages();
|
|
});
|
|
$('.wrapper-r .l', _$pagination).on('click', function(event) {
|
|
nextPages();
|
|
});
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
init();
|
|
});
|