nicolas/librenms
1
0
Fork 0
mirror of https://github.com/stylersnico/librenms.git synced 2026-07-28 08:02:41 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improved handling of callbacks with events

Browse Source
This commit is contained in:
Vincent Broute
2013-09-22 12:46:49 +02:00
parent 55e26e9b2d
commit 01592a72fd
2 changed files with 64 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples.js
+53 -5
View File
@@ -12,6 +12,9 @@ $(function(){
$(".maparea2").mapael({
map : {
name : "france_departments"
, zoom: {
enabled: true
}
},
areas: {
"department-56" : {
@@ -50,30 +53,74 @@ $(function(){
$(".maparea3").mapael({
map : {
name : "france_departments",
zoom : {
enabled : true
},
defaultArea: {
attrs : {
fill: "#5ba4ff",
stroke: "#99c7ff",
cursor: "pointer"
},
attrsHover : {
animDuration:0
},
textAttrs : {
cursor: "pointer",
"font-size" : 10,
fill :"#000"
},
onclick: function(params, mapElem, textElem) {
mapElem.attr({fill: '#ff0000'});
textAttrsHover : {
animDuration:0
},
eventHandlers : {
click: function(id, mapElem, textElem) {
var newData = {'areas' : {}};
if (mapElem.originalAttrs.fill == "#5ba4ff") {
newData.areas[id] = {
attrs : {
fill : "#0088db"
}
};
} else {
newData.areas[id] = {
attrs : {
fill : "#5ba4ff"
}
};
}
$(".maparea3").trigger('update', [newData, false, false, 0]);
}
}
}
},
areas: {
"department-29" : {
text : "29",
text : "dblclick",
attrs : {
fill :"#0088db"
},
textPosition: "top",
tooltip: {content : "Finistère (29)"},
onclick: function(params, mapElem, textElem) {
mapElem.attr({fill: '#24ff00'});
eventHandlers : {
click: function() {},
dblclick: function(id, mapElem, textElem) {
var newData = {'areas' : {}};
if (mapElem.originalAttrs.fill == "#5ba4ff") {
newData.areas[id] = {
attrs : {
fill : "#0088db"
}
};
} else {
newData.areas[id] = {
attrs : {
fill : "#5ba4ff"
}
};
}
$(".maparea3").trigger('update', [newData, false, false, 0]);
}
}
}
}
@@ -97,6 +144,7 @@ $(function(){
area : {
display : true,
title :"Population of France by department",
labelAttrs : {title : "Hide the matching departments"},
slices : [
{
max :300000,
js/jquery.mapael.js
+11 -14
View File
@@ -99,7 +99,7 @@
}
};
if (!animDuration) animDuration = 300;
if (typeof animDuration == "undefined") animDuration = 300;
if (!easing) easing = 'linear';
if (resetAreas) options.areas = {};
if (resetPlots) options.plots = {};
@@ -235,11 +235,11 @@
options.href && $.fn.mapael.setHref(elem.textElem, options.href);
$.fn.mapael.setHoverOptions(elem.textElem, options.textAttrs, options.textAttrsHover);
$.fn.mapael.setHover(paper, elem.mapElem, elem.textElem);
$.fn.mapael.setCallbacks(options, elem.mapElem, elem.textElem);
options.eventHandlers && $.fn.mapael.setEventHandlers(id, options, elem.mapElem, elem.textElem);
$(elem.textElem.node).attr('class', id);
} else {
$.fn.mapael.setHover(paper, elem.mapElem);
$.fn.mapael.setCallbacks(options, elem.mapElem);
options.eventHandlers && $.fn.mapael.setEventHandlers(id, options, elem.mapElem);
}
if (options.tooltip && options.tooltip.content) {
@@ -289,21 +289,18 @@
};
/**
* Set user defined callbacks on areas and plots
* Set user defined handlers for events on areas and plots
* @param id the id of the element
* @param elemOptions the element parameters
* @param mapElem the map element to set callback on
* @param textElem the optional text within the map element
*/
$.fn.mapael.setCallbacks = function(elemOptions, mapElem, textElem) {
var availableCallbacks = ['click', 'mouseover', 'mouseout']
, callbackFct = {};
for(var i = 0, length = availableCallbacks.length; i < length; ++i) {
if (elemOptions["on" + availableCallbacks[i]]) {
callbackFct = elemOptions["on" + availableCallbacks[i]];
$(mapElem.node).on(availableCallbacks[i], function() {!$.fn.mapael.panning && callbackFct(elemOptions, mapElem, textElem)});
textElem && $(textElem.node).on(availableCallbacks[i], function() {!$.fn.mapael.panning && callbackFct(elemOptions, mapElem, textElem)});
}
$.fn.mapael.setEventHandlers = function(id, elemOptions, mapElem, textElem) {
for(var event in elemOptions.eventHandlers) {
(function(event) {
$(mapElem.node).on(event, function() {!$.fn.mapael.panning && elemOptions.eventHandlers[event](id, mapElem, textElem)});
textElem && $(textElem.node).on(event, function() {!$.fn.mapael.panning && elemOptions.eventHandlers[event](id, mapElem, textElem)});
})(event);
}
}