miltonstatic5060.github.io/sharecode.html at master · MiltonStatic5060/miltonstatic5060.github.io · GitHub

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
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Firebase -->
  <script src="https://www.gstatic.com/firebasejs/3.3.0/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://cdn.firebase.com/libs/firepad/1.4.0/firepad.css" />
  <script src="https://cdn.firebase.com/libs/firepad/1.4.0/firepad.min.js"></script>
  <script src="https://codemirror.net/addon/runmode/colorize.js"></script>

  <!--<script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>-->

  <script src="/static/firepad-userlist.js"></script>
  <link rel="stylesheet" href="/static/firepad-userlist.css" />
</head>
<body onload="init()">

  <div id="fileCreation">
    <a>filename: </a><input id="textbox" type="text">
    <button id="create">Create Download</button><a download="downloadfile.txt" id="downloadlink" style="display: none">Download As File</a>
  </div>

  <div id="userlist"></div>
  <div id="firepad"></div>
  <script>
    var firepad = null;

      // Initialize Firebase.
      // TODO: replace with your Firebase project configuration.
      var config = {
        apiKey: "AIzaSyDZSwBwx-rQ2-dFJQ7cyVGOAbGSqDs9sUs",
        authDomain: "burning-notes-mhs-robot.firebaseapp.com",
        databaseURL: "https://burning-notes-mhs-robot.firebaseio.com"

      };
      firebase.initializeApp(config);
      // Create a random ID to use as our user ID (we must give this to firepad and FirepadUserList).
      var userId = Math.floor(Math.random() * 9999999999).toString();
      var firepadDiv = document.getElementById('firepad');
      var firepadRef = firebase.database().ref();
      var codeMirror = CodeMirror(firepadDiv, { lineWrapping: true , lineNumbers: true , });

      var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
          { richTextToolbar: true, richTextShortcuts: true, userId: userId});

      //// Create FirepadUserList (with our desired userId).
      var firepadUserList = FirepadUserList.fromDiv(firepadRef.child('users'),
          document.getElementById('userlist'), userId);


  </script>
  <style>
    html { height: 100%; }
    body { margin: 0; height: 100%; }
    /* Height / width / positioning can be customized for your use case.
       For demo purposes, we make the user list 175px and firepad fill the rest of the page. */
    #userlist {
      position: absolute; left: 0; top: 50px; bottom: 0; height: auto;
      width: 175px;
    }
    #firepad {
      position: absolute; left: 175px; top: 50px; bottom: 0; right: 0; height: auto;
    }
    .firepad {
      /*width: 700px;*/
      height: 500px;
      /*background-color: #f62; */ /* dark orange background */
    }

    /* Note: CodeMirror applies its own styles which can be customized in the same way.
     To apply a background to the entire editor, we need to also apply it to CodeMirror. */
    .CodeMirror {
      /*background-color: #f62;*/
    }
  </style>


  <script>
    (function () {
      var textFile = null,
        makeTextFile = function (text) {
          var data = new Blob([text], {type: 'text/plain'});

          // If we are replacing a previously generated file we need to
          // manually revoke the object URL to avoid memory leaks.
          if (textFile !== null) {
            window.URL.revokeObjectURL(textFile);
          }

          textFile = window.URL.createObjectURL(data);

          return textFile;
        };

        var create = document.getElementById('create'),
          textbox = document.getElementById('textbox');

        create.addEventListener('click', function () {
          var dt = new Date();
          var utcDate = dt.toUTCString();
          var link = document.getElementById('downloadlink');
          link.textContent = "Download Link " + utcDate;
          link.download = textbox.value;
          link.href = makeTextFile(firepad.getText());
          link.style.display = 'block';
        }, false);
      })();
  </script>

</body>
</html>