Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds support for mouse events. #102

Merged
merged 5 commits into from Jan 31, 2015
Merged

Adds support for mouse events. #102

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9aba848
Adds support for mouse events.
DracoNoir Jan 28, 2015
da37550
Added attributes to configure which event listeners are added for eac…
DracoNoir Jan 29, 2015
2cbbeda
Disconnects marker from map and listeners when map property is changed.
DracoNoir Jan 29, 2015
10ee9cc
Updates description of *Events attributes.
DracoNoir Jan 30, 2015
dd6b252
Updated event descriptions to indicate which attribute must be true t…
DracoNoir Jan 31, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
133 changes: 132 additions & 1 deletion google-map.html
View file
Open in desktop
Expand Up @@ -34,7 +34,65 @@
@status alpha
@homepage http://googlewebcomponents.github.io/google-map
-->
<polymer-element name="google-map-marker" attributes="icon">
<!--
Fired when the marker icon was clicked. Requires the clickEvents attribute to be true.

@event google-map-marker-click
@param {google.maps.MouseEvent} event The mouse event.
-->

<!--
Fired when the marker icon was double clicked. Requires the clickEvents attribute to be true.

@event google-map-marker-dblclick
@param {google.maps.MouseEvent} event The mouse event.
-->

<!--
Fired for a mousedown on the marker. Requires the mouseEvents attribute to be true.

@event google-map-marker-mousedown
@param {google.maps.MouseEvent} event The mouse event.
-->

<!--
Fired when the DOM `mousemove` event is fired on the marker. Requires the mouseEvents attribute to
be true.

@event google-map-marker-mousemove
@param {google.maps.MouseEvent} event The mouse event.
-->

<!--
Fired when the mouse leaves the area of the marker icon. Requires the mouseEvents attribute to be
true.

@event google-map-marker-mouseout
@param {google.maps.MouseEvent} event The mouse event.
-->

<!--
Fired when the mouse enters the area of the marker icon. Requires the mouseEvents attribute to be
true.

@event google-map-marker-mouseover
@param {google.maps.MouseEvent} event The mouse event.
-->

<!--
Fired for a mouseup on the marker. Requires the mouseEvents attribute to be true.

@event google-map-marker-mouseup
@param {google.maps.MouseEvent} event The mouse event.
-->

<!--
Fired for a rightclick on the marker. Requires the clickEvents attribute to be true.

@event google-map-marker-rightclick
@param {google.maps.MouseEvent} event The mouse event.
-->
<polymer-element name="google-map-marker" attributes="clickEvents icon mouseEvents">
<template>
<style>
:host {
Expand Down Expand Up @@ -74,6 +132,15 @@
*/
info: null,

/**
* When true, marker *click events are automatically registered.
*
* @attribute clickEvents
* @type boolean
* @default false
*/
clickEvents: false,

/**
* Image URL for the marker icon.
*
Expand All @@ -83,6 +150,15 @@
*/
icon: null,

/**
* When true, marker mouse* events are automatically registered.
*
* @attribute mouseEvents
* @type boolean
* @default false
*/
mouseEvents: false,

publish: {
/**
* The marker's longitude coordinate.
Expand Down Expand Up @@ -128,13 +204,51 @@
}
},

clickEventsChanged: function() {
if (this.map) {
if (this.clickEvents) {
this._forwardEvent('click');
this._forwardEvent('dblclick');
this._forwardEvent('rightclick');
} else {
this._clearListener('click');
this._clearListener('dblclick');
this._clearListener('rightclick');
}
}
},

mouseEventsChanged: function() {
if (this.map) {
if (this.mouseEvents) {
this._forwardEvent('mousedown');
this._forwardEvent('mousemove');
this._forwardEvent('mouseout');
this._forwardEvent('mouseover');
this._forwardEvent('mouseup');
} else {
this._clearListener('mousedown');
this._clearListener('mousemove');
this._clearListener('mouseout');
this._clearListener('mouseover');
this._clearListener('mouseup');
}
}
},

iconChanged: function() {
if (this.marker) {
this.marker.setIcon(this.icon);
}
},

mapChanged: function() {
// Marker will be rebuilt, so disconnect existing one from old map and listeners.
if (this.marker) {
this.marker.setMap(null);
google.maps.event.clearInstanceListeners(this.marker);
}

if (this.map && this.map instanceof google.maps.Map) {
this.mapReady();
}
Expand Down Expand Up @@ -163,6 +277,7 @@
},

mapReady: function() {
this._listeners = {};
this.marker = new google.maps.Marker({
map: this.map,
position: new google.maps.LatLng(this.latitude, this.longitude),
Expand All @@ -172,9 +287,25 @@
icon: this.icon
});
this.contentChanged();
this.clickEventsChanged();
this.contentChanged();
this.mouseEventsChanged();
setupDragHandler_.bind(this)();
},

_clearListener: function(name) {
if (this._listeners[name]) {
google.maps.event.removeListener(this._listeners[name]);
this._listeners[name] = null;
}
},

_forwardEvent: function(name) {
this._listeners[name] = google.maps.event.addListener(this.marker, name, function(event) {
this.fire('google-map-marker-' + name, event);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not just fire the name of the event? Seems like it would be cleaner that way.

this.fire(name, event);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I chose the more verbose form to allow a developer to register handlers above the element (e.g. on the google-map itself) and still disambiguate the source by type. However, there is also value in brevity (and the handler will be passed the source element). Do you have a recommendation @ebidel?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've encouraged the use of ELEMENT-NAME-event in the style guide https://github.com/GoogleWebComponents/style-guide#events

}.bind(this));
},

attributeChanged: function(attrName, oldVal, newVal) {
if (!this.marker) {
return;
Expand Down