/**
* @overview RegionManager.js
* Components for managing region map.
* @author Chris Scott
*/
Ext.namespace('BQ.regions');
/**
* BQ.regions.Map
* @author Chris Scott
*/
BQ.regions.Map = Ext.extend(Ext.Panel, {
/**
* @cfg imgSrc {String} image src
*/
imgSrc : "/static/images/css_images/regions_map.gif",
/**
* @cfg imgWidth {Number} image width [398]
*/
imgWidth : 398,
border: true,
width: 424,
cls: 'bq-region-map',
initComponent : function() {
this.on('render', this.renderMap, this);
this.on('destroy', function(p) {
p.ptr.remove();
p.img.remove();
});
BQ.regions.Map.superclass.initComponent.call(this);
},
renderMap : function() {
this.marker = this.el.createChild({
tag: 'div',
cls: 'bq-map-marker',
html: ' '
});
this.marker.hide();
var map = this.body.createChild({
tag: 'map',
id: this.id + '_map',
name: 'regions'
});
map.on('click', this.onClick, this);
map.update([
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
'',
].join(''));
// build image
this.img = this.body.createChild({
tag: 'img',
src : this.imgSrc,
width: this.imgWidth,
usemap: '#regions'
});
// not sure where extra 4 pixels comes from.
//this.setWidth(this.img.getWidth() + this.img.getMargins('lr') + 4);
var bubble = new BQ.regions.Bubble({
id: this.id + '_bubble',
height: 300,
//if the bubble isn't mobile, the following style should be applied and the renderTo is changed
//renderTo: document.body
renderTo: this.container,
style: "position:absolute; left: 393px; top:21px;"
});
//bubble.el.anchorTo(this.img, 'tl-tr', [-18, 0]);
},
onClick : function(ev, node, obj) {
this.marker.show();
var region = BQ.Regions.find(function(r) {
return (r.slug == node.className) ? true : false;
});
ev.stopEvent();
var bubble = Ext.getCmp(this.id + '_bubble');
bubble.setTitle(region.name);
this.marker.setXY([ev.getPageX() - (this.marker.getWidth()/2), ev.getPageY()-this.marker.getHeight()]);
bubble.show(region);
// good positioning-code for aligning to marker ///////////////////////////
// var xy = bubble.el.getAlignToXY(this.marker, 'tl-bl?');
//xy = bubble.el.adjustForConstraints(xy);
//bubble.el.setXY(xy);
}
});
/**
* BQ.regions.Bubble
* Bubble-popup for Region information
* @author Chris Scott
*/
BQ.regions.Bubble = Ext.extend(Ext.Panel, {
controller: '/json/BQARegion',
actions: {
load : 'stats'
},
shadow: false,
frame: false,
width: 207,
closable: false,
draggable: false,
resizable: false,
title: ' ',
border: false,
/**
* @cfg {String} templateId [null]
* id of an XTempalate to use.
*/
templateId : null,
// private region
region : null,
initComponent : function() {
this.addClass('bq-regions-bubble');
this.tpl = new Ext.XTemplate(
'',
'
',
'',
''
);
this.on('render', function(p) {
p.el.setOpacity(0);
});
// super
BQ.regions.Bubble.superclass.initComponent.call(this);
},
show : function(region) {
region = region || null;
if (region != null) {
/**
* HACK REGION IMAGE FOR NOW
*
*/
//region.img = '/static/images/css_images/region_panel_default_image.jpg';
/*
*
*
*/
region.img = '/static/images/regions/' + Ext.util.Format.lowercase(region.slug) + '.jpg';
this.el.fadeIn();
// contact server for more information...
App.request({
url: this.controller + '/' + this.actions.load,
params: {
id: region.id
},
method: "GET",
success : function(res) {
// render template
var data = (res.data.length > 0) ? res.data.shift() : {photo: 0, video: 0, story: 0};
this.tpl.overwrite(this.body, Ext.apply(region, data));
},
failure : function(res) {
alert('BQ.RegionManager failed to load region ' + region.id);
},
scope: this
});
}
else {
console.error('BQ.RegionManager#show was called with a null region');
return false;
}
}
});