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

automated maps and overlays in js

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2016-11-23 19:59:51 +01:00
parent 6850fa4d50
commit 5a3252b93b
7 changed files with 317 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/dist/main.css
Vendored
+20 -3
View File
@@ -18,12 +18,29 @@ html, body {
float: right;
background-position: left; }
#main .page {
background-color: green;
position: relative;
width: 227.41mm;
height: 207.26mm;
background-repeat: no-repeat;
background-size: contain; }
#main .page .inner {
#main .page .overlay {
position: relative;
width: 100%;
height: 100%;
border: 1px solid blue; }
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 1; }
#main .page .maps {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2; }
#main .page .maps .map {
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"); }
css/main.scss
+29 -3
View File
@@ -3,7 +3,7 @@ html,body{
background-color: #1A1A1A;
}
$debug:true;
$debug:false;
$pw:227.41mm;
$ph:207.26mm;
$mt:1cm;
@@ -33,6 +33,7 @@ $mi:1cm;
background-position: left;
}
.page{
position: relative;
@if $debug {
background-color: green;
}
@@ -42,13 +43,38 @@ $mi:1cm;
background-repeat: no-repeat;
background-size: contain;
.inner{
// display:none;
.overlay{
position: relative;
width:100%; height:100%;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
z-index: 1;
@if $debug {
border: 1px solid blue;
}
// img{max-width: 100%;}
}
.maps{
position:absolute;
top:0; left:0;
width:100%; height:100%;
z-index: 2;
.map{
position: absolute;
background-color: rgba(50, 50, 50, 0.8);
cursor: pointer;
}
}
&.page-6 .overlay{
background-image: url("../../images/vectos/04_chance-RB.svg")
}
}
}
images/vectos/04_chance-RB.svg
+53
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

index.html
+4 -6
View File
@@ -14,14 +14,12 @@
<section id="main">
<section id="page-left" class="page">
<div class="inner">
</div>
<div class="overlay"></div>
<div class="maps"></div>
</section>
<section id="page-right" class="page">
<div class="inner">
</div>
<div class="overlay"></div>
<div class="maps"></div>
</section>
</section>
js/dist/main.min.js
Vendored
+2 -1
View File
@@ -1,2 +1,3 @@
$(document).ready(function(){console.log("ready");var _current_pages=-1,_page_left_bg,_page_right_bg,_$page_left=$('#page-left'),_$page_right=$('#page-right'),_bgs_prefix="images/pages/";function init(){console.log("init",_$page_left);initkeyboard();changePages();};function nextPages(){if(_current_pages<_PAGES.length-2){_current_pages+=2;changePages();}};function prevPages(){if(_current_pages>-1){_current_pages-=2;changePages();}};function changePages(){console.log("changePages");_page_left_bg=_bgs_prefix+_PAGES[_current_pages];_page_right_bg=_bgs_prefix+_PAGES[_current_pages+1];console.log(_page_left_bg+" | "+_page_right_bg);_$page_left.css({'background-image':"url("+_page_left_bg+")"});_$page_right.css({'background-image':"url("+_page_right_bg+")"});};function initkeyboard(){keyboardJS.bind('right',function(event){nextPages();});keyboardJS.bind('left',function(event){prevPages();});};init();});
$(document).ready(function(){console.log("ready");var _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/";function init(){console.log("init",_PAGES[0].bg);initkeyboard();changePages();};function nextPages(){if(_current_pages<_PAGES.length-2){_current_pages+=2;changePages();}};function prevPages(){if(_current_pages>-1){_current_pages-=2;changePages();}};function changePages(){console.log("changePages");_page_left_bg=_bgs_prefix+_PAGES[_current_pages].bg;_page_right_bg=_bgs_prefix+_PAGES[_current_pages+1].bg;console.log(_page_left_bg+" | "+_page_right_bg);_$page_left.css({'background-image':"url("+_page_left_bg+")"}).removeClass(pageClassToRemove).addClass('page-'+_current_pages);_$page_right.css({'background-image':"url("+_page_right_bg+")"}).removeClass(pageClassToRemove).addClass('page-'+(_current_pages+1));updatePagesOverlays();};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();});
js/main.js
+57 -6
View File
@@ -1,9 +1,11 @@
$(document).ready(function() {
console.log("ready");
var _current_pages = -1,
var _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/";
// ____ _ __
@@ -13,7 +15,7 @@ $(document).ready(function() {
// /___/_/ /_/_/\__/
function init(){
console.log("init", _$page_left);
console.log("init", _PAGES[0].bg);
initkeyboard();
changePages();
};
@@ -41,13 +43,62 @@ $(document).ready(function() {
function changePages(){
console.log("changePages");
_page_left_bg = _bgs_prefix+_PAGES[_current_pages];
_page_right_bg = _bgs_prefix+_PAGES[_current_pages+1];
_page_left_bg = _bgs_prefix+_PAGES[_current_pages].bg;
_page_right_bg = _bgs_prefix+_PAGES[_current_pages+1].bg;
console.log(_page_left_bg+" | "+_page_right_bg);
_$page_left.css({'background-image': "url("+_page_left_bg+")"});
_$page_right.css({'background-image': "url("+_page_right_bg+")"});
_$page_left
.css({'background-image': "url("+_page_left_bg+")"})
.removeClass(pageClassToRemove)
.addClass('page-'+_current_pages);
_$page_right
.css({'background-image': "url("+_page_right_bg+")"})
.removeClass(pageClassToRemove)
.addClass('page-'+(_current_pages+1));
updatePagesOverlays();
};
function pageClassToRemove(){
var c = $(this).attr('class').match(/page-+\d+/);
if(c && c.length)
return c[0];
};
function updatePagesOverlays(){
console.log("updatePagesOverlays");
// remove all pages overlays
$('.overlay, .maps',_$page_left).children().remove();
$('.overlay, .maps',_$page_right).children().remove();
console.log("Overlays", _PAGES[_current_pages].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];
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-color':"red",
'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
});
})
);
}
}
};
// __ __ __ __
js/pages.json
+152 -37
View File
@@ -1,38 +1,153 @@
var _PAGES=[
"00_1couv.jpeg",
"00_1couvV.jpeg",
"01_anan.jpeg",
"02_TH.jpeg",
"03_ologyOf.jpeg",
"04_chance.jpeg",
"05_Stories.jpeg",
"06_byGeorge.jpeg",
"07_Copyright.jpeg",
"08_Brecht.jpeg",
"100_Williams.jpeg",
"104_Wolff.jpeg",
"108_Young.jpeg",
"110_StraightLine.jpeg",
"112_Portrait?.jpeg",
"113_4couv.jpeg",
"114_4couv.jpeg",
"12_Bremer.jpeg",
"14_Brown.jpeg",
"23_Byrd.jpeg",
"26_Cage.jpeg",
"28_deMaria.jpeg",
"32_Flynt.jpeg",
"37_Ono.jpeg",
"39_HIggins.jpeg",
"41_Ichiyanagi.jpeg",
"45_Jennings.jpeg",
"48_Dennis.jpeg",
"54_DingDong.jpeg",
"56_Johnson.jpeg",
"58_MacLow.jpeg",
"79_Maxfield.jpeg",
"90_Simone.jpeg",
"92_Paik.jpeg",
"94_Riley.jpeg",
"99_Rot.jpeg"
]
{
"bg":"",
"overlays":[]
},
{
"bg":"00_1couv.jpeg",
"overlays":[]
},
{
"bg":"00_1couvV.jpeg",
"overlays":[]
},
{
"bg":"01_anan.jpeg",
"overlays":[]
},
{
"bg":"02_TH.jpeg",
"overlays":[]
},
{
"bg":"03_ologyOf.jpeg",
"overlays":[]
},
{
"bg":"04_chance.jpeg",
"overlays":[]
},
{
"bg":"05_Stories.jpeg",
"overlays":[]
},
{
"bg":"06_byGeorge.jpeg",
"overlays":[]
},
{
"bg":"07_Copyright.jpeg",
"overlays":[]
},
{
"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"}
]
},
{
"bg":"100_Williams.jpeg",
"overlays":[]
},
{
"bg":"104_Wolff.jpeg",
"overlays":[]
},
{
"bg":"108_Young.jpeg",
"overlays":[]
},
{
"bg":"110_StraightLine.jpeg",
"overlays":[]
},
{
"bg":"112_Portrait?.jpeg",
"overlays":[]
},
{
"bg":"113_4couv.jpeg",
"overlays":[]
},
{
"bg":"114_4couv.jpeg",
"overlays":[]
},
{
"bg":"12_Bremer.jpeg",
"overlays":[]
},
{
"bg":"14_Brown.jpeg",
"overlays":[]
},
{
"bg":"23_Byrd.jpeg",
"overlays":[]
},
{
"bg":"26_Cage.jpeg",
"overlays":[]
},
{
"bg":"28_deMaria.jpeg",
"overlays":[]
},
{
"bg":"32_Flynt.jpeg",
"overlays":[]
},
{
"bg":"37_Ono.jpeg",
"overlays":[]
},
{
"bg":"39_HIggins.jpeg",
"overlays":[]
},
{
"bg":"41_Ichiyanagi.jpeg",
"overlays":[]
},
{
"bg":"45_Jennings.jpeg",
"overlays":[]
},
{
"bg":"48_Dennis.jpeg",
"overlays":[]
},
{
"bg":"54_DingDong.jpeg",
"overlays":[]
},
{
"bg":"56_Johnson.jpeg",
"overlays":[]
},
{
"bg":"58_MacLow.jpeg",
"overlays":[]
},
{
"bg":"79_Maxfield.jpeg",
"overlays":[]
},
{
"bg":"90_Simone.jpeg",
"overlays":[]
},
{
"bg":"92_Paik.jpeg",
"overlays":[]
},
{
"bg":"94_Riley.jpeg",
"overlays":[]
},
{
"bg":"99_Rot.jpeg",
"overlays":[]
}
];