Sort Mechanics Text Info List

This commit is contained in:
Inga Kirschnick
2023-06-13 17:18:00 +02:00
parent cc508cf4eb
commit 71359523ba
2 changed files with 125 additions and 15 deletions

View File

@ -17,6 +17,10 @@ class CorpusTextInfoList extends ResourceList {
);
super(listContainerElement, _options);
this.isInitialized = false;
let sortElements = this.listContainerElement.querySelectorAll('.sort');
sortElements.forEach((sortElement) => {
sortElement.addEventListener('click', (event) => {this.renderSortElement(sortElement)});
});
}
get item() {
@ -29,7 +33,6 @@ class CorpusTextInfoList extends ResourceList {
<td><span class="num_unique_lemmas"></span></td>
<td><span class="num_sentences"></span></td>
<td><span class="average_sentence_length"></span></td>
<td><span class="num_ent_types"></span></td>
<td><span class="num_unique_ent_types"></span></td>
</tr>
`.trim();
@ -45,7 +48,6 @@ class CorpusTextInfoList extends ResourceList {
'num_unique_lemmas',
'num_sentences',
'average_sentence_length',
'num_ent_types',
'num_unique_ent_types'
];
}
@ -64,14 +66,13 @@ class CorpusTextInfoList extends ResourceList {
<table>
<thead>
<tr>
<th>Text</th>
<th>Number of tokens</th>
<th>Number of unique words</th>
<th>Number of unique lemmas</th>
<th>Number of sentences</th>
<th>Average sentence length</th>
<th>Number of entity types</th>
<th>Number of unique entity types</th>
<th>Text<span class="sort right material-icons" data-sort="title" style="cursor:pointer; color:#aa9cc9">arrow_drop_down</span></th>
<th>Number of tokens<span class="sort right material-icons" data-sort="num_tokens" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of unique words<span class="sort right material-icons" data-sort="num_unique_words" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of unique lemmas<span class="sort right material-icons" data-sort="num_unique_lemmas" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of sentences<span class="sort right material-icons" data-sort="num_sentences" style="cursor:pointer">arrow_drop_down</span></th>
<th>Average sentence length<span class="sort right material-icons" data-sort="average_sentence_length" style="cursor:pointer">arrow_drop_down</span></th>
<th>Number of unique entity types<span class="sort right material-icons" data-sort="num_unique_ent_types" style="cursor:pointer">arrow_drop_down</span></th>
</tr>
</thead>
<tbody class="list"></tbody>
@ -81,7 +82,6 @@ class CorpusTextInfoList extends ResourceList {
}
mapResourceToValue(corpusTextData) {
console.log(corpusTextData);
return {
title: corpusTextData.title,
publishing_year: corpusTextData.publishing_year,
@ -90,8 +90,22 @@ class CorpusTextInfoList extends ResourceList {
num_unique_lemmas: corpusTextData.num_unique_lemmas,
num_sentences: corpusTextData.num_sentences,
average_sentence_length: corpusTextData.average_sentence_length,
num_ent_types: corpusTextData.num_ent_types,
num_unique_ent_types: corpusTextData.num_unique_ent_types
};
}
sort() {
this.listjs.sort('title');
}
renderSortElement(clickedSortElement) {
this.listContainerElement.querySelectorAll('.sort').forEach((sortElement) => {
if (sortElement !== clickedSortElement) {
sortElement.classList.remove('asc', 'desc');
sortElement.style.color = 'black';
};
});
clickedSortElement.style.color = '#aa9cc9';
clickedSortElement.innerHTML = clickedSortElement.classList.contains('asc') ? 'arrow_drop_down' : 'arrow_drop_up';
}
}