You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
4.8 KiB
148 lines
4.8 KiB
7 months ago
|
/*
|
||
|
* Copyright (c) 2024 New Vector Ltd
|
||
|
*
|
||
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
* you may not use this file except in compliance with the License.
|
||
|
* You may obtain a copy of the License at
|
||
|
*
|
||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||
|
*
|
||
|
* Unless required by applicable law or agreed to in writing, software
|
||
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
* See the License for the specific language governing permissions and
|
||
|
* limitations under the License.
|
||
|
*/
|
||
|
import { screenshots } from './data.js';
|
||
|
|
||
|
const header = screenshots[0];
|
||
|
|
||
|
let visibleLanguages = header.map((x) => 1);
|
||
|
let imageWidth = 300;
|
||
|
|
||
|
function addForm() {
|
||
|
// Insert the form into the div with id form_container
|
||
|
const form = document.createElement('form');
|
||
|
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++){
|
||
|
const label = document.createElement('label');
|
||
|
const text = document.createTextNode(header[i]);
|
||
|
const input = document.createElement('input');
|
||
|
input.type = 'checkbox';
|
||
|
input.disabled = i == 0;
|
||
|
input.name = header[i];
|
||
|
input.checked = visibleLanguages[i] == 1;
|
||
|
input.onchange = (e) => {
|
||
|
if (e.target.checked) {
|
||
|
visibleLanguages[i] = 1;
|
||
|
} else {
|
||
|
visibleLanguages[i] = 0;
|
||
|
}
|
||
|
addTable();
|
||
|
};
|
||
|
label.appendChild(input);
|
||
|
label.appendChild(text);
|
||
|
form.appendChild(label);
|
||
|
}
|
||
|
// Add a label with the text "Width"
|
||
|
const label = document.createElement('label');
|
||
|
label.textContent = 'Screenshots width:';
|
||
|
form.appendChild(label);
|
||
|
// Add a input text to input the width of the image
|
||
|
const widthInput = document.createElement('input');
|
||
|
widthInput.id = 'width_input';
|
||
|
widthInput.type = 'number';
|
||
|
widthInput.min = 75;
|
||
|
widthInput.max = 500;
|
||
|
widthInput.step = 25;
|
||
|
widthInput.value = imageWidth;
|
||
|
widthInput.onchange = (e) => {
|
||
|
imageWidth = e.target.value;
|
||
|
addTable();
|
||
|
};
|
||
|
form.appendChild(widthInput);
|
||
|
document.getElementById('form_container').appendChild(form);
|
||
|
}
|
||
|
|
||
|
function getNiceName(name) {
|
||
|
var indices = [];
|
||
|
for(var i = 0; i < name.length; i++) {
|
||
|
if (name[i] === "_") indices.push(i);
|
||
|
}
|
||
|
return name.substring(indices[2] + 1, indices[3]);
|
||
|
}
|
||
|
|
||
|
function addTable() {
|
||
|
// Remove any previous table
|
||
|
document.getElementById('screenshots_container').innerHTML = '';
|
||
|
// screenshots contains a table of screenshots, lets convert to an html table
|
||
|
const table = document.createElement('table');
|
||
|
const thead = document.createElement('thead');
|
||
|
const tbody = document.createElement('tbody');
|
||
|
|
||
|
// First item of screenshots contains the languages
|
||
|
// Build the languages row
|
||
|
const languagesHeaderRow = document.createElement('tr');
|
||
|
for (let i = 0; i < header.length; i++) {
|
||
|
// Do not add the language if it is hidden
|
||
|
if (visibleLanguages[i] == 0) {
|
||
|
continue;
|
||
|
}
|
||
|
const th = document.createElement('th');
|
||
|
th.textContent = header[i];
|
||
|
languagesHeaderRow.appendChild(th);
|
||
|
}
|
||
|
const numVisibleLanguages = languagesHeaderRow.childElementCount
|
||
|
// 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));
|
||
|
}
|
||
|
const tr = document.createElement('tr');
|
||
|
for (let j = 0; j < screenshots[i].length; j++) {
|
||
|
if (visibleLanguages[j] == 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 {
|
||
|
const img = document.createElement('img');
|
||
|
img.className = "screenshot";
|
||
|
img.src = `../${imageFile}`;
|
||
|
img.title = imageFile;
|
||
|
img.alt = "Missing image";
|
||
|
img.width = imageWidth;
|
||
|
td.appendChild(img);
|
||
|
}
|
||
|
tr.appendChild(td);
|
||
|
}
|
||
|
tbody.appendChild(tr);
|
||
|
}
|
||
|
table.appendChild(thead);
|
||
|
table.appendChild(tbody);
|
||
|
|
||
|
// Add the table to the div with id screenshots_container
|
||
|
document.getElementById('screenshots_container').appendChild(table);
|
||
|
}
|
||
|
|
||
|
addForm();
|
||
|
addTable();
|