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

Compare commits

base: bachir/archeo010110-ananthology:0.2
Branches Tags
bachir/archeo010110-ananthology:master
bachir/archeo010110-ananthology:0.4 bachir/archeo010110-ananthology:0.3 bachir/archeo010110-ananthology:0.2 bachir/archeo010110-ananthology:0.1
...
compare: bachir/archeo010110-ananthology:0.3
Branches Tags
bachir/archeo010110-ananthology:master
bachir/archeo010110-ananthology:0.4 bachir/archeo010110-ananthology:0.3 bachir/archeo010110-ananthology:0.2 bachir/archeo010110-ananthology:0.1
2 Commits
0.2 ... 0.3
Author SHA1 Message Date
Bachir Soussi Chiadmi 607a27cfd0 activated overlays, commented page.js 2017-01-29 19:00:14 +01:00
Bachir Soussi Chiadmi 599c25c390 big refactoring 2017-01-29 14:57:01 +01:00
10 changed files with 634 additions and 338 deletions
Expand all files Collapse all files
css/dist/main.css
Vendored
+78 -59
View File
@@ -4,20 +4,22 @@ html, body {
background-color: #1A1A1A; } background-color: #1A1A1A; }
#root { #root {
height: 207.26mm;
margin: 0 auto;
position: relative; position: relative;
width: 475.04741mm; } width: 475.52246mm;
height: 237.26mm;
margin: 0 auto;
letter-spacing: -.25em; }
#root > * {
letter-spacing: normal; }
#header { #header {
display: absolute; display: inline-block;
top: 0;
left: 0;
width: 15mm; width: 15mm;
height: 100%; height: 207.26mm;
margin-right: 5mm;
background-color: white; } background-color: white; }
#header h1 { #header h1 {
margin: 0; margin: 0 0 15mm 0;
padding: 0.3em; padding: 0.3em;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -26,10 +28,9 @@ html, body {
transform: rotate(270deg); } transform: rotate(270deg); }
#main { #main {
position: absolute; display: inline-block;
top: 0; width: 455.04741mm;
right: 0; overflow: hidden; }
width: 455.04741mm; }
#main #page-left { #main #page-left {
float: left; float: left;
background-position: right; } background-position: right; }
@@ -59,59 +60,77 @@ html, body {
z-index: 2; } z-index: 2; }
#main .page .maps .map { #main .page .maps .map {
position: absolute; position: absolute;
background-color: rgba(50, 50, 50, 0.8);
cursor: pointer; } cursor: pointer; }
#main .page.page-6 .overlay { #main .page .maps .map[debug="true"] {
background-image: url("../../images/vectos/04_chance-RB.svg"); } background-color: rgba(0, 0, 250, 0.4); }
#main #navigation {
position: absolute; #navigation {
z-index: 3; width: 455.04741mm;
bottom: 0; height: 30mm;
width: 100%; overflow: hidden;
padding: 2mm 0; margin: 0 0 0 20mm;
background-color: rgba(26, 26, 26, 0.7); padding: 0;
overflow: hidden; background-color: rgba(26, 26, 26, 0.7);
text-align: center; text-align: center;
opacity: 0; transition: opacity .3s ease-in-out; }
transition: opacity .3s ease-in-out; }
#main #navigation:hover { #pagination {
opacity: 1; } color: #fff;
#main #pagination { font-size: 1em;
color: #fff; padding: 1mm 0;
font-size: 1em; letter-spacing: -.25em;
padding: 0 0 2mm 0; } opacity: 0.3;
#main #pagination div { transition: opacity .3s ease-in-out; }
display: inline-block; #pagination > * {
width: 49%; } letter-spacing: normal; }
#main #pagination div.wrapper-l { #pagination div {
left: 0; display: inline-block;
text-align: left; } width: 49.9%; }
#main #pagination div.wrapper-r { #pagination div span.p {
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 {
display: inline-block; display: inline-block;
vertical-align: middle; 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; background-color: white;
width: 1mm; width: 1mm;
height: 7mm; height: 7mm;
margin-left: 0.5mm;
background-position: center; background-position: center;
background-size: cover; background-size: cover; }
opacity: 0.2; #railway ul li span.active {
transition: opacity 0.3s ease-in-out; }
#main #railway ul li.active {
width: 7mm; width: 7mm;
cursor: pointer; } cursor: pointer; }
#main #railway ul li.page-right { #railway ul:hover span {
margin-right: 1mm; } opacity: 1; }
#main #railway ul li.current, #main #railway ul li.active:hover {
opacity: 1; }
#main #railway ul:hover li {
opacity: 1; }
css/main.scss
+101 -71
View File
@@ -3,30 +3,34 @@ html,body{
background-color: #1A1A1A; background-color: #1A1A1A;
} }
$debug:false; $tranche_w:15mm;
$tranchew:15mm; $tranche_mr:5mm;
$pw:227.41mm; $p_w:227.41mm;
$ph:207.26mm; $p_h:207.26mm;
$mt:1cm; $main_w:2.001*$p_w;
$mb:1cm; $navh:30mm;
$me:1cm; // $mt:1cm;
$mi:1cm; // $mb:1cm;
// $me:1cm;
// $mi:1cm;
#root{ #root{
height:$ph;
margin:0 auto;
position: relative; 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{ #header{
display: absolute; display: inline-block;
top: 0; left:0; width: $tranche_w; height: $p_h;
width: $tranchew; height: 100%; margin-right:$tranche_mr;
background-color: white; background-color: white;
h1{ h1{
margin: 0; padding:0.3em; margin: 0 0 15mm 0; padding:0.3em;
position: absolute; position: absolute;
bottom:0; left:0; bottom:0; left:0;
transform-origin: 0% 0%; transform-origin: 0% 0%;
@@ -35,10 +39,10 @@ $mi:1cm;
} }
#main{ #main{
position: absolute; display: inline-block;
top:0; right:0; width:$main_w;
width:2.001*$pw; overflow: hidden;
// background-color: magenta;
#page-left{ #page-left{
float:left; float:left;
// padding:$mt $mi $mb $me; // padding:$mt $mi $mb $me;
@@ -53,11 +57,8 @@ $mi:1cm;
} }
.page{ .page{
position: relative; position: relative;
@if $debug { width:$p_w;
background-color: green; height:$p_h;
}
width:$pw;
height:$ph;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
@@ -69,11 +70,6 @@ $mi:1cm;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
z-index: 1; z-index: 1;
@if $debug {
border: 1px solid blue;
}
// img{max-width: 100%;} // img{max-width: 100%;}
} }
@@ -84,69 +80,103 @@ $mi:1cm;
z-index: 2; z-index: 2;
.map{ .map{
position: absolute; position: absolute;
background-color: rgba(50, 50, 50, 0.8);
cursor: pointer; cursor: pointer;
&[debug="true"]{
background-color: rgba(0, 0, 250, 0.4);
}
} }
} }
&.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{ #navigation{
color:#fff; width:$main_w;
font-size: 1em; height:$navh;
padding: 0 0 2mm 0; overflow: hidden;
div{ $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; display: inline-block;
width:49%; vertical-align: middle;
&.wrapper-l{left:0; text-align: left;} min-width: 3em;
&.wrapper-r{right:0; text-align: right;} text-align: center;
span.p{
}
span.l{
cursor: pointer;
line-height: -1;
}
} }
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{ opacity: 0.3;
ul{ transition: opacity .3s ease-in-out;
padding:1mm; margin:0; &:hover{opacity: 1;}
li{ }
display: inline-block; vertical-align: middle;
#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; background-color: white;
width:1mm; height:7mm; width:1mm; height:7mm;
margin-left: 0.5mm; // margin-left: 0.5mm;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
&.active{ &.active{
width:7mm; cursor: pointer; width:7mm; cursor: pointer;
} }
&.page-right{ &.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;}
} }
} }
images/overlays/04_chance-RB.svg
+54
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

images/overlays/09_composition.svg
+85
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

images/overlays/09_indetermenacy.svg
+54
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

images/vectos/04_chance-RB.svg
-53
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 97 KiB

index.html
+17 -17
View File
@@ -22,30 +22,30 @@
<div class="overlay"></div> <div class="overlay"></div>
<div class="maps"></div> <div class="maps"></div>
</section> </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> </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> </div>
<script src="bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script> <script src="bower_components/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="bower_components/KeyboardJS/dist/keyboard.min.js" charset="utf-8"></script> <script src="bower_components/KeyboardJS/dist/keyboard.min.js" charset="utf-8"></script>
<script src="js/pages.json" charset="utf-8"></script> <script src="js/pages.js" charset="utf-8"></script>
<script src="js/dist/main.min.js" charset="utf-8"></script> <script src="js/dist/main.min.js" charset="utf-8"></script>
</body> </body>
</html> </html>
js/dist/main.min.js
Vendored
+12 -10
View File
@@ -1,11 +1,13 @@
$(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;} $(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();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);};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;}
else if(typeof _PAGES[p][1].page!=="undefined"){_active_pages[_PAGES[p][1].page/2]=p;}} pr=dp*2;pl=pr-1;if(dp!=0)
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;} $('<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)
var p=dp*2;if(dp!=0) $('<span>').addClass('page page-'+pr+' double-page-'+dp+' page-right').addClass(bgr?'active':0).css({'background-image':bgr?"url("+bgr+")":"none"}).appendTo($li);}
$('<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.active',_$railway).on('click',function(event){dp=$(this).attr('class').match(/double-page-(\d+)/)[1];_current_dp_key=dp;changePages();});}
$('<li>').addClass('page page-'+p+' double-page-'+dp+' page-right').addClass(bgr?'active':0).css({'background-image':bgr?"url("+bgr+")":"none"}).appendTo($ul);} 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];_$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("");}
$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();});} 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)
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("");} return c[0];};function updatePaginationDisplay(){var i=_active_pages_keys.indexOf(_current_dp_key);if(i==0){_$pagi_l_arrow.addClass('hidden');}else{_$pagi_l_arrow.removeClass('hidden')}
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) if(i==_active_pages_keys.length-1){_$pagi_r_arrow.addClass('hidden');}else{_$pagi_r_arrow.removeClass('hidden')}};function updateRailwayDisplay(){$('li.double-page-'+_current_dp_key).addClass('current');};function updatePagesOverlays(){console.log("updatePagesOverlays");resetOverlays();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);$p=lr==0?_$maps_left:_$maps_right;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'});}));}
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();}); 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){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
+159 -77
View File
@@ -6,17 +6,17 @@ $(document).ready(function() {
h:$(document).height() h:$(document).height()
}, },
_$root = $('#root'), _$root = $('#root'),
_pl = 58, _total_dp_len = 58,
_active_pages = {}, _active_pages_keys = [],
_current_pages = 0, _current_dp_key = "0", _current_dp_ob, _first_dp = true, _last_dp = false,
_page_left_bg, _page_right_bg,
_$page_left = $('#page-left'), _$page_right = $('#page-right'), _$page_left = $('#page-left'), _$page_right = $('#page-right'),
_$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'), _$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'),
_$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'), _$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'),
_bgs_prefix = "images/pages/", _bgs_prefix = "images/pages/",
_$railway = $('#railway'), _$railway = $('#railway'),
_$pagination = $('#pagination'); _$pagination = $('#pagination'),
_$pagi_l = $('#pagination .wrapper-l .p'), _$pagi_r = $('#pagination .wrapper-r .p'); _$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,12 +25,13 @@ $(document).ready(function() {
// /___/_/ /_/_/\__/ // /___/_/ /_/_/\__/
function init(){ function init(){
// console.log("init", _PAGES[0].bg); // console.log("init", _ACTIVE_PAGES[0].bg);
initLayout(); initLayout();
initData(); initData();
initRailway(); initRailway();
initkeyboard(); initkeyboard();
initPagination(); initPagination();
initHashNav();
changePages(); changePages();
}; };
@@ -42,15 +43,16 @@ $(document).ready(function() {
}; };
function initData(){ function initData(){
for (var p = 0; p < _PAGES.length; p++) { _active_pages_keys = Object.keys(_ACTIVE_PAGES);
if(typeof _PAGES[p][0].page !== "undefined"){ console.log("_active_pages_keys", _active_pages_keys);
_active_pages[(_PAGES[p][0].page+1)/2] = p; // for (var p = 0; p < _ACTIVE_PAGES.length; p++) {
} // if(typeof _ACTIVE_PAGES[p][0].page !== "undefined"){
else if(typeof _PAGES[p][1].page !== "undefined"){ // _active_pages[(_ACTIVE_PAGES[p][0].page+1)/2] = p;
_active_pages[_PAGES[p][1].page/2] = p; // }
} // else if(typeof _ACTIVE_PAGES[p][1].page !== "undefined"){
} // _active_pages[_ACTIVE_PAGES[p][1].page/2] = p;
console.log("_active_pages", _active_pages); // }
// }
}; };
// _ __ // _ __
@@ -60,53 +62,61 @@ $(document).ready(function() {
// /_/ |_/\__,_/ |___/ // /_/ |_/\__,_/ |___/
function initRailway(){ function initRailway(){
var $ul = $('<ul>'); var $ul = $('<ul>').appendTo(_$railway);
var ap, bgl, bgr; var $li, adp, bgl, bgr, pl, pr;
for (var dp = 0; dp <= _pl; dp++) {
// loop through double pages
for (var dp = 0; dp <= _total_dp_len; dp++) {
// console.log("-- DOUBLE PAGE --", dp); // console.log("-- DOUBLE PAGE --", dp);
ap = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
// console.log("ap",ap); $li = $('<li>')
if(ap !== false){ .addClass('double-page-'+dp)
bgl = typeof _PAGES[ap][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][0].bg : false; .appendTo($ul);
bgr = typeof _PAGES[ap][1].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_PAGES[ap][1].bg : false;
// 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{ }else{
// if not active double page, no background
bgl = bgr = false; 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) if(dp!=0)
$('<li>') $('<span>')
.addClass('page page-'+(p-1)+' double-page-'+dp+' page-left') .addClass('page page-'+(pl)+' double-page-'+dp+' page-left')
.addClass(bgl ? 'active' : 0) .addClass(bgl ? 'active' : 0)
.css({'background-image': bgl ? "url("+bgl+")" : "none"}) .css({'background-image': bgl ? "url("+bgl+")" : "none"})
.appendTo($ul); .appendTo($li);
if(dp<_pl) // add right page only if not last page (backcover)
$('<li>') if(dp<_total_dp_len)
.addClass('page page-'+p+' double-page-'+dp+' page-right') $('<span>')
.addClass('page page-'+pr+' double-page-'+dp+' page-right')
.addClass(bgr ? 'active' : 0) .addClass(bgr ? 'active' : 0)
.css({'background-image': bgr ? "url("+bgr+")" : "none"}) .css({'background-image': bgr ? "url("+bgr+")" : "none"})
.appendTo($ul); .appendTo($li);
} }
$ul.appendTo(_$railway);
$('li', _$railway).on('click', function(event) { $('li.active', _$railway).on('click', function(event) {
var p = $(this).attr('class').match(/page-(\d+)/)[1]; dp = $(this).attr('class').match(/double-page-(\d+)/)[1];
console.log('page', p); _current_dp_key = dp; //_active_pages[dp];
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];
changePages(); changePages();
}); });
} }
// TODO: next page arrow
// ____ // ____
// / __ \____ _____ ____ _____ // / __ \____ _____ ____ _____
// / /_/ / __ `/ __ `/ _ \/ ___/ // / /_/ / __ `/ __ `/ _ \/ ___/
@@ -115,51 +125,63 @@ $(document).ready(function() {
// /____/ // /____/
function nextPages(){ function nextPages(){
if(_current_pages < _PAGES.length-1){ var i = _active_pages_keys.indexOf(_current_dp_key) +1;
_current_pages+=1; if(i <= _active_pages_keys.length-1){
_current_dp_key = _active_pages_keys[i];
changePages(); changePages();
} }
}; };
function prevPages(){ function prevPages(){
if(_current_pages > 0){ var i = _active_pages_keys.indexOf(_current_dp_key)-1;
_current_pages-=1; if(i >= 0){
_current_dp_key = _active_pages_keys[i];
changePages(); changePages();
} }
}; };
function changePages(){ function changePages(){
console.log("changePages", _current_pages); console.log("changePages", _current_dp_key);
$('li',_$railway).removeClass('current'); $('li',_$railway).removeClass('current');
if (typeof _PAGES[_current_pages][0].bg !== "undefined") { if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){
var pl = _PAGES[_current_pages][0]; _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 _$page_left
.css({'background-image': "url("+_bgs_prefix+pl.bg+")"}) .css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
.removeClass(pageClassToRemove) .removeClass(pageClassToRemove)
.addClass('page-'+pl.page); .addClass('page-'+pl.page);
_$pagi_l.text(pl.page); // change pagination
$('li.page-'+pl.page).addClass('current'); _$pagi_l_txt.text(pl.page);
}else{ }else{
_$page_left.css({'background-image': "none"}); _$page_left.css({'background-image': "none"});
_$pagi_l.text(""); _$pagi_l_txt.text("");
} }
if (typeof _PAGES[_current_pages][1].bg !== "undefined") { if (typeof _current_dp_ob[1].bg !== "undefined") {
var pr = _PAGES[_current_pages][1]; var pr = _current_dp_ob[1];
_$page_right _$page_right
.css({'background-image': "url("+_bgs_prefix+pr.bg+")"}) .css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
.removeClass(pageClassToRemove) .removeClass(pageClassToRemove)
.addClass('page-'+pr.page); .addClass('page-'+pr.page);
_$pagi_r.text(pr.page); _$pagi_r_txt.text(pr.page);
$('li.page-'+pr.page).addClass('current');
}else{ }else{
_$page_right.css({'background-image': "none"}); _$page_right.css({'background-image': "none"});
_$pagi_r.text(""); _$pagi_r_txt.text("");
} }
// updatePagesOverlays();
}; };
function pageClassToRemove(){ function pageClassToRemove(){
@@ -168,40 +190,100 @@ $(document).ready(function() {
return c[0]; 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(){ function updatePagesOverlays(){
console.log("updatePagesOverlays"); console.log("updatePagesOverlays");
// remove all pages overlays // remove all pages overlays
$('.overlay, .maps',_$page_left).children().remove(); resetOverlays();
$('.overlay, .maps',_$page_right).children().remove();
console.log("Overlays", _PAGES[_current_pages].overlays); // loop through left and right pages from the current double page
// build page_left overlays var lr = 0,
for (var map in _PAGES[_current_pages].overlays) { p_ob,
if (_PAGES[_current_pages].overlays.hasOwnProperty(map)) { $p,
map = _PAGES[_current_pages].overlays[map]; map;
console.log("Map",map); for(var i in _current_dp_ob){
_$maps_left.append( 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>') $('<div>')
.addClass("map") .addClass("map")
.attr('overlay', map.over) .attr('overlay', map.over)
.attr('debug', map.debug)
.css({ .css({
"left":map.x, "left":map.x+"mm",
"top":map.y, "top":map.y+"mm",
"width":map.w, "width":map.w+"mm",
"height":map.h "height":map.h+"mm"
}) })
.bind("mouseover", function(e){ .bind("mouseover", function(e){
$(this) $(this)
.parents('.page').find('.overlay') .parents('.page').find('.overlay')
.css({ .css({
// 'background-color':"red", 'background-image':'url(images/overlays/'+$(this).attr('overlay')+')'
'background-image':'url(images/vectos/'+$(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;
}; };
// __ __ __ __ // __ __ __ __
js/pages.json → js/pages.js
+74 -51
View File
@@ -1,13 +1,13 @@
var _PAGES=[ var _ACTIVE_PAGES={
[ "0":[ // debut de la première double page, numéro de la double page
{"active":false}, {"active":false}, // page de gauche, inactive
{ { // debut de page de droite
"page":0, "page":0, // numéro de la page
"bg":"00_1couv.jpeg", "bg":"00_1couv.jpeg", // image a afficher pour cette page
"overlays":[] "overlays":[] // liset des zone interactive
} } // fin de la page de droite
], ], // fin de la double page
[ "1":[
{ {
"page":1, "page":1,
"bg":"00_1couvV.jpeg", "bg":"00_1couvV.jpeg",
@@ -19,7 +19,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "2":[
{ {
"page":3, "page":3,
"bg":"02_TH.jpeg", "bg":"02_TH.jpeg",
@@ -31,11 +31,20 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "3":[
{ {
"page":5, "page":5,
"bg":"04_chance.jpeg", "bg":"04_chance.jpeg",
"overlays":[] "overlays":[
{
"x":0,
"y":0,
"w":227,
"h":207,
"over":"04_chance-RB.svg",
"debug":false
}
]
}, },
{ {
"page":6, "page":6,
@@ -43,7 +52,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "4":[
{ {
"page":7, "page":7,
"bg":"06_byGeorge.jpeg", "bg":"06_byGeorge.jpeg",
@@ -55,18 +64,32 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "5":[ // debut de la double page 5
{ { // debut de la page de gauche
"page":9, "page":9, // numéro de la page
"bg":"08_Brecht.jpeg", "bg":"08_Brecht.jpeg", // image de la page
"overlays":[ "overlays":[ // debut de la liste des zone active
{"x":0,"y":0,"w":200,"h":200,"over":"04_chance-RB.svg"}, { // debut de la zone active 1
{"x":400,"y":400,"w":100,"h":100,"over":"04_chance-RB.svg"} "x":110, // position x du coin supérieur gauche de la zone active (entre 0 et 200)
] "y":25, // position y du coin supérieur gauche de la zone active (entre 0 et 200)
}, "w":103, // largeur de la zone active
{"active":false} "h":70, // hauteur de la zone active
], "over":"09_indetermenacy.svg", // image affiché au survol
[ "debug":false // true: zone visible, false: zone invisible
}, // fin de la zone active 1
{ // début de la zone active 2
"x":112, // position x
"y":133, // position y
"w":105, // largeur
"h":69, // hauteur
"over":"09_composition.svg", // image au survol
"debug":true // debug
} // fin de la zone active 2
] // fin de la liste des zones actives
}, // fin de la page de gauche
{"active":false} // page de droite inactive
], // fin de la double page 5
"7":[
{ {
"page":13, "page":13,
"bg":"12_Bremer.jpeg", "bg":"12_Bremer.jpeg",
@@ -74,7 +97,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "8":[
{ {
"page":15, "page":15,
"bg":"14_Brown.jpeg", "bg":"14_Brown.jpeg",
@@ -82,7 +105,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "12":[
{"active":false}, {"active":false},
{ {
"page":24, "page":24,
@@ -90,7 +113,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "14":[
{ {
"page":27, "page":27,
"bg":"26_Cage.jpeg", "bg":"26_Cage.jpeg",
@@ -98,7 +121,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "15":[
{ {
"page":29, "page":29,
"bg":"28_deMaria.jpeg", "bg":"28_deMaria.jpeg",
@@ -106,7 +129,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "17":[
{ {
"page":33, "page":33,
"bg":"32_Flynt.jpeg", "bg":"32_Flynt.jpeg",
@@ -114,7 +137,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "19":[
{"active":false}, {"active":false},
{ {
"page":38, "page":38,
@@ -122,7 +145,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "20":[
{"active":false}, {"active":false},
{ {
"page":40, "page":40,
@@ -130,7 +153,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "21":[
{"active":false}, {"active":false},
{ {
"page":42, "page":42,
@@ -138,7 +161,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "23":[
{"active":false}, {"active":false},
{ {
"page":46, "page":46,
@@ -146,7 +169,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "25":[
{ {
"page":49, "page":49,
"bg":"48_Dennis.jpeg", "bg":"48_Dennis.jpeg",
@@ -154,7 +177,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "28":[
{ {
"page":55, "page":55,
"bg":"54_DingDong.jpeg", "bg":"54_DingDong.jpeg",
@@ -162,7 +185,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "29":[
{ {
"page":57, "page":57,
"bg":"56_Johnson.jpeg", "bg":"56_Johnson.jpeg",
@@ -170,7 +193,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "30":[
{ {
"page":59, "page":59,
"bg":"58_MacLow.jpeg", "bg":"58_MacLow.jpeg",
@@ -178,7 +201,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "40":[
{"active":false}, {"active":false},
{ {
"page":80, "page":80,
@@ -186,7 +209,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "46":[
{ {
"page":91, "page":91,
"bg":"90_Simone.jpeg", "bg":"90_Simone.jpeg",
@@ -194,7 +217,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "47":[
{ {
"page":93, "page":93,
"bg":"92_Paik.jpeg", "bg":"92_Paik.jpeg",
@@ -202,7 +225,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "48":[
{ {
"page":95, "page":95,
"bg":"94_Riley.jpeg", "bg":"94_Riley.jpeg",
@@ -210,7 +233,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "50":[
{"active":false}, {"active":false},
{ {
"page":100, "page":100,
@@ -218,7 +241,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "51":[
{ {
"page":101, "page":101,
"bg":"100_Williams.jpeg", "bg":"100_Williams.jpeg",
@@ -226,7 +249,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "53":[
{ {
"page":105, "page":105,
"bg":"104_Wolff.jpeg", "bg":"104_Wolff.jpeg",
@@ -234,7 +257,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "55":[
{ {
"page":109, "page":109,
"bg":"108_Young.jpeg", "bg":"108_Young.jpeg",
@@ -242,7 +265,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "56":[
{ {
"page":111, "page":111,
"bg":"110_StraightLine.jpeg", "bg":"110_StraightLine.jpeg",
@@ -250,7 +273,7 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
], ],
[ "57":[
{ {
"page":113, "page":113,
"bg":"112_Portrait?.jpeg", "bg":"112_Portrait?.jpeg",
@@ -262,7 +285,7 @@ var _PAGES=[
"overlays":[] "overlays":[]
} }
], ],
[ "58":[
{ {
"page":115, "page":115,
"bg":"114_4couv.jpeg", "bg":"114_4couv.jpeg",
@@ -270,4 +293,4 @@ var _PAGES=[
}, },
{"active":false} {"active":false}
] ]
]; };