|
/* global Zepto, ko*/ |
|
|
|
(function(exports, $, ko) { |
|
'use strict'; |
|
|
|
var currentRequest, |
|
crossdomainRequesting = 'http://social-media-rest-api.herokuapp.com', |
|
setObservableValue = function(observable, value) { |
|
observable = observable || ko.observable(); |
|
observable(value); |
|
return observable; |
|
}, |
|
retrieveData = function(socialmedia) { |
|
/** |
|
* Learn more XMLHttpRequest |
|
* https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest |
|
* |
|
* Using XMLHttpRequest |
|
* https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest |
|
*/ |
|
return function() { |
|
var jsonpCallback = 'cb', |
|
url = crossdomainRequesting + socialmedia.url, |
|
request = $.ajax({ |
|
url: url, |
|
dataType: 'jsonp', |
|
jsonpCallback: jsonpCallback, |
|
success: socialmedia.callback, |
|
complete: function() { |
|
socialmedia.loading(false); |
|
currentRequest = undefined; |
|
} |
|
}); |
|
if (currentRequest && currentRequest.abort) { |
|
currentRequest.abort(); |
|
} |
|
return loadingSocialMedia(socialmedia, currentRequest = request); |
|
}; |
|
}, |
|
loadingSocialMedia = function(socialmedia, request) { |
|
socialmedia.data.removeAll(); |
|
socialmedia.beVisible(); |
|
socialmedia.loading(true); |
|
return request; |
|
}, |
|
clearAllSocialMedia = function() { |
|
$.each(SocialMedia, function(name, socialmedia) { |
|
socialmedia.loading(false); |
|
socialmedia.isVisible(false); |
|
}); |
|
}, |
|
beVisible = function() { |
|
clearAllSocialMedia(); |
|
this.isVisible(true); |
|
}, |
|
setUpSocialMedia = function() { |
|
$.each(SocialMedia, function(name, socialmedia) { |
|
socialmedia.data = ko.observableArray(); |
|
socialmedia.isVisible = ko.observable(false); |
|
socialmedia.loading = ko.observable(false); |
|
socialmedia.gonnaBeReady = ko.computed(function() { |
|
return socialmedia.isVisible() || socialmedia.loading(); |
|
}); |
|
socialmedia.ready = ko.computed(function() { |
|
return socialmedia.isVisible() && !socialmedia.loading(); |
|
}); |
|
socialmedia.beVisible = beVisible; |
|
socialmedia.retrieve = retrieveData(socialmedia); |
|
}); |
|
}, |
|
SocialMedia = { |
|
Facebook: { |
|
url: '/facebook/wall/igor.r.lima.75/atleast/5', |
|
}, |
|
Instagram: { |
|
url: '/instagram/photos/250455645', |
|
}, |
|
Youtube: { |
|
url: '/youtube/playlists/igorribeirolima', |
|
}, |
|
Twitter: { |
|
url: '/twitter/timeline/igorribeirolima', |
|
} |
|
}; |
|
setUpSocialMedia(); |
|
|
|
SocialMedia.Youtube.changeCurrentVideo = function(playlist, currentIndex) { |
|
var previous, lastPosition, next; |
|
currentIndex = currentIndex < 0 ? 0 : currentIndex; |
|
currentIndex = currentIndex >= playlist.videos.length ? |
|
playlist.videos.length - 1 : |
|
currentIndex; |
|
previous = currentIndex; |
|
lastPosition = playlist.videos.length - 1; |
|
next = (currentIndex > lastPosition) ? |
|
lastPosition : |
|
(lastPosition - currentIndex); |
|
|
|
playlist.current = setObservableValue(playlist.current, currentIndex); |
|
playlist.previous = setObservableValue(playlist.previous, previous); |
|
playlist.next = setObservableValue(playlist.next, next); |
|
|
|
$.each(playlist.videos, function(index, video) { |
|
var isVisible = currentIndex === index; |
|
video.visible = video.visible ? video.visible : ko.observable(isVisible); |
|
video.visible(isVisible); |
|
}); |
|
}; |
|
|
|
SocialMedia.Youtube.callback = function(playlists) { |
|
var changeCurrentVideo = SocialMedia.Youtube.changeCurrentVideo; |
|
$.each(playlists, function(index, playlist) { |
|
changeCurrentVideo(playlist, 0); |
|
playlist.goPrevious = function() { |
|
changeCurrentVideo(playlist, playlist.current() - 1 ); |
|
}; |
|
playlist.goNext = function() { |
|
changeCurrentVideo(playlist, playlist.current() + 1 ); |
|
}; |
|
SocialMedia.Youtube.data.push(playlist); |
|
}); |
|
}; |
|
|
|
SocialMedia.Twitter.callback = function(tweets) { |
|
$.each(tweets, function(index, tweet) { |
|
SocialMedia.Twitter.data.push(tweet); |
|
}); |
|
}; |
|
|
|
SocialMedia.Facebook.setUpFeed = function(feed) { |
|
feed.story = feed.story || ''; |
|
feed.message = feed.message || ''; |
|
feed.name = feed.name || ''; |
|
feed.description = feed.description || ''; |
|
feed.link = feed.link || ''; |
|
feed.text = feed.text || ''; |
|
feed.picture = feed.picture || ''; |
|
SocialMedia.Facebook.setFeedType(feed); |
|
}; |
|
|
|
SocialMedia.Facebook.setFeedType = function(feed) { |
|
feed.isLink = setObservableValue(feed.isLink, feed.type === 'link'); |
|
feed.isStatus = setObservableValue(feed.isStatus, feed.type === 'status'); |
|
feed.isPhoto = setObservableValue(feed.isPhoto, feed.type === 'photo'); |
|
feed.isQuestion = setObservableValue(feed.isQuestion, feed.type === 'question'); |
|
}; |
|
|
|
SocialMedia.Facebook.callback = function(data) { |
|
$.each(data.feeds, function(index, feed) { |
|
SocialMedia.Facebook.setUpFeed(feed); |
|
SocialMedia.Facebook.data.push(feed); |
|
}); |
|
}; |
|
|
|
SocialMedia.Instagram.callback = function(photos) { |
|
$.each(photos, function(index, photo) { |
|
SocialMedia.Instagram.data.push(photo); |
|
}); |
|
}; |
|
|
|
ko.bindingHandlers.hidden = { |
|
update: function(element, valueAccessor) { |
|
ko.bindingHandlers.visible.update(element, function() { |
|
return !ko.utils.unwrapObservable(valueAccessor()); |
|
}); |
|
} |
|
}; |
|
|
|
var bindings = {}; |
|
$.each(SocialMedia, function(name, socialmedia){ |
|
bindings['dataFrom'+name] = socialmedia.data; |
|
bindings['is'+name+'Visible'] = socialmedia.isVisible; |
|
bindings['update'+name] = socialmedia.retrieve; |
|
bindings['is'+name+'Loading'] = socialmedia.loading; |
|
bindings['is'+name+'Ready'] = socialmedia.ready; |
|
bindings['is'+name+'GonnaBeReady'] = socialmedia.gonnaBeReady; |
|
}); |
|
$('.social-media').each(function(index, item) { |
|
ko.applyBindingsToDescendants(bindings, item); |
|
}); |
|
|
|
SocialMedia.Youtube.retrieve(); |
|
console.warn(true); |
|
exports.SocialMedia = SocialMedia; |
|
|
|
}(window, Zepto, ko)); |
showw