CooperateDocument/test.html at master · Novebula/CooperateDocument · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>

<head>
    <style>
        textarea {
            width: 50vw;
            height: 50vh;
        }
    </style>
</head>


<body>
    <h1>text</h1>
    <button id="getText">getText</button>
    <button id="submit">submit</button>
    <textarea id="textArea1"></textarea>
    <script>
        document.getElementById("getText").addEventListener("click", getText, false);
        document.getElementById("submit").addEventListener("click", submit, false);
        var set1, set2;
        var steps = new Object();
        steps.action = new Array();
        getText();
        //setInterval(up, 1000);

        async function up() {
            await submit();
        }

        function note() {
            console.log("oninput");
        }
        Object.prototype.followSet = function (changeSet2) {
            changeSet2.action.forEach(step2 => {
                this.followChain(step2);
            });
        }

        Object.prototype.followChain = function (step2) {
            //this.action = this.action.map(i => 1);
            this.action = this.action.map(step1 => {
                var temp1, temp2;
                temp1 = followStep(step1, step2); //左
                temp2 = followStep(step2, step1); //右
                step1 = temp2;
                step2 = temp1;
                return step1;
            });
        }
        //传入两个元操作对象
        function followStep(step1, step2) {
            if (step1 === null || step2 === null) {
                return step2;
            } else if (step1.type === "i" && step2.type === "i") {
                if (step1.index <= step2.index) {
                    step2.index++;
                } else {

                }
                return step2;
            } else if (step1.type === "d" && step2.type === "d") {
                if (step1.index < step2.index) {
                    step2.index--;
                } else if (step1.index > step2.index) {

                } else {
                    step2 = null;
                }
                return step2;
            } else if (step1.type === "d" && step2.type === "i") {
                if (step1.index < step2.index) {
                    step2.index--;
                } else {

                }
                return step2;
            } else if (step1.type === "i" && step2.type === "d") {
                if (step1.index <= step2.index) {
                    step2.index++;
                } else {

                }
                return step2;
            }
            //返回一个转化过 先step1 再step2 的元操作
        }
        document.getElementById("textArea1").oninput = (e) => {
            console.log(e);
            console.log(e.inputType + e.data + "before " + (document.getElementById("textArea1").selectionStart));
            steps.action.push({
                type: e.inputType.slice(0, 1),
                index: document.getElementById("textArea1").selectionStart,
                content: e.data
            });
            //console.log(steps);
        }

        function getText() {
            console.log("getText");
            fetch("http://localhost:1109/getText", {
                method: 'GET'
            }).then(res => res.json().then(data => {
                document.getElementById('textArea1').value = data.content;
                lastText = document.getElementById('textArea1').value
            }))
        }
        var count = 0;

        function submit() {
            if (count % 2 == 0) {
                set1 = steps;
                console.log(set1);
                steps = new Object();
                steps.action = new Array();
                getText();
            } else {
                set2 = steps;
                console.log(set2);
                set1.followSet(set2);
                //得到先set2再set1对应的set1'
                console.log(set1);
                steps = new Object();
                steps.action = new Array();
            }
            count++;
            var data = {
                content: document.getElementById("textArea1").value,
            };
            steps.action = steps.action.concat(set1, set2);
            fetch("http://localhost:1109/submit", {
                method: 'POST',
                body: JSON.stringify(steps),
                headers: new Headers({
                    'Content-type': 'application/json'
                })
            }).then(res => {
                console.log(res);
                steps = new Object();
                steps.action = new Array();
            })
        }
    </script>
</body>

</html>