five-bells-visualization
Version:
Tool to visualize Five Bells payments
152 lines (120 loc) • 4.27 kB
HTML
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<!--
Supports sharing a JSONP-based JavaScript library.
<core-shared-lib on-core-shared-lib-load="{{load}}" url="https://apis.google.com/js/plusone.js?onload=%%callback%%">
Multiple components can request a library using a `core-shared-lib` component and only one copy of that library will
loaded from the network.
Currently, the library must support JSONP to work as a shared-lib.
Some libraries require a specific global function be defined. If this is the case, specify the `callbackName` property.
Where possible, you should use an HTML Import to load library dependencies. Rather than using this element,
create an import (`<link rel="import" href="lib.html">`) that wraps loading the .js file:
lib.html:
<script src="lib.js"></script>
Polymer Core Elements
core-shared-lib
-->
<polymer-element name="core-shared-lib" attributes="url notifyEvent callbackName">
<script>
(function() {
Polymer({
notifyEvent: 'core-shared-lib-load',
ready: function() {
if (!this.url && this.defaultUrl) {
this.url = this.defaultUrl;
}
},
urlChanged: function() {
require(this.url, this, this.callbackName);
},
provide: function() {
this.async('notify');
},
notify: function() {
this.fire(this.notifyEvent, arguments);
}
});
var apiMap = {};
function require(url, notifiee, callbackName) {
// make hashable string form url
var name = nameFromUrl(url);
// lookup existing loader instance
var loader = apiMap[name];
// create a loader as needed
if (!loader) {
loader = apiMap[name] = new Loader(name, url, callbackName);
}
loader.requestNotify(notifiee);
}
function nameFromUrl(url) {
return url.replace(/[\:\/\%\?\&\.\=\-\,]/g, '_') + '_api';
}
var Loader = function(name, url, callbackName) {
this.instances = [];
this.callbackName = callbackName;
if (this.callbackName) {
window[this.callbackName] = this.success.bind(this);
} else {
if (url.indexOf(this.callbackMacro) >= 0) {
this.callbackName = name + '_loaded';
window[this.callbackName] = this.success.bind(this);
url = url.replace(this.callbackMacro, this.callbackName);
} else {
// TODO(sjmiles): we should probably fallback to listening to script.load
throw 'core-shared-api: a %%callback%% parameter is required in the API url';
}
}
//
this.addScript(url);
};
Loader.prototype = {
callbackMacro: '%%callback%%',
loaded: false,
addScript: function(src) {
var script = document.createElement('script');
script.src = src;
script.onerror = this.error.bind(this);
var s = document.querySelector('script');
s.parentNode.insertBefore(script, s);
this.script = script;
},
removeScript: function() {
if (this.script.parentNode) {
this.script.parentNode.removeChild(this.script);
}
this.script = null;
},
error: function() {
this.cleanup();
},
success: function() {
this.loaded = true;
this.cleanup();
this.result = Array.prototype.slice.call(arguments);
this.instances.forEach(this.provide, this);
this.instances = null;
},
cleanup: function() {
delete window[this.callbackName];
},
provide: function(instance) {
instance.notify(instance, this.result);
},
requestNotify: function(instance) {
if (this.loaded) {
this.provide(instance);
} else {
this.instances.push(instance);
}
}
};
})();
</script>
</polymer-element>