From 4d9832acbd78f82a63fba59187bd82a5afad8240 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 9 May 2012 11:46:14 -0700 Subject: Squashed commit of google-components into master Signed-off-by: Valerio Virgillito --- .../youtube-channel.reel/youtube-channel.html | 126 +++++++++++ .../youtube-channel.reel/youtube-channel.js | 242 +++++++++++++++++++++ 2 files changed, 368 insertions(+) create mode 100644 node_modules/montage-google/youtube-channel.reel/youtube-channel.html create mode 100644 node_modules/montage-google/youtube-channel.reel/youtube-channel.js (limited to 'node_modules/montage-google/youtube-channel.reel') diff --git a/node_modules/montage-google/youtube-channel.reel/youtube-channel.html b/node_modules/montage-google/youtube-channel.reel/youtube-channel.html new file mode 100644 index 00000000..99a8a698 --- /dev/null +++ b/node_modules/montage-google/youtube-channel.reel/youtube-channel.html @@ -0,0 +1,126 @@ + + + + + + + + + +

+ + + + + +

+ + diff --git a/node_modules/montage-google/youtube-channel.reel/youtube-channel.js b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js new file mode 100644 index 00000000..88f87f3c --- /dev/null +++ b/node_modules/montage-google/youtube-channel.reel/youtube-channel.js @@ -0,0 +1,242 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +/*global require,exports*/ +var Montage = require("montage").Montage, + Component = require("montage/ui/component").Component, + Uuid = require("montage/core/Uuid"); + +var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { + + _userRe: { + enumerable: false, + value: /youtube.com\/(user\/)?([a-z0-9]+)/i + }, + + imageA: { + value: null + }, + imageB: { + value: null + }, + imageC: { + value: null + }, + _popupElement: { + enumerable: false, + value: null + }, + + _shouldShowPopup: { + enumerable: false, + value: false + }, + + _channelUrl: { + enumerable: false, + value: null + }, + channelUrl: { + depends: ["channel"], + get: function() { + return this._channelUrl; + }, + set: function(value, fromChannel) { + if (this._channelUrl !== value) { + this._channelUrl = value; + + // prevent infinite loop + if (!fromChannel) { + var match = this._userRe.exec(value); + if (match && match[2]) { + Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true); + } + } + } + } + }, + + _channel: { + enumerable: false, + value: null + }, + channel: { + get: function() { + return this._channel; + }, + set: function(value, fromUrl) { + if (this._channel !== value) { + this._channel = value; + + // prevent infinite loop + if (!fromUrl) { + Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true); + } + + this._loadChannel(); + } + } + }, + + _loadChannel: { + enumerable: false, + value: function() { + var self = this; + + var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_"); + + window[callbackName] = function(data) { + self.handleData(data); + delete window[callbackName]; + }; + + // create url + var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName; + + this._script = document.createElement("script"); + this._script.src = url; + this.needsDraw = true; + } + }, + + _script: { + enumerable: false, + value: null + }, + + prepareForDraw: { + value: function() { + this.imageA.element.addEventListener("click", this, false); + this.imageB.element.addEventListener("click", this, false); + this.imageC.element.addEventListener("click", this, false); + + this._positionPopup(); + } + }, + + draw: { + value: function() { + if (this._script) { + this._element.appendChild(this._script); + this._script = null; + } + + if (this._entries) { + this.imageA.src = this._entries[0]["media$group"]["media$thumbnail"][0].url; + this.imageB.src = this._entries[1]["media$group"]["media$thumbnail"][0].url; + this.imageC.src = this._entries[2]["media$group"]["media$thumbnail"][0].url; + } + + if (this._videoId) { + this.player.videoId = this._videoId; + this._videoId = null; + } + + if (this._shouldShowPopup) { + this._positionPopup(); + + // Fix for Canary where the thumbnail in the video doesn't + // change until the CSS transition has finished, so wait for + // it to change before starting the animation + var self = this; + window.setTimeout(function() { + self._element.classList.add("show"); + self._popupElement.classList.add("show"); + }, 50); + if (window.Touch) { + document.addEventListener('touchstart', this, false); + } else { + document.addEventListener('mousedown', this, false); + document.addEventListener('keyup', this, false); + } + } else { + this._element.classList.remove("show"); + this._popupElement.classList.remove("show"); + this.player.stop(); + + if (window.Touch) { + document.removeEventListener('touchstart', this); + } else { + document.removeEventListener('mousedown', this); + document.removeEventListener('keyup', this); + } + + } + + } + }, + + _entries: { + enumerable: false, + value: null + }, + + _positionPopup: { + value: function() { + + var viewport = this._element.parentNode; + var viewportStyle = window.getComputedStyle(viewport); + + this.player.width = viewportStyle.width; + this.player.height = viewportStyle.height; + + // // Chrome + // viewport.insertBefore(this._popupElement, viewport.firstChild); + // this._popupElement.style.top = viewport.offsetTop; + // this._popupElement.style.left = viewport.offsetLeft; + + // Canary + this._popupElement.style.top = - (this._element.offsetTop || 0) + 'px'; + this._popupElement.style.left = - (this._element.offsetLeft || 0) + 'px'; + } + }, + + handleClick: { + value: function(event) { + switch(event.target.dataset.montageId) { + case "imageA": + this._videoId = this._entries[0]["media$group"]["yt$videoid"]["$t"]; + break; + case "imageB": + this._videoId = this._entries[1]["media$group"]["yt$videoid"]["$t"]; + break; + case "imageC": + this._videoId = this._entries[2]["media$group"]["yt$videoid"]["$t"]; + break; + } + this._shouldShowPopup = true; + this.needsDraw = true; + } + }, + + handleTouchStart: { + value: function(event) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + }, + handleMousedown: { + value: function(event) { + if (event.button === 0) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + } + }, + handleKeyup: { + value: function(event) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + }, + + handleData: { + value: function(data) { + this._entries = data.feed.entry || []; + this.needsDraw = true; + } + } + +}); \ No newline at end of file -- cgit v1.2.3