Google Client Library Polymer Element alternative

google-client-lib.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="google-client-lib">
  <template>
  </template>
  <script>
  (function() {
    // to reference 'this' during callback
    var handler;

    Polymer('google-client-lib', {

      // where the api will go when its ready
      // allows for referencing, i.e. this.$.gcl.auth.authorize
      // assuming this element has ID of gcl when used
      api: undefined,
      client: undefined,
      auth: undefined,

      // using attached instead of ready to have DOM access
      attached: function() {
        // set handler for reference
        handler = this;

        // if gapi already set then who cares, continue on
        if( window.gapi !== undefined ) {
          this.googleClientLoad();
        } else {
          // register the callback
          window.googleClientLoad = this.googleClientLoad;

          // make and include the element, maybe async?
          var url = 'https://apis.google.com/js/client.js?onload=googleClientLoad';
          var ele = document.createElement( 'script' );
          ele.setAttribute( 'src', url );
          this.appendChild( ele );
        }
      },

      // callback for client lib loaded
      googleClientLoad: function() {
        // grab the refs
        handler.api = window.gapi;
        handler.client = handler.api.client;
        handler.auth = handler.api.auth;

        // fire event to tell parent element that we're good to go
        handler.fire('api-load', {
          api: handler.api,
          client: handler.client,
          auth: handler.auth
        });
      }
    });
  })();
  </script>
</polymer-element>