Skip to content
This repository was archived by the owner on Sep 10, 2022. It is now read-only.

Commit d137ce0

Browse files
author
Sérgio Gomes
committedMay 28, 2014
Initial version of google-url-shortener
·
v1.0.2v0.0.1
1 parent 2e4833c commit d137ce0

6 files changed

+249
-0
lines changed
 

‎.bowerrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"directory": "../"
3+
}
4+

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
google-url-shortener
2+
================
3+
4+
See the [component page](http://googlewebcomponents.github.io/google-url-shortener) for more information.

‎bower.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "google-url-shortener",
3+
"private": true,
4+
"dependencies": {
5+
"polymer": "Polymer/polymer#master",
6+
"google-apis": "PolymerLabs/google-apis#master"
7+
}
8+
}

‎demo.html

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
5+
<title>google-url-shortener Demo</title>
6+
7+
<script src="../platform/platform.js"></script>
8+
<link rel="import" href="../polymer/polymer.html">
9+
<link rel="import" href="google-url-shortener.html">
10+
11+
</head>
12+
<body>
13+
14+
<polymer-element name="google-url-shortener-demo">
15+
<template>
16+
<google-url-shortener id="shortener" longUrl="{{$.longUrl.value}}"
17+
on-google-url-shorten="{{updateShortUrl}}"
18+
on-google-url-shorten-error="{{handleError}}">
19+
</google-url-shortener>
20+
<form on-submit="{{shorten}}">
21+
<p>
22+
<input type="url" id="longUrl" placeholder="Input URL here:">
23+
<button type="button" on-click="{{shorten}}">Shorten</button>
24+
</p>
25+
</form>
26+
<template if="{{shortUrl}}">
27+
<p>
28+
<strong>Short URL</strong>:
29+
<a href="{{shortUrl}}" target="_blank">{{shortUrl}}</a>
30+
</p>
31+
</template>
32+
<template if="{{error}}">
33+
<p><strong>Error</strong>: {{error}}</p>
34+
</template>
35+
</template>
36+
37+
<script>
38+
Polymer('google-url-shortener-demo', {
39+
shortUrl: null,
40+
error: null,
41+
42+
shorten: function(event) {
43+
if (event) {
44+
event.preventDefault();
45+
}
46+
this.error = null;
47+
this.shortUrl = null;
48+
this.$.shortener.shorten();
49+
},
50+
51+
updateShortUrl: function(event) {
52+
if (event) {
53+
this.shortUrl = event.detail.shortUrl;
54+
}
55+
},
56+
57+
handleError: function(event) {
58+
if (event) {
59+
this.error = JSON.stringify(event.detail.error);
60+
} else {
61+
this.error = "Unknown error occurred";
62+
}
63+
},
64+
65+
ready: function() {
66+
this.$.longUrl.focus();
67+
}
68+
});
69+
</script>
70+
</polymer-element>
71+
72+
<p>A `google-url-shortener` allows you to build this:</p>
73+
74+
<google-url-shortener-demo></google-url-shortener-demo>
75+
76+
</body>
77+
</html>

‎google-url-shortener.html

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<link rel="import" href="../polymer/polymer.html">
2+
<link rel="import" href="../google-apis/google-client-api.html">
3+
4+
<!--
5+
`google-url-shortener` is a web component that shortens URLs with the Google
6+
URL Shortener API.
7+
8+
##### Example
9+
10+
<google-url-shortener id="shortener"></google-url-shortener>
11+
<button id="go">Shorten</button>
12+
13+
<script>
14+
var shortener = document.getElementById('shortener');
15+
16+
document.getElementById('shortener').addEventListener(
17+
'google-url-shorten',
18+
function(event) {
19+
console.log(event.detail.shortUrl);
20+
}
21+
);
22+
23+
document.getElementById('go').addEventListener('click', function() {
24+
// Shorten the current page URL.
25+
shortener.longUrl = document.URL;
26+
shortener.shorten();
27+
});
28+
</script>
29+
30+
@element google-url-shortener
31+
@status alpha
32+
@homepage http://googlewebcomponents.github.io/google-url-shortener
33+
-->
34+
<polymer-element name="google-url-shortener" attributes="longUrl auto">
35+
36+
<template>
37+
<google-api-loader id="urlshortener" name="urlshortener" version="v1"
38+
on-google-api-load="{{readyForAction}}"
39+
on-google-api-load-error="{{apiLoadError}}">
40+
</google-api-loader>
41+
</template>
42+
43+
<script>
44+
45+
(function() {
46+
'use strict';
47+
48+
// Stores whether the URL Shortener API is done loading.
49+
var apiLoaded_ = false;
50+
51+
Polymer({
52+
/**
53+
* Fired when the URL gets successfully shortened.
54+
*
55+
* @event google-url-shorten
56+
*/
57+
58+
/**
59+
* Fired if an attempt to shorten a URL results in an error.
60+
*
61+
* @event google-url-shorten-error
62+
*/
63+
64+
/**
65+
* The URL to be shortened.
66+
*
67+
* @attribute longUrl
68+
* @type string
69+
*/
70+
longUrl: '',
71+
72+
/**
73+
* If true, automatically performs the shortening request when `longUrl`
74+
* changes.
75+
*
76+
* @attribute auto
77+
* @type boolean
78+
* @default false
79+
*/
80+
auto: false,
81+
82+
readyForAction: function() {
83+
apiLoaded_ = true;
84+
},
85+
86+
apiLoadError: function(event) {
87+
this.fire('api-error', {
88+
'error': {
89+
'message': 'Error loading URL Shortener API',
90+
'innerError': event.detail }
91+
});
92+
},
93+
94+
longUrlChanged: function() {
95+
if (this.auto) {
96+
shorten();
97+
}
98+
},
99+
100+
/**
101+
* Shortens the URL in `longUrl`.
102+
*
103+
* @method shorten
104+
* @return {Object} Returns undefined.
105+
*/
106+
shorten: function() {
107+
if (apiLoaded_) {
108+
if (this.longUrl) {
109+
var request = this.$.urlshortener.api.url.insert(
110+
{ 'resource': { 'longUrl': this.longUrl }});
111+
112+
request.execute(function(response) {
113+
if (response && response.id) {
114+
this.fire('google-url-shorten', { shortUrl: response.id });
115+
} else if (response && response.error) {
116+
this.fire('google-url-shorten-error',
117+
{ 'error': response.error });
118+
} else {
119+
this.fire('google-url-shorten-error',
120+
{ 'error': 'Unknown error' });
121+
}
122+
}.bind(this));
123+
}
124+
}
125+
return null;
126+
}
127+
128+
});
129+
})();
130+
131+
</script>
132+
133+
</polymer-element>

‎index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<!--
3+
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
5+
The complete set of authors may be found at http://polymer.github.io/AUTHORS
6+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
7+
Code distributed by Google as part of the polymer project is also
8+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
9+
-->
10+
<html>
11+
<head>
12+
13+
<script src="../platform/platform.js"></script>
14+
<link rel="import" href="../polymer/polymer.html">
15+
<link rel="import" href="../core-component-page/core-component-page.html">
16+
17+
</head>
18+
<body unresolved>
19+
20+
<core-component-page></core-component-page>
21+
22+
</body>
23+
</html>

0 commit comments

Comments
 (0)