1<!doctype html>
2<!-- Copyright (c) 2015 Google Inc. All rights reserved. -->
3<html>
4<head>
5  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
6  <title>google-apis Demo</title>
7  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
8  <link rel="import" href="../google-apis.html">
9</head>
10<body>
11  <div id="messages"></div>
12
13  <dom-bind id="bind">
14    <template id="t" is="dom-bind">
15
16      <google-client-loader id="shortener"
17        name="urlshortener"
18        version="v1"
19        on-google-api-load="loadedShortener"></google-client-loader>
20      <google-js-api on-js-api-load="loaded"></google-js-api>
21      <google-plusone-api on-api-load="loaded"></google-plusone-api>
22      <google-realtime-api on-api-load="loaded"></google-realtime-api>
23      <google-maps-api on-api-load="loaded"></google-maps-api>
24      <google-youtube-api on-api-load="loaded"></google-youtube-api>
25      <google-legacy-loader on-api-load="loaded"></google-legacy-loader>
26
27    </template>
28  </dom-bind>
29  <script>
30    // polymer 1.x compatibility
31    t.loadedShortener = function(event) {
32      var request = event.target.api.url.get({
33        shortUrl: 'http://goo.gl/fbsS'
34      })
35      request.execute(function(resp) {
36        console.log(resp);
37      });
38    }
39
40    t.loaded = function(e) {
41      document.querySelector('#messages').innerHTML +=
42        e.target.localName + ' loaded' + '<br>';
43      console.log(e.target.localName + ' loaded', event.target.api);
44    }
45
46    // Polymer 2.0 compatibility
47    bind.loadedShortener = t.loadedShortener;
48    bind.loaded = t.loaded;
49  </script>
50</body>
51</html>
52