aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorStuart Knightley2012-03-21 14:16:55 -0700
committerStuart Knightley2012-03-21 14:16:55 -0700
commit7edc0c123f9157d48543b09f5a9d7bb496e14f44 (patch)
tree54916d017ed55814b632c82067d6bed1ba92d37c
parent33c557491c23e8dcf802bcd15fa500d03e5f115b (diff)
downloadninja-7edc0c123f9157d48543b09f5a9d7bb496e14f44.tar.gz
Make Youtube video fill the full page
Includes Chrome and Canary code paths for rendering bug fixes
Diffstat
-rw-r--r--node_modules/montage/ui/youtube-channel.reel/youtube-channel.html46
-rw-r--r--node_modules/montage/ui/youtube-channel.reel/youtube-channel.js25
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 @@
33 "element": {"#": "imageC"} 33 "element": {"#": "imageC"}
34 } 34 }
35 }, 35 },
36 "button": {
37 "prototype": "montage/ui/button.reel",
38 "properties": {
39 "element": {"#": "close"}
40 }
41 },
36 42
37 "owner": { 43 "owner": {
38 "module": "montage/ui/youtube-channel.reel", 44 "module": "montage/ui/youtube-channel.reel",
@@ -51,6 +57,7 @@
51 <style type="text/css"> 57 <style type="text/css">
52 .montage-youtube-channel { 58 .montage-youtube-channel {
53 width: 370px; 59 width: 370px;
60 position: relative;
54 } 61 }
55 62
56 .montage-youtube-channel img { 63 .montage-youtube-channel img {
@@ -60,33 +67,45 @@
60 background-color: #000; 67 background-color: #000;
61 opacity: 1; 68 opacity: 1;
62 69
63 -webkit-transition: opacity 0.5s ease-in-out; 70 visibility: visible;
71 -webkit-transition: all 0.5s ease-in-out;
64 } 72 }
65 .montage-youtube-channel.show img { 73 .montage-youtube-channel.show img {
66 opacity: 0; 74 opacity: 0;
75 visibility: hidden;
67 } 76 }
68 77
69 .montage-youtube-channel .montage-youtube-channel-popup { 78 .montage-youtube-channel-popup {
70 width: 640px;
71 border: 5px solid #000;
72 border-radius: 5px;
73
74 position: fixed; 79 position: fixed;
75 top: 50%; 80 top: 0;
76 margin-top: -192px; 81 left: 0;
77 left: 50%; 82 right: 0;
78 margin-left: -320px; 83 bottom: 0;
79
80 z-index: 9000;
81 84
82 opacity: 0; 85 opacity: 0;
83 visibility: hidden; 86 visibility: hidden;
84 -webkit-transition: all 0.5s ease-in-out; 87 -webkit-transition: all 0.5s ease-in-out;
85 } 88 }
86 .montage-youtube-channel.show .montage-youtube-channel-popup { 89 .montage-youtube-channel-popup.show {
87 opacity: 1; 90 opacity: 1;
88 visibility: visible; 91 visibility: visible;
89 } 92 }
93
94 .montage-youtube-channel-close {
95 position: absolute;
96 top: 5px;
97 left: 5px;
98
99 width: 25px;
100 height: 25px;
101
102 background: #333;
103 border: 1px solid #999;
104 border-radius: 3px;
105
106 color: #EEE;
107 outline: none;
108 }
90 </style> 109 </style>
91</head> 110</head>
92<body> 111<body>
@@ -96,6 +115,7 @@
96 <img src="" alt="" data-montage-id="imageC"> 115 <img src="" alt="" data-montage-id="imageC">
97 116
98 <div data-montage-id="popup" class="montage-youtube-channel-popup" class="hide"> 117 <div data-montage-id="popup" class="montage-youtube-channel-popup" class="hide">
118 <button data-montage-id="close" class="montage-youtube-channel-close">×</button>
99 <div data-montage-id="player"></div> 119 <div data-montage-id="player"></div>
100 </div> 120 </div>
101 </div> 121 </div>
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, {
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,9 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
133 } 135 }
134 136
135 if (this._shouldShowPopup) { 137 if (this._shouldShowPopup) {
138 this._positionPopup();
136 this._element.classList.add("show"); 139 this._element.classList.add("show");
140 this._popupElement.classList.add("show");
137 if (window.Touch) { 141 if (window.Touch) {
138 document.addEventListener('touchstart', this, false); 142 document.addEventListener('touchstart', this, false);
139 } else { 143 } else {
@@ -142,6 +146,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
142 } 146 }
143 } else { 147 } else {
144 this._element.classList.remove("show"); 148 this._element.classList.remove("show");
149 this._popupElement.classList.remove("show");
145 this.player.stop(); 150 this.player.stop();
146 151
147 if (window.Touch) { 152 if (window.Touch) {
@@ -161,6 +166,26 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
161 value: null 166 value: null
162 }, 167 },
163 168
169 _positionPopup: {
170 value: function() {
171
172 var viewport = this._element.parentNode;
173 var viewportStyle = window.getComputedStyle(viewport);
174
175 this.player.width = viewportStyle.width;
176 this.player.height = viewportStyle.height;
177
178 // // Chrome
179 viewport.insertBefore(this._popupElement, viewport.firstChild);
180 this._popupElement.style.top = viewport.offsetTop;
181 this._popupElement.style.left = viewport.offsetLeft;
182
183 // Canary
184 // this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px';
185 // this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px';
186 }
187 },
188
164 handleClick: { 189 handleClick: {
165 value: function(event) { 190 value: function(event) {
166 switch(event.target.dataset.montageId) { 191 switch(event.target.dataset.montageId) {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 04:03:49 +0000