polymer_1.0.4/bower_components/google-signin/demo/index.html - Issue 1205703007: Add polymer 1.0 to npm_modules

Side by Side Diff: polymer_1.0.4/bower_components/google-signin/demo/index.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: Renamed folder to 1.0.4 Created 5 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

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

	7 <title>google-signin Demo</title>

	8

	9 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

	10 <link rel="import" href="../google-signin.html">

	11 <link rel="import" href="../google-signin-aware.html">

	12

	13 <!-- Demo only styles -->

	14 <style>

	15 body {

	16 font-family: 'RobotoDraft', 'Roboto', sans-serif;

	17 line-height:1.2;

	18 vertical-align:middle;

	19 background: rgba(204, 204, 204, 0.31);

	20 }

	21

	22

	23 .map {

	24 background: whitesmoke;

	25 margin: .5rem -1.5rem 0 -1.5rem;

	26 padding: 0.5rem;

	27 }

	28

	29 h1 {

	30 font-size: 2rem;

	31 font-weight:200;

	32 clear: both;

	33 }

	34

	35 h1 strong {

	36 font-weight:300;

	37 color:#539D00;

	38 }

	39

	40 h2 {

	41 font-size:.9rem;

	42 line-height:2.5;

	43 color:gray;

	44 font-weight:400;

	45 clear: both;

	46 }

	47

	48 .showcase {

	49 display: inline-block;

	50 margin-right: 2rem;

	51 float: left;

	52 }

	53 </style>

	54

	55 </head>

	56

	57 <body>

	58 <p>A <code><google-signin></code> element looks like this button:</p>

	59

	60 <p><google-signin brand="google" client-id="1054047045356-j8pgqgls9vdef3rl09ha poicumbte0bo.apps.googleusercontent.com"></google-signin>

	61 or like this if plus scopes are present

	62 <google-signin brand="google-plus"></google-signin>

	63 </p>

	64 <p>Signin button can vary its appearance:</p>

	65 <p>Width:

	66 <google-signin brand="google" width="wide"></google-signin>

	67 <google-signin brand="google" width="iconOnly"></google-signin>

	68 Height:

	69 <google-signin brand="google" height="tall"></google-signin>

	70 <google-signin brand="google" height="standard"></google-signin>

	71 <google-signin brand="google" height="short"></google-signin>

	72 </p>

	73 <p>

	74 Theme:

	75 <google-signin brand="google" theme="dark"></google-signin>

	76 <google-signin brand="google" theme="light"></google-signin>

	77 <google-signin brand="google-plus" theme="light"></google-signin>

	78 <google-signin brand="google-plus" theme="light" raised></google-signin>

	79 </p>

	80 <!-- Demo the ability to use the google-signin-aware element. -->

	81 <p><code><google-signin-aware></code> is a companion element.</p>

	82 <p>You can use it inside your components to request additional scopes.</p>

	83 <p>Every signin button will request all the scopes present in the document,

	84 and change its appearance to match</p>

	85 <p>For example, here is a signin-aware scope. You can change its scopes via po pup</p>

	86 <template id="awareness" is="dom-bind">

	87 <div><code><google-signin-aware

	88 <div>scope=

	89 <select value="{{scope::change}}">

	90 <option value="">None</option>

	91 <option value="https://www.googleapis.com/auth/analytics">Google Analy tics</option>

	92 <option value="https://www.googleapis.com/auth/plus.login">Google Plus view circles</option>

	93 <option value="https://www.googleapis.com/auth/youtube">YouTube</optio n>

	94 <option value="https://www.googleapis.com/auth/calendar">Calendar</opt ion>

	95 <option value="profile">Profile info</option>

	96 </select>

	97 </div>

	98 <div>signedIn="<span>{{signedIn}}</span>"</div>

	99 <div>isAuthorized="<span>{{isAuthorized}}</span>"</div>

	100 <div>needAdditionalAuth:"<span>{{needAdditionalAuth}}</span>"></div>

	101 </code></div>

	102 <p>Every new scope you select will be added to requested scopes.</p>

	103 <p>When you select a Google Plus scope, button will turn red.</p>

	104 <google-signin></google-signin>

	105 </p>

	106 <google-signin-aware

	107 scopes="{{scope}}"

	108 signed-in="{{signedIn}}"

	109 is-authorized="{{isAuthorized}}"

	110 need-additional-auth="{{needAdditionalAuth}}"

	111 on-google-signin-aware-success="handleSignIn"

	112 on-google-signin-aware-signed-out="handleSignOut"></google-signin-aware>

	113 <p>User name:<span>{{userName}}</span></p>

	114 <p>Testing <code>google-signin-aware</code> events: <span>{{status}}</span>< /p>

	115 <p><button on-click="disconnect">Disconnect to start over</button></p>

	116 </template>

	117 <script>

	118 var aware = document.querySelector('#awareness');

	119 aware.status = 'Not granted';

	120 aware.userName = 'N/A';

	121 aware.handleSignIn = function(response) {

	122 this.status = 'Signin granted';

	123 // console.log('[Aware] Signin Response', response);

	124 this.userName = gapi.auth2.getAuthInstance().currentUser.get().getBasicPro file().getName();

	125 };

	126 aware.handleSignOut = function(response) {

	127 this.status = 'Signed out';

	128 // console.log('[Aware] Signout Response', response);

	129 this.userName = 'N/A';

	130 };

	131 aware.disconnect = function() {

	132 var b = document.querySelector('google-signin');

	133 var currentUser = gapi.auth2.getAuthInstance().currentUser.get();

	134 if (currentUser) {

	135 currentUser.disconnect();

	136 }

	137 gapi.auth2.getAuthInstance().signOut();

	138 };

	139

	140 </script>

	141 </body>

	142 </html>

OLD	NEW