bachir/archeo010110-ananthology
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

big refactoring

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-01-29 14:57:01 +01:00
parent dfc62f63fe
commit 599c25c390
6 changed files with 343 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/dist/main.css
Vendored
+76 -58
View File
@@ -4,20 +4,22 @@ html, body {
background-color: #1A1A1A; }
#root {
height: 207.26mm;
margin: 0 auto;
position: relative;
width: 475.04741mm; }
width: 475.52246mm;
height: 237.26mm;
margin: 0 auto;
letter-spacing: -.25em; }
#root > * {
letter-spacing: normal; }
#header {
display: absolute;
top: 0;
left: 0;
display: inline-block;
width: 15mm;
height: 100%;
height: 207.26mm;
margin-right: 5mm;
background-color: white; }
#header h1 {
margin: 0;
margin: 0 0 15mm 0;
padding: 0.3em;
position: absolute;
bottom: 0;
@@ -26,10 +28,9 @@ html, body {
transform: rotate(270deg); }
#main {
position: absolute;
top: 0;
right: 0;
width: 455.04741mm; }
display: inline-block;
width: 455.04741mm;
overflow: hidden; }
#main #page-left {
float: left;
background-position: right; }
@@ -61,57 +62,74 @@ html, body {
position: absolute;
background-color: rgba(50, 50, 50, 0.8);
cursor: pointer; }
#main .page.page-6 .overlay {
background-image: url("../../images/vectos/04_chance-RB.svg"); }
#main #navigation {
position: absolute;
z-index: 3;
bottom: 0;
width: 100%;
padding: 2mm 0;
background-color: rgba(26, 26, 26, 0.7);
overflow: hidden;
text-align: center;
opacity: 0;
transition: opacity .3s ease-in-out; }
#main #navigation:hover {
opacity: 1; }
#main #pagination {
color: #fff;
font-size: 1em;
padding: 0 0 2mm 0; }
#main #pagination div {
display: inline-block;
width: 49%; }
#main #pagination div.wrapper-l {
left: 0;
text-align: left; }
#main #pagination div.wrapper-r {
right: 0;
text-align: right; }
#main #pagination div span.l {
cursor: pointer;
line-height: -1; }
#main #railway ul {
padding: 1mm;
margin: 0; }
#main #railway ul li {
#navigation {
width: 455.04741mm;
height: 30mm;
overflow: hidden;
margin: 0 0 0 20mm;
padding: 0;
background-color: rgba(26, 26, 26, 0.7);
text-align: center;
transition: opacity .3s ease-in-out; }
#pagination {
color: #fff;
font-size: 1em;
padding: 1mm 0;
letter-spacing: -.25em;
opacity: 0.3;
transition: opacity .3s ease-in-out; }
#pagination > * {
letter-spacing: normal; }
#pagination div {
display: inline-block;
width: 49.9%; }
#pagination div span.p {
display: inline-block;
vertical-align: middle;
min-width: 3em;
text-align: center; }
#pagination div span.l {
cursor: pointer;
line-height: -1em; }
#pagination div span.l.hidden {
visibility: hidden; }
#pagination div.wrapper-l {
left: 0;
text-align: right; }
#pagination div.wrapper-r {
right: 0;
text-align: left;
border-left: 1px solid white; }
#pagination:hover {
opacity: 1; }
#railway ul {
padding: 1mm 0;
margin: 0;
text-align: justify;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-ms-flex-pack: justify;
justify-content: space-between; }
#railway ul li {
list-style: none;
opacity: 0.2;
transition: opacity 0.3s ease-in-out; }
#railway ul li.current, #railway ul li.active:hover {
opacity: 1; }
#railway ul li span {
display: inline-block;
background-color: white;
width: 1mm;
height: 7mm;
margin-left: 0.5mm;
background-position: center;
background-size: cover;
opacity: 0.2;
transition: opacity 0.3s ease-in-out; }
#main #railway ul li.active {
background-size: cover; }
#railway ul li span.active {
width: 7mm;
cursor: pointer; }
#main #railway ul li.page-right {
margin-right: 1mm; }
#main #railway ul li.current, #main #railway ul li.active:hover {
opacity: 1; }
#main #railway ul:hover li {
opacity: 1; }
#railway ul:hover span {
opacity: 1; }
css/main.scss
+98 -70
View File
@@ -3,30 +3,34 @@ html,body{
background-color: #1A1A1A;
}
$debug:false;
$tranchew:15mm;
$pw:227.41mm;
$ph:207.26mm;
$mt:1cm;
$mb:1cm;
$me:1cm;
$mi:1cm;
$tranche_w:15mm;
$tranche_mr:5mm;
$p_w:227.41mm;
$p_h:207.26mm;
$main_w:2.001*$p_w;
$navh:30mm;
// $mt:1cm;
// $mb:1cm;
// $me:1cm;
// $mi:1cm;
#root{
height:$ph;
margin:0 auto;
position: relative;
width:$tranchew+5+2.001*$pw;
width:($tranche_w+$tranche_mr+$main_w)*1.001;
height:$p_h+$navh;
margin:0 auto;
letter-spacing:-.25em;
&>*{letter-spacing: normal;}
}
#header{
display: absolute;
top: 0; left:0;
width: $tranchew; height: 100%;
display: inline-block;
width: $tranche_w; height: $p_h;
margin-right:$tranche_mr;
background-color: white;
h1{
margin: 0; padding:0.3em;
margin: 0 0 15mm 0; padding:0.3em;
position: absolute;
bottom:0; left:0;
transform-origin: 0% 0%;
@@ -35,10 +39,10 @@ $mi:1cm;
}
#main{
position: absolute;
top:0; right:0;
width:2.001*$pw;
display: inline-block;
width:$main_w;
overflow: hidden;
// background-color: magenta;
#page-left{
float:left;
// padding:$mt $mi $mb $me;
@@ -53,11 +57,8 @@ $mi:1cm;
}
.page{
position: relative;
@if $debug {
background-color: green;
}
width:$pw;
height:$ph;
width:$p_w;
height:$p_h;
background-repeat: no-repeat;
background-size: contain;
@@ -69,11 +70,6 @@ $mi:1cm;
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
@if $debug {
border: 1px solid blue;
}
// img{max-width: 100%;}
}
@@ -89,64 +85,96 @@ $mi:1cm;
}
}
&.page-6 .overlay{
background-image: url("../../images/vectos/04_chance-RB.svg")
}
}
#navigation{
position:absolute; z-index: 3;
bottom:0; width:100%; // height:2cm;
padding:2mm 0;
background-color: rgba(26, 26, 26, 0.7);
overflow: hidden;
text-align: center;
opacity: 0;
transition: opacity .3s ease-in-out;
&:hover{opacity: 1;}
}
}
#pagination{
color:#fff;
font-size: 1em;
padding: 0 0 2mm 0;
div{
#navigation{
width:$main_w;
height:$navh;
overflow: hidden;
$ml:$tranche_w + $tranche_mr;
margin:0 0 0 $ml;
padding:0;
background-color: rgba(26, 26, 26, 0.7);
// background-color: green;
text-align: center;
// opacity: 0;
transition: opacity .3s ease-in-out;
// &:hover{opacity: 1;}
}
#pagination{
color:#fff;
font-size: 1em;
padding: 1mm 0;
letter-spacing: -.25em;
&>*{letter-spacing: normal;}
div{
display: inline-block;
width:49.9%;
span.p{
display: inline-block;
width:49%;
&.wrapper-l{left:0; text-align: left;}
&.wrapper-r{right:0; text-align: right;}
span.p{
}
span.l{
cursor: pointer;
line-height: -1;
}
vertical-align: middle;
min-width: 3em;
text-align: center;
}
span.l{
cursor: pointer;
line-height: -1em;
&.hidden{visibility: hidden;}
}
&.wrapper-l{
left:0; text-align: right;
// span.p{text-align: left;}
}
&.wrapper-r{
right:0; text-align: left; border-left: 1px solid white;
// span.p{text-align: right;}
}
}
#railway{
ul{
padding:1mm; margin:0;
li{
display: inline-block; vertical-align: middle;
opacity: 0.3;
transition: opacity .3s ease-in-out;
&:hover{opacity: 1;}
}
#railway{
// background-color: blue;
ul{
padding:1mm 0; margin:0;
text-align: justify;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
li{
// display: inline-block; vertical-align: middle;
// display:
list-style: none;
opacity:0.2;
transition: opacity 0.3s ease-in-out;
&.current, &.active:hover{opacity: 1;}
span{
display: inline-block;
background-color: white;
width:1mm; height:7mm;
margin-left: 0.5mm;
// margin-left: 0.5mm;
background-position: center;
background-size: cover;
&.active{
width:7mm; cursor: pointer;
}
&.page-right{
margin-right: 1mm;
// margin-right: 1mm;
}
opacity:0.2;
transition: opacity 0.3s ease-in-out;
&.current, &.active:hover{opacity: 1;}
}
&:hover li{opacity: 1;}
}
&:hover span{opacity: 1;}
}
}
index.html
+16 -16
View File
@@ -22,24 +22,24 @@
<div class="overlay"></div>
<div class="maps"></div>
</section>
<nav id="navigation">
<div id="pagination">
<div class="wrapper-l">
<span class="l">&#10094;</span>
<span class="p"></span>
</div>
<div class="wrapper-r">
<span class="p"></span>
<span class="l">&#10095;</span>
</div>
</div>
<div id="railway">
</div>
</nav>
</section>
<nav id="navigation">
<div id="pagination">
<div class="wrapper-l">
<span class="l">&#9664;</span>
<span class="p"></span>
</div>
<div class="wrapper-r">
<span class="p"></span>
<span class="l">&#9654;</span>
</div>
</div>
<div id="railway">
</div>
</nav>
</div>
js/dist/main.min.js
Vendored
+11 -10
View File
@@ -1,11 +1,12 @@
$(document).ready(function(){console.log("ready");var _win={w:$(document).width(),h:$(document).height()},_$root=$('#root'),_pl=58,_active_pages={},_current_pages=0,_page_left_bg,_page_right_bg,_$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=$('#pagination .wrapper-l .p'),_$pagi_r=$('#pagination .wrapper-r .p');function init(){initLayout();initData();initRailway();initkeyboard();initPagination();changePages();};function initLayout(){_$root.css({'margin-top':(_win.h-_$root.height())/2});};function initData(){for(var p=0;p<_PAGES.length;p++){if(typeof _PAGES[p][0].page!=="undefined"){_active_pages[(_PAGES[p][0].page+1)/2]=p;}
else if(typeof _PAGES[p][1].page!=="undefined"){_active_pages[_PAGES[p][1].page/2]=p;}}
console.log("_active_pages",_active_pages);};function initRailway(){var $ul=$('<ul>');var ap,bgl,bgr;for(var dp=0;dp<=_pl;dp++){ap=typeof _active_pages[dp]!=="undefined"?_active_pages[dp]:false;if(ap!==false){bgl=typeof _PAGES[ap][0].bg!=="undefined"?_bgs_prefix+"thumbs/"+_PAGES[ap][0].bg:false;bgr=typeof _PAGES[ap][1].bg!=="undefined"?_bgs_prefix+"thumbs/"+_PAGES[ap][1].bg:false;}else{bgl=bgr=false;}
var p=dp*2;if(dp!=0)
$('<li>').addClass('page page-'+(p-1)+' double-page-'+dp+' page-left').addClass(bgl?'active':0).css({'background-image':bgl?"url("+bgl+")":"none"}).appendTo($ul);if(dp<_pl)
$('<li>').addClass('page page-'+p+' double-page-'+dp+' page-right').addClass(bgr?'active':0).css({'background-image':bgr?"url("+bgr+")":"none"}).appendTo($ul);}
$ul.appendTo(_$railway);$('li',_$railway).on('click',function(event){var p=$(this).attr('class').match(/page-(\d+)/)[1];console.log('page',p);console.log(p%2);var dp=p%2?(p*1+1)/2:p/2;_current_pages=_active_pages[dp];changePages();});}
function nextPages(){if(_current_pages<_PAGES.length-1){_current_pages+=1;changePages();}};function prevPages(){if(_current_pages>0){_current_pages-=1;changePages();}};function changePages(){console.log("changePages",_current_pages);$('li',_$railway).removeClass('current');if(typeof _PAGES[_current_pages][0].bg!=="undefined"){var pl=_PAGES[_current_pages][0];_$page_left.css({'background-image':"url("+_bgs_prefix+pl.bg+")"}).removeClass(pageClassToRemove).addClass('page-'+pl.page);_$pagi_l.text(pl.page);$('li.page-'+pl.page).addClass('current');}else{_$page_left.css({'background-image':"none"});_$pagi_l.text("");}
if(typeof _PAGES[_current_pages][1].bg!=="undefined"){var pr=_PAGES[_current_pages][1];_$page_right.css({'background-image':"url("+_bgs_prefix+pr.bg+")"}).removeClass(pageClassToRemove).addClass('page-'+pr.page);_$pagi_r.text(pr.page);$('li.page-'+pr.page).addClass('current');}else{_$page_right.css({'background-image':"none"});_$pagi_r.text("");}};function pageClassToRemove(){var c=$(this).attr('class').match(/page-+\d+/);if(c&&c.length)
return c[0];};function updatePagesOverlays(){console.log("updatePagesOverlays");$('.overlay, .maps',_$page_left).children().remove();$('.overlay, .maps',_$page_right).children().remove();console.log("Overlays",_PAGES[_current_pages].overlays);for(var map in _PAGES[_current_pages].overlays){if(_PAGES[_current_pages].overlays.hasOwnProperty(map)){map=_PAGES[_current_pages].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-image':'url(images/vectos/'+$(this).attr('overlay')+')'});}));}}};function initkeyboard(){keyboardJS.bind('right',function(event){nextPages();});keyboardJS.bind('left',function(event){prevPages();});};function initPagination(){$('.wrapper-l .l',_$pagination).on('click',function(event){prevPages();});$('.wrapper-r .l',_$pagination).on('click',function(event){nextPages();});};init();});
$(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(){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);};function initRailway(){var $ul=$('<ul>').appendTo(_$railway);var $li,adp,bgl,bgr,pl,pr;for(var dp=0;dp<=_total_dp_len;dp++){$li=$('<li>').addClass('double-page-'+dp).appendTo($ul);adp=typeof _ACTIVE_PAGES[dp]!=="undefined"?dp:false;if(adp!==false){$li.addClass('active');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{bgl=bgr=false;}
pr=dp*2;pl=pr-1;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);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;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];_$page_left.css({'background-image':"url("+_bgs_prefix+pl.bg+")"}).removeClass(pageClassToRemove).addClass('page-'+pl.page);_$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("");}
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')}
$('li.double-page-'+_current_dp_key).addClass('current');}};function pageClassToRemove(){var c=$(this).attr('class').match(/page-+\d+/);if(c&&c.length)
return c[0];};function updatePagesOverlays(){console.log("updatePagesOverlays");$('.overlay, .maps',_$page_left).children().remove();$('.overlay, .maps',_$page_right).children().remove();console.log("Overlays",_ACTIVE_PAGES[_current_dp_key].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-image':'url(images/vectos/'+$(this).attr('overlay')+')'});}));}}};function initkeyboard(){keyboardJS.bind('right',function(event){nextPages();});keyboardJS.bind('left',function(event){prevPages();});};function initPagination(){$('.wrapper-l .l',_$pagination).on('click',function(event){prevPages();});$('.wrapper-r .l',_$pagination).on('click',function(event){nextPages();});};init();});
js/main.js
+109 -78
View File
@@ -6,17 +6,17 @@ $(document).ready(function() {
h:$(document).height()
},
_$root = $('#root'),
_pl = 58,
_active_pages = {},
_current_pages = 0,
_page_left_bg, _page_right_bg,
_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 = $('#pagination .wrapper-l .p'), _$pagi_r = $('#pagination .wrapper-r .p');
_$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);
// ____ _ __
// / _/___ (_) /_
@@ -25,7 +25,7 @@ $(document).ready(function() {
// /___/_/ /_/_/\__/
function init(){
// console.log("init", _PAGES[0].bg);
// console.log("init", _ACTIVE_PAGES[0].bg);
initLayout();
initData();
initRailway();
@@ -42,15 +42,16 @@ $(document).ready(function() {
};
function initData(){
for (var p = 0; p < _PAGES.length; p++) {
if(typeof _PAGES[p][0].page !== "undefined"){
_active_pages[(_PAGES[p][0].page+1)/2] = p;
}
else if(typeof _PAGES[p][1].page !== "undefined"){
_active_pages[_PAGES[p][1].page/2] = p;
}
}
console.log("_active_pages", _active_pages);
_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;
// }
// }
};
// _ __
@@ -60,53 +61,61 @@ $(document).ready(function() {
// /_/ |_/\__,_/ |___/
function initRailway(){
var $ul = $('<ul>');
var ap, bgl, bgr;
for (var dp = 0; dp <= _pl; dp++) {
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);
ap = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
// console.log("ap",ap);
if(ap !== false){
bgl = typeof _PAGES[ap][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][0].bg : false;
bgr = typeof _PAGES[ap][1].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][1].bg : false;
$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;
}
// console.log("_PAGES[ap][1].bg", _PAGES[ap][1].bg);
// console.log("bgl", bgl);
// console.log("bgr", bgr);
var p = dp*2;
// 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)
$('<li>')
.addClass('page page-'+(p-1)+' double-page-'+dp+' page-left')
$('<span>')
.addClass('page page-'+(pl)+' double-page-'+dp+' page-left')
.addClass(bgl ? 'active' : 0)
.css({'background-image': bgl ? "url("+bgl+")" : "none"})
.appendTo($ul);
.appendTo($li);
if(dp<_pl)
$('<li>')
.addClass('page page-'+p+' double-page-'+dp+' page-right')
// 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($ul);
.appendTo($li);
}
$ul.appendTo(_$railway);
$('li', _$railway).on('click', function(event) {
var p = $(this).attr('class').match(/page-(\d+)/)[1];
console.log('page', p);
console.log(p%2);
// check if page is pair ou impair and calculate de double_page number
var dp = p%2 ? (p*1+1)/2 : p/2;
_current_pages = _active_pages[dp];
$('li.active', _$railway).on('click', function(event) {
dp = $(this).attr('class').match(/double-page-(\d+)/)[1];
_current_dp_key = dp; //_active_pages[dp];
changePages();
});
}
// TODO: next page arrow
// ____
// / __ \____ _____ ____ _____
// / /_/ / __ `/ __ `/ _ \/ ___/
@@ -115,50 +124,72 @@ $(document).ready(function() {
// /____/
function nextPages(){
if(_current_pages < _PAGES.length-1){
_current_pages+=1;
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(){
if(_current_pages > 0){
_current_pages-=1;
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_pages);
console.log("changePages", _current_dp_key);
$('li',_$railway).removeClass('current');
if (typeof _PAGES[_current_pages][0].bg !== "undefined") {
var pl = _PAGES[_current_pages][0];
_$page_left
.css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
.removeClass(pageClassToRemove)
.addClass('page-'+pl.page);
_$pagi_l.text(pl.page);
$('li.page-'+pl.page).addClass('current');
}else{
_$page_left.css({'background-image': "none"});
_$pagi_l.text("");
}
if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){
_current_dp_ob = _ACTIVE_PAGES[_current_dp_key];
if (typeof _PAGES[_current_pages][1].bg !== "undefined") {
var pr = _PAGES[_current_pages][1];
_$page_right
.css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
.removeClass(pageClassToRemove)
.addClass('page-'+pr.page);
_$pagi_r.text(pr.page);
$('li.page-'+pr.page).addClass('current');
}else{
_$page_right.css({'background-image': "none"});
_$pagi_r.text("");
}
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();
};
@@ -175,11 +206,11 @@ $(document).ready(function() {
$('.overlay, .maps',_$page_left).children().remove();
$('.overlay, .maps',_$page_right).children().remove();
console.log("Overlays", _PAGES[_current_pages].overlays);
console.log("Overlays", _ACTIVE_PAGES[_current_dp_key].overlays);
// build page_left overlays
for (var map in _PAGES[_current_pages].overlays) {
if (_PAGES[_current_pages].overlays.hasOwnProperty(map)) {
map = _PAGES[_current_pages].overlays[map];
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>')
js/pages.json
+33 -33
View File
@@ -1,5 +1,5 @@
var _PAGES=[
[
var _ACTIVE_PAGES={
"0":[
{"active":false},
{
"page":0,
@@ -7,7 +7,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"1":[
{
"page":1,
"bg":"00_1couvV.jpeg",
@@ -19,7 +19,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"2":[
{
"page":3,
"bg":"02_TH.jpeg",
@@ -31,7 +31,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"3":[
{
"page":5,
"bg":"04_chance.jpeg",
@@ -43,7 +43,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"4":[
{
"page":7,
"bg":"06_byGeorge.jpeg",
@@ -55,7 +55,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"5":[
{
"page":9,
"bg":"08_Brecht.jpeg",
@@ -66,7 +66,7 @@ var _PAGES=[
},
{"active":false}
],
[
"7":[
{
"page":13,
"bg":"12_Bremer.jpeg",
@@ -74,7 +74,7 @@ var _PAGES=[
},
{"active":false}
],
[
"8":[
{
"page":15,
"bg":"14_Brown.jpeg",
@@ -82,7 +82,7 @@ var _PAGES=[
},
{"active":false}
],
[
"12":[
{"active":false},
{
"page":24,
@@ -90,7 +90,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"14":[
{
"page":27,
"bg":"26_Cage.jpeg",
@@ -98,7 +98,7 @@ var _PAGES=[
},
{"active":false}
],
[
"15":[
{
"page":29,
"bg":"28_deMaria.jpeg",
@@ -106,7 +106,7 @@ var _PAGES=[
},
{"active":false}
],
[
"17":[
{
"page":33,
"bg":"32_Flynt.jpeg",
@@ -114,7 +114,7 @@ var _PAGES=[
},
{"active":false}
],
[
"19":[
{"active":false},
{
"page":38,
@@ -122,7 +122,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"20":[
{"active":false},
{
"page":40,
@@ -130,7 +130,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"21":[
{"active":false},
{
"page":42,
@@ -138,7 +138,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"23":[
{"active":false},
{
"page":46,
@@ -146,7 +146,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"25":[
{
"page":49,
"bg":"48_Dennis.jpeg",
@@ -154,7 +154,7 @@ var _PAGES=[
},
{"active":false}
],
[
"28":[
{
"page":55,
"bg":"54_DingDong.jpeg",
@@ -162,7 +162,7 @@ var _PAGES=[
},
{"active":false}
],
[
"29":[
{
"page":57,
"bg":"56_Johnson.jpeg",
@@ -170,7 +170,7 @@ var _PAGES=[
},
{"active":false}
],
[
"30":[
{
"page":59,
"bg":"58_MacLow.jpeg",
@@ -178,7 +178,7 @@ var _PAGES=[
},
{"active":false}
],
[
"40":[
{"active":false},
{
"page":80,
@@ -186,7 +186,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"46":[
{
"page":91,
"bg":"90_Simone.jpeg",
@@ -194,7 +194,7 @@ var _PAGES=[
},
{"active":false}
],
[
"47":[
{
"page":93,
"bg":"92_Paik.jpeg",
@@ -202,7 +202,7 @@ var _PAGES=[
},
{"active":false}
],
[
"48":[
{
"page":95,
"bg":"94_Riley.jpeg",
@@ -210,7 +210,7 @@ var _PAGES=[
},
{"active":false}
],
[
"50":[
{"active":false},
{
"page":100,
@@ -218,7 +218,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"51":[
{
"page":101,
"bg":"100_Williams.jpeg",
@@ -226,7 +226,7 @@ var _PAGES=[
},
{"active":false}
],
[
"53":[
{
"page":105,
"bg":"104_Wolff.jpeg",
@@ -234,7 +234,7 @@ var _PAGES=[
},
{"active":false}
],
[
"55":[
{
"page":109,
"bg":"108_Young.jpeg",
@@ -242,7 +242,7 @@ var _PAGES=[
},
{"active":false}
],
[
"56":[
{
"page":111,
"bg":"110_StraightLine.jpeg",
@@ -250,7 +250,7 @@ var _PAGES=[
},
{"active":false}
],
[
"57":[
{
"page":113,
"bg":"112_Portrait?.jpeg",
@@ -262,7 +262,7 @@ var _PAGES=[
"overlays":[]
}
],
[
"58":[
{
"page":115,
"bg":"114_4couv.jpeg",
@@ -270,4 +270,4 @@ var _PAGES=[
},
{"active":false}
]
];
};