diff options
Diffstat (limited to 'node_modules/montage/ui/youtube-channel.reel/youtube-channel.js')
-rw-r--r-- | node_modules/montage/ui/youtube-channel.reel/youtube-channel.js | 34 |
1 files changed, 33 insertions, 1 deletions
diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js index ccbd9978..5b05f2c5 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js | |||
@@ -111,6 +111,8 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { | |||
111 | this.imageA.element.addEventListener("click", this, false); | 111 | this.imageA.element.addEventListener("click", this, false); |
112 | this.imageB.element.addEventListener("click", this, false); | 112 | this.imageB.element.addEventListener("click", this, false); |
113 | this.imageC.element.addEventListener("click", this, false); | 113 | this.imageC.element.addEventListener("click", this, false); |
114 | |||
115 | this._positionPopup(); | ||
114 | } | 116 | } |
115 | }, | 117 | }, |
116 | 118 | ||
@@ -133,7 +135,16 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { | |||
133 | } | 135 | } |
134 | 136 | ||
135 | if (this._shouldShowPopup) { | 137 | if (this._shouldShowPopup) { |
136 | this._element.classList.add("show"); | 138 | this._positionPopup(); |
139 | |||
140 | // Fix for Canary where the thumbnail in the video doesn't | ||
141 | // change until the CSS transition has finished, so wait for | ||
142 | // it to change before starting the animation | ||
143 | var self = this; | ||
144 | window.setTimeout(function() { | ||
145 | self._element.classList.add("show"); | ||
146 | self._popupElement.classList.add("show"); | ||
147 | }, 50); | ||
137 | if (window.Touch) { | 148 | if (window.Touch) { |
138 | document.addEventListener('touchstart', this, false); | 149 | document.addEventListener('touchstart', this, false); |
139 | } else { | 150 | } else { |
@@ -142,6 +153,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { | |||
142 | } | 153 | } |
143 | } else { | 154 | } else { |
144 | this._element.classList.remove("show"); | 155 | this._element.classList.remove("show"); |
156 | this._popupElement.classList.remove("show"); | ||
145 | this.player.stop(); | 157 | this.player.stop(); |
146 | 158 | ||
147 | if (window.Touch) { | 159 | if (window.Touch) { |
@@ -161,6 +173,26 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { | |||
161 | value: null | 173 | value: null |
162 | }, | 174 | }, |
163 | 175 | ||
176 | _positionPopup: { | ||
177 | value: function() { | ||
178 | |||
179 | var viewport = this._element.parentNode; | ||
180 | var viewportStyle = window.getComputedStyle(viewport); | ||
181 | |||
182 | this.player.width = viewportStyle.width; | ||
183 | this.player.height = viewportStyle.height; | ||
184 | |||
185 | // // Chrome | ||
186 | // viewport.insertBefore(this._popupElement, viewport.firstChild); | ||
187 | // this._popupElement.style.top = viewport.offsetTop; | ||
188 | // this._popupElement.style.left = viewport.offsetLeft; | ||
189 | |||
190 | // Canary | ||
191 | this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px'; | ||
192 | this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px'; | ||
193 | } | ||
194 | }, | ||
195 | |||
164 | handleClick: { | 196 | handleClick: { |
165 | value: function(event) { | 197 | value: function(event) { |
166 | switch(event.target.dataset.montageId) { | 198 | switch(event.target.dataset.montageId) { |