123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275 |
- $(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();
- 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];
- 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("");
- }
- // 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')
- }
- // make railway db thumb current
- $('li.double-page-'+_current_dp_key).addClass('current');
- }
- // updatePagesOverlays();
- };
- function pageClassToRemove(){
- var c = $(this).attr('class').match(/page-+\d+/);
- if(c && c.length)
- return c[0];
- };
- function updatePagesOverlays(){
- console.log("updatePagesOverlays");
- // remove all pages overlays
- $('.overlay, .maps',_$page_left).children().remove();
- $('.overlay, .maps',_$page_right).children().remove();
- console.log("Overlays", _ACTIVE_PAGES[_current_dp_key].overlays);
- // build page_left overlays
- for (var map in _ACTIVE_PAGES[_current_dp_key].overlays) {
- if (_ACTIVE_PAGES[_current_dp_key].overlays.hasOwnProperty(map)) {
- map = _ACTIVE_PAGES[_current_dp_key].overlays[map];
- console.log("Map",map);
- _$maps_left.append(
- $('<div>')
- .addClass("map")
- .attr('overlay', map.over)
- .css({
- "left":map.x,
- "top":map.y,
- "width":map.w,
- "height":map.h
- })
- .bind("mouseover", function(e){
- $(this)
- .parents('.page').find('.overlay')
- .css({
- // 'background-color':"red",
- 'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
- });
- })
- );
- }
- }
- };
- // __ __ __ __
- // / //_/__ __ __/ /_ ____ ____ __________/ /
- // / ,< / _ \/ / / / __ \/ __ \/ __ `/ ___/ __ /
- // / /| / __/ /_/ / /_/ / /_/ / /_/ / / / /_/ /
- // /_/ |_\___/\__, /_.___/\____/\__,_/_/ \__,_/
- // /____/
- 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();
- });
|