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

added click on chemin de fer, click on arrows, etc

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-01-09 19:43:09 +01:00
parent 9da8e97206
commit dfc62f63fe
5 changed files with 157 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/dist/main.css
Vendored
+48 -18
View File
@@ -63,25 +63,55 @@ html, body {
cursor: pointer; }
#main .page.page-6 .overlay {
background-image: url("../../images/vectos/04_chance-RB.svg"); }
#main #railway {
#main #navigation {
position: absolute;
z-index: 3;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
padding: 2mm 0;
background-color: rgba(26, 26, 26, 0.7);
overflow: hidden;
text-align: center; }
#main #railway ul {
padding: 1mm; }
#main #railway ul li {
display: inline-block;
vertical-align: middle;
background-color: white;
width: 1mm;
height: 7mm;
margin-left: 0.5mm;
background-position: center;
background-size: cover; }
#main #railway ul li.active {
width: 7mm; }
#main #railway ul li.page-right {
margin-right: 1mm; }
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 {
display: inline-block;
vertical-align: middle;
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 {
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; }
css/main.scss
+35 -5
View File
@@ -94,14 +94,40 @@ $mi:1cm;
}
}
#railway{
position:absolute;
#navigation{
position:absolute; z-index: 3;
bottom:0; width:100%; // height:2cm;
background-color: rgba(0, 0, 0, 0.7);
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{
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;
}
}
}
#railway{
ul{
padding:1mm;
padding:1mm; margin:0;
li{
display: inline-block; vertical-align: middle;
background-color: white;
@@ -110,12 +136,16 @@ $mi:1cm;
background-position: center;
background-size: cover;
&.active{
width:7mm;
width:7mm; cursor: pointer;
}
&.page-right{
margin-right: 1mm;
}
opacity:0.2;
transition: opacity 0.3s ease-in-out;
&.current, &.active:hover{opacity: 1;}
}
&:hover li{opacity: 1;}
}
}
index.html
+14 -2
View File
@@ -22,8 +22,20 @@
<div class="overlay"></div>
<div class="maps"></div>
</section>
<nav id="railway">
<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>
js/dist/main.min.js
Vendored
+9 -9
View File
@@ -1,11 +1,11 @@
$(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');function init(){initLayout();initData();initRailway();initkeyboard();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'),_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 p=0;p<=_pl;p++){console.log("-- PAGE --",p);ap=typeof _active_pages[p]!=="undefined"?_active_pages[p]: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;}
if(p!=0)
$('<li>').addClass('page page-'+p+' page-left').addClass(bgl?'active':0).css({'background-image':bgl?"url("+bgl+")":"none"}).appendTo($ul);if(p<_pl)
$('<li>').addClass('page page-'+p+' page-right').addClass(bgr?'active':0).css({'background-image':bgr?"url("+bgr+")":"none"}).appendTo($ul);}
$ul.appendTo(_$railway);}
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);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);}else{_$page_left.css({'background-image':"none"});}
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);}else{_$page_right.css({'background-image':"none"});}};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();});};init();});
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();});
js/main.js
+51 -9
View File
@@ -13,8 +13,10 @@ $(document).ready(function() {
_$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');
_bgs_prefix = "images/pages/",
_$railway = $('#railway'),
_$pagination = $('#pagination');
_$pagi_l = $('#pagination .wrapper-l .p'), _$pagi_r = $('#pagination .wrapper-r .p');
// ____ _ __
// / _/___ (_) /_
@@ -28,6 +30,7 @@ $(document).ready(function() {
initData();
initRailway();
initkeyboard();
initPagination();
changePages();
};
@@ -59,9 +62,9 @@ $(document).ready(function() {
function initRailway(){
var $ul = $('<ul>');
var ap, bgl, bgr;
for (var p = 0; p <= _pl; p++) {
console.log("-- PAGE --", p);
ap = typeof _active_pages[p] !== "undefined" ? _active_pages[p] : false;
for (var dp = 0; dp <= _pl; 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;
@@ -73,21 +76,33 @@ $(document).ready(function() {
// console.log("bgl", bgl);
// console.log("bgr", bgr);
if(p!=0)
var p = dp*2;
if(dp!=0)
$('<li>')
.addClass('page page-'+p+' page-left')
.addClass('page page-'+(p-1)+' double-page-'+dp+' page-left')
.addClass(bgl ? 'active' : 0)
.css({'background-image': bgl ? "url("+bgl+")" : "none"})
.appendTo($ul);
if(p<_pl)
if(dp<_pl)
$('<li>')
.addClass('page page-'+p+' page-right')
.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);
// 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();
});
}
// TODO: next page arrow
@@ -116,14 +131,19 @@ $(document).ready(function() {
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") {
@@ -132,8 +152,11 @@ $(document).ready(function() {
.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("");
}
// updatePagesOverlays();
@@ -198,5 +221,24 @@ $(document).ready(function() {
});
};
// ____ _ __ _
// / __ \____ _____ _(_)___ ____ _/ /_(_)___ ____
// / /_/ / __ `/ __ `/ / __ \/ __ `/ __/ / __ \/ __ \
// / ____/ /_/ / /_/ / / / / / /_/ / /_/ / /_/ / / / /
// /_/ \__,_/\__, /_/_/ /_/\__,_/\__/_/\____/_/ /_/
// /____/
function initPagination(){
$('.wrapper-l .l', _$pagination).on('click', function(event) {
prevPages();
});
$('.wrapper-r .l', _$pagination).on('click', function(event) {
nextPages();
});
};
init();
});