aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rwxr-xr-xnode_modules/montage/examples/youtube-channel-example/index.html10
-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
4 files changed, 224 insertions, 23 deletions
diff --git a/node_modules/montage/examples/youtube-channel-example/index.html b/node_modules/montage/examples/youtube-channel-example/index.html
index f3a0592a..132d0d5a 100755
--- a/node_modules/montage/examples/youtube-channel-example/index.html
+++ b/node_modules/montage/examples/youtube-channel-example/index.html
@@ -15,7 +15,7 @@
15 "prototype": "montage/ui/youtube-channel.reel", 15 "prototype": "montage/ui/youtube-channel.reel",
16 "properties": { 16 "properties": {
17 "element": {"#": "player"}, 17 "element": {"#": "player"},
18 "channel": "drive" 18 "channelUrl": "http://www.youtube.com/TEDEducation"
19 } 19 }
20 }, 20 },
21 21
@@ -24,6 +24,12 @@
24 "properties": { 24 "properties": {
25 "element": {"#": "url"}, 25 "element": {"#": "url"},
26 "value": "http://www.youtube.com/TEDEducation" 26 "value": "http://www.youtube.com/TEDEducation"
27 },
28 "bindings": {
29 "value": {
30 "boundObject": {"@": "player"},
31 "boundObjectPropertyPath": "channelUrl"
32 }
27 } 33 }
28 } 34 }
29 } 35 }
@@ -32,7 +38,7 @@
32<body> 38<body>
33 <div class="youtube-channel-example"> 39 <div class="youtube-channel-example">
34 <div id="title">Youtube Channel</div> 40 <div id="title">Youtube Channel</div>
35 <input type="text" data-montage-id="url" placeholder="Channel Name" class="youtube-channel-example-url"> 41 <input type="text" data-montage-id="url" placeholder="Channel URL" class="youtube-channel-example-url">
36 <div data-montage-id="player"></div> 42 <div data-montage-id="player"></div>
37 </div> 43 </div>
38</body> 44</body>
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 }