* VRFS-1081 - restyle share dialog
This commit is contained in:
parent
4c39e45708
commit
caa565470d
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 <body> 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"
|
||||
|
|
|
|||
|
|
@ -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 = $('<div class="spinner spinner-large"></div>')
|
||||
$('#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;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,123 +1,55 @@
|
|||
<!-- Share dialog -->
|
||||
<div class="dialog share-overlay" layout="dialog" layout-id="share-dialog" id="share-dialog" style="width:800px; height:auto;">
|
||||
<div class="content-head"><h1>share this <span id="shareType"></span></h1></div>
|
||||
<div class="dialog-inner">
|
||||
<div class="right"> <a class="button-orange" layout-action="close">X CLOSE</a></div>
|
||||
<table class="w100">
|
||||
<tr>
|
||||
<td valign="top" width="45%" class="border-right"><h3 class="mb5">Share to Social Media:</h3>
|
||||
<div class="dialog share-overlay" layout="dialog" layout-id="share-dialog" id="share-dialog">
|
||||
<div class="content-head"><h1>share this <span id="shareType"></span></h1></div>
|
||||
<div class="dialog-inner">
|
||||
|
||||
<textarea class="w95 share-message" rows="3" placeholder="Add a Message..."></textarea><br />
|
||||
<div class="left share-options">
|
||||
<input type="checkbox" class="share-with-facebook"/>
|
||||
<%= image_tag "content/icon_facebook.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
|
||||
<input type="checkbox" class="share-with-twitter" />
|
||||
<%= image_tag "content/icon_twitter.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
|
||||
<input type="checkbox" class="share-with-google" />
|
||||
<%= image_tag "content/icon_google.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
|
||||
<div class="error-msg">Please select at least one</div>
|
||||
</div>
|
||||
<div class=" right mr10 mt5"><a class="button-orange dialog-share-button">SHARE</a></div>
|
||||
</td>
|
||||
<td valign="top" width="48%">
|
||||
<div class="ml10">
|
||||
<h3>Share a Link:</h3><br />
|
||||
<% unless true %>
|
||||
<%= "#{root_url}" %>
|
||||
<% end %><br/><br/>
|
||||
<div class="right"><a class="button-orange">COPY LINK</a></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr><td colspan=2 class="border-bottom"><br /><br /></td></tr>
|
||||
</table><br /><br />
|
||||
<table class="w100">
|
||||
<tr>
|
||||
<td valign="top" width="40%"><h3>Get a Widget:</h3>
|
||||
<!-- ########## Javascript code for widget ########## -->
|
||||
<textarea class="w95" rows="10">
|
||||
<!-- widget -->
|
||||
<div id="divWidgetCode" class="widget">
|
||||
<!-- header -->
|
||||
<div id="divWidgetCodeHeader" class="widget-header"><strong><span id="lblWidgetCodeType"></span></strong> by <span id="spnWidgetCodeArtistName"></span></div>
|
||||
<!-- start widget content -->
|
||||
<div class="widget-content">
|
||||
<!-- band avatar -->
|
||||
<div class="widget-avatar"><img id="imgWidgetCodeAvatar" alt=""/></div>
|
||||
<a href="javascript:void(0)" class="widget-pausebutton" title="pause"></a>
|
||||
<!-- song title -->
|
||||
<div class="widget-controls">
|
||||
<!-- timeline and controls -->
|
||||
<div class="w100">
|
||||
<!-- recording play controls -->
|
||||
<div class="recording-controls">
|
||||
<!-- playback position -->
|
||||
<div class="recording-position">
|
||||
<!-- start time -->
|
||||
<div class="recording-time">0:00</div>
|
||||
<!-- playback background & slider -->
|
||||
<div class="recording-playback">
|
||||
<div class="recording-slider"><img src="images/content/slider_playcontrols.png" width="5" height="16" /></div>
|
||||
</div>
|
||||
<!-- end time -->
|
||||
<div class="recording-time">4:59</div>
|
||||
</div>
|
||||
<!-- end playback position -->
|
||||
<!-- current playback time -->
|
||||
<div class="recording-current">1:23</div>
|
||||
</div>
|
||||
<!-- end recording play controls -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- band member avatars -->
|
||||
<div class="widget-social">
|
||||
<a href="#"><img src="images/content/icon_like.png" width="12" height="12" alt=""/> LIKE</a>
|
||||
<a href="#"><img class="space" src="images/content/icon_comment.png" width="12" height="12" alt=""/> COMMENT</a>
|
||||
<a href="#"><img class="space" src="images/content/icon_share.png" width="13" height="15" alt=""/> SHARE</a>
|
||||
</div>
|
||||
<!-- jamkazam branding -->
|
||||
<div class="widget-branding"><span id="spnWidgetCodeBranding"></span> on
|
||||
<a href="http://jamkazam.com"><img src="images/shared/jk_logo_small.png" alt="" width="142" height="26" align="absbottom"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end widget content -->
|
||||
</div>
|
||||
<!-- /widget -->
|
||||
</textarea> <br /><br />
|
||||
<div class="right"><a class="button-orange mr10">COPY WIDGET CODE</a></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="ml10">Preview:
|
||||
<!-- recording widget -->
|
||||
<div id="divWidgetPreview" class="widget">
|
||||
<!-- header -->
|
||||
<div id="divWidgetPreviewHeader" class="widget-header"><strong><span id="lblWidgetPreviewType"></span></strong> by <span id="spnWidgetPreviewArtistName"></span></div>
|
||||
<!-- start widget content -->
|
||||
<div class="widget-content">
|
||||
<!-- band avatar -->
|
||||
<div class="widget-avatar"><img id="imgWidgetPreviewAvatar" src="" alt=""/></div>
|
||||
<a href="javascript:void(0)" class="widget-playbutton" title="play"></a>
|
||||
|
||||
<!-- song title -->
|
||||
<div id="divWidgetPreviewTitle" class="widget-title"></div>
|
||||
|
||||
<!-- avatars -->
|
||||
<div class="widget-members"></div>
|
||||
<div class="right"><a class="button-orange" layout-action="close">X CLOSE</a></div>
|
||||
<br clear="both" />
|
||||
|
||||
<!-- jamkazam branding -->
|
||||
<div class="widget-branding"><span id="spnWidgetPreviewBranding"></span> on
|
||||
<a href=<%= "#{root_url}" %>>
|
||||
<%= image_tag "shared/jk_logo_small.png", :size => "142x26", :align => "absbottom", :alt => "" %>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end widget content -->
|
||||
</div>
|
||||
<!-- /widget -->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="share-to-social-media border-bottom">
|
||||
|
||||
<h3 class="mb5">Share to Social Media:</h3>
|
||||
|
||||
<textarea class="share-message" rows="4" placeholder="Add a Message..."></textarea><br/>
|
||||
|
||||
<div class="share-options left">
|
||||
<span class="share-with-facebook">
|
||||
<input type="checkbox" disabled="disabled"/>
|
||||
<%= image_tag "content/icon_facebook.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
|
||||
<a href="#" class="authorize">(sign in)</a>
|
||||
</span>
|
||||
<span class="share-with-twitter">
|
||||
<input type="checkbox" disabled="disabled"/>
|
||||
<%= image_tag "content/icon_twitter.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
|
||||
<a href="#" class="authorize">(sign in)</a>
|
||||
</span>
|
||||
|
||||
<!--
|
||||
<div class="share-with-google">
|
||||
<input type="checkbox" disabled="disabled" />
|
||||
<%= image_tag "content/icon_google.png", :size => "24x24", :align => "absmiddle", :alt => "", :style => "vertical-align:middle" %>
|
||||
</div>-->
|
||||
|
||||
<div class="error-msg">Please select at least one</div>
|
||||
</div>
|
||||
<div class="share-button-holder"><a class="button-orange dialog-share-button">SHARE</a></div>
|
||||
<br clear="both" />
|
||||
</div>
|
||||
|
||||
<div class="share-link">
|
||||
<h3>Share a Link:</h3>
|
||||
<div class="link-contents">
|
||||
<% unless true %>
|
||||
<%= "#{root_url}" %>
|
||||
<% end %>
|
||||
http://www.jamkazam.com/SOUt2Az
|
||||
</div>
|
||||
|
||||
<div class="right"><a class="button-orange">COPY LINK</a></div>
|
||||
</div>
|
||||
|
||||
<!-- contains syndication widget code -->
|
||||
<% #render 'shareDialogUnused' %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
<table class="w100">
|
||||
<tr>
|
||||
<td valign="top" width="40%"><h3>Get a Widget:</h3>
|
||||
<!-- ########## Javascript code for widget ########## -->
|
||||
<textarea class="w95" rows="10">
|
||||
<!-- widget -->
|
||||
<div id="divWidgetCode" class="widget">
|
||||
<!-- header -->
|
||||
<div id="divWidgetCodeHeader" class="widget-header"><strong><span id="lblWidgetCodeType"></span></strong> by <span id="spnWidgetCodeArtistName"></span></div>
|
||||
<!-- start widget content -->
|
||||
<div class="widget-content">
|
||||
<!-- band avatar -->
|
||||
<div class="widget-avatar"><img id="imgWidgetCodeAvatar" alt=""/></div>
|
||||
<a href="javascript:void(0)" class="widget-pausebutton" title="pause"></a>
|
||||
<!-- song title -->
|
||||
<div class="widget-controls">
|
||||
<!-- timeline and controls -->
|
||||
<div class="w100">
|
||||
<!-- recording play controls -->
|
||||
<div class="recording-controls">
|
||||
<!-- playback position -->
|
||||
<div class="recording-position">
|
||||
<!-- start time -->
|
||||
<div class="recording-time">0:00</div>
|
||||
<!-- playback background & slider -->
|
||||
<div class="recording-playback">
|
||||
<div class="recording-slider"><img src="images/content/slider_playcontrols.png" width="5" height="16" /></div>
|
||||
</div>
|
||||
<!-- end time -->
|
||||
<div class="recording-time">4:59</div>
|
||||
</div>
|
||||
<!-- end playback position -->
|
||||
<!-- current playback time -->
|
||||
<div class="recording-current">1:23</div>
|
||||
</div>
|
||||
<!-- end recording play controls -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- band member avatars -->
|
||||
<div class="widget-social">
|
||||
<a href="#"><img src="images/content/icon_like.png" width="12" height="12" alt=""/> LIKE</a>
|
||||
<a href="#"><img class="space" src="images/content/icon_comment.png" width="12" height="12" alt=""/> COMMENT</a>
|
||||
<a href="#"><img class="space" src="images/content/icon_share.png" width="13" height="15" alt=""/> SHARE</a>
|
||||
</div>
|
||||
<!-- jamkazam branding -->
|
||||
<div class="widget-branding"><span id="spnWidgetCodeBranding"></span> on
|
||||
<a href="http://jamkazam.com"><img src="images/shared/jk_logo_small.png" alt="" width="142" height="26" align="absbottom"/></a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end widget content -->
|
||||
</div>
|
||||
<!-- /widget -->
|
||||
</textarea> <br /><br />
|
||||
<div class="right"><a class="button-orange mr10">COPY WIDGET CODE</a></div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="ml10">Preview:
|
||||
<!-- recording widget -->
|
||||
<div id="divWidgetPreview" class="widget">
|
||||
<!-- header -->
|
||||
<div id="divWidgetPreviewHeader" class="widget-header"><strong><span id="lblWidgetPreviewType"></span></strong> by <span id="spnWidgetPreviewArtistName"></span></div>
|
||||
<!-- start widget content -->
|
||||
<div class="widget-content">
|
||||
<!-- band avatar -->
|
||||
<div class="widget-avatar"><img id="imgWidgetPreviewAvatar" src="" alt=""/></div>
|
||||
<a href="javascript:void(0)" class="widget-playbutton" title="play"></a>
|
||||
|
||||
<!-- song title -->
|
||||
<div id="divWidgetPreviewTitle" class="widget-title"></div>
|
||||
|
||||
<!-- avatars -->
|
||||
<div class="widget-members"></div>
|
||||
|
||||
<!-- jamkazam branding -->
|
||||
<div class="widget-branding"><span id="spnWidgetPreviewBranding"></span> on
|
||||
<a href=<%= "#{root_url}" %>>
|
||||
<%= image_tag "shared/jk_logo_small.png", :size => "142x26", :align => "absbottom", :alt => "" %>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end widget content -->
|
||||
</div>
|
||||
<!-- /widget -->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
@ -56,6 +56,7 @@
|
|||
<%= render "clients/invitationDialog" %>
|
||||
<%= render "users/signupDialog" %>
|
||||
<%= render "users/signinDialog" %>
|
||||
<%= yield(:extra_dialogs) %>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
<% end %>
|
||||
|
||||
JK.app = JK.JamKazam();
|
||||
JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false}});
|
||||
JK.app.initialize({inClient: false, layoutOpts: {layoutFooter: false, sizeOverlayToContent: true}});
|
||||
|
||||
var facebookHelper = new JK.FacebookHelper(JK.app);
|
||||
JK.FacebookHelperInstance = facebookHelper;
|
||||
|
|
|
|||
|
|
@ -89,7 +89,9 @@
|
|||
|
||||
<%= javascript_include_tag "web/sessions" %>
|
||||
|
||||
<%= render :partial => "clients/shareDialog", :locals => {:session => @music_session} %>
|
||||
<% content_for :extra_dialogs do %>
|
||||
<%= render :partial => "clients/shareDialog", :locals => {:session => @music_session} %>
|
||||
<% end %>
|
||||
|
||||
<% content_for :extra_js do %>
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -89,7 +89,9 @@
|
|||
|
||||
<%= javascript_include_tag "web/recordings" %>
|
||||
|
||||
<%= render :partial => "clients/shareDialog", :locals => {:recording => @claimed_recording, :share_token => @claimed_recording.share_token} %>
|
||||
<% content_for :extra_dialogs do %>
|
||||
<%= render :partial => "clients/shareDialog", :locals => {:recording => @claimed_recording, :share_token => @claimed_recording.share_token} %>
|
||||
<% end %>
|
||||
|
||||
<% content_for :extra_js do %>
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
Loading…
Reference in New Issue