automated maps and overlays in js

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
+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')+')'
});
})
);
}
}
};
// __ __ __ __