1<!doctype html> 2<!-- 3@license 4Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11<html> 12 <head> 13 <meta charset="utf-8"> 14 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> 15 <title>iron-jsonp-library Demo</title> 16 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 17 <link rel="import" href="../../paper-styles/color.html"> 18 <link rel="import" href="../../paper-styles/demo-pages.html"> 19 <link rel="import" href="../../paper-spinner/paper-spinner.html"> 20 <link rel="import" href="../iron-jsonp-library.html"> 21 <style is="custom-style"> 22 23 .loading { 24 color: var(--google-grey-500); 25 } 26 27 .success { 28 color: var(--paper-green-800); 29 } 30 31 .failure { 32 color: var(--paper-red-800); 33 } 34 35 paper-spinner { 36 --paper-spinner-layer-1-color: var(--google-grey-500); 37 --paper-spinner-layer-2-color: var(--google-grey-500); 38 --paper-spinner-layer-3-color: var(--google-grey-500); 39 --paper-spinner-layer-4-color: var(--google-grey-500); 40 } 41 </style> 42 </head> 43 <body> 44 45 <div class="vertical-section vertical-section-container centered"> 46 <h1><iron-jsonp-library></h1> 47 <dom-bind> 48 <template is="dom-bind"> 49 <h3>Good loader</h3> 50 <iron-jsonp-library 51 library-url="https://apis.google.com/js/plusone.js?onload=%%callback%%" 52 notify-event="api-load" 53 library-loaded="{{loaded}}" 54 library-error-message="{{errorMessage}}"></iron-jsonp-library> 55 <template is="dom-if" if="{{loaded}}"> 56 <p class="success">The <code>Google+ API</code> has been loaded</p> 57 </template> 58 <template is="dom-if" if="{{!loaded}}"> 59 <template is="dom-if" if="{{errorMessage}}"> 60 <p class="failure">{{errorMessage}}</p> 61 </template> 62 <template is="dom-if" if="{{!errorMessage}}"> 63 <p class="loading">Loading...</p> 64 </template> 65 </template> 66 </template> 67 </dom-bind> 68 69 <hr> 70 <dom-bind> 71 <template is="dom-bind"> 72 <h3>Bad loader</h3> 73 <iron-jsonp-library 74 library-url="https://badapis.google.com/js/plusone.js?onload=%%callback%%" 75 notify-event="api-load" 76 library-loaded="{{loaded}}" 77 library-error-message="{{errorMessage}}"></iron-jsonp-library> 78 <template is="dom-if" if="{{loaded}}"> 79 <p><code>badapis</code> has been loaded</p> 80 </template> 81 <template is="dom-if" if="{{!loaded}}"> 82 <template is="dom-if" if="{{errorMessage}}"> 83 <p class="failure">{{errorMessage}}</p> 84 </template> 85 <template is="dom-if" if="{{!errorMessage}}"> 86 <p class="loading">Loading...</p> 87 </template> 88 </template> 89 </template> 90 </dom-bind> 91 92 <hr> 93 <dom-bind> 94 <template is="dom-bind" id="delayedLoader"> 95 <h3>Delayed libraryUrl loader</h3> 96 <iron-jsonp-library 97 library-url="{{libraryUrl}}" 98 library-loaded="{{loaded}}" 99 library-error-message="{{errorMessage}}"> 100 </iron-jsonp-library> 101 <template is="dom-if" if="{{loaded}}"> 102 <p><code>{{libraryUrl}}</code> has been loaded</p> 103 </template> 104 <template is="dom-if" if="{{!loaded}}"> 105 <template is="dom-if" if="{{errorMessage}}"> 106 <p class="failure">{{errorMessage}}</p> 107 </template> 108 <template is="dom-if" if="{{!errorMessage}}"> 109 <p class="loading">Loading...<code>{{libraryUrl}}</code></p> 110 </template> 111 </template> 112 </template> 113 </dom-bind> 114 115 </div> 116 117 <script> 118 // kick off delayed loader by setting libraryUrl 119 window.setTimeout(function() { 120 var t = document.querySelector('#delayedLoader'); 121 122 if (Polymer.Element) { 123 // value is set on the dom-bind in 2.x 124 t.parentNode.libraryUrl = 'https://apis.google.com/js/drive-realtime.js?onload=%%callback%%'; 125 } else { 126 // value is set on template in Polymer 1.x 127 t.libraryUrl = 'https://apis.google.com/js/drive-realtime.js?onload=%%callback%%'; 128 } 129 }, 130 1000); 131 </script> 132 </body> 133</html> 134