-
Notifications
You must be signed in to change notification settings - Fork 0
/
words.html
133 lines (120 loc) · 4.54 KB
/
words.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
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
<!DOCTYPE html>
<!--[if lte IE 6]><html class="preIE7 preIE8 preIE9"><![endif]-->
<!--[if IE 7]><html class="preIE8 preIE9"><![endif]-->
<!--[if IE 8]><html class="preIE9"><![endif]-->
<!--[if gte IE 9]><!-->
<html>
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Words you are learning</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
th {
display: none;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
td:nth-of-type(1):before { content: "Simplified"; }
td:nth-of-type(2):before { content: "Pinyin"; }
td:nth-of-type(3):before { content: "Definition"; }
td:nth-of-type(4):before { content: "Action"; }
}
</style>
</head>
<body>
<h1>Words you are learning:</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function markAsKnown() {
console.log('this', this)
let word = this.dataset.word
jQuery.post("https://us-central1-slowmersion.cloudfunctions.net/markAsKnown?username=" + smusername +
"&password=" + smuserId + "&word=" + word,
function (data, status) {
console.log(status, data)
});
console.log('hiding', $(this).parents('p'))
jQuery(this).parents('tr').hide()
}
function autorun() {
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
smusername = getUrlParameter('username'); // "1234"
smuserId = getUrlParameter('userId'); // "edit"
console.log(smusername, smuserId)
jQuery.get('https://us-central1-slowmersion.cloudfunctions.net/words?username=' + smusername + '&userId=' +
smuserId,
function (data, status) {
if (status) {
console.log('status', status)
}
if (data) {
$('body').append('<table id="myTable">')
$('#myTable').append('<tr><th>simplified</th><th>pinyin</th><th>definition</th><th>action</th></tr>')
console.log('data', data)
data.forEach(word => {
console.log('word.def', word.def)
if (word && word.def) {
let definitions = JSON.parse(word.def)
definitions.forEach(word => {
console.log('word', word)
$('#myTable tr:last').after('<tr><td>' + word.simplified + '</td><td>' + word.pinyin.replace(' ',' ') + '</td><td>' + definitions.find(x => x.pinyin === word.pinyin).definition + '</td><td><button onClick="markAsKnown.call(this)" data-word='
+ word.simplified + ' data-pinyin=' + word.pinyin +
' class="markAsKnown">mark as known</button></td></tr>')
});
}
});
}
})
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", autorun, false);
else if (document.attachEvent) document.attachEvent("onreadystatechange", autorun);
else window.onload = autorun;
</script>
</body>
</html>