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; } 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 .maps .map[debug="true"] {
background-color: rgba(0, 0, 250, 0.4); }
#navigation { #navigation {
width: 455.04741mm; width: 455.04741mm;
css/main.scss
+3 -1
View File
@@ -80,8 +80,10 @@ $navh:30mm;
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);
}
} }
} }
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/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
+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) 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-'+(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);} $('<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();});} $('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("");} 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("");} 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)
var i=_active_pages_keys.indexOf(_current_dp_key);if(i==0){_$pagi_l_arrow.addClass('hidden');}else{_$pagi_l_arrow.removeClass('hidden')} 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')} 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'});}));}
$('li.double-page-'+_current_dp_key).addClass('current');}};function pageClassToRemove(){var c=$(this).attr('class').match(/page-+\d+/);if(c&&c.length) lr++;}};function resetOverlays(){$('.overlay, .maps','.page').css({'background-image':'none'}).children().remove();}
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 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(); initRailway();
initkeyboard(); initkeyboard();
initPagination(); initPagination();
initHashNav();
changePages(); changePages();
}; };
@@ -147,50 +148,40 @@ $(document).ready(function() {
if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){ if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){
_current_dp_ob = _ACTIVE_PAGES[_current_dp_key]; _current_dp_ob = _ACTIVE_PAGES[_current_dp_key];
if (typeof _current_dp_ob[0].bg !== "undefined") { updatePagesDisplay();
var pl = _current_dp_ob[0]; updatePaginationDisplay();
// change display of main page left updateRailwayDisplay();
_$page_left updateHash();
.css({'background-image': "url("+_bgs_prefix+pl.bg+")"}) updatePagesOverlays();
.removeClass(pageClassToRemove) }
.addClass('page-'+pl.page); };
// change pagination
_$pagi_l_txt.text(pl.page); function updatePagesDisplay(){
}else{ if (typeof _current_dp_ob[0].bg !== "undefined") {
_$page_left.css({'background-image': "none"}); var pl = _current_dp_ob[0];
_$pagi_l_txt.text(""); // change display of main page left
} _$page_left
.css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
if (typeof _current_dp_ob[1].bg !== "undefined") { .removeClass(pageClassToRemove)
var pr = _current_dp_ob[1]; .addClass('page-'+pl.page);
_$page_right // change pagination
.css({'background-image': "url("+_bgs_prefix+pr.bg+")"}) _$pagi_l_txt.text(pl.page);
.removeClass(pageClassToRemove) }else{
.addClass('page-'+pr.page); _$page_left.css({'background-image': "none"});
_$pagi_r_txt.text(pr.page); _$pagi_l_txt.text("");
}else{ }
_$page_right.css({'background-image': "none"});
_$pagi_r_txt.text(""); if (typeof _current_dp_ob[1].bg !== "undefined") {
} var pr = _current_dp_ob[1];
_$page_right
// hide or show nav arrows for first annd last double page .css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
var i = _active_pages_keys.indexOf(_current_dp_key); .removeClass(pageClassToRemove)
if( i == 0){ .addClass('page-'+pr.page);
_$pagi_l_arrow.addClass('hidden'); _$pagi_r_txt.text(pr.page);
}else{ }else{
_$pagi_l_arrow.removeClass('hidden') _$page_right.css({'background-image': "none"});
} _$pagi_r_txt.text("");
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();
}; };
function pageClassToRemove(){ function pageClassToRemove(){
@@ -199,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", _ACTIVE_PAGES[_current_dp_key].overlays); // loop through left and right pages from the current double page
// build page_left overlays var lr = 0,
for (var map in _ACTIVE_PAGES[_current_dp_key].overlays) { p_ob,
if (_ACTIVE_PAGES[_current_dp_key].overlays.hasOwnProperty(map)) { $p,
map = _ACTIVE_PAGES[_current_dp_key].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
+43 -20
View File
@@ -1,12 +1,12 @@
var _ACTIVE_PAGES={ var _ACTIVE_PAGES={
"0":[ "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":[ "1":[
{ {
"page":1, "page":1,
@@ -35,7 +35,16 @@ var _ACTIVE_PAGES={
{ {
"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,
@@ -55,17 +64,31 @@ var _ACTIVE_PAGES={
"overlays":[] "overlays":[]
} }
], ],
"5":[ "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":[ "7":[
{ {
"page":13, "page":13,