Skip to content

attribute native hidden and title in Polymer 2 #427

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

attribute native hidden and title in Polymer 2 #427

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 42 additions & 25 deletions google-map-marker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
<slot></slot>
</template>
<script>
(function() {
(function () {


/**
Expand All @@ -53,7 +53,7 @@
function setupDragHandler_() {
if (this.draggable) {
this.dragHandler_ = google.maps.event.addListener(
this.marker, 'dragend', onDragEnd_.bind(this));
this.marker, 'dragend', onDragEnd_.bind(this));
} else {
google.maps.event.removeListener(this.dragHandler_);
this.dragHandler_ = null;
Expand Down Expand Up @@ -162,6 +162,23 @@
*/

properties: {
/**
Solved the failure in polymer 2 with the hidden attribute.
When you use the Google Maps component in Polymer 2 the hidden attribute is not working as in Polymer 1,
it only works the first time.
It seems that with the native attributes of html 'hidden', 'title', etc ... in polymer 2 in this
component they do not react to the change.I have reviewed the 'attributeChanged' method and it
appears as deprecated and according to the official documentation they recommend using
the 'attributeChangedCallback' method, but it behaves the same with the native attributes.
I imagine that since they are native attributes they have a behavior that in polymer 1 if it worked
but in polymer 2 it does not do in binding.
Solution: The first solution was to create a property that would replace the behavior of the hidden
or the title, but the final solution is much simpler. You have to declare the native
attributes 'hidden' or 'title' as properties of the component, in this way Native attributes
work correctly
*/
hidden: Boolean,
title: String,
/**
* A Google Maps marker object.
*
Expand Down Expand Up @@ -290,7 +307,7 @@
'_updatePosition(latitude, longitude)'
],

detached: function() {
detached: function () {
if (this.marker) {
google.maps.event.clearInstanceListeners(this.marker);
this._listeners = {};
Expand All @@ -300,21 +317,20 @@
this._contentObserver.disconnect();
},

attached: function() {
attached: function () {
// If element is added back to DOM, put it back on the map.
if (this.marker) {
this.marker.setMap(this.map);
}
},

_updatePosition: function() {
_updatePosition: function () {
if (this.marker && this.latitude != null && this.longitude != null) {
this.marker.setPosition(new google.maps.LatLng(
parseFloat(this.latitude), parseFloat(this.longitude)));
}
},

_clickEventsChanged: function() {
_clickEventsChanged: function () {
if (this.map) {
if (this.clickEvents) {
this._forwardEvent('click');
Expand All @@ -328,7 +344,7 @@
}
},

_dragEventsChanged: function() {
_dragEventsChanged: function () {
if (this.map) {
if (this.dragEvents) {
this._forwardEvent('drag');
Expand All @@ -342,7 +358,7 @@
}
},

_mouseEventsChanged: function() {
_mouseEventsChanged: function () {
if (this.map) {
if (this.mouseEvents) {
this._forwardEvent('mousedown');
Expand All @@ -360,31 +376,31 @@
}
},

_animationChanged: function() {
_animationChanged: function () {
if (this.marker) {
this.marker.setAnimation(google.maps.Animation[this.animation]);
}
},

_labelChanged: function() {
_labelChanged: function () {
if (this.marker) {
this.marker.setLabel(this.label);
}
},

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

_zIndexChanged: function() {
_zIndexChanged: function () {
if (this.marker) {
this.marker.setZIndex(this.zIndex);
}
},

_mapChanged: function() {
_mapChanged: function () {
// Marker will be rebuilt, so disconnect existing one from old map and listeners.
if (this.marker) {
this.marker.setMap(null);
Expand All @@ -396,12 +412,12 @@
}
},

_contentChanged: function() {
_contentChanged: function () {
if (this._contentObserver)
this._contentObserver.disconnect();
// Watch for future updates.
this._contentObserver = new MutationObserver( this._contentChanged.bind(this));
this._contentObserver.observe( this, {
this._contentObserver = new MutationObserver(this._contentChanged.bind(this));
this._contentObserver.observe(this, {
childList: true,
subtree: true
});
Expand All @@ -411,11 +427,11 @@
if (!this.info) {
// Create a new infowindow
this.info = new google.maps.InfoWindow();
this.openInfoHandler_ = google.maps.event.addListener(this.marker, 'click', function() {
this.openInfoHandler_ = google.maps.event.addListener(this.marker, 'click', function () {
this.open = true;
}.bind(this));

this.closeInfoHandler_ = google.maps.event.addListener(this.info, 'closeclick', function() {
this.closeInfoHandler_ = google.maps.event.addListener(this.info, 'closeclick', function () {
this.open = false;
}.bind(this));
}
Expand All @@ -430,7 +446,7 @@
}
},

_openChanged: function() {
_openChanged: function () {
if (this.info) {
if (this.open) {
this.info.open(this.map, this.marker);
Expand All @@ -442,7 +458,7 @@
}
},

_mapReady: function() {
_mapReady: function () {
this._listeners = {};
this.marker = new google.maps.Marker({
map: this.map,
Expand All @@ -466,20 +482,21 @@
setupDragHandler_.bind(this)();
},

_clearListener: function(name) {
_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) {
_forwardEvent: function (name) {
this._listeners[name] = google.maps.event.addListener(this.marker, name, function (event) {
this.fire('google-map-marker-' + name, event);
}.bind(this));
},

attributeChanged: function(attrName) {
attributeChanged: function (attrName) {
debugger;
if (!this.marker) {
return;
}
Expand Down