Skip to content

Instantly share code, notes, and snippets.

@zbyte64
Last active Oct 23, 2015
Embed
What would you like to do?
Custom tag examples
/*
Registers the following tags (use is property):
* x-googlemap (iframe with api-key & address properties)
be sure to enable polyfill: https://github.com/WebReflection/document-register-element
*/
(function() {
var GoogleMapProto = Object.create(HTMLElement.prototype);
Object.defineProperty(GoogleMapProto, "address", {writable: true});
Object.defineProperty(GoogleMapProto, "api-key", {writable: true});
GoogleMapProto.computeSrc = function(key, address) {
return 'https://www.google.com/maps/embed/v1/place?key='+encodeURIComponent(key)+"&q="+encodeURIComponent(address);
}
GoogleMapProto.updateSrc = function() {
this.setAttribute('src', this.computeSrc(this.getAttribute('api-key'), this.getAttribute('address')));
}
GoogleMapProto.createdCallback = function() {
this.updateSrc();
}
GoogleMapProto.attributeChangedCallback = function(attrName, oldValue, newValue) {
if (attrName === 'api-key' || attrName === 'address') {
this.updateSrc();
}
}
var GoogleMap = document.registerElement('x-googlemap', {
prototype: GoogleMapProto,
extends: 'iframe'
});
console.log("registered", GoogleMap)
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment