| OLD | NEW |
| (Empty) | |
| 1 <link rel="import" href="../polymer/polymer.html"> |
| 2 <link rel="import" href="../google-apis/google-client-loader.html"> |
| 3 |
| 4 <!-- |
| 5 `google-url-shortener` is a web component that shortens URLs with the |
| 6 <a href="https://developers.google.com/url-shortener/">Google URL Shortener API |
| 7 </a>. |
| 8 |
| 9 ##### Example |
| 10 |
| 11 <google-url-shortener id="shortener"></google-url-shortener> |
| 12 |
| 13 <script> |
| 14 var shortener = document.getElementById('shortener'); |
| 15 |
| 16 shortener.addEventListener('google-url-shorten', function(event) { |
| 17 console.log(event.detail.shortUrl); |
| 18 }); |
| 19 |
| 20 // Shorten the current page URL. |
| 21 shortener.longUrl = document.URL; |
| 22 shortener.shorten(); |
| 23 </script> |
| 24 |
| 25 ##### Example using `auto` and binding. |
| 26 |
| 27 <google-url-shortener id="shortener" longUrl="{{longUrl}}" auto> |
| 28 </google-url-shortener> |
| 29 |
| 30 <script> |
| 31 var shortener = document.getElementById('shortener'); |
| 32 |
| 33 shortener.addEventListener('google-url-shorten', function(event) { |
| 34 // This will be called automatically every time `longUrl` changes. |
| 35 console.log(event.detail.shortUrl); |
| 36 }); |
| 37 </script> |
| 38 |
| 39 @demo |
| 40 --> |
| 41 <dom-module id="google-url-shortener"> |
| 42 <template> |
| 43 <google-client-loader id="urlshortener" name="urlshortener" version="v1" |
| 44 on-google-api-load="_readyForAction" |
| 45 on-google-api-load-error="_apiLoadError"> |
| 46 </google-api-loader> |
| 47 </template> |
| 48 </dom-module> |
| 49 |
| 50 <script> |
| 51 |
| 52 (function() { |
| 53 'use strict'; |
| 54 |
| 55 // Stores whether the URL Shortener API is done loading. |
| 56 var apiLoaded_ = false; |
| 57 |
| 58 Polymer({ |
| 59 |
| 60 is: 'google-url-shortener', |
| 61 |
| 62 /** |
| 63 * Fired when the component is ready for shortening. |
| 64 * |
| 65 * @event google-url-shortener-ready |
| 66 */ |
| 67 |
| 68 /** |
| 69 * Fired when the URL gets successfully shortened. |
| 70 * |
| 71 * @event google-url-shorten |
| 72 */ |
| 73 |
| 74 /** |
| 75 * Fired if an attempt to shorten a URL results in an error. |
| 76 * |
| 77 * @event google-url-shorten-error |
| 78 */ |
| 79 |
| 80 properties: { |
| 81 /** |
| 82 * The URL to be shortened. |
| 83 */ |
| 84 longUrl: { |
| 85 type: String, |
| 86 value: '', |
| 87 observer: '_longUrlChanged' |
| 88 }, |
| 89 |
| 90 /** |
| 91 * Shortened URL |
| 92 */ |
| 93 shortUrl: { |
| 94 type: String, |
| 95 value: '', |
| 96 notify: true |
| 97 }, |
| 98 |
| 99 /** |
| 100 * Error when url was shortened |
| 101 */ |
| 102 error: { |
| 103 type: String, |
| 104 value: '', |
| 105 notify: true |
| 106 }, |
| 107 /** |
| 108 * If true, automatically performs the shortening request when `longUrl` |
| 109 * changes. |
| 110 */ |
| 111 auto: { |
| 112 type: Boolean, |
| 113 value: false |
| 114 } |
| 115 }, |
| 116 |
| 117 _readyForAction: function() { |
| 118 apiLoaded_ = true; |
| 119 this.fire('google-url-shortener-ready'); |
| 120 }, |
| 121 |
| 122 _apiLoadError: function(event) { |
| 123 this.fire('api-error', { |
| 124 'error': { |
| 125 'message': 'Error loading URL Shortener API', |
| 126 'innerError': event.detail |
| 127 } |
| 128 }); |
| 129 }, |
| 130 |
| 131 _longUrlChanged: function() { |
| 132 if (this.auto) { |
| 133 this.shorten(); |
| 134 } |
| 135 }, |
| 136 |
| 137 /** |
| 138 * Shortens the URL in `longUrl`. Use if `auto` is not set. |
| 139 */ |
| 140 shorten: function() { |
| 141 if (apiLoaded_) { |
| 142 if (this.longUrl) { |
| 143 var request = this.$.urlshortener.api.url.insert( |
| 144 {resource: {longUrl: this.longUrl}}); |
| 145 |
| 146 request.execute(function(response) { |
| 147 if (response && response.id) { |
| 148 this.shortUrl = response.id; |
| 149 this.error = ''; |
| 150 this.fire('google-url-shorten', {shortUrl: response.id}); |
| 151 } else { |
| 152 this.error = response && response.error ? response.error.message
: 'Unknown error'; |
| 153 this.fire('google-url-shorten-error', {error: this.error}); |
| 154 } |
| 155 }.bind(this)); |
| 156 } |
| 157 } |
| 158 } |
| 159 |
| 160 }); |
| 161 })(); |
| 162 |
| 163 </script> |
| OLD | NEW |