aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--node_modules/montage/ui/youtube-channel.reel/youtube-channel.html48
-rw-r--r--node_modules/montage/ui/youtube-channel.reel/youtube-channel.js34
2 files changed, 68 insertions, 14 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..848322e0 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,32 +67,46 @@
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;
87 -webkit-transform: scale3d(0, 0, 1);
84 -webkit-transition: all 0.5s ease-in-out; 88 -webkit-transition: all 0.5s ease-in-out;
85 } 89 }
86 .montage-youtube-channel.show .montage-youtube-channel-popup { 90 .montage-youtube-channel-popup.show {
87 opacity: 1; 91 opacity: 1;
88 visibility: visible; 92 visibility: visible;
93 -webkit-transform: scale3d(1, 1, 1);
94 }
95
96 .montage-youtube-channel-close {
97 position: absolute;
98 top: 5px;
99 left: 5px;
100
101 width: 25px;
102 height: 25px;
103
104 background: #333;
105 border: 1px solid #999;
106 border-radius: 3px;
107
108 color: #EEE;
109 outline: none;
89 } 110 }
90 </style> 111 </style>
91</head> 112</head>
@@ -96,6 +117,7 @@
96 <img src="" alt="" data-montage-id="imageC"> 117 <img src="" alt="" data-montage-id="imageC">
97 118
98 <div data-montage-id="popup" class="montage-youtube-channel-popup" class="hide"> 119 <div data-montage-id="popup" class="montage-youtube-channel-popup" class="hide">
120 <button data-montage-id="close" class="montage-youtube-channel-close">×</button>
99 <div data-montage-id="player"></div> 121 <div data-montage-id="player"></div>
100 </div> 122 </div>
101 </div> 123 </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..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) {