Skip to content

Added copy to clipboard functionality #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dafenix wants to merge 6 commits into
base: gh-pages
Choose a base branch
from
Open

Added copy to clipboard functionality #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3c138ff
Added copy to clipboard functionality
Jun 19, 2024
3c4922a
Added logging pane. Fixed webRTC API calls which doesn't work anymore…
Jun 20, 2024
49b049e
Added visual feedback for copy button
Jun 20, 2024
dc1ffaa
Automated handshake for quick local testing
Jun 20, 2024
b55bfac
Added a timer to check in app sleep behaviour
Jun 24, 2024
47ef6a7
Modify offer for local connection usage
Jun 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
var common = (function () {
function fallback(text) {
const isIos = navigator.userAgent.match(/ipad|iphone/i);
const textarea = document.createElement('textarea');

// create textarea
textarea.value = text;

// ios will zoom in on the input if the font-size is < 16px
textarea.style.fontSize = '20px';
document.body.appendChild(textarea);

// select text
if (isIos) {
const range = document.createRange();
range.selectNodeContents(textarea);

const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textarea.setSelectionRange(0, 999999);
} else {
textarea.select();
}

// copy selection
document.execCommand('copy');

// cleanup
document.body.removeChild(textarea);
};

function copyFeedback() {
document.body.classList.add('filled');

setTimeout(function () {
document.body.classList.remove('filled');
}, 750);
}

function copyIntoClipboard(id) {
var elem = document.getElementById(id);
var text = '';
if (elem) {
text = elem.value;
if (!navigator.clipboard) {
fallback(text);
copyFeedback();
return;
}
navigator.clipboard.writeText(text);
copyFeedback();
}
};

return {
copyIntoClipboard: copyIntoClipboard
};
})();
143 changes: 122 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,133 @@
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Serverless webrtc demo</title>
<style>
html, body {padding:0;margin:0;height:100%}
iframe {display:block;width:50%;float:left;box-sizing:border-box;height:100%;border:1px solid #DBDBDB;border-left:0}
body {box-sizing:border-box;padding:50px 0 40px;color:#303030}
h1 {position:fixed;margin:0;line-height:50px;padding:0 15px;top:0;left:0;font-size:18px;width:100%;box-sizing:border-box}
h2 {position:fixed;margin:0;line-height:20px;padding:10px 15px;bottom:0;left:0;font-size:12px;font-weight:normal;width:100%;box-sizing:border-box;background:#f8f8f8}
#ok {color:#008C20; border: 1px solid #40A958; display:inline-block;padding:0 8px;margin-right:5px;}
#no {color:#BEBEBE;text-decoration:line-through}
a.header-logo-invertocat {float:right;margin-top:9px;padding-right:10px}
html,
body {
padding: 0;
margin: 0;
height: 100%
}

iframe {
display: block;
width: 50%;
float: left;
box-sizing: border-box;
height: 100%;
border: 1px solid #DBDBDB;
border-left: 0
}

body {
box-sizing: border-box;
padding: 50px 0 40px;
color: #303030
}

h1 {
position: fixed;
margin: 0;
line-height: 50px;
padding: 0 15px;
top: 0;
left: 0;
font-size: 18px;
width: 100%;
box-sizing: border-box
}

h2 {
position: fixed;
margin: 0;
line-height: 20px;
padding: 10px 15px;
bottom: 0;
left: 0;
font-size: 12px;
font-weight: normal;
width: 100%;
box-sizing: border-box;
background: #f8f8f8
}

#ok {
color: #008C20;
border: 1px solid #40A958;
display: inline-block;
padding: 0 8px;
margin-right: 5px;
}

#no {
color: #BEBEBE;
text-decoration: line-through
}

a.header-logo-invertocat {
float: right;
margin-top: 9px;
padding-right: 10px
}
</style>
</head>

<body>
<h1>
Serverless simple chat app by passing SDP @ WebRTC
<a class="header-logo-invertocat" href="https://github.com/owebio/serverless-webrtc-chat">
<svg aria-hidden="true" height="32" version="1.1" viewBox="0 0 16 16" width="32"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
</a>
</h1>
<iframe src="noserv.create.html"></iframe>
<iframe src="noserv.join.html"></iframe>
<div style="clear:both"></div>
<h2>
<span id="ok">OPERA, FIREFOX, CHROME</span> <span id="no">SAFARI, IE, IE-EDGE</span>
<div style="float:right">only html, javascript, css</div>
</h2>
<h1>
Serverless simple chat app by passing SDP @ WebRTC
<button type="button" onclick="localtest();">local test</button>
<a class="header-logo-invertocat" href="https://github.com/owebio/serverless-webrtc-chat">
<svg aria-hidden="true" height="32" version="1.1" viewBox="0 0 16 16" width="32">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
</h1>
<iframe id="iCreate" src="noserv.create.html"></iframe>
<iframe id="iJoin" src="noserv.join.html"></iframe>
<div style="clear:both"></div>
<h2>
<span id="ok">OPERA, FIREFOX, CHROME</span> <span id="no">SAFARI, IE, IE-EDGE</span>
<div style="float:right">only html, javascript, css</div>
</h2>
<script>
function waitFor(predicate, timeout) {
return new Promise((resolve, reject) => {
const check = () => {
if (!predicate()) return;
clearInterval(interval);
resolve();
};
const interval = setInterval(check, 100);
check();

if (!timeout) return;
setTimeout(() => {
clearInterval(interval);
reject();
}, timeout);
});
}
async function localtest() {
var iCreate = document.getElementById('iCreate');
var iCreateDoc = iCreate.contentDocument || iCreate.contentWindow.document;
var sdp = iCreateDoc.getElementById('creater-sdp').value;
var iJoin = document.getElementById('iJoin');
var iJoinDoc = iJoin.contentDocument || iJoin.contentWindow.document;
iJoinDoc.getElementById('creater-sdp').value = sdp;
iJoinDoc.getElementById('create').click();
await waitFor(() => iJoinDoc.getElementById('joiner-sdp').value !== '');
var joinerSdp = iJoinDoc.getElementById('joiner-sdp').value;
iCreateDoc.getElementById('joiner-sdp').value = joinerSdp;
iCreateDoc.getElementById('start').click();
}


</script>
</body>

</html>
Loading