| OLD | NEW |
| (Empty) | |
| 1 <!doctype html> |
| 2 <!-- Copyright (c) 2014 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-sheets private data demo</title> |
| 7 <script src="../webcomponentsjs/webcomponents.min.js"></script> |
| 8 <link rel="import" href="google-sheets.html"> |
| 9 <link rel="import" href="../google-map/google-map.html"> |
| 10 <link rel="import" href="../google-signin/google-signin.html"> |
| 11 <style> |
| 12 * { |
| 13 box-sizing: border-box; |
| 14 } |
| 15 body { |
| 16 margin: 2em; |
| 17 font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial; |
| 18 font-weight: 300; |
| 19 background-color: #f1f1f3; |
| 20 } |
| 21 a { |
| 22 text-decoration: none; |
| 23 color: blue; |
| 24 } |
| 25 ul { |
| 26 padding-left: 0; |
| 27 } |
| 28 ul, li { |
| 29 list-style: none; |
| 30 font-size: 14px; |
| 31 } |
| 32 section { |
| 33 border-radius: 3px; |
| 34 box-shadow: 1px 1px 3px #ccc; |
| 35 padding: 1em 2em; |
| 36 background-color: white; |
| 37 width: 500px; |
| 38 min-height: 500px; |
| 39 } |
| 40 main { |
| 41 justify-content: space-around; |
| 42 margin-top: 2em; |
| 43 } |
| 44 </style> |
| 45 </head> |
| 46 <body unresolved> |
| 47 |
| 48 <google-signin |
| 49 client-id="1054047045356-j8pgqgls9vdef3rl09hapoicumbte0bo.apps.googleuserconte
nt.com" |
| 50 scopes="https://spreadsheets.google.com/feeds"> |
| 51 </google-signin> |
| 52 |
| 53 <p>A <code><google-sheets></code> element returning data from a <b>private</b
> Google Spreadsheet:</p> |
| 54 |
| 55 <!-- Example: private spreadsheet --> |
| 56 <google-sheets id="sheet" tabid="1" |
| 57 client-id="750497606405-1hq66meqmr4dp09dn54j9ggv85vbv0gp.apps.googleuserc
ontent.com" |
| 58 key="1QMGizivw3UJ3-R9BFK7sfrXE0RL87dygk2C0RcuKoDY"></google-sheets> |
| 59 |
| 60 <main layout horizontal> |
| 61 |
| 62 <section> |
| 63 |
| 64 <heading> |
| 65 <h3>List of spreadsheets</h3> |
| 66 </heading> |
| 67 |
| 68 <template id="spreadsheets" is="auto-binding"> |
| 69 <ul> |
| 70 <template repeat="{{spreadsheets}}"> |
| 71 <li>{{title.$t}}</li> |
| 72 </template> |
| 73 </ul> |
| 74 </template> |
| 75 |
| 76 </section> |
| 77 |
| 78 <section> |
| 79 |
| 80 <template id="rows" bind> |
| 81 <heading> |
| 82 <h3>Spreadsheet rows: |
| 83 <a href="{{openInGoogleDocsURL}}" target="_blank" title="Open in Google
Docs →"> |
| 84 "{{tab.title}}" tab |
| 85 </a> |
| 86 </h3> |
| 87 <h5>updated: {{tab.updated}}, by: <template repeat="{{rows.authors}}">{{na
me}} </template></h5> |
| 88 </heading> |
| 89 <ul> |
| 90 <template repeat="{{rows}}"> |
| 91 <li>Name: {{gsx$name.$t}} ( lat: {{gsx$lat.$t}}, lng: {{gsx$lng.$t}} )</
li> |
| 92 </template> |
| 93 </ul> |
| 94 </template> |
| 95 |
| 96 </section> |
| 97 |
| 98 </main> |
| 99 |
| 100 <script> |
| 101 var sheet = document.querySelector('#sheet'); |
| 102 |
| 103 sheet.addEventListener('google-sheet-data', function(e) { |
| 104 switch (e.detail.type) { |
| 105 case 'spreadsheets': |
| 106 document.querySelector('#spreadsheets').spreadsheets = this.spreadsheets; |
| 107 break; |
| 108 case 'rows': |
| 109 document.querySelector('#rows').model = this; |
| 110 break; |
| 111 default: |
| 112 break; |
| 113 } |
| 114 }); |
| 115 |
| 116 sheet.addEventListener('core-error', function(e) { |
| 117 alert(e.detail.response); |
| 118 }); |
| 119 </script> |
| 120 </body> |
| 121 </html> |
| OLD | NEW |