OLD | NEW |
(Empty) | |
| 1 <link rel="import" href="../polymer/polymer.html"> |
| 2 |
| 3 <link rel="import" href="../google-apis/google-plusone-api.html"> |
| 4 |
| 5 <!-- |
| 6 Element providing a button to start a Google Hangout. |
| 7 |
| 8 ##### Example |
| 9 |
| 10 <google-hangout-button></google-hangout-button> |
| 11 |
| 12 @demo |
| 13 --> |
| 14 <dom-module id="google-hangout-button"> |
| 15 <style> |
| 16 :host, span { |
| 17 display: inline-block; |
| 18 } |
| 19 </style> |
| 20 <template> |
| 21 <google-plusone-api id="plusone" on-api-load="_load"></google-plusone-api> |
| 22 <span id="container"></span> |
| 23 </template> |
| 24 </dom-module> |
| 25 <script> |
| 26 Polymer({ |
| 27 is: 'google-hangout-button', |
| 28 |
| 29 /** |
| 30 * Fired when the hangout api is loaded but before rendering the button. |
| 31 * |
| 32 * @event google-hangout-button-pregame |
| 33 * @param {Object} e Event parameters. |
| 34 */ |
| 35 |
| 36 /** |
| 37 * Fired when the button is rendered and ready to use. |
| 38 * |
| 39 * @event google-hangout-button-ready |
| 40 * @param {Object} e Event parameters. |
| 41 */ |
| 42 |
| 43 properties: { |
| 44 |
| 45 /** |
| 46 * Specifies what type of Hangout should be started. |
| 47 * Valid values are 'normal', 'onair', 'party' and 'moderated' |
| 48 * |
| 49 * See the [Hangout button parameter reference](https://developers.google.
com/+/hangouts/button#hangout_button_parameters) |
| 50 * for more details. |
| 51 */ |
| 52 type: { |
| 53 type: String, |
| 54 value: 'normal' |
| 55 }, |
| 56 |
| 57 /** |
| 58 * Specifies the Google+ Hangout apps to launch when a user clicks the |
| 59 * Hangout button. Invalid objects and parameters are ignored. |
| 60 * |
| 61 * See the [Initial app parameters reference](https://developers.google.co
m/+/hangouts/button#initial_app_parameters) |
| 62 * for more details. |
| 63 */ |
| 64 apps: { |
| 65 type: Array, |
| 66 value: function() { return []; } |
| 67 }, |
| 68 |
| 69 /** |
| 70 * Specifies the list of people to invite when the user clicks the |
| 71 * Hangout button. Invalid objects and parameters are ignored. |
| 72 * |
| 73 * See the [Invite parameters reference](https://developers.google.com/+/h
angouts/button#invite_parameters) |
| 74 * for more details. |
| 75 */ |
| 76 invites: { |
| 77 type: Array, |
| 78 value: function() { return []; } |
| 79 }, |
| 80 |
| 81 /** |
| 82 * Pre-populates the topic field for Hangouts on Air. Note that users can |
| 83 * change the topic of the Hangout after they have joined. |
| 84 */ |
| 85 topic: { |
| 86 type: String, |
| 87 value: null |
| 88 }, |
| 89 |
| 90 /** |
| 91 * Specifies the width of the button. |
| 92 */ |
| 93 width: { |
| 94 type: Number, |
| 95 value: 136 |
| 96 }, |
| 97 |
| 98 _loaded: { |
| 99 type: Boolean, |
| 100 value: false |
| 101 } |
| 102 }, |
| 103 |
| 104 _load: function() { |
| 105 // TODO(sjmiles): pre/post shenanigans required because gapi.hangout.rende
r |
| 106 // throws if not rendered into main document light-dom |
| 107 var container = this._pregame(); |
| 108 this.$.plusone.api.hangout.render(container, { |
| 109 'render': 'createhangout', |
| 110 'hangout_type': this.type, |
| 111 'initial_apps': this.apps, |
| 112 'invites': this.invites, |
| 113 'topic': this.topic, |
| 114 'widget_size': this.width |
| 115 }); |
| 116 this._postgame(container); |
| 117 }, |
| 118 _pregame: function() { |
| 119 var object = document.createElement('span'); |
| 120 document.body.appendChild(object); |
| 121 this.fire('google-hangout-button-pregame'); |
| 122 return object; |
| 123 }, |
| 124 _postgame: function(object) { |
| 125 // when the iframe finishes it's dirty business, snarf it into the shadow-
root |
| 126 var iframe = object.firstElementChild; |
| 127 iframe.addEventListener('load', function() { |
| 128 if (!this._loaded) { |
| 129 // TODO(sjmiles): appending directly to shadowRoot not working under p
olyfill |
| 130 //this.shadowRoot.appendChild(object); |
| 131 this.$.container.appendChild(object); |
| 132 this._loaded = true; |
| 133 this.fire('google-hangout-button-ready'); |
| 134 } |
| 135 }.bind(this)); |
| 136 }, |
| 137 ready: function () { |
| 138 this.apps = this.apps || []; |
| 139 this.invites = this.invites || []; |
| 140 } |
| 141 }); |
| 142 </script> |
OLD | NEW |