aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/ui/youtube-channel.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/montage/ui/youtube-channel.reel')
-rw-r--r--node_modules/montage/ui/youtube-channel.reel/youtube-channel.html125
-rw-r--r--node_modules/montage/ui/youtube-channel.reel/youtube-channel.js242
2 files changed, 367 insertions, 0 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
new file mode 100644
index 00000000..848322e0
--- /dev/null
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
@@ -0,0 +1,125 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8 <head>
9 <title></title>
10 <script type="text/montage-serialization">
11 {
12 "player": {
13 "prototype": "montage/ui/youtube-player.reel",
14 "properties": {
15 "element": {"#": "player"}
16 }
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 },
36 "button": {
37 "prototype": "montage/ui/button.reel",
38 "properties": {
39 "element": {"#": "close"}
40 }
41 },
42
43 "owner": {
44 "module": "montage/ui/youtube-channel.reel",
45 "name": "YoutubeChannel",
46 "properties": {
47 "element": {"#": "container"},
48 "player": {"@": "player"},
49 "_popupElement": {"#": "popup"},
50 "imageA": {"@": "imageA"},
51 "imageB": {"@": "imageB"},
52 "imageC": {"@": "imageC"}
53 }
54 }
55 }
56 </script>
57 <style type="text/css">
58 .montage-youtube-channel {
59 width: 370px;
60 position: relative;
61 }
62
63 .montage-youtube-channel img {
64 cursor: pointer;
65 height: 90px;
66 width: 120px;
67 background-color: #000;
68 opacity: 1;
69
70 visibility: visible;
71 -webkit-transition: all 0.5s ease-in-out;
72 }
73 .montage-youtube-channel.show img {
74 opacity: 0;
75 visibility: hidden;
76 }
77
78 .montage-youtube-channel-popup {
79 position: fixed;
80 top: 0;
81 left: 0;
82 right: 0;
83 bottom: 0;
84
85 opacity: 0;
86 visibility: hidden;
87 -webkit-transform: scale3d(0, 0, 1);
88 -webkit-transition: all 0.5s ease-in-out;
89 }
90 .montage-youtube-channel-popup.show {
91 opacity: 1;
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;
110 }
111 </style>
112</head>
113<body>
114 <div data-montage-id="container" class="montage-youtube-channel">
115 <img src="" alt="" data-montage-id="imageA">
116 <img src="" alt="" data-montage-id="imageB">
117 <img src="" alt="" data-montage-id="imageC">
118
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>
121 <div data-montage-id="player"></div>
122 </div>
123 </div>
124</body>
125</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
new file mode 100644
index 00000000..5b05f2c5
--- /dev/null
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
@@ -0,0 +1,242 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6/*global require,exports*/
7var Montage = require("montage").Montage,
8 Component = require("ui/component").Component,
9 Uuid = require("core/Uuid");
10
11var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
12
13 _userRe: {
14 enumerable: false,
15 value: /youtube.com\/(user\/)?([a-z0-9]+)/i
16 },
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
37 _channelUrl: {
38 enumerable: false,
39 value: null
40 },
41 channelUrl: {
42 depends: ["channel"],
43 get: function() {
44 return this._channelUrl;
45 },
46 set: function(value, fromChannel) {
47 if (this._channelUrl !== value) {
48 this._channelUrl = value;
49
50 // prevent infinite loop
51 if (!fromChannel) {
52 var match = this._userRe.exec(value);
53 if (match && match[2]) {
54 Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true);
55 }
56 }
57 }
58 }
59 },
60
61 _channel: {
62 enumerable: false,
63 value: null
64 },
65 channel: {
66 get: function() {
67 return this._channel;
68 },
69 set: function(value, fromUrl) {
70 if (this._channel !== value) {
71 this._channel = value;
72
73 // prevent infinite loop
74 if (!fromUrl) {
75 Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true);
76 }
77
78 this._loadChannel();
79 }
80 }
81 },
82
83 _loadChannel: {
84 enumerable: false,
85 value: function() {
86 var self = this;