google-analytics-loader.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../google-signin/google-signin-aware.html">
<link rel="import" href="../google-apis/google-client-loader.html">
<link rel="import" href="../promise-polyfill/promise-polyfill-lite.html">

<!--
google-analytics-loader is used internally by elements that need to know api state, and user state.

Loads gapi.client.analytics, and watches user signed-in state.

@element google-analytics-loader
@demo
@homepage https://googlewebcomponents.github.io/google-analytics
-->

<dom-module id="google-analytics-loader">

  <template>
    <google-client-loader id="api"
      name="analytics"
      version="v3"
      on-google-api-load="handleApiLoad"
      on-google-api-load-error="handleApiFailedToLoad"></google-client-loader>
    <google-signin-aware
      scopes="https://www.googleapis.com/auth/analytics.readonly"
      on-google-signin-aware-success="handleAuthSuccess"
      on-google-signin-aware-signed-out="handleAuthSignout"></google-signin-aware>
  </template>

</dom-module>

<script>

  (function() {

    'use strict';

    Polymer({

      is: 'google-analytics-loader',

      properties: {
        /**
         * True when user is authorized, and api is loaded
         * @attribute allReady
         * @type {Boolean}
         */
        allReady: {
          type: Boolean,
          computed: 'computeAllReady(apiReady, authorized)',
          notify: true
        },
        /**
         * True when api is loaded
         * @attribute apiReady
         * @type {Boolean}
         */
        apiReady: {
          type: Boolean,
          value: false,
          notify: true,
          readOnly: true
        },
        /**
         * True when user is authorized
         * @attribute authorized
         * @type {Boolean}
         */
        authorized: {
          type: Boolean,
          value: false,
          notify: true,
          readOnly: true
        }
      },

      computeAllReady: function(apiReady, authorized) {
        return apiReady && authorized;
      },

      handleApiLoad: function() {
        this._setApiReady(true);
      },

      handleApiFailedToLoad: function(ev, detail) {
        this._setApiReady(false);
        console.error("Api failed to load: ", this.$.api.name, this.$.api.version);
      },

      handleAuthSuccess: function() {
        this._setAuthorized(true);
      },

      handleAuthSignout: function() {
        this._setAuthorized(false);
      }
    });

  }());

</script>