Permalink
Browse files

update event management on clustering feature

  • Loading branch information...
1 parent 539bbbd commit 04efde297d012d4e40ca3875aa0c597fab18fd86 @jbdemonte committed Mar 20, 2016
Showing with 149 additions and 69 deletions.
  1. +2 −2 src/examples/cluster-remove.html
  2. +9 −9 src/examples/cluster-speed.html
  3. +22 −12 src/gmap3.js
  4. +1 −0 tests/karma.conf.js
  5. +20 −0 tests/patch.js
  6. +0 −46 tests/tests/cluster.js
  7. +95 −0 tests/tests/events.js
@@ -33,8 +33,8 @@
cluster = _cluster;
})
.on({
- click: function (marker) {
- if (marker instanceof google.maps.Marker) { // ignore cluster
+ click: function (marker, clusterOverlay, cluster, event) {
+ if (marker) {
cluster.remove(marker);
marker.setMap(null);
}
@@ -65,19 +65,19 @@
}
})
.on({ // events trigged by clusters
- mouseover: function(target, event){
- if (target.overlay) {
- target.overlay.$.find(">*").css('border', '1px solid #FF0000');
+ mouseover: function(marker, clusterOverlay, cluster, event){
+ if (clusterOverlay) {
+ clusterOverlay.overlay.$.find(">*").css('border', '1px solid #FF0000');
}
},
- mouseout: function(target, event){
- if (target.overlay) {
- target.overlay.$.find(">*").css('border', '0px');
+ mouseout: function(marker, clusterOverlay, cluster, event){
+ if (clusterOverlay) {
+ clusterOverlay.overlay.$.find(">*").css('border', '0px');
}
},
- click: function(target, event){
- if (target.overlay) {
- target.overlay.getMap().fitBounds(target.overlay.getBounds());
+ click: function(marker, clusterOverlay, cluster, event){
+ if (clusterOverlay) {
+ clusterOverlay.overlay.getMap().fitBounds(target.overlay.getBounds());
}
}
})
View
@@ -474,7 +474,7 @@
* Bind a function to each current or future overlays
* @param {bindCallback} fn
*/
- self.bind = function (fn) {
+ self._b = function (fn) {
fn(objectValues(overlays));
handlers.push(fn);
};
@@ -795,18 +795,32 @@
* Attach events to instances
* @param {Object } events
* @param {Array|Object} instances
+ * @param {array} [args] arguments to add
* @param {Boolean} once
*/
- function attachEvents(events, instances, once) {
+ function attachEvents(events, instances, args, once) {
+ var hasArgs = arguments.length > 3;
+ if (!hasArgs) {
+ once = args;
+ }
$.each(events, function (eventName, handlers) {
foreach(instances, function (instance) {
- var isDom = (instance instanceof gm.OverlayView) || (instance instanceof ClusterOverlay);
+ var isClusterOverlay = instance instanceof ClusterOverlay;
+ var isDom = isClusterOverlay || (instance instanceof gm.OverlayView);
var eventListener = isDom ? instance.$.get(0) : instance;
- gm.event[(isDom ? 'addDomListener' : 'addListener') + (once ? 'Once' : '')](eventListener, eventName, function (event) {
- var target = instance;
+ gm.event['add' + (isDom ? 'Dom' : '') + 'Listener' + (once ? 'Once' : '')](eventListener, eventName, function (event) {
foreach(handlers, function (handler) {
if (isFunction(handler)) {
- handler.call(context(), target, event);
+ if (isClusterOverlay) {
+ handler.call(context(), undefined /* marker */, instance, instance.cluster, event);
+ } else if (hasArgs) {
+ var buffer = slice(args);
+ buffer.unshift(instance);
+ buffer.push(event);
+ handler.apply(context(), buffer);
+ } else {
+ handler.call(context(), instance, event);
+ }
}
});
});
@@ -1048,16 +1062,12 @@
promise.then(function (instances) {
if (instances) {
if (instances instanceof Cluster) {
- instances.bind(function (items) {
+ instances._b(function (items) {
if (items && items.length) {
attachEvents(events, items, once);
}
});
- instances = (function () {
- var items = instances.markers();
- items.push(instances);
- return items;
- })();
+ return attachEvents(events, instances.markers(), [undefined, instances], once);
}
attachEvents(events, instances, once);
}
View
@@ -15,6 +15,7 @@ module.exports = function(config) {
'node_modules/jquery/dist/jquery.min.js',
'https://maps.googleapis.com/maps/api/js',
'src/gmap3.js',
+ 'tests/patch.js',
'tests/tests/*.js'
],
View
@@ -0,0 +1,20 @@
+// http://stackoverflow.com/a/17789929/722096
+
+// Patch since PhantomJS does not implement click() on HTMLElement. In some
+// cases we need to execute the native click on an element. However, jQuery's
+// $.fn.click() does not dispatch to the native function on <a> elements, so we
+// can't use it in our implementations: $el[0].click() to correctly dispatch.
+if (!HTMLElement.prototype.click) {
+ HTMLElement.prototype.click = function() {
+ var ev = document.createEvent('MouseEvent');
+ ev.initMouseEvent(
+ 'click',
+ /*bubble*/true, /*cancelable*/true,
+ window, null,
+ 0, 0, 0, 0, /*coordinates*/
+ false, false, false, false, /*modifier keys*/
+ 0/*button=left*/, null
+ );
+ this.dispatchEvent(ev);
+ };
+}
@@ -104,50 +104,4 @@ describe('marker', function () {
});
});
- it('should handle events', function (done) {
-
- var called = {};
-
- this.handler
- .cluster({
- size: 200,
- markers: [
- {position: [48.8620722, 2.352047]},
- {position: [44.28952958093682, 6.152559438984804]},
- {position: [49.28952958093682, -1.1501188139848408]},
- {position: [44.28952958093682, -1.1501188139848408]}
- ],
- cb: function (markers) {
- called[markers.length] = (called[markers.length] || 0) + 1;
- if (markers.length > 1) {
- return {
- content: '<div>' + markers.length + '</div>'
- };
- }
- }
- })
- .then(function (cluster) {
-
- var map = this.get(0);
-
- setTimeout(function () {
- map.setZoom(10);
- map.setCenter(cluster.markers()[0].getPosition());
- }, 500);
-
- setTimeout(function () {
- var groups = cluster.groups();
- expect(groups.length).to.eql(0);
-
- // group 4 should had been called at creation
- // group 1 should had been called when focusing on marker 1
- // others markers should not be visible
- expect(called).to.eql({4: 1, 1: 1});
-
- done();
- }, 1000);
- });
- });
-
-
});
View
@@ -111,6 +111,7 @@ describe('events', function () {
var call = [];
function click(marker, event) {
+ expect(arguments.length).to.eql(2);
call.push({marker:marker, event:event});
}
@@ -142,6 +143,7 @@ describe('events', function () {
var marker1, marker2;
function click(marker, event) {
+ expect(arguments.length).to.eql(2);
call.push({marker:marker, event:event});
}
@@ -210,4 +212,97 @@ describe('events', function () {
});
});
+ it('should handle click on cluster overlay', function (done) {
+
+ var called = {};
+
+ this.handler
+ .then(function (map) {
+ map.setCenter(new google.maps.LatLng(46.578498, 2.457275));
+ map.setZoom(3);
+ })
+ .cluster({
+ size: 200,
+ markers: [
+ {position: [48.8620722, 2.352047]},
+ {position: [44.28952958093682, 6.152559438984804]},
+ {position: [49.28952958093682, -1.1501188139848408]},
+ {position: [44.28952958093682, -1.1501188139848408]}
+ ],
+ cb: function (markers) {
+ called[markers.length] = (called[markers.length] || 0) + 1;
+ if (markers.length > 1) {
+ return {
+ content: '<div>' + markers.length + '</div>'
+ };
+ }
+ }
+ })
+ .on({
+ click: function (marker, clusterOverlay, cluster, event) {
+ expect(arguments.length).to.eql(4);
+ expect(marker).to.be.an.undefined;
+ expect(clusterOverlay).not.to.be.an.undefined;
+ expect(cluster).not.to.be.an.undefined;
+ expect(event).not.to.be.an.undefined;
+ expect(clusterOverlay).to.have.all.keys('cluster', 'markers', '$', 'overlay');
+ expect(cluster.groups()[0] === clusterOverlay).to.be.true;
+ done();
+ }
+ })
+ .wait(1000)
+ .then(function (cluster) {
+ expect(cluster.groups().length).to.eql(1);
+ var group = cluster.groups().pop();
+ group.$.click();
+ });
+ });
+
+ it('should handle click on marker in clustering feature', function (done) {
+
+ var called = {};
+
+ this.handler
+ .then(function (map) {
+ map.setCenter(new google.maps.LatLng(44.28952958093682, 6.152559438984804));
+ map.setZoom(6);
+ })
+ .cluster({
+ size: 200,
+ markers: [
+ {position: [48.8620722, 2.352047]},
+ {position: [44.28952958093682, 6.152559438984804]},
+ {position: [49.28952958093682, -1.1501188139848408]},
+ {position: [44.28952958093682, -1.1501188139848408]}
+ ],
+ cb: function (markers) {
+ called[markers.length] = (called[markers.length] || 0) + 1;
+ if (markers.length > 1) {
+ return {
+ content: '<div>' + markers.length + '</div>'
+ };
+ }
+ }
+ })
+ .on({
+ click: function (marker, clusterOverlay, cluster, event) {
+ expect(arguments.length).to.eql(4);
+ expect(marker).not.to.be.an.undefined;
+ expect(clusterOverlay).to.be.an.undefined;
+ expect(cluster).not.to.be.an.undefined;
+ expect(event).to.eql({event:'fake'});
+ expect(marker.getPosition().lat()).to.be.closeTo(44.28952958093682, 0.001);
+ expect(marker.getPosition().lng()).to.be.closeTo(6.152559438984804, 0.001);
+ expect(cluster.markers()[1] === marker).to.be.true;
+ done();
+ }
+ })
+ .wait(1000)
+ .then(function (cluster) {
+ expect(cluster.groups().length).to.eql(0);
+ var marker = cluster.markers()[1];
+ google.maps.event.trigger(marker, 'click', {event:'fake'});
+ });
+ });
+
});

0 comments on commit 04efde2

Please sign in to comment.