Add clipboard.js and copy URL button

This commit is contained in:
Alan Friedman 2016-01-08 19:44:05 -05:00
parent 171b844e98
commit c7da826cc5
2 changed files with 26 additions and 4 deletions

View File

@ -94,7 +94,13 @@ $(function() {
// Log a message
function log (message, options) {
var $el = $('<li>').addClass('log').text(message);
var html = options && options.html === true || false;
var $el;
if (html) {
$el = $('<li>').addClass('log').html(message);
} else {
$el = $('<li>').addClass('log').text(message);
}
addMessageElement($el, options);
}
@ -244,9 +250,10 @@ $(function() {
socket.on('login', function (data) {
connected = true;
// Display the welcome message
var message = "Fatty.chat - Anonymous Chat - Room ID: " + roomId.replace('/', '');
var message = "Fatty.chat - Anonymous Chat - Room ID: " + roomId.replace('/', '') + '&nbsp;&nbsp;<button class="btn btn-default btn-xs copyable" data-clipboard-text="https://fatty.chat' + roomId + '">Copy link to share</button>';
log(message, {
prepend: true
prepend: true,
html: true
});
message = "This chatroom is destroyed after all participants exit. Chat history is client side only and not persistent.";
@ -291,4 +298,18 @@ $(function() {
$('#key-modal').modal('show');
});
var clipboard = new Clipboard('.copyable');
clipboard.on('success', function(e) {
$(e.trigger).tooltip({
title: 'Copied!',
trigger: 'manual',
placement: 'auto'
});
$(e.trigger).tooltip('show');
setTimeout(function() {
$(e.trigger).tooltip('hide');
}, 2000);
});
});

View File

@ -4,9 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>FattyChat - Anonomous Chat</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<script>
window.username = '{{username}}';
</script>
@ -46,6 +46,7 @@
<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha3.js"></script>
<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/aes.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.5/clipboard.min.js"></script>
<script src="/main.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){