|
|
@ -13,7 +13,11 @@ |
|
|
|
* See the License for the specific language governing permissions and |
|
|
|
* See the License for the specific language governing permissions and |
|
|
|
* limitations under the License. |
|
|
|
* 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
|
|
|
|
// Get the base url of the current page
|
|
|
|
const baseUrl = window.location.href.split('/').slice(0, -1).join('/'); |
|
|
|
const baseUrl = window.location.href.split('/').slice(0, -1).join('/'); |
|
|
@ -28,16 +32,51 @@ if (isLocalHost) { |
|
|
|
|
|
|
|
|
|
|
|
const dataLanguages = screenshots[0]; |
|
|
|
const dataLanguages = screenshots[0]; |
|
|
|
|
|
|
|
|
|
|
|
// Read default visible languages from the fragment
|
|
|
|
// Read the URL params
|
|
|
|
const fragment = new URLSearchParams(window.location.hash.substring(1)); |
|
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
|
|
// 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"]; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 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
|
|
|
|
// 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 = 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; |
|
|
|
function updatePageUrl() { |
|
|
|
let showAllScreenshots = false; |
|
|
|
// 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() { |
|
|
|
function addForm() { |
|
|
|
// Insert the form into the div with id form_container
|
|
|
|
// Insert the form into the div with id form_container
|
|
|
@ -60,6 +99,7 @@ function addForm() { |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
visibleLanguages[i] = 0; |
|
|
|
visibleLanguages[i] = 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
updatePageUrl() |
|
|
|
addTable(); |
|
|
|
addTable(); |
|
|
|
}; |
|
|
|
}; |
|
|
|
label.appendChild(input); |
|
|
|
label.appendChild(input); |
|
|
@ -76,12 +116,13 @@ function addForm() { |
|
|
|
const widthInput = document.createElement('input'); |
|
|
|
const widthInput = document.createElement('input'); |
|
|
|
widthInput.id = 'width_input'; |
|
|
|
widthInput.id = 'width_input'; |
|
|
|
widthInput.type = 'number'; |
|
|
|
widthInput.type = 'number'; |
|
|
|
widthInput.min = 75; |
|
|
|
widthInput.min = MIN_WIDTH; |
|
|
|
widthInput.max = 500; |
|
|
|
widthInput.max = MAX_WIDTH; |
|
|
|
widthInput.step = 25; |
|
|
|
widthInput.step = WIDTH_STEP; |
|
|
|
widthInput.value = imageWidth; |
|
|
|
widthInput.value = imageWidth; |
|
|
|
widthInput.onchange = (e) => { |
|
|
|
widthInput.onchange = (e) => { |
|
|
|
imageWidth = e.target.value; |
|
|
|
imageWidth = e.target.value; |
|
|
|
|
|
|
|
updatePageUrl(); |
|
|
|
addTable(); |
|
|
|
addTable(); |
|
|
|
}; |
|
|
|
}; |
|
|
|
form.appendChild(widthInput); |
|
|
|
form.appendChild(widthInput); |
|
|
@ -95,6 +136,7 @@ function addForm() { |
|
|
|
input2.checked = showAllScreenshots; |
|
|
|
input2.checked = showAllScreenshots; |
|
|
|
input2.onchange = (e) => { |
|
|
|
input2.onchange = (e) => { |
|
|
|
showAllScreenshots = e.target.checked; |
|
|
|
showAllScreenshots = e.target.checked; |
|
|
|
|
|
|
|
updatePageUrl() |
|
|
|
addTable(); |
|
|
|
addTable(); |
|
|
|
}; |
|
|
|
}; |
|
|
|
label2.appendChild(input2); |
|
|
|
label2.appendChild(input2); |
|
|
|