Merge pull request #39 from Zoramite/api-js

Separating out the loading of the core api library and the client

Author: ebidel

demo.html

@@ -25,5 +25,19 @@
       console.log(e.target.localName + ' loaded');
     });
   </script>
+
+  <google-api-loader id="shortener" name="urlshortener"
+                       version="v1"></google-api-loader>
+  <script>
+    var shortener = document.getElementById('shortener');
+    shortener.addEventListener('google-api-load', function(event) {
+      var request = shortener.api.url.get({
+        shortUrl: 'http://goo.gl/fbsS'
+      })
+      request.execute(function(resp) {
+        console.log(resp);
+      });
+    });
+  </script>
 </body>
 </html>

google-client-api.html

@@ -8,7 +8,7 @@
 -->
 
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../core-shared-lib/core-shared-lib.html">
+<link rel="import" href="google-js-api.html">
 
 <!--
 Dynamically loads the Google Client JavaScript API, firing the `api-load` event when ready.
@@ -27,14 +27,23 @@
     </script>
 
 @element google-client-api
-@extends core-shared-lib
 @homepage https://googlewebcomponents.github.io/google-apis
 -->
-<polymer-element name="google-client-api" extends="core-shared-lib">
+<polymer-element name="google-client-api">
+  <template>
+    <google-js-api on-js-api-load="{{loadClient}}"></google-js-api>
+  </template>
 <script>
   Polymer({
-    defaultUrl: 'https://apis.google.com/js/client.js?onload=%%callback%%',
-    
+    /**
+     * Loads the client library when the api js has loaded.
+     */
+    loadClient: function() {
+      gapi.load("client", function() {
+        this.fire(this.notifyEvent, arguments);
+      }.bind(this));
+    },
+
     /**
      * Fired when the API library is loaded and available.
      * @event api-load
@@ -224,11 +233,10 @@
       },
 
       createSelfRemovingListener: function(eventName) {
-        var self = this;
         var handler = function () {
-          loaders_[self.name].removeEventListener(eventName, handler);
-          self.loadApi();
-        };
+          loaders_[this.name].removeEventListener(eventName, handler);
+          this.loadApi();
+        }.bind(this);
 
         return handler;
       },

google-js-api.html

@@ -0,0 +1,44 @@
+<!--
+Copyright (c) 2015 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">
+<link rel="import" href="../core-shared-lib/core-shared-lib.html">
+
+<!--
+Dynamically loads the Google JavaScript API, firing the `api-load` event when ready.
+
+Any number of components can use `<google-js-api>` elements, and the library will only be loaded once.
+
+##### Example
+
+    <google-js-api></google-js-api>
+    <script>
+      var api = document.querySelector('google-js-api');
+      api.addEventListener('js-api-load', function(e) {
+        console.log('API loaded');
+      });
+    </script>
+
+@element google-js-api
+@extends core-shared-lib
+@homepage https://googlewebcomponents.github.io/google-apis
+-->
+<polymer-element name="google-js-api" extends="core-shared-lib">
+<script>
+  Polymer({
+    defaultUrl: 'https://apis.google.com/js/api.js?onload=%%callback%%',
+    
+    /**
+     * Fired when the API library is loaded and available.
+     * @event js-api-load
+     */
+    notifyEvent: 'js-api-load'
+  });
+</script>
+</polymer-element>