123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326 |
- $(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();
- });
|