From 7edc0c123f9157d48543b09f5a9d7bb496e14f44 Mon Sep 17 00:00:00 2001
From: Stuart Knightley
Date: Wed, 21 Mar 2012 14:16:55 -0700
Subject: Make Youtube video fill the full page
Includes Chrome and Canary code paths for rendering bug fixes
---
.../ui/youtube-channel.reel/youtube-channel.html | 46 ++++++++++++++++------
.../ui/youtube-channel.reel/youtube-channel.js | 25 ++++++++++++
2 files changed, 58 insertions(+), 13 deletions(-)
diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
index 96d823a5..f40ccadb 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
@@ -33,6 +33,12 @@
"element": {"#": "imageC"}
}
},
+ "button": {
+ "prototype": "montage/ui/button.reel",
+ "properties": {
+ "element": {"#": "close"}
+ }
+ },
"owner": {
"module": "montage/ui/youtube-channel.reel",
@@ -51,6 +57,7 @@
@@ -96,6 +115,7 @@
![]()
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..6cd43a3c 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, {
this.imageA.element.addEventListener("click", this, false);
this.imageB.element.addEventListener("click", this, false);
this.imageC.element.addEventListener("click", this, false);
+
+ this._positionPopup();
}
},
@@ -133,7 +135,9 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
}
if (this._shouldShowPopup) {
+ this._positionPopup();
this._element.classList.add("show");
+ this._popupElement.classList.add("show");
if (window.Touch) {
document.addEventListener('touchstart', this, false);
} else {
@@ -142,6 +146,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
}
} else {
this._element.classList.remove("show");
+ this._popupElement.classList.remove("show");
this.player.stop();
if (window.Touch) {
@@ -161,6 +166,26 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
value: null
},
+ _positionPopup: {
+ value: function() {
+
+ var viewport = this._element.parentNode;
+ var viewportStyle = window.getComputedStyle(viewport);
+
+ this.player.width = viewportStyle.width;
+ this.player.height = viewportStyle.height;
+
+ // // Chrome
+ viewport.insertBefore(this._popupElement, viewport.firstChild);
+ this._popupElement.style.top = viewport.offsetTop;
+ this._popupElement.style.left = viewport.offsetLeft;
+
+ // Canary
+ // this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px';
+ // this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px';
+ }
+ },
+
handleClick: {
value: function(event) {
switch(event.target.dataset.montageId) {
--
cgit v1.2.3