diff --git a/web/app/assets/javascripts/facebook_helper.js b/web/app/assets/javascripts/facebook_helper.js index 8411e8880..7c6db00e2 100644 --- a/web/app/assets/javascripts/facebook_helper.js +++ b/web/app/assets/javascripts/facebook_helper.js @@ -12,7 +12,7 @@ if(connected) { // instantly return previous login info - //return loginStatusDeferred; + return loginStatusDeferred; } loginStatusDeferred = $.Deferred(); @@ -26,6 +26,8 @@ function handle_fblogin_response(response) { + console.log("facebook login response: status=" + response.status) + if(response.status == "connected") { connected = true; } @@ -45,7 +47,7 @@ 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 + oauth : true // enable OAuth 2.0 }); // listen to see if the user is known/logged in diff --git a/web/app/assets/javascripts/layout.js b/web/app/assets/javascripts/layout.js index 70e6cbc91..4a8e45d2c 100644 --- a/web/app/assets/javascripts/layout.js +++ b/web/app/assets/javascripts/layout.js @@ -41,7 +41,8 @@ gridOuterMargin: 6, // Outer margin on Grids (added to screenMargin if screen) gridPadding: 8, // Padding around grid cells. Added to outer margin. animationDuration: 400, - allowBodyOverflow: false // Allow tests to disable the body-no-scroll policy + allowBodyOverflow: false, // Allow tests to disable the body-no-scroll policy + sizeOverlayToContent: false // if true, use the size of tag to decide overlay size everytime overlay is shown. should be used in non-client settings }; var width = $(context).width(); @@ -522,6 +523,15 @@ function showDialog(dialog) { if(!dialogEvent(dialog, 'beforeShow')) {return;} var $overlay = $('.dialog-overlay') + + if(opts.sizeOverlayToContent) { + var $body = $('body') + $('.dialog-overlay').css({ + width: $body.width() + 'px', + height: $body.height() + 'px' + }); + } + $overlay.show(); centerDialog(dialog); var $dialog = $('[layout-id="' + dialog + '"]'); @@ -532,6 +542,7 @@ function centerDialog(dialog) { var $dialog = $('[layout-id="' + dialog + '"]'); + console.log("$dialog.width, height", $dialog.width(), $dialog.height()) $dialog.css({ left: width/2 - ($dialog.width()/2) + "px", top: height/2 - ($dialog.height()/2) + "px" diff --git a/web/app/assets/javascripts/shareDialog.js b/web/app/assets/javascripts/shareDialog.js index b7710ab66..efe69f037 100644 --- a/web/app/assets/javascripts/shareDialog.js +++ b/web/app/assets/javascripts/shareDialog.js @@ -7,6 +7,7 @@ var rest = context.JK.Rest(); var facebookRest = context.JK.FacebookRest(); var facebookHelper = null; + var dialogId = '#share-dialog'; var textMap = { LIVE_SESSION: "LIVE SESSION", @@ -16,15 +17,15 @@ }; function showSpinner() { - $('#share-dialog .dialog-inner').hide(); + $(dialogId + ' .dialog-inner').hide(); var spinner = $('') - $('#share-dialog .content-head').after(spinner); + $(dialogId + ' .content-head').after(spinner); } function hideSpinner() { - $('#share-dialog .spinner').remove(); - $('#share-dialog .dialog-inner').show(); + $(dialogId + ' .spinner').remove(); + $(dialogId + ' .dialog-inner').show(); } @@ -147,19 +148,24 @@ } function socialShare() { - var shareWithFacebook = $('.share-with-facebook').is(':checked'); - var shareWithGoogle = $('.share-with-google').is(':checked'); - var shareWithTwitter = $('.share-with-twitter').is(':checked'); + var facebookCheckbox = $(dialogId + ' .share-with-facebook input'); + var shareWithFacebook = facebookCheckbox.is(':checked') && !facebookCheckbox.is(':disabled'); + + var googleCheckbox = $(dialogId + ' .share-with-google input'); + var shareWithGoogle = googleCheckbox.is(':checked') && !googleCheckbox.is(':disabled'); + + var twitterCheckbox = $(dialogId + ' .share-with-twitter input'); + var shareWithTwitter = twitterCheckbox.is(':checked') && !twitterCheckbox.is(':disabled'); if(!shareWithFacebook && !shareWithGoogle && !shareWithTwitter) { - $('.share-options').addClass('error') + $(dialogId + ' .share-options').addClass('error') return; } else { - $('.share-options').removeClass('error') + $(dialogId + ' .share-options').removeClass('error') } - var message = $('.share-message').val(); + var message = $(dialogId + ' .share-message').val(); if(!message) { message = undefined; } showSpinner(); @@ -200,12 +206,38 @@ hideSpinner(); }); } - function registerEvents(onOff) { - $('.dialog-share-button').unbind('click').click(function(e){ + function enableFacebook() { + $(dialogId + ' .share-with-facebook input').removeAttr('disabled') + $(dialogId + ' .share-with-facebook a').css('visibility', 'hidden'); + } + + function disableFacebook() { + $(dialogId + ' .share-with-facebook input').attr('disabled', 'disabled') + $(dialogId + ' .share-with-facebook a').css('visibility', 'visible'); + } + + function handleFbStateChange(response) { + + if(response && response.status == "connected") + { + enableFacebook(); + } + else + { + disableFacebook(); + } + } + function registerEvents(onOff) { + $(dialogId + ' .dialog-share-button').unbind('click').click(function(e){ socialShare(); return false; }); + + $(dialogId + ' .share-with-facebook a').unbind('click').click(function(e) { + facebookHelper.promptLogin(); + return false; + }) } function showDialog() { @@ -278,7 +310,7 @@ } function beforeShow() { - $('.share-options').removeClass('error'); + $(dialogId + ' .share-options').removeClass('error'); registerEvents(true); } @@ -296,7 +328,12 @@ }; app.bindDialog('share-dialog', dialogBindings); + initDialog(); + + $(facebookHelper).on('fb.login_response', function(e, data) { + handleFbStateChange(data.response); + }) }; this.initialize = initialize; diff --git a/web/app/assets/javascripts/web/sessions.js b/web/app/assets/javascripts/web/sessions.js index 8cb1d8697..23559a930 100644 --- a/web/app/assets/javascripts/web/sessions.js +++ b/web/app/assets/javascripts/web/sessions.js @@ -41,6 +41,8 @@ var shareDialog = new JK.ShareDialog(context.JK.app, sessionId, "session"); shareDialog.initialize(context.JK.FacebookHelperInstance); + // shareDialog.showDialog(); + $("#btnShare").click(function(e) { shareDialog.showDialog(); }); diff --git a/web/app/assets/stylesheets/client/shareDialog.css.scss b/web/app/assets/stylesheets/client/shareDialog.css.scss index 01a3294b4..1def7d2c7 100644 --- a/web/app/assets/stylesheets/client/shareDialog.css.scss +++ b/web/app/assets/stylesheets/client/shareDialog.css.scss @@ -1,219 +1,259 @@ -body.widgets { - background:#fff; - padding:20px; -} +#share-dialog { -h3 { - font-size:20px; - font-weight:normal; -} + width:500px; -.share-overlay { + .button-orange { + margin:0 2px 0 0; + } -} + body.widgets { + background: #fff; + padding: 20px; + } -td { - vertical-align:top !important; -} + h3 { + font-size: 20px; + font-weight: normal; + } -.widget { - width:430px; - height:180px; - background:#353535; - border:solid 1px; - text-align:left; -} + .share-overlay { -.widget.session { - border-color:#0b6672; -} + } -.widget.recording { - border-color:#ed3618; -} + .share-to-social-media { + margin-bottom: 20px; + padding-bottom: 20px; -.widget-header { - color:#fff; - font-size:17px; - padding:8px; -} + .share-button-holder { + float: right; + margin-top: 5px; + } -.widget-content { - width:100%; - color:#ccc; - position:relative; -} + .share-message { + width: 100%; + padding:0; + margin:0 0 10px 0; + } + } -.widget-avatar { - top:15px; - left:15px; - position:absolute; - padding:2px; - width:110px; - height:110px; - background-color:#ed3618; - -webkit-border-radius:57px; - -moz-border-radius:57px; - border-radius:57px; - margin-bottom:10px; -} + .widget { + width: 430px; + height: 180px; + background: #353535; + border: solid 1px; + text-align: left; + } -.widget-avatar img { - width:110px; - height:110px; - -webkit-border-radius:55px; - -moz-border-radius:55px; - border-radius:55px; -} + .widget.session { + border-color: #0b6672; + } -.widget-playbutton { - position:absolute; - top:55px; - left:55px; - width:35px; - height:31px; - background-image:url(../shared/play_button.png); - background-repeat:no-repeat; -} + .widget.recording { + border-color: #ed3618; + } -.widget-pausebutton { - position:absolute; - top:55px; - left:55px; - width:35px; - height:31px; - background-image:url(../shared/pause_button.png); - background-repeat:no-repeat; -} + .widget-header { + color: #fff; + font-size: 17px; + padding: 8px; + } -.widget-title { - font-size:18px; - position:absolute; - top:20px; - left:153px; - width:260px; - height:22px; - overflow:hidden; - white-space:nowrap; - text-overflow:ellipsis; -} + .widget-content { + width: 100%; + color: #ccc; + position: relative; + } -.widget-description { - font-size:13px; - position:absolute; - top:15px; - left:153px; - width:260px; - height:32px; - overflow:hidden; - text-overflow:ellipsis; -} + .widget-avatar { + top: 15px; + left: 15px; + position: absolute; + padding: 2px; + width: 110px; + height: 110px; + background-color: #ed3618; + -webkit-border-radius: 57px; + -moz-border-radius: 57px; + border-radius: 57px; + margin-bottom: 10px; + } -.widget-controls { - position:absolute; - top:25px; - left:153px; - width:270px; - height:32px; -} + .widget-avatar img { + width: 110px; + height: 110px; + -webkit-border-radius: 55px; + -moz-border-radius: 55px; + border-radius: 55px; + } -.widget-members { - position:absolute; - left:153px; - top:60px; - width:280px; - height:38px; - overflow:hidden; -} + .widget-playbutton { + position: absolute; + top: 55px; + left: 55px; + width: 35px; + height: 31px; + background-image: url(../shared/play_button.png); + background-repeat: no-repeat; + } -.widget-social { - position:absolute; - top:75px; - left:153px; - width:270px; - height:20px; - font-size:13px; -} + .widget-pausebutton { + position: absolute; + top: 55px; + left: 55px; + width: 35px; + height: 31px; + background-image: url(../shared/pause_button.png); + background-repeat: no-repeat; + } -.widget-branding { + .widget-title { + font-size: 18px; + position: absolute; + top: 20px; + left: 153px; + width: 260px; + height: 22px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .widget-description { + font-size: 13px; + position: absolute; + top: 15px; + left: 153px; + width: 260px; + height: 32px; + overflow: hidden; + text-overflow: ellipsis; + } + + .widget-controls { + position: absolute; + top: 25px; + left: 153px; + width: 270px; + height: 32px; + } + + .widget-members { + position: absolute; + left: 153px; + top: 60px; + width: 280px; + height: 38px; + overflow: hidden; + } + + .widget-social { + position: absolute; + top: 75px; + left: 153px; + width: 270px; + height: 20px; + font-size: 13px; + } + + .widget-branding { position: absolute; top: 110px; right: 8px; width: 270px; height: 34px; font-size: 13px; - text-align:right; -} + text-align: right; + } -.widget .recording-controls { - margin-top:0px; - height:22px; - padding:8px 5px; -} + .widget .recording-controls { + margin-top: 0px; + height: 22px; + padding: 8px 5px; + } -.widget .recording-playback { - width:65%; -} + .widget .recording-playback { + width: 65%; + } -.widget .recording-position { - margin-left:-30px; - width:95%; -} + .widget .recording-position { + margin-left: -30px; + width: 95%; + } -.widget .recording-current { - top:8px; -} + .widget .recording-current { + top: 8px; + } -.widget a { - color:#ccc; - text-decoration:none; -} + .widget a { + color: #ccc; + text-decoration: none; + } -img.space { - margin-left:28px; -} + img.space { + margin-left: 28px; + } -.widget a:hover { - color:#fff; -} + .widget a:hover { + color: #fff; + } -.widget-avatar-small { - float:left; - padding:1px; - width: 36px; - height:36px; - background-color:#ed3618; - -webkit-border-radius:18px; - -moz-border-radius:18px; - border-radius:18px; - margin-right:15px; -} - -.widget-avatar-small img { + .widget-avatar-small { + float: left; + padding: 1px; width: 36px; height: 36px; - -webkit-border-radius:18px; - -moz-border-radius:18px; - border-radius:18px; -} - -.share-options { - .error-msg { - display:none; - margin-top:10px; - text-align:center; - color:#F00; - font-size:11px; + background-color: #ed3618; + -webkit-border-radius: 18px; + -moz-border-radius: 18px; + border-radius: 18px; + margin-right: 15px; } -} -.share-options.error { + .widget-avatar-small img { + width: 36px; + height: 36px; + -webkit-border-radius: 18px; + -moz-border-radius: 18px; + border-radius: 18px; + } + + .share-options { + .error-msg { + display: none; + margin-top: 10px; + text-align: center; + color: #F00; + font-size: 11px; + } + + img { + margin-right:1px; + } + + a { + font-size:12px; + margin-right:15px; + } + } + + .share-options.error { background-color: #330000; border: 1px solid #990000; - padding:4px; + padding: 4px; - .error-msg { - display:block; + .error-msg { + display: block; + } } -} + + .share-link { + h3 { + margin-bottom:20px; + } + + .link-contents { + margin-bottom:20px; + } + } +} \ No newline at end of file diff --git a/web/app/assets/stylesheets/web/main.css.scss b/web/app/assets/stylesheets/web/main.css.scss index 857db6242..657143247 100644 --- a/web/app/assets/stylesheets/web/main.css.scss +++ b/web/app/assets/stylesheets/web/main.css.scss @@ -1,18 +1,20 @@ html { - height:100%; + min-height:100%; } p, div { white-space: normal; } + body.web { background-repeat: repeat-x; margin:0 !important; padding:0 !important; position:relative !important; - overflow: visible !important; + overflow: auto !important; width:auto !important; + min-height:100%; div.wrapper { width:1100px; diff --git a/web/app/views/clients/_shareDialog.html.erb b/web/app/views/clients/_shareDialog.html.erb index fd8b763cf..531221816 100644 --- a/web/app/views/clients/_shareDialog.html.erb +++ b/web/app/views/clients/_shareDialog.html.erb @@ -1,123 +1,55 @@ -
-

share this

-
-
X CLOSE
- - - - - - -

Share to Social Media:

+		 -
-

Share a Link:


- <% unless true %> - <%= "#{root_url}" %> - <% end %>

-
COPY LINK
-
-




- - - - - -

Get a Widget:

- -

-
COPY WIDGET CODE
- 		-
Preview: - - - -
-
+ + + + + + <% #render 'shareDialogUnused' %> +
diff --git a/web/app/views/clients/_shareDialogUnused.html.erb b/web/app/views/clients/_shareDialogUnused.html.erb new file mode 100644 index 000000000..7eb73a7ae --- /dev/null +++ b/web/app/views/clients/_shareDialogUnused.html.erb @@ -0,0 +1,87 @@ + + + + + +

Get a Widget:

+ +

+
COPY WIDGET CODE
+ 		+
Preview: + + + +
+
\ No newline at end of file diff --git a/web/app/views/layouts/web.erb b/web/app/views/layouts/web.erb index 83b57ca48..3d5fddd5d 100644 --- a/web/app/views/layouts/web.erb +++ b/web/app/views/layouts/web.erb @@ -56,6 +56,7 @@ <%= render "clients/invitationDialog" %> <%= render "users/signupDialog" %> <%= render "users/signinDialog" %> + <%= yield(:extra_dialogs) %>