leqsikoni
/
frontend
2
0
Fork 0
Code

Completely dynamic word page

This commit is contained in:
Alex Kotov 2023-03-25 04:27:30 +04:00
parent d5fc2a479f
commit 0596bd24f2
Signed by: kotovalexarian
GPG Key ID: 553C0EBBEB5D5F08
8 changed files with 21 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
bundle.js
View File

@ -1,7 +1,9 @@
$(function() {
$('#word').each(function(index, elem) {
$('#words-xxxxx').each(function() {
var word_id = Number(window.location.hash.substring(1))
$.getJSON(
'http://localhost:4567/words/' + $(elem).data('id'),
'http://localhost:4567/words/' + word_id,
function(data) {
var primary_form = data['primary_form']
var part_of_speech = data['part_of_speech']
@ -22,6 +24,13 @@ $(function() {
data['inflections'].forEach(function(item) {
var descr = item['descr']
var value = item['value'] || ''
var other_word_id = item['other_word_id']
if (other_word_id !== null) {
value =
'<a href="xxxxx.html#' + other_word_id + '">' + value + '</a>'
}
inflections.push(
'<li><b>' + descr + '</b>: ' + value + '</li>'
)
@ -56,6 +65,8 @@ $(function() {
)
})
document.title = primary_form
$('#primary-form').text(primary_form)
$('#part-of-speech').text(part_of_speech)

12
words.html
View File

@ -10,12 +10,12 @@
<h2>Глаголы</h2>
<ol>
<li><a href="words/არის.html">არის</a> - быть</li>
<li><a href="words/აქვს.html">აქვს</a> - иметь (неодушевлённое)</li>
<li><a href="words/ყავს.html">ყავს</a> - иметь (одушевлённое)</li>
<li><a href="words/აქებს.html">აქებს</a> - хвалить</li>
<li><a href="words/ცემს.html">ცემს</a> - бить</li>
<li><a href="words/ხატავს.html">ხატავს</a> - рисовать</li>
<li><a href="words/xxxxx.html#1">არის</a> - быть</li>
<li><a href="words/xxxxx.html#2">აქვს</a> - иметь (неодушевлённое)</li>
<li><a href="words/xxxxx.html#3">ყავს</a> - иметь (одушевлённое)</li>
<li><a href="words/xxxxx.html#4">აქებს</a> - хвалить</li>
<li><a href="words/xxxxx.html#5">ცემს</a> - бить</li>
<li><a href="words/xxxxx.html#6">ხატავს</a> - рисовать</li>
</ol>
<h2>Существительные</h2>

4
words/არის.html → words/xxxxx.html
View File

@ -2,11 +2,11 @@
<html>
<head>
<meta charset="utf-8"/>
<title>არის</title>
<title></title>
<link rel="stylesheet" href="../bundle.css"/>
</head>
<body>
<div id="word" data-id="1"></div>
<div id="words-xxxxx"></div>
<h1 id="primary-form"></h1>
<p id="part-of-speech"></p>

40
words/აქებს.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>აქებს</title>
<link rel="stylesheet" href="../bundle.css"/>
</head>
<body>
<div id="word" data-id="4"></div>
<h1 id="primary-form"></h1>
<p id="part-of-speech"></p>
<div id="translations" class="invisible">
<h2>Значения</h2>
<div id="translations-data"></div>
</div>
<div id="commentary" class="invisible">
<h2>Комментарий</h2>
<p id="commentary-data"></p>
</div>
<div id="inflections" class="invisible">
<h2>Inflections</h2>
<div id="inflections-data"></div>
</div>
<div id="examples" class="invisible">
<h2>Примеры употребления</h2>
<div id="examples-data"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script src="../bundle.js"></script>
</body>
</html>

40
words/აქვს.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>აქვს</title>
<link rel="stylesheet" href="../bundle.css"/>
</head>
<body>
<div id="word" data-id="2"></div>
<h1 id="primary-form"></h1>
<p id="part-of-speech"></p>
<div id="translations" class="invisible">
<h2>Значения</h2>
<div id="translations-data"></div>
</div>
<div id="commentary" class="invisible">
<h2>Комментарий</h2>
<p id="commentary-data"></p>
</div>
<div id="inflections" class="invisible">
<h2>Inflections</h2>
<div id="inflections-data"></div>
</div>
<div id="examples" class="invisible">
<h2>Примеры употребления</h2>
<div id="examples-data"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script src="../bundle.js"></script>
</body>
</html>

40
words/ყავს.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ყავს</title>
<link rel="stylesheet" href="../bundle.css"/>
</head>
<body>
<div id="word" data-id="3"></div>
<h1 id="primary-form"></h1>
<p id="part-of-speech"></p>
<div id="translations" class="invisible">
<h2>Значения</h2>
<div id="translations-data"></div>
</div>
<div id="commentary" class="invisible">
<h2>Комментарий</h2>
<p id="commentary-data"></p>
</div>
<div id="inflections" class="invisible">
<h2>Inflections</h2>
<div id="inflections-data"></div>
</div>
<div id="examples" class="invisible">
<h2>Примеры употребления</h2>
<div id="examples-data"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script src="../bundle.js"></script>
</body>
</html>

40
words/ცემს.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ცემს</title>
<link rel="stylesheet" href="../bundle.css"/>
</head>
<body>
<div id="word" data-id="5"></div>
<h1 id="primary-form"></h1>
<p id="part-of-speech"></p>
<div id="translations" class="invisible">
<h2>Значения</h2>
<div id="translations-data"></div>
</div>
<div id="commentary" class="invisible">
<h2>Комментарий</h2>
<p id="commentary-data"></p>
</div>
<div id="inflections" class="invisible">
<h2>Inflections</h2>
<div id="inflections-data"></div>
</div>
<div id="examples" class="invisible">
<h2>Примеры употребления</h2>
<div id="examples-data"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script src="../bundle.js"></script>
</body>
</html>

40
words/ხატავს.html
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>ხატავს</title>
<link rel="stylesheet" href="../bundle.css"/>
</head>
<body>
<div id="word" data-id="6"></div>
<h1 id="primary-form"></h1>
<p id="part-of-speech"></p>
<div id="translations" class="invisible">
<h2>Значения</h2>
<div id="translations-data"></div>
</div>
<div id="commentary" class="invisible">
<h2>Комментарий</h2>
<p id="commentary-data"></p>
</div>
<div id="inflections" class="invisible">
<h2>Inflections</h2>
<div id="inflections-data"></div>
</div>
<div id="examples" class="invisible">
<h2>Примеры употребления</h2>
<div id="examples-data"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.3.min.js"
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="
crossorigin="anonymous"></script>
<script src="../bundle.js"></script>
</body>
</html>