teiworkshop/editor.html at master · joeytakeda/teiworkshop · 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
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>TEI Workshop #2</title>
        <style type="text/css" media="screen">
    #editor {
        position: absolute;
        top: 5%;
        bottom:0%;
        right: 5%;
        left: 0%;
    }

    #instructions{
    position:absolute;
    background: white;
    padding:.75rem;
    z-index:99999;
    top:5%;
    left:2%;
    border: solid 1px black;
     }

     #instructions.invisible{
     display:none;
     }
   .invisible{
     display:none;
     }

     #closeButton{
     text-align:right;
     font-weight:bold;
     }
</style>

        <script>

            function showInstructions(){
                var showInstructions = document.getElementById('showInstructions');
                var hideInstructions = document.getElementById('hideInstructions');
                var instructions = document.getElementById('instructions');
                showInstructions.classList.add('invisible');
                instructions.classList.remove('invisible');
                hideInstructions.classList.remove('invisible');
            }

            function hideInstructions(){
                 var showInstructions = document.getElementById('showInstructions');
                var hideInstructions = document.getElementById('hideInstructions');
                 var instructions = document.getElementById('instructions');
                showInstructions.classList.remove('invisible');
                   instructions.classList.add('invisible');
                hideInstructions.classList.add('invisible');
            }
        </script>
    </head>
    <body>
        <div id="editor">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;TEI xmlns="http://www.tei-c.org/ns/1.0"&gt;
    &lt;teiHeader&gt;
        &lt;fileDesc&gt;
            &lt;titleStmt&gt;
                &lt;title&gt;Title&lt;/title&gt;
            &lt;/titleStmt&gt;
            &lt;publicationStmt&gt;
                &lt;p&gt;Publication Information&lt;/p&gt;
            &lt;/publicationStmt&gt;
            &lt;sourceDesc&gt;
                &lt;p&gt;Information about the source&lt;/p&gt;
            &lt;/sourceDesc&gt;
        &lt;/fileDesc&gt;
    &lt;/teiHeader&gt;
    &lt;text&gt;
    &lt;!--Note that all content here is not saved anywhere unless you press download (above) --&gt;
        &lt;body&gt;
            &lt;p&gt;Some text here.&lt;/p&gt;
        &lt;/body&gt;
    &lt;/text&gt;
&lt;/TEI&gt;
        </div>
        <button id="showInstructions" type="button" onclick="javascript:showInstructions()">Open Instructions</button>
        <button id="hideInstructions" type="button" onclick="javascript:hideInstructions()" class="invisible">Close Instructions</button>
        <button id="download2" type="submit" class="btn btn-primary">Download</button>
        <div id="instructions" class="invisible">
            <h4>Instructions</h4>
                <p>To save this file, press the download button above.</p>
            <p>Note that this text editor does not save your progress, so make sure to download the files often.</p>
            <p>To close these instructions, press Close Instructions above.</p>
            <p><span style="font-weight:bold">Credits:</span> This editor relies on the Ace Editor and FileSaver.js. See the github repository for more information about licensing.</p>
        </div>


        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js" type="text/javascript" charset="utf-8"></script>
        <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/chrome");
    editor.session.setMode("ace/mode/xml");

</script>
        <script src="js/FileSaver.js"></script>
        <script type="text/javascript">
    document.getElementById("download2").addEventListener("click", ()=>{
  var file = new File([editor.getValue()], "teiworkshop.xml", {type: "application/xml;charset=utf-8"});
  saveAs(file);
})
            </script>

    </body>
</html>