GoogleWebComponents · emedvedev · Feb 13, 2018 · Feb 13, 2018
diff --git a/bower.json b/bower.json
diff --git a/demo/index.html b/demo/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
   <title>google-apis Demo</title>
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <link rel="import" href="../google-apis.html">
+  <script type="module" src="../google-apis.js"></script>
 </head>
 <body>
   <div id="messages"></div>
@@ -26,26 +26,27 @@
 
     </template>
   </dom-bind>
-  <script>
-    // polymer 1.x compatibility
-    t.loadedShortener = function(event) {
-      var request = event.target.api.url.get({
-        shortUrl: 'http://goo.gl/fbsS'
-      })
-      request.execute(function(resp) {
-        console.log(resp);
-      });
-    }
+  <script type="module">
+import '../google-apis.js';
+// polymer 1.x compatibility
+t.loadedShortener = function(event) {
+  var request = event.target.api.url.get({
+    shortUrl: 'http://goo.gl/fbsS'
+  })
+  request.execute(function(resp) {
+    console.log(resp);
+  });
+}
 
-    t.loaded = function(e) {
-      document.querySelector('#messages').innerHTML +=
-        e.target.localName + ' loaded' + '<br>';
-      console.log(e.target.localName + ' loaded', event.target.api);
-    }
+t.loaded = function(e) {
+  document.querySelector('#messages').innerHTML +=
+    e.target.localName + ' loaded' + '<br>';
+  console.log(e.target.localName + ' loaded', event.target.api);
+}
 
-    // Polymer 2.0 compatibility
-    bind.loadedShortener = t.loadedShortener;
-    bind.loaded = t.loaded;
-  </script>
+// Polymer 2.0 compatibility
+bind.loadedShortener = t.loadedShortener;
+bind.loaded = t.loaded;
+</script>
 </body>
 </html>
diff --git a/google-apis.html → google-apis.js b/google-apis.html → google-apis.js
@@ -1,16 +1,17 @@
-<!--
+import './google-client-loader.js';
+import './google-legacy-loader.js';
+import './google-maps-api.js';
+import './google-plusone-api.js';
+import './google-realtime-api.js';
+import './google-youtube-api.js';
+
+/*
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at https://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 https://polymer.github.io/PATENTS.txt
--->
+*/
+/* Load all Google APIs, for backwards compatibility */
 
-<!-- Load all Google APIs, for backwards compatibility -->
-<link rel="import" href="google-client-loader.html">
-<link rel="import" href="google-legacy-loader.html">
-<link rel="import" href="google-maps-api.html">
-<link rel="import" href="google-plusone-api.html">
-<link rel="import" href="google-realtime-api.html">
-<link rel="import" href="google-youtube-api.html">
diff --git a/google-client-loader.html b/google-client-loader.html
diff --git a/google-client-loader.js b/google-client-loader.js
@@ -0,0 +1,204 @@
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+import './google-js-api.js';
+
+// Stores whether the API client is done loading.
+let _clientLoaded = false;
+
+// Loaders and loading statuses for all APIs, indexed by API name.
+// This helps prevent multiple loading requests being fired at the same time
+// by multiple google-api-loader elements.
+const _statuses = {};
+const _loaders = {};
+
+Polymer({
+
+  is: 'google-client-loader',
+
+  /**
+   * Fired when the requested API is loaded. Override this name
+   * by setting `successEventName`.
+   * @event google-api-load
+   */
+
+  /**
+   * Fired if an error occurs while loading the requested API. Override this name
+   * by setting `errorEventName`.
+   * @event google-api-load-error
+   */
+
+  properties: {
+    /**
+     * Name of the API to load, e.g. 'urlshortener'.
+     *
+     * You can find the full list of APIs on the
+     * <a href="https://developers.google.com/apis-explorer"> Google APIs
+     * Explorer</a>.
+     */
+    name: String,
+
+    /**
+     * Version of the API to load, e.g. 'v1'.
+     */
+    version: String,
+
+    /**
+     * App Engine application ID for loading a Google Cloud Endpoints API.
+     */
+    appId: String,
+
+    /**
+     * Root URL where to load the API from, e.g. 'http://host/apis'.
+     * For App Engine dev server this would be something like:
+     * 'http://localhost:8080/_ah/api'.
+     * Overrides 'appId' if both are specified.
+     */
+    apiRoot: String,
+
+    /**
+     * Name of the event fired when API library is loaded.
+     */
+    successEventName: {
+      type: String,
+      value: 'google-api-load',
+    },
+
+    /**
+     * Name of the event fired when there is an error loading the library.
+     */
+    errorEventName: {
+      type: String,
+      value: 'google-api-load-error',
+    },
+  },
+
+  hostAttributes: {
+    hidden: true, // remove from rendering tree.
+  },
+
+  // Used to fix events potentially being fired multiple times by
+  // iron-jsonp-library.
+  _waiting: false,
+
+  /**
+   * Returns the loaded API.
+   */
+  get api() {
+    if (window.gapi && window.gapi.client &&
+        window.gapi.client[this.name]) {
+      return window.gapi.client[this.name];
+    }
+    return undefined;
+  },
+
+  /**
+   * Wrapper for `gapi.auth`.
+   */
+  get auth() {
+    return gapi.auth;
+  },
+
+  ready() {
+    this._loader = document.createElement('google-js-api');
+
+    if (!this.shadowRoot) { this.attachShadow({ mode: 'open' }); }
+    this.shadowRoot.appendChild(this._loader);
+
+    this.listen(this._loader, 'js-api-load', '_loadClient');
+  },
+
+  detached() {
+    this.unlisten(this._loader, 'js-api-load', '_loadClient');
+  },
+
+  _loadClient() {
+    gapi.load('client', this._doneLoadingClient.bind(this));
+  },
+
+  _handleLoadResponse(response) {
+    if (response && response.error) {
+      _statuses[this.name] = 'error';
+      this._fireError(response);
+    } else {
+      _statuses[this.name] = 'loaded';
+      this._fireSuccess();
+    }
+  },
+
+  _fireSuccess() {
+    this.fire(
+      this.successEventName,
+      { name: this.name, version: this.version },
+    );
+  },
+
+  _fireError(response) {
+    if (response && response.error) {
+      this.fire(this.errorEventName, {
+        name: this.name,
+        version: this.version,
+        error: response.error,
+      });
+    } else {
+      this.fire(this.errorEventName, {
+        name: this.name,
+        version: this.version,
+      });
+    }
+  },
+
+  _doneLoadingClient() {
+    _clientLoaded = true;
+    // Fix for API client load event being fired multiple times by
+    // iron-jsonp-library.
+    if (!this._waiting) {
+      this._loadApi();
+    }
+  },
+
+  _createSelfRemovingListener(eventName) {
+    var handler = function () {
+      _loaders[this.name].removeEventListener(eventName, handler);
+      this._loadApi();
+    }.bind(this);
+
+    return handler;
+  },
+
+  _loadApi() {
+    if (_clientLoaded && this.name && this.version) {
+      this._waiting = false;
+      // Is this API already loaded?
+      if (_statuses[this.name] == 'loaded') {
+        this._fireSuccess();
+      // Is a different google-api-loader already loading this API?
+      } else if (_statuses[this.name] == 'loading') {
+        this._waiting = true;
+        _loaders[this.name].addEventListener(
+          this.successEventName,
+          this._createSelfRemovingListener(this.successEventName),
+        );
+        _loaders[this.name].addEventListener(
+          this.errorEventName,
+          this._createSelfRemovingListener(this.errorEventName),
+        );
+      // Did we get an error when we tried to load this API before?
+      } else if (_statuses[this.name] == 'error') {
+        this._fireError(null);
+      // Otherwise, looks like we're loading a new API.
+      } else {
+        let root;
+        if (this.apiRoot) {
+          root = this.apiRoot;
+        } else if (this.appId) {
+          root = `https://${this.appId}.appspot.com/_ah/api`;
+        }
+        _statuses[this.name] = 'loading';
+        _loaders[this.name] = this;
+        gapi.client.load(
+          this.name, this.version,
+          this._handleLoadResponse.bind(this), root,
+        );
+      }
+    }
+  },
+});
diff --git a/google-js-api.html → google-js-api.js b/google-js-api.html → google-js-api.js
@@ -1,16 +1,13 @@
-<!--
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+/*
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at https://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 https://polymer.github.io/PATENTS.txt
--->
-
-<link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../iron-jsonp-library/iron-jsonp-library.html">
-
-<!--
+*/
+/*
 Dynamically loads Google JavaScript API `gapi`, firing the `js-api-load` event when ready.
 
 Any number of components can use `<google-js-api>` elements, and the library will only be loaded once.
@@ -24,40 +21,38 @@
         console.log('API loaded', gapi);
       });
     </script>
--->
-<script>
-  Polymer({
-
-    is: 'google-js-api',
-
-    behaviors: [
-      Polymer.IronJsonpLibraryBehavior
-    ],
-
-    properties: {
-
-      /** @private */
-      libraryUrl: {
-        type: String,
-        value: 'https://apis.google.com/js/api.js?onload=%%callback%%'
-      },
-
-      /**
-       * Fired when the API library is loaded and available.
-       * @event js-api-load
-       */
-      /**
-       * Name of event fired when library is loaded and available.
-       */
-      notifyEvent: {
-        type: String,
-        value: 'js-api-load'
-      },
+*/
+Polymer({
+
+  is: 'google-js-api',
+
+  behaviors: [
+    Polymer.IronJsonpLibraryBehavior,
+  ],
+
+  properties: {
+
+    /** @private */
+    libraryUrl: {
+      type: String,
+      value: 'https://apis.google.com/js/api.js?onload=%%callback%%',
+    },
+
+    /**
+     * Fired when the API library is loaded and available.
+     * @event js-api-load
+     */
+    /**
+     * Name of event fired when library is loaded and available.
+     */
+    notifyEvent: {
+      type: String,
+      value: 'js-api-load',
     },
+  },
 
-    get api() {
-      return gapi;
-    }
+  get api() {
+    return gapi;
+  },
 
-  });
-</script>
+});
diff --git a/google-legacy-loader.html b/google-legacy-loader.html
diff --git a/google-legacy-loader.js b/google-legacy-loader.js
@@ -0,0 +1,50 @@
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+/*
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at https://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 https://polymer.github.io/PATENTS.txt
+*/
+/*
+Dynamically loads the legacy Google JavaScript API Loader (https://developers.google.com/loader/).
+
+Fires `api-load` event when ready.
+*/
+Polymer({
+
+  is: 'google-legacy-loader',
+
+  behaviors: [
+    Polymer.IronJsonpLibraryBehavior,
+  ],
+
+  properties: {
+
+    /** @private */
+    libraryUrl: {
+      type: String,
+      value: 'https://www.google.com/jsapi?callback=%%callback%%',
+    },
+
+    /**
+     * Fired when the API library is loaded and available.
+     * @event js-api-load
+     */
+    /**
+     * Name of event fired when library is loaded and available.
+     */
+    notifyEvent: {
+      type: String,
+      value: 'api-load',
+    },
+  },
+
+  /**
+   * Wrapper for `google` API namespace.
+   */
+  get api() {
+    return google;
+  },
+});
diff --git a/google-maps-api.html b/google-maps-api.html
diff --git a/google-maps-api.js b/google-maps-api.js
@@ -0,0 +1,146 @@
+import './../iron-jsonp-library/iron-jsonp-library.js';
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+/*
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at https://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 https://polymer.github.io/PATENTS.txt
+*/
+/**
+Dynamically loads the Google Maps JavaScript API, firing the `api-load` event when ready.
+
+#### Example
+
+    <google-maps-api api-key="abc123" version="3.exp"></google-maps-api>
+    <script>
+      var mapsAPI = document.querySelector('google-maps-api');
+      mapsAPI.addEventListener('api-load', function(e) {
+        // this.api === google.maps
+      });
+    </script>
+
+Any number of components can use `<google-maps-api>` elements, and the library will only be loaded once.
+
+@summary Element wrapper around Google Maps API.
+*/
+Polymer({
+
+  is: 'google-maps-api',
+
+  behaviors: [
+    Polymer.IronJsonpLibraryBehavior,
+  ],
+
+  properties: {
+
+    /** @private */
+    mapsUrl: {
+      type: String,
+      value: 'https://maps.googleapis.com/maps/api/js?callback=%%callback%%',
+    },
+
+    /**
+     * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key.
+     */
+    apiKey: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * A Maps API for Business Client ID. To obtain a Maps API for Business Client ID, see developers.google.com/maps/documentation/business/.
+     * If set, a Client ID will take precedence over an API Key.
+     */
+    clientId: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * Version of the Maps API to use.
+     */
+    version: {
+      type: String,
+      value: '3.exp',
+    },
+
+    /**
+     * The localized language to load the Maps API with. For more information
+     * see https://developers.google.com/maps/documentation/javascript/basics#Language
+     *
+     * Note: the Maps API defaults to the preffered language setting of the browser.
+     * Use this parameter to override that behavior.
+     */
+    language: {
+      type: String,
+      value: '',
+    },
+    /**
+     * If true, sign-in is enabled.
+     * See https://developers.google.com/maps/documentation/javascript/signedin#enable_sign_in
+     */
+    signedIn: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Fired when the Maps API library is loaded and ready.
+     * @event api-load
+     */
+    /**
+     * Name of event fired when library is loaded and available.
+     */
+    notifyEvent: {
+      type: String,
+      value: 'api-load',
+    },
+
+    /** @private */
+    libraryUrl: {
+      type: String,
+      computed: '_computeUrl(mapsUrl, version, apiKey, clientId, language, signedIn)',
+    },
+  },
+
+  _computeUrl(mapsUrl, version, apiKey, clientId, language, signedIn) {
+    let url = `${mapsUrl}&v=${version}`;
+
+    // Always load all Maps API libraries.
+    url += '&libraries=drawing,geometry,places,visualization';
+
+    if (apiKey && !clientId) {
+      url += `&key=${apiKey}`;
+    }
+
+    if (clientId) {
+      url += `&client=${clientId}`;
+    }
+
+    // Log a warning if the user is not using an API Key or Client ID.
+    if (!apiKey && !clientId) {
+      const warning = 'No Google Maps API Key or Client ID specified. ' +
+          'See https://developers.google.com/maps/documentation/javascript/get-api-key ' +
+          'for instructions to get started with a key or client id.';
+      console.warn(warning);
+    }
+
+    if (language) {
+      url += `&language=${language}`;
+    }
+
+    if (signedIn) {
+      url += `&signed_in=${signedIn}`;
+    }
+    return url;
+  },
+
+  /**
+   * Provides the google.maps JS API namespace.
+   */
+  get api() {
+    return google.maps;
+  },
+});
diff --git a/google-plusone-api.html b/google-plusone-api.html
diff --git a/google-plusone-api.js b/google-plusone-api.js
@@ -0,0 +1,49 @@
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+/*
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at https://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 https://polymer.github.io/PATENTS.txt
+*/
+/*
+Dynamically loads the Google+ JavaScript API, firing the `api-load` event when ready.
+
+Any number of components can use `<google-plusone-api>` elements, and the library will only be loaded once.
+*/
+Polymer({
+
+  is: 'google-plusone-api',
+
+  behaviors: [
+    Polymer.IronJsonpLibraryBehavior,
+  ],
+
+  properties: {
+
+    /** @private */
+    libraryUrl: {
+      type: String,
+      value: 'https://apis.google.com/js/plusone.js?onload=%%callback%%',
+    },
+
+    /**
+     * Fired when the API library is loaded and available.
+     * @event js-api-load
+     */
+    /**
+     * Name of event fired when library is loaded and available.
+     */
+    notifyEvent: {
+      type: String,
+      value: 'api-load',
+    },
+
+  },
+
+  get api() {
+    return gapi;
+  },
+
+});
diff --git a/google-realtime-api.html b/google-realtime-api.html
diff --git a/google-realtime-api.js b/google-realtime-api.js
@@ -0,0 +1,52 @@
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+/*
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at https://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 https://polymer.github.io/PATENTS.txt
+*/
+/*
+Dynamically loads the Google Drive Realtime API, firing the `api-load` event when ready.
+
+Any number of components can use `<google-realtime-api>` elements, and the library will only be loaded once.
+*/
+Polymer({
+
+  is: 'google-realtime-api',
+
+  behaviors: [
+    Polymer.IronJsonpLibraryBehavior,
+  ],
+
+  properties: {
+
+    /** @private */
+    libraryUrl: {
+      type: String,
+      value: 'https://apis.google.com/js/drive-realtime.js?onload=%%callback%%',
+    },
+
+    /**
+     * Fired when the API library is loaded and available.
+     * @event api-load
+     */
+    /**
+     * Name of event fired when library is loaded and available.
+     */
+    notifyEvent: {
+      type: String,
+      value: 'api-load',
+    },
+
+  },
+
+  /**
+   * Returns `gapi.drive.realtime`
+   */
+  get api() {
+    return gapi.drive.realtime;
+  },
+
+});
diff --git a/google-youtube-api.html b/google-youtube-api.html
diff --git a/google-youtube-api.js b/google-youtube-api.js
@@ -0,0 +1,56 @@
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+/*
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at https://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at https://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at https://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 https://polymer.github.io/PATENTS.txt
+*/
+/*
+Dynamically loads the Google Youtube Iframe API, firing the `api-load` event when ready.
+
+Any number of components can use `<google-youtube-api>` elements, and the library will only be loaded once.
+
+https://developers.google.com/youtube/iframe_api_reference
+*/
+Polymer({
+
+  is: 'google-youtube-api',
+
+  behaviors: [
+    Polymer.IronJsonpLibraryBehavior,
+  ],
+
+  properties: {
+
+    /** @private */
+    libraryUrl: {
+      type: String,
+      value: 'https://www.youtube.com/iframe_api',
+    },
+
+    /**
+     * Fired when the API library is loaded and available.
+     * @event api-load
+     */
+    /**
+     * Name of event fired when library loads.
+     */
+    notifyEvent: {
+      type: String,
+      value: 'api-load',
+    },
+
+    callbackName: {
+      type: String,
+      value: 'onYouTubeIframeAPIReady',
+    },
+
+  },
+
+  get api() {
+    return YT;
+  },
+
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@polymer/google-apis",
+  "flat": true,
+  "version": "3.0.0",
+  "description": "Web components to load Google API libraries",
+  "contributors": [
+    "Scott Miles <sjmiles@google.com>",
+    "Eric Bidelman <ebidel@gmail.com>",
+    "Ed Medvedev <edward.medvedev@gmail.com>"
+  ],
+  "keywords": [
+    "web-component",
+    "web-components",
+    "polymer",
+    "google",
+    "apis"
+  ],
+  "main": "google-apis.html",
+  "license": "Apache-2.0",
+  "homepage": "https://elements.polymer-project.org/elements/google-apis?active=google-js-api",
+  "dependencies": {
+    "@polymer/polymer": "^3.0.0-pre.1",
+    "@polymer/iron-jsonp-library": "^3.0.0-pre.1"
+  },
+  "devDependencies": {}
+}