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

activated overlays, commented page.js

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2017-01-29 19:00:14 +01:00
parent 599c25c390
commit 607a27cfd0
10 changed files with 359 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/dist/main.css
Vendored
+2 -1
View File
@@ -60,8 +60,9 @@ html, body {
z-index: 2; }
#main .page .maps .map {
position: absolute;
background-color: rgba(50, 50, 50, 0.8);
cursor: pointer; }
#main .page .maps .map[debug="true"] {
background-color: rgba(0, 0, 250, 0.4); }
#navigation {
width: 455.04741mm;
css/main.scss
+3 -1
View File
@@ -80,8 +80,10 @@ $navh:30mm;
z-index: 2;
.map{
position: absolute;
background-color: rgba(50, 50, 50, 0.8);
cursor: pointer;
&[debug="true"]{
background-color: rgba(0, 0, 250, 0.4);
}
}
}
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
+1 -1
View File
@@ -45,7 +45,7 @@
<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="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>
</body>
</html>
js/dist/main.min.js
Vendored
+8 -7
View File
@@ -1,12 +1,13 @@
$(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;}
$(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;}
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();});
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("");}
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(){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(){$('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'});}));}
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
+109 -58
View File
@@ -31,6 +31,7 @@ $(document).ready(function() {
initRailway();
initkeyboard();
initPagination();
initHashNav();
changePages();
};
@@ -147,50 +148,40 @@ $(document).ready(function() {
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');
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("");
}
// updatePagesOverlays();
};
function pageClassToRemove(){
@@ -199,40 +190,100 @@ $(document).ready(function() {
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
$('.overlay, .maps',_$page_left).children().remove();
$('.overlay, .maps',_$page_right).children().remove();
resetOverlays();
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(
// 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', map.debug)
.css({
"left":map.x,
"top":map.y,
"width":map.w,
"height":map.h
"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-color':"red",
'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
'background-image':'url(images/overlays/'+$(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
+43 -20
View File
@@ -1,12 +1,12 @@
var _ACTIVE_PAGES={
"0":[
{"active":false},
{
"page":0,
"bg":"00_1couv.jpeg",
"overlays":[]
}
],
"0":[ // debut de la première double page, numéro de la double page
{"active":false}, // page de gauche, inactive
{ // debut de page de droite
"page":0, // numéro de la page
"bg":"00_1couv.jpeg", // image a afficher pour cette page
"overlays":[] // liset des zone interactive
} // fin de la page de droite
], // fin de la double page
"1":[
{
"page":1,
@@ -35,7 +35,16 @@ var _ACTIVE_PAGES={
{
"page":5,
"bg":"04_chance.jpeg",
"overlays":[]
"overlays":[
{
"x":0,
"y":0,
"w":227,
"h":207,
"over":"04_chance-RB.svg",
"debug":false
}
]
},
{
"page":6,
@@ -55,17 +64,31 @@ var _ACTIVE_PAGES={
"overlays":[]
}
],
"5":[
{
"page":9,
"bg":"08_Brecht.jpeg",
"overlays":[
{"x":0,"y":0,"w":200,"h":200,"over":"04_chance-RB.svg"},
{"x":400,"y":400,"w":100,"h":100,"over":"04_chance-RB.svg"}
]
},
{"active":false}
],
"5":[ // debut de la double page 5
{ // debut de la page de gauche
"page":9, // numéro de la page
"bg":"08_Brecht.jpeg", // image de la page
"overlays":[ // debut de la liste des zone active
{ // debut de la zone active 1
"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
"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,