MediaWiki:Common.js
From FridaV
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
| - | + | plot_options = { | |
| - | + | yaxis: { min: 0 }, | |
| - | + | xaxis: { }, | |
| - | + | points: { show: true }, | |
| - | + | lines: { show: true }, | |
| - | } | + | legend: { position: 'nw' }, |
| - | } | + | }; |
| - | $(document).ready( | + | var charts = { |
| + | chart: {}, | ||
| + | init: function() { | ||
| + | $('table.flot').each(function(i) { | ||
| + | var my_id=$(this).attr('id'); | ||
| + | var my_chart={cols:{}, ncols:[], series:{}}; | ||
| + | charts.chart[my_id]=my_chart; | ||
| + | |||
| + | // get fields | ||
| + | $('tr:first th',this).each(function(j) { | ||
| + | var name=this.innerHTML; | ||
| + | my_chart.cols[name]=j; | ||
| + | my_chart.ncols.push(name); | ||
| + | this.onclick=function(e) { charts.toggle_series(my_id,name,e); } | ||
| + | }); // fields | ||
| + | |||
| + | // get rows | ||
| + | $('tr',this).each(function(j) { | ||
| + | if(j>=1) { | ||
| + | // var epoch=$('th.day',this).attr('epoch')*1000; | ||
| + | var epoch=1-j; | ||
| + | $('td',this).each(function(ii) { // columns | ||
| + | var a=my_chart.ncols[ii]; | ||
| + | var v=this.innerHTML; | ||
| + | if((!v) || v=='None') v=0; | ||
| + | if(!my_chart.series[a]) my_chart.series[a]={ label: a , data: [] }; | ||
| + | this.onclick=function(e) { charts.toggle_series(my_id,a,e); } | ||
| + | my_chart.series[a].data.unshift([epoch,parseFloat(v)]); | ||
| + | }); // columns | ||
| + | } | ||
| + | }); // rows | ||
| + | return; | ||
| + | }); // tables | ||
| + | }, // init() | ||
| + | toggle_series: function(id,name,e) { | ||
| + | var my_chart=charts.chart[id]; | ||
| + | $('#'+id+' tr').each(function(i) { | ||
| + | if(i<1) { | ||
| + | $('th:eq('+my_chart.cols[name]+')',this).toggleClass('plot'); | ||
| + | } else { | ||
| + | $('td:eq('+my_chart.cols[name]+')',this).toggleClass('plot'); | ||
| + | } | ||
| + | }); | ||
| + | charts.plot(id); | ||
| + | }, // toggle_series() | ||
| + | plot: function(id) { | ||
| + | if($('#'+id+'-flot-chart').length==0) { | ||
| + | // create plotarea | ||
| + | $('#'+id).before('<div class="flot-chart" id="'+id+'-flot-chart"/></div>'); | ||
| + | } | ||
| + | var data=[]; | ||
| + | $('#'+id+' tr:first th.plot').each(function(i) { | ||
| + | var name=this.innerHTML; | ||
| + | if(charts.chart[id].series[name]) { | ||
| + | data.push(charts.chart[id].series[name]); | ||
| + | } | ||
| + | }); | ||
| + | if(data.length>0) { | ||
| + | $.plot($('#'+id+'-flot-chart'), data, plot_options); | ||
| + | $('#'+id+'-flot-chart').show(1); | ||
| + | } else { | ||
| + | $('#'+id+'-flot-chart').hide(1); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // $(document).ready(charts.init); | ||
| + | |||
| + | function say(msg) { | ||
| + | console.log(msg); | ||
| + | } | ||
| + | |||
| + | function osm_getTileURL(bounds) { | ||
| + | var res = this.map.getResolution(); | ||
| + | var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); | ||
| + | var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); | ||
| + | var z = this.map.getZoom(); | ||
| + | var limit = Math.pow(2, z); | ||
| + | |||
| + | if (y < 0 || y >= limit) { | ||
| + | return OpenLayers.Util.getImagesLocation() + "404.png"; | ||
| + | } else { | ||
| + | x = ((x % limit) + limit) % limit; | ||
| + | return this.url + z + "/" + x + "/" + y + "." + this.type; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | var map; | ||
| + | var center; | ||
| + | |||
| + | $(window).load(function() { | ||
| + | |||
| + | $('div#TheMap').each(function () { | ||
| + | $(this).css('background','gray'); | ||
| + | |||
| + | map = new OpenLayers.Map('TheMap', { | ||
| + | projection: new OpenLayers.Projection("EPSG:900913"), | ||
| + | displayProjection: new OpenLayers.Projection("EPSG:4326"), | ||
| + | units: "m", | ||
| + | maxResolution: 156543.0339, | ||
| + | numZoomLevels: 18, | ||
| + | maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, | ||
| + | 20037508.34, 20037508.34), | ||
| + | restrictedExtent: new OpenLayers.Bounds(-12037508.34, -15037508.34, | ||
| + | 20037508.34, 15037508.34), | ||
| + | |||
| + | }); | ||
| + | |||
| + | // get parameters from span tags | ||
| + | var pn = ['lat','lon','zoom']; | ||
| + | var p = {}; | ||
| + | for(var i in pn) { | ||
| + | $('span.'+pn[i]).each(function() { p[pn[i]]=this.innerHTML; $(this).hide(); }); | ||
| + | } | ||
| + | |||
| + | // create OSM layer | ||
| + | var mapnik = new OpenLayers.Layer.TMS( | ||
| + | "OpenStreetMap (Mapnik)", | ||
| + | "http://tile.openstreetmap.org/", | ||
| + | { | ||
| + | type: 'png', getURL: osm_getTileURL, | ||
| + | displayOutsideMaxExtent: true, | ||
| + | attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>' | ||
| + | } | ||
| + | ); | ||
| + | |||
| + | map.addLayer(mapnik); | ||
| + | |||
| + | map.addControl(new OpenLayers.Control.Permalink('Link')); | ||
| + | map.addControl(new OpenLayers.Control.MousePosition()); | ||
| + | map.addControl(new OpenLayers.Control.KeyboardDefaults()); | ||
| + | |||
| + | |||
| + | if(map.getCenter()==null) { | ||
| + | center = new OpenLayers.LonLat(p.lon,p.lat); | ||
| + | center.transform(map.displayProjection,map.getProjectionObject()); | ||
| + | map.setCenter(center,p.zoom); | ||
| + | } | ||
| + | if(!map.getZoom()) { | ||
| + | map.zoomTo(p.zoom); | ||
| + | } | ||
| + | }); | ||
| + | |||
| + | charts.init(); | ||
| + | }); | ||
Current revision as of 23:01, 10 April 2009
/* Any JavaScript here will be loaded for all users on every page load. */
plot_options = {
yaxis: { min: 0 },
xaxis: { },
points: { show: true },
lines: { show: true },
legend: { position: 'nw' },
};
var charts = {
chart: {},
init: function() {
$('table.flot').each(function(i) {
var my_id=$(this).attr('id');
var my_chart={cols:{}, ncols:[], series:{}};
charts.chart[my_id]=my_chart;
// get fields
$('tr:first th',this).each(function(j) {
var name=this.innerHTML;
my_chart.cols[name]=j;
my_chart.ncols.push(name);
this.onclick=function(e) { charts.toggle_series(my_id,name,e); }
}); // fields
// get rows
$('tr',this).each(function(j) {
if(j>=1) {
// var epoch=$('th.day',this).attr('epoch')*1000;
var epoch=1-j;
$('td',this).each(function(ii) { // columns
var a=my_chart.ncols[ii];
var v=this.innerHTML;
if((!v) || v=='None') v=0;
if(!my_chart.series[a]) my_chart.series[a]={ label: a , data: [] };
this.onclick=function(e) { charts.toggle_series(my_id,a,e); }
my_chart.series[a].data.unshift([epoch,parseFloat(v)]);
}); // columns
}
}); // rows
return;
}); // tables
}, // init()
toggle_series: function(id,name,e) {
var my_chart=charts.chart[id];
$('#'+id+' tr').each(function(i) {
if(i<1) {
$('th:eq('+my_chart.cols[name]+')',this).toggleClass('plot');
} else {
$('td:eq('+my_chart.cols[name]+')',this).toggleClass('plot');
}
});
charts.plot(id);
}, // toggle_series()
plot: function(id) {
if($('#'+id+'-flot-chart').length==0) {
// create plotarea
$('#'+id).before('<div class="flot-chart" id="'+id+'-flot-chart"/></div>');
}
var data=[];
$('#'+id+' tr:first th.plot').each(function(i) {
var name=this.innerHTML;
if(charts.chart[id].series[name]) {
data.push(charts.chart[id].series[name]);
}
});
if(data.length>0) {
$.plot($('#'+id+'-flot-chart'), data, plot_options);
$('#'+id+'-flot-chart').show(1);
} else {
$('#'+id+'-flot-chart').hide(1);
}
}
}
// $(document).ready(charts.init);
function say(msg) {
console.log(msg);
}
function osm_getTileURL(bounds) {
var res = this.map.getResolution();
var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var limit = Math.pow(2, z);
if (y < 0 || y >= limit) {
return OpenLayers.Util.getImagesLocation() + "404.png";
} else {
x = ((x % limit) + limit) % limit;
return this.url + z + "/" + x + "/" + y + "." + this.type;
}
}
var map;
var center;
$(window).load(function() {
$('div#TheMap').each(function () {
$(this).css('background','gray');
map = new OpenLayers.Map('TheMap', {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
numZoomLevels: 18,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34),
restrictedExtent: new OpenLayers.Bounds(-12037508.34, -15037508.34,
20037508.34, 15037508.34),
});
// get parameters from span tags
var pn = ['lat','lon','zoom'];
var p = {};
for(var i in pn) {
$('span.'+pn[i]).each(function() { p[pn[i]]=this.innerHTML; $(this).hide(); });
}
// create OSM layer
var mapnik = new OpenLayers.Layer.TMS(
"OpenStreetMap (Mapnik)",
"http://tile.openstreetmap.org/",
{
type: 'png', getURL: osm_getTileURL,
displayOutsideMaxExtent: true,
attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'
}
);
map.addLayer(mapnik);
map.addControl(new OpenLayers.Control.Permalink('Link'));
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.KeyboardDefaults());
if(map.getCenter()==null) {
center = new OpenLayers.LonLat(p.lon,p.lat);
center.transform(map.displayProjection,map.getProjectionObject());
map.setCenter(center,p.zoom);
}
if(!map.getZoom()) {
map.zoomTo(p.zoom);
}
});
charts.init();
});
