From ad5b9737786fd856891a92f63974c94db832179b Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Wed, 13 Mar 2024 17:39:48 +0100 Subject: [PATCH 1/2] Update URL parameter according to the form value, to let the user store permalinks. --- screenshots/html/script.js | 62 ++++++++++++++++++++++++++++++++------ 1 file changed, 52 insertions(+), 10 deletions(-) diff --git a/screenshots/html/script.js b/screenshots/html/script.js index a5a265b6dd..b809452c23 100644 --- a/screenshots/html/script.js +++ b/screenshots/html/script.js @@ -13,7 +13,11 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - import { screenshots } from './data.js'; +import { screenshots } from './data.js'; + +const URL_PARAM_LANGUAGES = "l"; +const URL_PARAM_IMAGE_WIDTH = "w"; +const URL_PARAM_ALL_SCREENSHOTS = "a"; // Get the base url of the current page const baseUrl = window.location.href.split('/').slice(0, -1).join('/'); @@ -28,16 +32,51 @@ if (isLocalHost) { const dataLanguages = screenshots[0]; -// 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"]; +// Read the URL params +const urlParams = new URLSearchParams(window.location.search); +// Get the wanted languages from the url params, or default to "de" and "fr", and ensure "en" is always there +const wantedLanguages = (urlParams.get(URL_PARAM_LANGUAGES) ? urlParams.get(URL_PARAM_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); +// Read width from the url params, and ensure it's a multiple of 25 and is between 75 and 500 +const DEFAULT_WIDTH = 300; +const MIN_WIDTH = 75; +const MAX_WIDTH = 500; +const WIDTH_STEP = 25; +let imageWidth = DEFAULT_WIDTH +let width = urlParams.get(URL_PARAM_IMAGE_WIDTH); +if (width) { + // Ensure width is an integer, if not use the default value + width = parseInt(width) || DEFAULT_WIDTH; + imageWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, Math.round(width / WIDTH_STEP) * WIDTH_STEP)); +} +// Read showAllScreenshots from the url params +let showAllScreenshots = urlParams.get(URL_PARAM_ALL_SCREENSHOTS) === 1; -let imageWidth = 300; -let showAllScreenshots = false; +function updatePageUrl() { + // Update the URL displayed in the browser without loading again the page + var queryParams = new URLSearchParams(window.location.search); + // Add the languages to the url params, without "en" + const lg = dataLanguages.filter((language, i) => visibleLanguages[i] == 1).filter(l => l != "en").join(','); + if (lg) { + queryParams.set(URL_PARAM_LANGUAGES, lg); + } else { + queryParams.delete(URL_PARAM_LANGUAGES); + } + if (imageWidth != DEFAULT_WIDTH) { + queryParams.set(URL_PARAM_IMAGE_WIDTH, imageWidth); + } else { + queryParams.delete(URL_PARAM_IMAGE_WIDTH); + } + if (showAllScreenshots) { + queryParams.set(URL_PARAM_ALL_SCREENSHOTS, showAllScreenshots ? 1 : 0); + } else { + queryParams.delete(URL_PARAM_ALL_SCREENSHOTS); + } + // Replace the current URL with the new one, including the fragment + history.replaceState(null, '', `${window.location.pathname}?${queryParams}${window.location.hash}`); +} function addForm() { // Insert the form into the div with id form_container @@ -60,6 +99,7 @@ function addForm() { } else { visibleLanguages[i] = 0; } + updatePageUrl() addTable(); }; label.appendChild(input); @@ -76,12 +116,13 @@ function addForm() { const widthInput = document.createElement('input'); widthInput.id = 'width_input'; widthInput.type = 'number'; - widthInput.min = 75; - widthInput.max = 500; - widthInput.step = 25; + widthInput.min = MIN_WIDTH; + widthInput.max = MAX_WIDTH; + widthInput.step = WIDTH_STEP; widthInput.value = imageWidth; widthInput.onchange = (e) => { imageWidth = e.target.value; + updatePageUrl(); addTable(); }; form.appendChild(widthInput); @@ -95,6 +136,7 @@ function addForm() { input2.checked = showAllScreenshots; input2.onchange = (e) => { showAllScreenshots = e.target.checked; + updatePageUrl() addTable(); }; label2.appendChild(input2); From c00b9c83f0a92a4abd14a77aaa07080e5f73bacb Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Mon, 11 Mar 2024 07:30:28 +0100 Subject: [PATCH 2/2] Add id to the table rows. --- screenshots/html/screenshots.css | 9 +++++++-- screenshots/html/script.js | 15 +++++++++++---- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/screenshots/html/screenshots.css b/screenshots/html/screenshots.css index 5b9fb085f7..9b36b34ece 100644 --- a/screenshots/html/screenshots.css +++ b/screenshots/html/screenshots.css @@ -84,8 +84,13 @@ input { } #screenshots_container { - margin-top: 80px; - margin-bottom: 56px; + overflow: scroll; + position: absolute; + top: 64px; + bottom: 40px; + width: 100%; + padding-top: 16px; + padding-bottom: 16px; } .screenshot { diff --git a/screenshots/html/script.js b/screenshots/html/script.js index b809452c23..763d4b1abf 100644 --- a/screenshots/html/script.js +++ b/screenshots/html/script.js @@ -192,9 +192,15 @@ function addTable() { const numVisibleLanguages = languagesHeaderRow.childElementCount // Next items are the data var currentHeaderValue = ""; + var screenshotCounter = 0; for (let screenshotIndex = 1; screenshotIndex < screenshots.length; screenshotIndex++) { let englishFile = screenshots[screenshotIndex][0]; + let niceName = getNiceName(englishFile); + if (niceName != currentHeaderValue) { + screenshotCounter = 0; + } const tr = document.createElement('tr'); + tr.id = niceName + screenshotCounter; let hasTranslatedFiles = false; for (let languageIndex = 0; languageIndex < dataLanguages.length; languageIndex++) { if (visibleLanguages[languageIndex] == 0) { @@ -228,20 +234,21 @@ function addTable() { } if (showAllScreenshots || hasTranslatedFiles) { // Add a header for row, if different from previous - let name = getNiceName(englishFile); - if (name != currentHeaderValue) { - currentHeaderValue = name; + if (niceName != currentHeaderValue) { + currentHeaderValue = niceName; const trHead = document.createElement('tr'); + trHead.id = niceName; const tdHead = document.createElement('td'); tdHead.colSpan = numVisibleLanguages; tdHead.className = "view-header"; - tdHead.textContent = name; + tdHead.textContent = niceName; trHead.appendChild(tdHead); tbody.appendChild(trHead); tbody.appendChild(languagesHeaderRow.cloneNode(true)); } tbody.appendChild(tr); } + screenshotCounter++; } table.appendChild(thead); table.appendChild(tbody);