aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui
diff options
context:
space:
mode:
authorStuart Knightley2012-03-19 15:13:28 -0700
committerStuart Knightley2012-03-19 15:13:28 -0700
commite438756a18e4ae46cd4713e81f0bc4a1d2ddea15 (patch)
tree2d333430d4d0bafa335fc96ccca19b087d900285 /node_modules/montage/ui
parentdd382088b4990c4e39f77d793c1a6bd7e3c52aca (diff)
downloadninja-e438756a18e4ae46cd4713e81f0bc4a1d2ddea15.tar.gz
Update Youtube channel to have three thumbnails
Diffstat (limited to 'node_modules/montage/ui')
-rw-r--r--node_modules/montage/ui/youtube-channel.reel/youtube-channel.html72
-rw-r--r--node_modules/montage/ui/youtube-channel.reel/youtube-channel.js128
-rw-r--r--node_modules/montage/ui/youtube-player.reel/youtube-player.js37
3 files changed, 216 insertions, 21 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 184ac360..50286c22 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
@@ -15,20 +15,86 @@
15 "element": {"#": "player"} 15 "element": {"#": "player"}
16 } 16 }
17 }, 17 },
18 "imageA": {
19 "prototype": "montage/ui/image.reel",
20 "properties": {
21 "element": {"#": "imageA"}
22 }
23 },
24 "imageB": {
25 "prototype": "montage/ui/image.reel",
26 "properties": {
27 "element": {"#": "imageB"}
28 }
29 },
30 "imageC": {
31 "prototype": "montage/ui/image.reel",
32 "properties": {
33 "element": {"#": "imageC"}
34 }
35 },
18 36
19 "owner": { 37 "owner": {
20 "prototype": "montage/ui/youtube-channel.reel", 38 "module": "montage/ui/youtube-channel.reel",
39 "name": "YoutubeChannel",
21 "properties": { 40 "properties": {
22 "element": {"#": "container"}, 41 "element": {"#": "container"},
23 "player": {"@": "player"} 42 "player": {"@": "player"},
43 "_popupElement": {"#": "popup"},
44 "imageA": {"@": "imageA"},
45 "imageB": {"@": "imageB"},
46 "imageC": {"@": "imageC"}
24 } 47 }
25 } 48 }
26 } 49 }
27 </script> 50 </script>
51 <style type="text/css">
52 .montage-youtube-channel {
53 width: 370px;
54 }
55
56 .montage-youtube-channel img {
57 cursor: pointer;
58 height: 90px;
59 width: 120px;
60 background-color: #000;
61 }
62
63 .montage-youtube-channel-popup {
64 width: 640px;
65 border: 5px solid #000;
66 border-radius: 5px;
67 background: #000;
68
69 position: fixed;
70 top: 50%;
71 margin-top: -192px;
72 left: 50%;
73 margin-left: -320px;
74
75 z-index: 9000;
76
77 -webkit-transform: scale3d(0, 0, 1);
78 opacity: 0;
79 -webkit-transition: all 0.5s ease-in-out;
80 visibility: hidden;
81 }
82 .montage-youtube-channel-popup.show {
83 -webkit-transform: scale3d(1, 1, 1);
84 opacity: 1;
85 visibility: visible;
86 }
87 </style>
28</head> 88</head>
29<body> 89<body>
30 <div data-montage-id="container" class="montage-youtube-channel"> 90 <div data-montage-id="container" class="montage-youtube-channel">
31 <div data-montage-id="player"></div> 91 <img src="" alt="" data-montage-id="imageA">
92 <img src="" alt="" data-montage-id="imageB">
93 <img src="" alt="" data-montage-id="imageC">
94
95 <div data-montage-id="popup" class="montage-youtube-channel-popup" class="hide">
96 <div data-montage-id="player"></div>
97 </div>
32 </div> 98 </div>
33</body> 99</body>
34</html> 100</html>
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 3e20c406..3d9f7f2f 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
@@ -6,8 +6,7 @@
6/*global require,exports*/ 6/*global require,exports*/
7var Montage = require("montage").Montage, 7var Montage = require("montage").Montage,
8 Component = require("ui/component").Component, 8 Component = require("ui/component").Component,
9 Uuid = require("core/uuid").Uuid; 9 Uuid = require("core/Uuid");
10
11 10
12var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { 11var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
13 12
@@ -16,6 +15,25 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
16 value: /youtube.com\/(user\/)?([a-z0-9]+)/i 15 value: /youtube.com\/(user\/)?([a-z0-9]+)/i
17 }, 16 },
18 17
18 imageA: {
19 value: null
20 },
21 imageB: {
22 value: null
23 },
24 imageC: {
25 value: null
26 },
27 _popupElement: {
28 enumerable: false,
29 value: null
30 },
31
32 _shouldShowPopup: {
33 enumerable: false,
34 value: false
35 },
36
19 _channelUrl: { 37 _channelUrl: {
20 enumerable: false, 38 enumerable: false,
21 value: null 39 value: null
@@ -77,37 +95,115 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
77 // create url 95 // create url
78 var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName; 96 var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName;
79 97
80 this.script = document.createElement("script"); 98 this._script = document.createElement("script");
81 this.script.src = url; 99 this._script.src = url;
82 this.needsDraw = true; 100 this.needsDraw = true;
83 } 101 }
84 }, 102 },
85 103
86 script: { 104 _script: {
105 enumerable: false,
87 value: null 106 value: null
88 }, 107 },
89 108
109 prepareForDraw: {
110 value: function() {
111 this.imageA.element.addEventListener("click", this, false);
112 this.imageB.element.addEventListener("click", this, false);
113 this.imageC.element.addEventListener("click", this, false);
114 }
115 },
116
90 draw: { 117 draw: {
91 value: function() { 118 value: function() {
92 if (this.script) { 119 if (this._script) {
93 this._element.appendChild(this.script); 120 this._element.appendChild(this._script);
94 this.script = null; 121 this._script = null;
95 } 122 }
123
124 if (this._entries) {
125 this.imageA.src = this._entries[0]["media$group"]["media$thumbnail"][0].url;
126 this.imageB.src = this._entries[1]["media$group"]["media$thumbnail"][0].url;
127 this.imageC.src = this._entries[2]["media$group"]["media$thumbnail"][0].url;
128 }
129
130 if (this._videoId) {
131 this.player.videoId = this._videoId;
132 this._videoId = null;
133 }
134
135 if (this._shouldShowPopup) {
136 this._popupElement.classList.add("show");
137 if (window.Touch) {
138 document.addEventListener('touchstart', this, false);
139 } else {
140 document.addEventListener('mousedown', this, false);
141 document.addEventListener('keyup', this, false);
142 }
143 } else {
144 this._popupElement.classList.remove("show");
145 this.player.stop();
146
147 if (window.Touc