Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add a script to generate the screenshots for all the available languages.

Browse source 
Change the format of data.js generated file.
Add Fragment to the URL to limit the number of displayed languages.
Add a checkbox to display all screenshots or not.
This commit is contained in:
Benoit Marty 2024-03-07 13:09:28 +01:00 • committed by Benoit Marty
parent 410954e264
commit 09996a6ae3
4 changed files with 181 additions and 62 deletions
Download patch file Download diff file Expand all files Collapse all files

114
screenshots/html/script.js
View file

@ -15,10 +15,19 @@
*/
import { screenshots } from './data.js';
const header = screenshots[0];
const dataLanguages = screenshots[0];
const dataPaths = screenshots[1];
// Read default visible languages from the fragment
const fragment = new URLSearchParams(window.location.hash.substring(1));
// Get the wanted languages from the fragment, or default to "de" and "fr", and ensure "en" is always there
const wantedLanguages = (fragment.get('languages') ? fragment.get('languages').split(',') : ['de', 'fr']) + ["en"];
// Map dataLanguages to visibleLanguages, set to 1 if the language is in wantedLanguages, 0 otherwise
let visibleLanguages = dataLanguages.map((language) => wantedLanguages.includes(language) ? 1 : 0);
let visibleLanguages = header.map((x) => 1);
let imageWidth = 300;
let showAllScreenshots = false;
function addForm() {
// Insert the form into the div with id form_container
@ -26,14 +35,14 @@ function addForm() {
const languageLabel = document.createElement('label');
languageLabel.textContent = 'Languages:';
form.appendChild(languageLabel);
// Add a check box per entry in the header
for (let i = 0; i < header.length; i++){
// Add a check box per entry in the dataLanguages
for (let i = 0; i < dataLanguages.length; i++){
const label = document.createElement('label');
const text = document.createTextNode(header[i]);
const text = document.createTextNode(dataLanguages[i]);
const input = document.createElement('input');
input.type = 'checkbox';
input.disabled = i == 0;
input.name = header[i];
input.name = dataLanguages[i];
input.checked = visibleLanguages[i] == 1;
input.onchange = (e) => {
if (e.target.checked) {
@ -47,6 +56,8 @@ function addForm() {
label.appendChild(text);
form.appendChild(label);
}
// Add a break line
form.appendChild(document.createElement('br'));
// Add a label with the text "Width"
const label = document.createElement('label');
label.textContent = 'Screenshots width:';
@ -64,6 +75,20 @@ function addForm() {
addTable();
};
form.appendChild(widthInput);
// Add a label with the text "Show all screenshots"
const label2 = document.createElement('label');
label2.textContent = 'Show all screenshots:';
label2.title = 'Show all screenshots, including those with no translated versions.';
const input2 = document.createElement('input');
input2.type = 'checkbox';
input2.name = "test";
input2.checked = showAllScreenshots;
input2.onchange = (e) => {
showAllScreenshots = e.target.checked;
addTable();
};
label2.appendChild(input2);
form.appendChild(label2);
document.getElementById('form_container').appendChild(form);
}
@ -86,55 +111,76 @@ function addTable() {
// First item of screenshots contains the languages
// Build the languages row
const languagesHeaderRow = document.createElement('tr');
for (let i = 0; i < header.length; i++) {
for (let languageIndex = 0; languageIndex < dataLanguages.length; languageIndex++) {
// Do not add the language if it is hidden
if (visibleLanguages[i] == 0) {
if (visibleLanguages[languageIndex] == 0) {
continue;
}
const th = document.createElement('th');
th.textContent = header[i];
th.textContent = dataLanguages[languageIndex];
languagesHeaderRow.appendChild(th);
}
const numVisibleLanguages = languagesHeaderRow.childElementCount
// Second item contains the paths
// Next items are the data
var currentHeaderValue = "";
for (let i = 1; i < screenshots.length; i++) {
// Add a header for row, if different from previous
let name = getNiceName(screenshots[i][0]);
if(name != currentHeaderValue) {
currentHeaderValue = name;
const trHead = document.createElement('tr');
const tdHead = document.createElement('td');
tdHead.colSpan = numVisibleLanguages;
tdHead.className = "view-header";
tdHead.textContent = name;
trHead.appendChild(tdHead);
tbody.appendChild(trHead);
tbody.appendChild(languagesHeaderRow.cloneNode(true));
}
for (let screenshotIndex = 2; screenshotIndex < screenshots.length; screenshotIndex++) {
let englishFile = screenshots[screenshotIndex][0];
const tr = document.createElement('tr');
for (let j = 0; j < screenshots[i].length; j++) {
if (visibleLanguages[j] == 0) {
let hasTranslatedFiles = false;
for (let languageIndex = 0; languageIndex < dataLanguages.length; languageIndex++) {
if (visibleLanguages[languageIndex] == 0) {
continue;
}
const td = document.createElement('td');
let imageFile = screenshots[i][j];
if (imageFile === '') {
const text = document.createElement('p');
text.textContent = 'No image';
td.appendChild(text);
} else {
if (languageIndex == 0) {
const fullFile = `${dataPaths[0]}/${englishFile}.png`;
const img = document.createElement('img');
img.className = "screenshot";
img.src = `../${imageFile}`;
img.title = imageFile;
img.src = `../${fullFile}`;
img.title = fullFile;
img.alt = "Missing image";
img.width = imageWidth;
td.appendChild(img);
} else {
let hasFile = screenshots[screenshotIndex][languageIndex];
if (hasFile === 0) {
const text = document.createElement('p');
text.className = "missing";
text.textContent = 'No image';
td.appendChild(text);
} else {
hasTranslatedFiles = true;
// Foreign file is the same as the english file, replacing the language
const foreignFile = englishFile.replace("en]", `${dataLanguages[languageIndex]}]`).replace("_S_", "_T_")
const fullForeignFile = `${dataPaths[languageIndex]}/${foreignFile}.png`;
const img = document.createElement('img');
img.className = "screenshot";
img.src = `../${fullForeignFile}`;
img.title = fullForeignFile;
img.alt = "Missing image";
img.width = imageWidth;
td.appendChild(img);
}
}
tr.appendChild(td);
}
tbody.appendChild(tr);
if (showAllScreenshots || hasTranslatedFiles) {
// Add a header for row, if different from previous
let name = getNiceName(englishFile);
if (name != currentHeaderValue) {
currentHeaderValue = name;
const trHead = document.createElement('tr');
const tdHead = document.createElement('td');
tdHead.colSpan = numVisibleLanguages;
tdHead.className = "view-header";
tdHead.textContent = name;
trHead.appendChild(tdHead);
tbody.appendChild(trHead);
tbody.appendChild(languagesHeaderRow.cloneNode(true));
}
tbody.appendChild(tr);
}
}
table.appendChild(thead);
table.appendChild(tbody);