third_party/polymer/components/core-shared-lib/core-shared-lib.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9 <link rel="import" href="../polymer/polymer.html">
  10
  11 <!--
  12 Supports sharing a JSONP-based JavaScript library.
  13
  14     <core-shared-lib on-core-shared-lib-load="{{load}}" url="https://apis.google.com/js/plusone.js?onload=%%callback%%">
  15
  16 Multiple components can request a library using a `core-shared-lib` component and only one copy of that library will
  17 loaded from the network.
  18
  19 Currently, the library must support JSONP to work as a shared-lib.
  20
  21 Some libraries require a specific global function be defined. If this is the case, specify the `callbackName` property.
  22
  23 Where possible, you should use an HTML Import to load library dependencies. Rather than using this element,
  24 create an import (`<link rel="import" href="lib.html">`) that wraps loading the .js file:
  25
  26 lib.html:
  27
  28     <script src="lib.js"></script>
  29
  30 @group Polymer Core Elements
  31 @element core-shared-lib
  32 -->
  33 <polymer-element name="core-shared-lib" attributes="url notifyEvent callbackName">
  34 <script>
  35 (function() {
  36
  37   Polymer({
  38
  39     notifyEvent: 'core-shared-lib-load',
  40
  41     ready: function() {
  42       if (!this.url && this.defaultUrl) {
  43         this.url = this.defaultUrl;
  44       }
  45     },
  46
  47     urlChanged: function() {
  48       require(this.url, this, this.callbackName);
  49     },
  50
  51     provide: function() {
  52       this.async('notify');
  53     },
  54
  55     notify: function() {
  56       this.fire(this.notifyEvent, arguments);
  57     }
  58
  59   });
  60
  61   var apiMap = {};
  62
  63   function require(url, notifiee, callbackName) {
  64     // make hashable string form url
  65     var name = nameFromUrl(url);
  66     // lookup existing loader instance
  67     var loader = apiMap[name];
  68     // create a loader as needed
  69     if (!loader) {
  70       loader = apiMap[name] = new Loader(name, url, callbackName);
  71     }
  72     loader.requestNotify(notifiee);
  73   }
  74
  75   function nameFromUrl(url) {
  76     return url.replace(/[\:\/\%\?\&\.\=\-\,]/g, '_') + '_api';
  77   }
  78
  79   var Loader = function(name, url, callbackName) {
  80     this.instances = [];
  81     this.callbackName = callbackName;
  82     if (this.callbackName) {
  83       window[this.callbackName] = this.success.bind(this);
  84     } else {
  85       if (url.indexOf(this.callbackMacro) >= 0) {
  86         this.callbackName = name + '_loaded';
  87         window[this.callbackName] = this.success.bind(this);
  88         url = url.replace(this.callbackMacro, this.callbackName);
  89       } else {
  90         // TODO(sjmiles): we should probably fallback to listening to script.load
  91         throw 'core-shared-api: a %%callback%% parameter is required in the API url';
  92       }
  93     }
  94     //
  95     this.addScript(url);
  96   };
  97
  98   Loader.prototype = {
  99
 100     callbackMacro: '%%callback%%',
 101     loaded: false,
 102
 103     addScript: function(src) {
 104       var script = document.createElement('script');
 105       script.src = src;
 106       script.onerror = this.error.bind(this);
 107       var s = document.querySelector('script');
 108       s.parentNode.insertBefore(script, s);
 109       this.script = script;
 110     },
 111
 112     removeScript: function() {
 113       if (this.script.parentNode) {
 114         this.script.parentNode.removeChild(this.script);
 115       }
 116       this.script = null;
 117     },
 118
 119     error: function() {
 120       this.cleanup();
 121     },
 122
 123     success: function() {
 124       this.loaded = true;
 125       this.cleanup();
 126       this.result = Array.prototype.slice.call(arguments);
 127       this.instances.forEach(this.provide, this);
 128       this.instances = null;
 129     },
 130
 131     cleanup: function() {
 132       delete window[this.callbackName];
 133     },
 134
 135     provide: function(instance) {
 136       instance.notify(instance, this.result);
 137     },
 138
 139     requestNotify: function(instance) {
 140       if (this.loaded) {
 141         this.provide(instance);
 142       } else {
 143         this.instances.push(instance);
 144       }
 145     }
 146
 147   };
 148
 149 })();
 150 </script>
 151 </polymer-element>