vrfs152: integration fb login into view code

This commit is contained in:
Jonathan Kolyer 2014-01-29 19:55:16 -06:00
parent 42713f4c9d
commit 7c39c3cd4c
5 changed files with 287 additions and 225 deletions

View File

@ -1,5 +1,4 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.InvitationDialog = function(app) {
@ -152,49 +151,99 @@
};
window._oauth_win = window.open("/auth/google_login", "_blank", "height=500,width=500,menubar=no,resizable=no,status=no");
}
//////////////
// FB handlers
function showFacebookDialog() {
/*
$('#invitation-textarea-container').hide();
$('#invitation-checkbox-container').show();
$('#btn-send-invitation').hide();
$('#btn-next-invitation').show();
invitationDialog.showDialog();
$('#invitation-checkboxes').html('<div style="text-align: center; margin-top: 100px;">Loading your contacts...</div>');
*/
window._oauth_callback = function() {
window._oauth_win.close();
window._oauth_win = null;
window._oauth_callback = null;
/*
$.ajax({
type: "GET",
url: "/gmail_contacts",
success: function(response) {
$('#invitation-checkboxes').html('');
for (var i in response) {
$('#invitation-checkboxes').append("<label><input type='checkbox' class='invitation-checkbox' data-email='" + response[i] + "' /> " + response[i] + "</label>");
}
$('.invitation-checkbox').change(function() {
var checkedBoxes = $('.invitation-checkbox:checkbox:checked');
var emails = '';
for (var i = 0; i < checkedBoxes.length; i++) {
emails += $(checkedBoxes[i]).data('email') + ', ';
}
emails = emails.replace(/, $/, '');
$('#txt-emails').val(emails);
});
},
error: function() {
$('#invitation-checkboxes').html("Load failed");
}
});
*/
};
window._oauth_win = window.open("/auth/facebook_login", "_blank", "height=500,width=500,menubar=no,resizable=no,status=no");
// Additional initialization code such as adding Event Listeners goes here
function handle_fblogin_response(response) {
if (response.status === 'connected') {
// the user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
window.fb_logged_in_state = "connected";
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
// TODO: popup authorization dialog
window.fb_logged_in_state = "not_authorized";
}
else {
// the user isn't logged in to Facebook.
window.fb_logged_in_state = "not_logged_in";
}
}
this.fb_login = function() {
//try {}
FB.login(function(response) {
handle_fblogin_response(response);
}, {scope:'publish_stream'});
}
function show_feed_dialog() {
var obj = {
method: 'feed',
redirect_uri: 'http://jamkazamdev.local:3000/',
link: 'https://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.'
};
function fbFeedDialogCallback(response) {
console.log("feedback dialog closed: " + response['post_id'])
}
FB.ui(obj, fbFeedDialogCallback);
}
function showFacebookDialog(evt) {
evt.stopPropagation();
var fb_state = window.fb_logged_in_state;
if (fb_state == "connected") {
show_feed_dialog();
} else if (fb_state == "not_authorized") {
this.fb_login();
} else {
this.fb_login();
}
}
function callFB(fbAppID){
var fbAppID_ = fbAppID;
window.fbAsyncInit = function() {
FB.init({
appId : fbAppID_,
// channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html',
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow server to access the session?
xfbml : true, // parse XFBML tags on this page?
oauth : true, // enable OAuth 2.0
});
// listen to see if the user is known/logged in
FB.getLoginStatus(function(response) {
handle_fblogin_response(response);
});
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
}
// END FB handlers
//////////////
function clearTextFields() {
$('#txt-emails').val('').removeData('google_invite_count');
$('#txt-message').val('');
@ -211,16 +260,17 @@
registerEvents(false);
}
function initialize(){
function initialize(fbAppID){
var dialogBindings = {
'beforeShow' : beforeShow,
'afterHide': afterHide
};
app.bindDialog('inviteUsers', dialogBindings);
callFB(fbAppID);
};
this.initialize = initialize;
this.showEmailDialog = showEmailDialog;
this.showGoogleDialog = showGoogleDialog;
@ -228,4 +278,4 @@
}
return this;
})(window,jQuery);
})(window,jQuery);

View File

@ -522,6 +522,11 @@
invitationDialog.showGoogleDialog();
return false;
});
$('#sidebar-div .btn-facebook-invitation').click(function(evt) {
invitationDialog.showFacebookDialog(evt);
return false;
});
}
function registerFriendUpdate() {

View File

@ -98,16 +98,14 @@
</div>
<div class="right mt5 ml5">E-mail</div>
</div>
<!--
<div class="left mr20">
<div class="left">
<a id="btn-facebook-invitation">
<a class="btn-facebook-invitation">
<%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %>
</a>
</div>
<div class="right mt5 ml5">Facebook</div>
</div>
-->
<!-- <div class="left mr20">
<div class="left">
<a href="/#/createSession" title="This feature is not yet available.">

View File

@ -1,214 +1,222 @@
<div id="sidebar-div" layout="sidebar" class="sidebar" style="display:none;">
<div layout-sidebar-expander="visible" class="expander visible">
<p>
<%= image_tag "sidebar/expand_arrows_right.jpg" %>
</p>
</div>
<div layout-sidebar-expander="hidden" class="expander hidden">
<p>
<%= image_tag "sidebar/expand_arrows_left.jpg" %>
</p>
</div>
<div layout-sidebar-expander="visible" class="expander visible">
<p>
<%= image_tag "sidebar/expand_arrows_right.jpg" %>
</p>
</div>
<div layout-sidebar-expander="hidden" class="expander hidden">
<p>
<%= image_tag "sidebar/expand_arrows_left.jpg" %>
</p>
</div>
<!-- Search Box -->
<div class="search">
<div layout-panel="header" class="panel-header">
<h2>search</h2>
<!-- Search Box -->
<div class="search">
<div layout-panel="header" class="panel-header">
<h2>search</h2>
</div>
<div class="searchbox">
<form id="searchForm">
<input id="search-input" autocomplete="off" type="text" name="search" placeholder="enter search terms" />
</form>
<div id="sidebar-search-header" style="margin: 4px 4px 8px 8px">
<div class="left">
<strong><a id="sidebar-search-expand" style="color:#fff; text-decoration:underline">&laquo;&nbsp;EXPAND</a></strong>
</div>
<div class="searchbox">
<form id="searchForm">
<input id="search-input" autocomplete="off" type="text" name="search" placeholder="enter search terms" />
</form>
<div id="sidebar-search-header" style="margin: 4px 4px 8px 8px">
<!-- search filter dropdown -->
<div class="right">
Show:&nbsp;<%= select_tag(Search::SEARCH_TEXT_TYPE_ID, options_for_select(Search::SEARCH_TEXT_TYPES.collect { |ii| [ii.to_s.titleize, ii] })) %>
</div>
</div>
</div>
<div style="clear:both;"></div><br />
<!-- border between header and beginning of search results -->
<div class="sidebar-search-result"></div>
<div id="sidebar-search-results" class="results-wrapper">
</div>
</div>
<!-- Friends -->
<div layout="panel" layout-id="panelFriends">
<div layout-panel="collapsed">
F
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>friends<div id="sidebar-friend-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul id="sidebar-friend-list">
<li class="invite-friend-row">
<div class="friend-name">
Invite More Friends
</div>
<br clear="all"/>
<div class="invitation-button-holder">
<div class="left mr20">
<div class="left">
<strong><a id="sidebar-search-expand" style="color:#fff; text-decoration:underline">&laquo;&nbsp;EXPAND</a></strong>
<a class="btn-email-invitation">
<%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>
</a>
</div>
<!-- search filter dropdown -->
<div class="right">
Show:&nbsp;<%= select_tag(Search::SEARCH_TEXT_TYPE_ID, options_for_select(Search::SEARCH_TEXT_TYPES.collect { |ii| [ii.to_s.titleize, ii] })) %>
<div class="right mt5 ml5">E-mail</div>
</div>
<div class="left left">
<div class="left">
<a class="btn-gmail-invitation">
<%= image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle") %>
</a>
</div>
</div>
</div>
<div style="clear:both;"></div><br />
<!-- border between header and beginning of search results -->
<div class="sidebar-search-result"></div>
<div id="sidebar-search-results" class="results-wrapper">
</div>
</div>
<!-- Friends -->
<div layout="panel" layout-id="panelFriends">
<div layout-panel="collapsed">
F
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>friends<div id="sidebar-friend-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul id="sidebar-friend-list">
<li class="invite-friend-row">
<div class="friend-name">
Invite More Friends
</div>
<br clear="all"/>
<div class="invitation-button-holder">
<div class="left mr20">
<div class="left">
<a class="btn-email-invitation">
<%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>
</a>
</div>
<div class="right mt5 ml5">E-mail</div>
</div>
<div class="left left">
<div class="left">
<a class="btn-gmail-invitation">
<%= image_tag("content/icon_google.png", :size => "24x24", :align => "absmiddle") %>
</a>
</div>
<div class="right mt5 ml5">Google+</div>
</div>
</div>
<br clear="all" />
</li>
</ul>
</div>
</div>
</div>
<!-- Chat -->
<div layout="panel" layout-id="panelChat">
<div layout-panel="collapsed">
C
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>chat<div id="sidebar-chat-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="panelcontents">
<!-- chat message input -->
<div class="chat-fixed">
<input id="chat-input" type="text" placeholder="enter message" /><br />
<!-- send to box -->
<div class="chat-select">Send to:
<select id="sidebar-chat-friend-list">
<option>Everyone</option>
<option>All Musicians</option>
<option>All Fans</option>
</select>
</div>
<div class="right mt5 ml5">Google+</div>
</div>
<div class="left left">
<div class="left">
<a class="btn-facebook-invitation">
<%= image_tag("content/icon_facebook.png", :size => "24x24", :align => "absmiddle") %>
</a>
</div>
<ul id="sidebar-chat-list">
</ul>
<div class="right mt5 ml5">Facebook</div>
</div>
</div>
</div>
<br clear="all" />
</li>
</ul>
</div>
</div>
</div>
<!-- Notifications -->
<div layout="panel" layout-id="panelNotifications">
<div layout-panel="collapsed">
N
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>notifications<div id="sidebar-notification-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul id="sidebar-notification-list">
</ul>
</div>
</div>
<!-- Chat -->
<div layout="panel" layout-id="panelChat">
<div layout-panel="collapsed">
C
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>chat<div id="sidebar-chat-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="panelcontents">
<!-- chat message input -->
<div class="chat-fixed">
<input id="chat-input" type="text" placeholder="enter message" /><br />
<!-- send to box -->
<div class="chat-select">Send to:
<select id="sidebar-chat-friend-list">
<option>Everyone</option>
<option>All Musicians</option>
<option>All Fans</option>
</select>
</div>
</div>
<ul id="sidebar-chat-list">
</ul>
</div>
</div>
</div>
<!-- Notifications -->
<div layout="panel" layout-id="panelNotifications">
<div layout-panel="collapsed">
N
</div>
<div layout-panel="expanded" class="panel expanded">
<div layout-panel="header" class="panel-header">
<h2>notifications<div id="sidebar-notification-count" class="badge">0</div></h2>
</div>
<div layout-panel="contents" class="panelcontents">
<ul id="sidebar-notification-list">
</ul>
</div>
</div>
</div>
</div>
<!-- Search result template -->
<script type="text/template" id="template-musicians-sidebar-search-result">
<div user-id="{userId}" class="sidebar-search-result">
<a class="avatar-small"><img src="{avatar_url}" /></a>
<div class="result-name"><a href="{profile_url}">{userName}</a><br />
<span class="result-location">{location}</span>
</div><br />
<a class="btn-connect-friend button-orange smallbutton right">CONNECT</a>
<br clear="all" />
</div>
<div user-id="{userId}" class="sidebar-search-result">
<a class="avatar-small"><img src="{avatar_url}" /></a>
<div class="result-name"><a href="{profile_url}">{userName}</a><br />
<span class="result-location">{location}</span>
</div><br />
<a class="btn-connect-friend button-orange smallbutton right">CONNECT</a>
<br clear="all" />
</div>
</script>
<script type="text/template" id="template-bands-sidebar-search-result">
<div band-id="{bandId}" class="sidebar-search-result">
<a class="avatar-small"><img src="{avatar_url}" /></a>
<div class="result-name"><a href="{band_url}">{bandName}</a><br />
<span class="result-location">{location}</span>
</div><br />
</div>
<div band-id="{bandId}" class="sidebar-search-result">
<a class="avatar-small"><img src="{avatar_url}" /></a>
<div class="result-name"><a href="{band_url}">{bandName}</a><br />
<span class="result-location">{location}</span>
</div><br />
</div>
</script>
<script type="text/template" id="template-fans-sidebar-search-result">
<div user-id="{userId}" class="sidebar-search-result">
<a class="avatar-small"><img src="{avatar_url}" /></a>
<div class="result-name"><a href="{profile_url}">{userName}</a><br />
<span class="result-location">{location}</span>
</div><br />
<br clear="all" />
</div>
<div user-id="{userId}" class="sidebar-search-result">
<a class="avatar-small"><img src="{avatar_url}" /></a>
<div class="result-name"><a href="{profile_url}">{userName}</a><br />
<span class="result-location">{location}</span>
</div><br />
<br clear="all" />
</div>
</script>
<!-- Friend panel template -->
<script type="text/template" id="template-friend-panel">
<li class="{cssClass}">
<div class="avatar-small"><img src="{avatar_url}" /></div>
<div class="friend-name">
{userName}<br/>
<span class="friend-status">
{status} {extra_info}
</span>
</div>
<div class="friend-icon">{info_image_url}</div>
<br clear="all" />
</li>
<li class="{cssClass}">
<div class="avatar-small"><img src="{avatar_url}" /></div>
<div class="friend-name">
{userName}<br/>
<span class="friend-status">
{status} {extra_info}
</span>
</div>
<div class="friend-icon">{info_image_url}</div>
<br clear="all" />
</li>
</script>
<!-- Friend request confirmation template -->
<script type="text/template" id="template-sidebar-invitation-sent">
<div user-id="{userId}" class="sidebar-search-connected">
<div style="margin-top:10px;">
<br />
<img src="/assets/content/icon_goodquality.png" width="16" height="16" />
<br />
<b>Invitation Sent!</b><br />
<a href="{profile_url}">View {first_name}&#39;s Profile</a>
</div>
<div user-id="{userId}" class="sidebar-search-connected">
<div style="margin-top:10px;">
<br />
<img src="/assets/content/icon_goodquality.png" width="16" height="16" />
<br />
<b>Invitation Sent!</b><br />
<a href="{profile_url}">View {first_name}&#39;s Profile</a>
</div>
</div>
</script>
<!-- Notification panel template -->
<script type="text/template" id="template-notification-panel">
<li notification-id="{notificationId}">
<div class="avatar-small"><img src="{avatar_url}" /></div>
<div class="note-text">
{text}
<em>({date})</em>
<div class="note-delete">
<a>
<img id="img-delete-notification" notification-id="{notificationId}" src="/assets/shared/icon_delete_sm.png" width="13" height="13" />
</a>
</div>
</div><br />
<div id="div-actions">
<a id="btn-notification-action" class="button-orange smallbutton right"></a>
</div>
<br/ >
<br clear="all" />
</li>
<li notification-id="{notificationId}">
<div class="avatar-small"><img src="{avatar_url}" /></div>
<div class="note-text">
{text}
<em>({date})</em>
<div class="note-delete">
<a>
<img id="img-delete-notification" notification-id="{notificationId}" src="/assets/shared/icon_delete_sm.png" width="13" height="13" />
</a>
</div>
</div><br />
<div id="div-actions">
<a id="btn-notification-action" class="button-orange smallbutton right"></a>
</div>
<br/ >
<br clear="all" />
</li>
</script>
<!-- Chat panel template -->
<script type="text/template" id="template-chat-panel">
<li>
<div class="avatar-small"><img src="{avatar_url}" /></div>
<div class="chat-text">
<strong>{label}:</strong>&nbsp;{text}
<em>({date})</em>
</div>
<br clear="all" />
</li>
<li>
<div class="avatar-small"><img src="{avatar_url}" /></div>
<div class="chat-text">
<strong>{label}:</strong>&nbsp;{text}
<em>({date})</em>
</div>
<br clear="all" />
</li>
</script>

View File

@ -45,6 +45,7 @@
<%= render "clients/banners/disconnected" %>
<%= render "overlay_small" %>
<%= render "help" %>
<div id="fb-root"></div>
<script type="text/javascript">
$(function() {
@ -95,7 +96,7 @@
var recordingManager = new JK.RecordingManager();
var invitationDialog = new JK.InvitationDialog(JK.app);
invitationDialog.initialize();
invitationDialog.initialize('<%= SampleApp::Application.config.facebook_key %>');
var localRecordingsDialog = new JK.LocalRecordingsDialog(JK.app);
localRecordingsDialog.initialize();