-
Notifications
You must be signed in to change notification settings - Fork 222
/
collab.html
105 lines (92 loc) · 4.21 KB
/
collab.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!doctype html>
<!-- See http://www.firepad.io/docs/ for detailed embedding docs. -->
<html>
<head>
<title>Doc</title>
<script src='/everypage.js'></script>
<link rel="shortcut icon" href="Docs.png" type="image/x-icon" />
<meta charset="utf-8" />
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/5.5.4/firebase.js"></script>
<!-- CodeMirror -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.css" />
<!-- Firepad -->
<link rel="stylesheet" href="https://firepad.io/releases/v1.5.9/firepad.css" />
<script src="https://firepad.io/releases/v1.5.9/firepad.min.js"></script>
<style>
html { height: 100%; }
body { margin: 0; height: 100%; position: relative; }
/* Height / width / positioning can be customized for your use case.
For demo purposes, we make firepad fill the entire browser. */
#firepad-container {
width: 100%;
height: 100%;
}
</style>
</head>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>.popup{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup .popuptext{visibility:hidden;width:160px;background-color:#555;color:#fff;text-align:center;border-radius:6px;padding:8px 0;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-80px}.popup .popuptext::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#555 transparent transparent transparent}.popup .show{visibility:visible;-webkit-animation:fadeIn 1s;animation:fadeIn 1s}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}</style>
</head>
<body onload="init()">
<script src="load.js"></script>
<h1>Collaborative Docs</h1>
<a href='https://mountain-game.human456.repl.co/docs.html'>Back to Join Room Page</a>
<script>
var input = document.getElementById("myInput");
input.value = window.location.href;
function copiedEffect() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
var a=document.getElementById("myPopup");a.classList.toggle("show");setInterval(function(){a.style.display="none"},1500)
}
</script>
<div id="firepad-container"></div>
<script>
function init() {
//// Initialize Firebase.
//// TODO: replace with your Firebase project configuration.
var config = {
apiKey: '<API_KEY>',
authDomain: "firepad-gh-tests.firebaseapp.com",
databaseURL: "https://firepad-gh-tests.firebaseio.com"
};
firebase.initializeApp(config);
//// Get Firebase Database reference.
var firepadRef = getExampleRef();
//// Create CodeMirror (with lineWrapping on).
var codeMirror = CodeMirror(document.getElementById('firepad-container'), { lineWrapping: true });
//// Create Firepad (with rich text toolbar and shortcuts enabled).
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
{ richTextToolbar: true, richTextShortcuts: true });
//// Initialize contents.
firepad.on('ready', function() {
if (firepad.isHistoryEmpty()) {
firepad.setHtml('<span style="font-size: 24px;">Start Typing in <span style="color: red">Doc!</span></span><br/><br/>\n');
}
});
}
// Helper to get hash from end of URL or generate a random one.
function getExampleRef() {
var ref = firebase.database().ref();
var hash = window.location.hash.replace(/#/g, '');
if (hash) {
ref = ref.child(hash);
} else {
ref = ref.push(); // generate unique location.
window.location = window.location + '#' + ref.key+'DOCS'; // add it as a hash to the URL.
}
if (typeof console !== 'undefined') {
console.log('Firebase data: ', ref.toString());
}
return ref;
}
</script>
</body>
</html>