archeo010110-ananthology/js/main.js

$(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', _SETTINGS.debug ? map.debug : _SETTINGS.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'});
            })
          );
        if(typeof map.repere !== "undefined"){
          $p.append(
            $('<div>')
              .addClass('repere')
              .css({
                "left":map.repere_x+"mm",
                "top":map.repere_y+"mm",
                "width":map.repere_w+"mm",
                "height":map.repere_h+"mm",
                'background-image':'url(images/reperes/'+map.repere+')'
              })
          );
        }


      }
      lr++;
    }

  };

  function resetOverlays(){
    $('.overlay, .maps','.page').css({'background-image':'none'}).children().remove();
  }
  //     ___               __
  //    /   |  ____  _____/ /_  ____  __________
  //   / /| | / __ \/ ___/ __ \/ __ \/ ___/ ___/
  //  / ___ |/ / / / /__/ / / / /_/ / /  (__  )
  // /_/  |_/_/ /_/\___/_/ /_/\____/_/  /____/

  function initHashNav(){
    console.log('initHashNav');
    h = window.location.hash;
    console.log('hash',h);
    if(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();
});