seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
web/app/assets/javascripts/invitationDialog.js
View File

@ -1,5 +1,4 @@
(function(context,$) { (function(context,$) {
"use strict"; "use strict";
context.JK = context.JK || {}; context.JK = context.JK || {};
context.JK.InvitationDialog = function(app) { 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"); window._oauth_win = window.open("/auth/google_login", "_blank", "height=500,width=500,menubar=no,resizable=no,status=no");
} }
//////////////
// FB handlers
function showFacebookDialog() { // Additional initialization code such as adding Event Listeners goes here
/* function handle_fblogin_response(response) {
$('#invitation-textarea-container').hide(); if (response.status === 'connected') {
$('#invitation-checkbox-container').show(); // the user is logged in and has authenticated your
$('#btn-send-invitation').hide(); // app, and response.authResponse supplies
$('#btn-next-invitation').show(); // the user's ID, a valid access token, a signed
invitationDialog.showDialog(); // request, and the time the access token
$('#invitation-checkboxes').html('<div style="text-align: center; margin-top: 100px;">Loading your contacts...</div>'); // and signed request each expire
*/ var uid = response.authResponse.userID;
window._oauth_callback = function() { var accessToken = response.authResponse.accessToken;
window._oauth_win.close(); window.fb_logged_in_state = "connected";
window._oauth_win = null; } else if (response.status === 'not_authorized') {
window._oauth_callback = null; // the user is logged in to Facebook,
/* // but has not authenticated your app
$.ajax({ // TODO: popup authorization dialog
type: "GET", window.fb_logged_in_state = "not_authorized";
url: "/gmail_contacts", }
success: function(response) { else {
$('#invitation-checkboxes').html(''); // the user isn't logged in to Facebook.
for (var i in response) { window.fb_logged_in_state = "not_logged_in";
$('#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");
} }
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() { function clearTextFields() {
$('#txt-emails').val('').removeData('google_invite_count'); $('#txt-emails').val('').removeData('google_invite_count');
$('#txt-message').val(''); $('#txt-message').val('');
@ -211,16 +260,17 @@
registerEvents(false); registerEvents(false);
} }
function initialize(){ function initialize(fbAppID){
var dialogBindings = { var dialogBindings = {
'beforeShow' : beforeShow, 'beforeShow' : beforeShow,
'afterHide': afterHide 'afterHide': afterHide
}; };
app.bindDialog('inviteUsers', dialogBindings); app.bindDialog('inviteUsers', dialogBindings);
callFB(fbAppID);
}; };
this.initialize = initialize; this.initialize = initialize;
this.showEmailDialog = showEmailDialog; this.showEmailDialog = showEmailDialog;
this.showGoogleDialog = showGoogleDialog; this.showGoogleDialog = showGoogleDialog;
@ -228,4 +278,4 @@
} }
return this; return this;
})(window,jQuery); })(window,jQuery);

5
web/app/assets/javascripts/sidebar.js
View File

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

4
web/app/views/clients/_createSession.html.erb
View File

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

362
web/app/views/clients/_sidebar.html.erb
View File

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

3
web/app/views/clients/index.html.erb
View File

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