diff --git a/.eslintrc.yaml b/.eslintrc.yaml index 7ef1a86808..68b7757116 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -10,10 +10,4 @@ globals: SharedArrayBuffer: readonly parserOptions: ecmaVersion: 2020 -rules: - { - 'no-new': 0, - 'comma-dangle': 0, - 'space-before-function-paren': 0, - 'indent': 0, - } +rules: { 'no-new': 0, 'comma-dangle': 0, 'space-before-function-paren': 0, 'indent': 0 } diff --git a/.prettierrc.json b/.prettierrc.json index fd496a820e..b52a92b10c 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,4 +1,5 @@ { "singleQuote": true, - "semi": false + "semi": false, + "printWidth": 100 } diff --git a/assets/Admin/PieChart.js b/assets/Admin/PieChart.js index 9e6a069cea..d05db0cff1 100644 --- a/assets/Admin/PieChart.js +++ b/assets/Admin/PieChart.js @@ -19,9 +19,7 @@ export class PieChart { add(elementId, dataArray, title) { if (!this.isLoaded) { - console.warn( - 'Google Charts is not loaded yet, queuing the chart rendering.', - ) + console.warn('Google Charts is not loaded yet, queuing the chart rendering.') this.queue.push({ elementId, dataArray, title }) // Queue the request return } @@ -31,18 +29,14 @@ export class PieChart { drawChart(elementId, dataArray, title) { // eslint-disable-next-line new-cap - const dataSpace = new GoogleCharts.api.visualization.arrayToDataTable( - dataArray, - ) + const dataSpace = new GoogleCharts.api.visualization.arrayToDataTable(dataArray) const optionsSpace = { title, is3D: true, } // eslint-disable-next-line new-cap - const chart = new GoogleCharts.api.visualization.PieChart( - document.getElementById(elementId), - ) + const chart = new GoogleCharts.api.visualization.PieChart(document.getElementById(elementId)) chart.draw(dataSpace, optionsSpace) } } diff --git a/assets/Admin/SystemManagement/Maintain.js b/assets/Admin/SystemManagement/Maintain.js index 9957f79b1e..8619395ae7 100644 --- a/assets/Admin/SystemManagement/Maintain.js +++ b/assets/Admin/SystemManagement/Maintain.js @@ -6,9 +6,5 @@ import './Maintain.scss' import { PieChart } from '../PieChart' const pieChart = new PieChart() -pieChart.add( - 'piechart_3d', - data_space_values, - 'Disk Space (' + wholeSpace + ')', -) +pieChart.add('piechart_3d', data_space_values, 'Disk Space (' + wholeSpace + ')') pieChart.add('piechart_3d_mem', data_mem_values, 'RAM (' + wholeRam + ')') diff --git a/assets/Api/ApiHelper.js b/assets/Api/ApiHelper.js index 6ca52849bb..f912dc2921 100644 --- a/assets/Api/ApiHelper.js +++ b/assets/Api/ApiHelper.js @@ -49,8 +49,7 @@ export class ApiFetch { if (response.ok) { return Promise.resolve(data) } else { - const errorMessage = - 'ERROR ' + response.status + ': ' + JSON.stringify(data) + const errorMessage = 'ERROR ' + response.status + ': ' + JSON.stringify(data) return Promise.reject(new Error(errorMessage)) } } @@ -69,14 +68,10 @@ export class ApiPutFetch { this.url = url this.data = data this.componentName = componentName - if ( - typeof unspecifiedErrorText === 'string' && - unspecifiedErrorText.length > 0 - ) { + if (typeof unspecifiedErrorText === 'string' && unspecifiedErrorText.length > 0) { this.unspecifiedErrorText = unspecifiedErrorText } else { - this.unspecifiedErrorText = - globalConfiguration.messages.unspecifiedErrorText + this.unspecifiedErrorText = globalConfiguration.messages.unspecifiedErrorText } this.successCallback = successCallback this.otherErrorMessages = otherErrorMessages @@ -95,13 +90,8 @@ export class ApiPutFetch { break case 401: // Invalid credentials - console.error( - this.componentName + ' ERROR 401: Invalid credentials', - response, - ) - MessageDialogs.showErrorMessage( - globalConfiguration.messages.authenticationErrorText, - ) + console.error(this.componentName + ' ERROR 401: Invalid credentials', response) + MessageDialogs.showErrorMessage(globalConfiguration.messages.authenticationErrorText) break case 422: response.json().then((errors) => { @@ -110,16 +100,8 @@ export class ApiPutFetch { }) break default: - console.error( - this.componentName + ' ERROR ' + response.status, - response, - ) - if ( - Object.prototype.hasOwnProperty.call( - this.otherErrorMessages, - response.status, - ) - ) { + console.error(this.componentName + ' ERROR ' + response.status, response) + if (Object.prototype.hasOwnProperty.call(this.otherErrorMessages, response.status)) { const errorHandler = this.otherErrorMessages[response.status] if (typeof errorHandler === 'function') { errorHandler(response) @@ -154,14 +136,10 @@ export class ApiDeleteFetch { ) { this.url = url this.componentName = componentName - if ( - typeof unspecifiedErrorText === 'string' && - unspecifiedErrorText.length > 0 - ) { + if (typeof unspecifiedErrorText === 'string' && unspecifiedErrorText.length > 0) { this.unspecifiedErrorText = unspecifiedErrorText } else { - this.unspecifiedErrorText = - globalConfiguration.messages.unspecifiedErrorText + this.unspecifiedErrorText = globalConfiguration.messages.unspecifiedErrorText } this.successCallback = successCallback this.otherErrorMessages = otherErrorMessages @@ -180,25 +158,12 @@ export class ApiDeleteFetch { break case 401: // Invalid credentials - console.error( - this.componentName + ' ERROR 401: Invalid credentials', - response, - ) - MessageDialogs.showErrorMessage( - globalConfiguration.messages.authenticationErrorText, - ) + console.error(this.componentName + ' ERROR 401: Invalid credentials', response) + MessageDialogs.showErrorMessage(globalConfiguration.messages.authenticationErrorText) break default: - console.error( - this.componentName + ' ERROR ' + response.status, - response, - ) - if ( - Object.prototype.hasOwnProperty.call( - this.otherErrorMessages, - response.status, - ) - ) { + console.error(this.componentName + ' ERROR ' + response.status, response) + if (Object.prototype.hasOwnProperty.call(this.otherErrorMessages, response.status)) { const errorHandler = this.otherErrorMessages[response.status] if (typeof errorHandler === 'function') { errorHandler(response) diff --git a/assets/Api/CustomTranslationApi.js b/assets/Api/CustomTranslationApi.js index 00d2627d40..3844ffd7b7 100644 --- a/assets/Api/CustomTranslationApi.js +++ b/assets/Api/CustomTranslationApi.js @@ -1,15 +1,9 @@ export class CustomTranslationApi { constructor(programSection) { - this.programSection = - programSection === 'credits' ? 'credit' : programSection + this.programSection = programSection === 'credits' ? 'credit' : programSection } - async getCustomTranslation( - programId, - language, - successCallback, - errorCallback = () => {}, - ) { + async getCustomTranslation(programId, language, successCallback, errorCallback = () => {}) { try { const response = await fetch( `../translate/custom/project/${programId}?field=${this.programSection}&language=${language}`, @@ -51,13 +45,7 @@ export class CustomTranslationApi { }) } - saveCustomTranslation( - programId, - text, - language, - successCallback, - errorCallback, - ) { + saveCustomTranslation(programId, text, language, successCallback, errorCallback) { const self = this return new Promise((resolve, reject) => { fetch( @@ -82,12 +70,9 @@ export class CustomTranslationApi { async getCustomTranslationLanguages(programId) { try { - const response = await fetch( - `../translate/custom/project/${programId}/list`, - { - method: 'GET', - }, - ) + const response = await fetch(`../translate/custom/project/${programId}/list`, { + method: 'GET', + }) if (!response.ok) { throw new Error(`Error: ${response.status}`) diff --git a/assets/Api/ProjectApi.js b/assets/Api/ProjectApi.js index 111f6f4191..ab0086d57c 100644 --- a/assets/Api/ProjectApi.js +++ b/assets/Api/ProjectApi.js @@ -26,9 +26,7 @@ export default class ProjectApi { MessageDialogs.showErrorMessage(data.error) }) .catch(function () { - MessageDialogs.showErrorMessage( - globalConfiguration.messages.unspecifiedErrorText, - ) + MessageDialogs.showErrorMessage(globalConfiguration.messages.unspecifiedErrorText) }) }, }, diff --git a/assets/Components/MessageDialogs.js b/assets/Components/MessageDialogs.js index 1c429f0de3..11573c9597 100644 --- a/assets/Components/MessageDialogs.js +++ b/assets/Components/MessageDialogs.js @@ -24,8 +24,7 @@ export default class MessageDialogs { return Swal.fire({ title: globalConfiguration.messages.errorTitle, - html: - '', + html: '', icon: 'error', customClass: { confirmButton: 'btn btn-primary', diff --git a/assets/Components/TextFillDefault.js b/assets/Components/TextFillDefault.js index 6c66314c60..498c7344fd 100644 --- a/assets/Components/TextFillDefault.js +++ b/assets/Components/TextFillDefault.js @@ -2,9 +2,7 @@ import TextFill from 'textfilljs' export default function (container) { const containerElem = - typeof container === 'string' - ? document.querySelector(container) - : container + typeof container === 'string' ? document.querySelector(container) : container if (!containerElem) { console.error('Container element not found.') diff --git a/assets/Index/MaintenanceHandler.js b/assets/Index/MaintenanceHandler.js index d64b0289a3..3b2d400e30 100644 --- a/assets/Index/MaintenanceHandler.js +++ b/assets/Index/MaintenanceHandler.js @@ -8,9 +8,7 @@ export class MaintenanceHandler { initCloseButtons() { const closeButtons = document.querySelectorAll('.close-button') closeButtons.forEach((closeButton) => { - closeButton.addEventListener('click', () => - this.handleCloseButtonClick(closeButton), - ) + closeButton.addEventListener('click', () => this.handleCloseButtonClick(closeButton)) }) } @@ -47,23 +45,17 @@ export class MaintenanceHandler { initExpandButtons() { const expandButtons = document.querySelectorAll('.expand-button') expandButtons.forEach((expandButton) => { - expandButton.addEventListener('click', () => - this.handleExpandButtonClick(expandButton), - ) + expandButton.addEventListener('click', () => this.handleExpandButtonClick(expandButton)) }) } // Handle expand button click event handleExpandButtonClick(expandButton) { const dataId = expandButton.getAttribute('data-id') - const additionalInfoSection = document.getElementById( - `additional-info-${dataId}`, - ) + const additionalInfoSection = document.getElementById(`additional-info-${dataId}`) if (additionalInfoSection) { const isCurrentlyVisible = additionalInfoSection.style.display === 'block' - additionalInfoSection.style.display = isCurrentlyVisible - ? 'none' - : 'block' + additionalInfoSection.style.display = isCurrentlyVisible ? 'none' : 'block' expandButton.classList.toggle('expanded') } } diff --git a/assets/Layout/Base.js b/assets/Layout/Base.js index 867bfaa046..06d7acfc45 100644 --- a/assets/Layout/Base.js +++ b/assets/Layout/Base.js @@ -33,8 +33,7 @@ if (bugsnagApiKey) { BugsnagPerformance.start({ apiKey: bugsnagApiKey, appVersion }) } -const gtmContainerId = - document.getElementById('gtm-container-id').dataset.gtmContainerId +const gtmContainerId = document.getElementById('gtm-container-id').dataset.gtmContainerId if (gtmContainerId) { const analytics = Analytics({ app: 'share.catrob.at', @@ -60,8 +59,7 @@ document.addEventListener('DOMContentLoaded', () => { }) function showFlashSnackbar() { - const snackbarFlashMessages = - document.getElementsByClassName('js-flash-snackbar') + const snackbarFlashMessages = document.getElementsByClassName('js-flash-snackbar') Array.from(snackbarFlashMessages).forEach((jsMsgObj) => { showSnackbar('#share-snackbar', jsMsgObj.dataset.msg) }) @@ -70,11 +68,9 @@ function showFlashSnackbar() { function fitHeadingFontSizeToAvailableWidth() { // Adjust heading font size or break word ;['h1', '.h1', 'h2', '.h2', 'h3', '.h3'].forEach(function (element) { - document - .querySelectorAll(element + ':not(.no-textfill)') - .forEach(function (el) { - textFillDefault(el) - }) + document.querySelectorAll(element + ':not(.no-textfill)').forEach(function (el) { + textFillDefault(el) + }) }) } diff --git a/assets/Layout/Sidebar.js b/assets/Layout/Sidebar.js index eab541b18f..c670c9e698 100644 --- a/assets/Layout/Sidebar.js +++ b/assets/Layout/Sidebar.js @@ -5,9 +5,7 @@ import './Sidebar.scss' const sidebar = document.getElementById('sidebar') const sidebarJs = document.querySelector('.js-sidebar') -const sidebarToggleBtn = document.getElementById( - 'top-app-bar__btn-sidebar-toggle', -) +const sidebarToggleBtn = document.getElementById('top-app-bar__btn-sidebar-toggle') document.addEventListener('DOMContentLoaded', () => { initSidebarBadges() @@ -16,9 +14,7 @@ document.addEventListener('DOMContentLoaded', () => { }) function initSidebarBadges() { - if ( - document.querySelector('.js-user-state').dataset.isUserLoggedIn === 'true' - ) { + if (document.querySelector('.js-user-state').dataset.isUserLoggedIn === 'true') { updateBadge( sidebarJs.dataset.baseUrl + '/api/notifications/count', 'sidebar_badge--unseen-notifications', @@ -53,10 +49,7 @@ function updateBadge( const count = apiToCall === 'new' ? data.total : data.count if (count > 0) { if (badgeText === null) { - badge.innerHTML = - count <= maxAmountToFetch - ? count.toString() - : maxAmountToFetch + '+' + badge.innerHTML = count <= maxAmountToFetch ? count.toString() : maxAmountToFetch + '+' } else { badge.innerHTML = badgeText } @@ -129,9 +122,7 @@ function setClickListener() { } }) - document - .getElementById('sidebar-overlay') - .addEventListener('click', fnCloseSidebar) + document.getElementById('sidebar-overlay').addEventListener('click', fnCloseSidebar) } function initSidebarSwipe() { @@ -215,12 +206,7 @@ function initSidebarSwipe() { }) document.addEventListener('touchend', function (e) { - if ( - e.changedTouches.length === 1 && - (closing || opening) && - !!curX && - startTime - ) { + if (e.changedTouches.length === 1 && (closing || opening) && !!curX && startTime) { const touchX = e.changedTouches[0].pageX const touchY = e.changedTouches[0].pageY const timeDiff = Date.now() - startTime @@ -287,10 +273,7 @@ document.addEventListener('DOMContentLoaded', function () { const languageMenuOverlay = document.querySelector('.language-body-overlay') languageButton.addEventListener('click', function () { - if ( - languageMenu.style.display === 'none' || - languageMenu.style.display === '' - ) { + if (languageMenu.style.display === 'none' || languageMenu.style.display === '') { languageMenu.style.display = 'block' languageMenuOverlay.style.display = 'block' document.body.style.overflow = 'hidden' diff --git a/assets/Layout/TopBar.js b/assets/Layout/TopBar.js index 453070bff1..fad449b753 100644 --- a/assets/Layout/TopBar.js +++ b/assets/Layout/TopBar.js @@ -6,23 +6,17 @@ const topAppBarElement = document.querySelector('.mdc-top-app-bar') const mdcObject = new MDCTopAppBar(topAppBarElement) const title = document.querySelector('#top-app-bar__title') -const toggleSidebarButton = document.querySelector( - '#top-app-bar__btn-sidebar-toggle', -) +const toggleSidebarButton = document.querySelector('#top-app-bar__btn-sidebar-toggle') let backButton = document.querySelector('#top-app-bar__back__btn-back') const searchButton = document.querySelector('#top-app-bar__btn-search') const searchBackButton = document.querySelector('#top-app-bar__btn-search-back') -const searchClearButton = document.querySelector( - '#top-app-bar__btn-search-clear', -) +const searchClearButton = document.querySelector('#top-app-bar__btn-search-clear') const searchInput = document.querySelector('#top-app-bar__search-input') const searchForm = document.querySelector('#top-app-bar__search-form') const optionsButton = document.querySelector('#top-app-bar__btn-options') -const optionsContainer = document.querySelector( - '#top-app-bar__options-container', -) +const optionsContainer = document.querySelector('#top-app-bar__options-container') const defaultAppBarHref = title.getAttribute('href') const defaultTitle = title.innerHTML @@ -62,8 +56,7 @@ if (optionsContainer && optionsButton) { export function showTopBarDownload() { hideTopBars() - document.querySelector('#top-app-bar__media-library-download').style.display = - 'flex' + document.querySelector('#top-app-bar__media-library-download').style.display = 'flex' } export function showTopBarDefault() { @@ -83,14 +76,10 @@ export function showCustomTopBarTitle(titleText, onBack) { if (typeof onBack === 'function') { backButton = document.createElement('button') backButton.id = 'top-app-bar__back__btn-back' - backButton.className = - 'material-icons mdc-top-app-bar__action-item mdc-icon-button' + backButton.className = 'material-icons mdc-top-app-bar__action-item mdc-icon-button' backButton.setAttribute('aria-label', 'Back to previous page') backButton.textContent = 'arrow_back' - toggleSidebarButton.parentNode.insertBefore( - backButton, - toggleSidebarButton.nextSibling, - ) + toggleSidebarButton.parentNode.insertBefore(backButton, toggleSidebarButton.nextSibling) toggleSidebarButton.style.display = 'none' backButton.style.display = 'block' backButton.addEventListener('click', onBack) @@ -124,10 +113,7 @@ function hideTopBars() { function handleSearchBackButton() { const beforeSearchUrl = window.sessionStorage.getItem(PREVIOUS_SEARCH_URL_KEY) - if ( - window.location.pathname.includes('/search/') && - beforeSearchUrl !== null - ) { + if (window.location.pathname.includes('/search/') && beforeSearchUrl !== null) { window.sessionStorage.removeItem(PREVIOUS_SEARCH_URL_KEY) window.location.href = beforeSearchUrl } else { diff --git a/assets/Layout/Variables.scss b/assets/Layout/Variables.scss index 0272207980..c5930313fc 100644 --- a/assets/Layout/Variables.scss +++ b/assets/Layout/Variables.scss @@ -76,10 +76,5 @@ $text-color: $gray-900; $color-variable-s: var(#{$color-variable + '-s'}); $color-variable-l: var(#{$color-variable + '-l'}); - @return hsla( - $color-variable-h, - $color-variable-s, - $color-variable-l, - $opacity - ); + @return hsla($color-variable-h, $color-variable-s, $color-variable-l, $opacity); } diff --git a/assets/Legacy/RemixGraph/remixgraph.builder.js b/assets/Legacy/RemixGraph/remixgraph.builder.js index 2fb1f80fb3..7bb994b4cf 100644 --- a/assets/Legacy/RemixGraph/remixgraph.builder.js +++ b/assets/Legacy/RemixGraph/remixgraph.builder.js @@ -24,12 +24,7 @@ const NetworkDirector = function () { } // eslint-disable-next-line no-unused-vars -const NetworkBuilder = function ( - programID, - remixGraphLayerId, - remixGraphTranslations, - remixData, -) { +const NetworkBuilder = function (programID, remixGraphLayerId, remixGraphTranslations, remixData) { const self = this self.network = null self.nodes = new vis.DataSet() @@ -69,20 +64,15 @@ const NetworkBuilder = function ( relationIndex < self.remixGraphData.catrobatForwardRelations.length; ++relationIndex ) { - const relationData = - self.remixGraphData.catrobatForwardRelations[relationIndex] + const relationData = self.remixGraphData.catrobatForwardRelations[relationIndex] if (!(relationData.ancestor_id in self.relationDescendantMap)) { self.relationDescendantMap[relationData.ancestor_id] = [] } if (!(relationData.descendant_id in self.relationAncestorMap)) { self.relationAncestorMap[relationData.descendant_id] = [] } - self.relationDescendantMap[relationData.ancestor_id].push( - relationData.descendant_id, - ) - self.relationAncestorMap[relationData.descendant_id].push( - relationData.ancestor_id, - ) + self.relationDescendantMap[relationData.ancestor_id].push(relationData.descendant_id) + self.relationAncestorMap[relationData.descendant_id].push(relationData.ancestor_id) } for ( @@ -90,20 +80,15 @@ const NetworkBuilder = function ( relationIndex < self.remixGraphData.catrobatBackwardEdgeRelations.length; ++relationIndex ) { - const relationData = - self.remixGraphData.catrobatBackwardEdgeRelations[relationIndex] + const relationData = self.remixGraphData.catrobatBackwardEdgeRelations[relationIndex] if (!(relationData.ancestor_id in self.backwardEdgeMap)) { self.backwardEdgeMap[relationData.ancestor_id] = [] } if (!(relationData.descendant_id in self.backwardReverseEdgeMap)) { self.backwardReverseEdgeMap[relationData.descendant_id] = [] } - self.backwardEdgeMap[relationData.ancestor_id].push( - relationData.descendant_id, - ) - self.backwardReverseEdgeMap[relationData.descendant_id].push( - relationData.ancestor_id, - ) + self.backwardEdgeMap[relationData.ancestor_id].push(relationData.descendant_id) + self.backwardReverseEdgeMap[relationData.descendant_id].push(relationData.ancestor_id) } for (const ancestorId in self.relationDescendantMap) { @@ -132,11 +117,7 @@ const NetworkBuilder = function ( } self.stepBuildNodes = function () { - for ( - let nodeIndex = 0; - nodeIndex < self.remixGraphData.catrobatNodes.length; - ++nodeIndex - ) { + for (let nodeIndex = 0; nodeIndex < self.remixGraphData.catrobatNodes.length; ++nodeIndex) { const nodeId = self.remixGraphData.catrobatNodes[nodeIndex] const nodeData = { @@ -158,11 +139,7 @@ const NetworkBuilder = function ( self.nodesData.push(nodeData) } - for ( - let nodeIndex = 0; - nodeIndex < self.remixGraphData.scratchNodes.length; - ++nodeIndex - ) { + for (let nodeIndex = 0; nodeIndex < self.remixGraphData.scratchNodes.length; ++nodeIndex) { const unavailableProgramData = { name: self.remixGraphTranslations.programNotAvailable, username: self.remixGraphTranslations.programUnknownUser, @@ -193,8 +170,7 @@ const NetworkBuilder = function ( edgeIndex < self.remixGraphData.catrobatForwardEdgeRelations.length; ++edgeIndex ) { - const edgeData = - self.remixGraphData.catrobatForwardEdgeRelations[edgeIndex] + const edgeData = self.remixGraphData.catrobatForwardEdgeRelations[edgeIndex] self.edgesData.push({ from: CATROBAT_NODE_PREFIX + '_' + edgeData.ancestor_id, @@ -208,8 +184,7 @@ const NetworkBuilder = function ( edgeIndex < self.remixGraphData.catrobatBackwardEdgeRelations.length; ++edgeIndex ) { - const edgeData = - self.remixGraphData.catrobatBackwardEdgeRelations[edgeIndex] + const edgeData = self.remixGraphData.catrobatBackwardEdgeRelations[edgeIndex] self.edgesData.push({ from: CATROBAT_NODE_PREFIX + '_' + edgeData.ancestor_id, @@ -231,8 +206,7 @@ const NetworkBuilder = function ( } self.stepBuildNetwork = function () { - const hasGraphCycles = - self.remixGraphData.catrobatBackwardEdgeRelations.length > 0 + const hasGraphCycles = self.remixGraphData.catrobatBackwardEdgeRelations.length > 0 self.nodes.add(self.nodesData) self.edges.add(self.edgesData) diff --git a/assets/Legacy/RemixGraph/remixgraph.visualization.js b/assets/Legacy/RemixGraph/remixgraph.visualization.js index 77840360e0..f41258d67f 100644 --- a/assets/Legacy/RemixGraph/remixgraph.visualization.js +++ b/assets/Legacy/RemixGraph/remixgraph.visualization.js @@ -47,9 +47,9 @@ const _InternalRemixGraph = function () { self.remixGraphLayerId = remixGraphLayerId self.remixGraphTranslations = remixGraphTranslations self.programDetailsUrlTemplate = programDetailsUrlTemplate - $( - '', - ).appendTo('#' + modalLayerId) + $('').appendTo( + '#' + modalLayerId, + ) } self.getNodes = function () { @@ -104,9 +104,7 @@ const _InternalRemixGraph = function () { self.onClick = function (params) { // prevent multiple simultaneous clicks (needed for Google Chrome on Android) - const overlayDiv = $('
') - .attr('id', 'overlay') - .addClass('overlay') + const overlayDiv = $('
').attr('id', 'overlay').addClass('overlay') overlayDiv.appendTo('body') // eslint-disable-next-line no-implied-eval setTimeout("$('#overlay').remove();", 300) @@ -131,9 +129,7 @@ const _InternalRemixGraph = function () { size: id === self.programID ? 40 : 20, }, ]) - self.edges.update([ - { id: edgeData.id, width: 1, color: NETWORK_OPTIONS.edges.color }, - ]) + self.edges.update([{ id: edgeData.id, width: 1, color: NETWORK_OPTIONS.edges.color }]) }) if (selectedNodes.length === 0) { @@ -216,9 +212,7 @@ const _InternalRemixGraph = function () { name: self.remixGraphTranslations.showPaths, icon: function (opt, $itemElement, itemKey, item) { $itemElement.html( - 'repeat' + - item.name + - '', + 'repeat' + item.name + '', ) return 'context-menu-icon-material' }, @@ -250,10 +244,7 @@ const _InternalRemixGraph = function () { const minMarginLeft = 10 const minMarginRight = 10 const menuOffsetX = Math.max( - Math.min( - offsetX + domPosition.x, - windowWidth - menuWidth - minMarginRight, - ), + Math.min(offsetX + domPosition.x, windowWidth - menuWidth - minMarginRight), minMarginLeft, ) opt.$menu.css({ @@ -302,24 +293,16 @@ const _InternalRemixGraph = function () { self.dimEdges = function () { const edgeIds = self.edges.getIds() for (let i = 0; i < edgeIds.length; i++) { - self.edges.update([ - { id: edgeIds[i], color: { border: '#000000', opacity: 0.5 } }, - ]) + self.edges.update([{ id: edgeIds[i], color: { border: '#000000', opacity: 0.5 } }]) } - self.nodes.update([ - { id: CATROBAT_NODE_PREFIX + '_' + self.programID, size: 20 }, - ]) + self.nodes.update([{ id: CATROBAT_NODE_PREFIX + '_' + self.programID, size: 20 }]) } self.highlightNode = function (nodeId) { - self.nodes.update([ - { id: nodeId, borderWidth: 7, size: 30, color: { border: '#00acc1' } }, - ]) + self.nodes.update([{ id: nodeId, borderWidth: 7, size: 30, color: { border: '#00acc1' } }]) } self.highlightEdge = function (edgeId) { - self.edges.update([ - { id: edgeId, width: 3, color: { color: '#00acc1', opacity: 1.0 } }, - ]) + self.edges.update([{ id: edgeId, width: 3, color: { color: '#00acc1', opacity: 1.0 } }]) } } diff --git a/assets/MediaLibrary/MediaLib.js b/assets/MediaLibrary/MediaLib.js index 1ffdb4fda4..47260ee208 100644 --- a/assets/MediaLibrary/MediaLib.js +++ b/assets/MediaLibrary/MediaLib.js @@ -18,23 +18,16 @@ export function MediaLib( function getPackageFiles(packageName, mediaSearchPath, flavor) { let downloadList = [] - document.getElementById('top-app-bar__btn-download-selection').onclick = - function () { - for (let i = 0; i < downloadList.length; i++) { - medialibDownloadSelectedFile(downloadList[i]) - } - document - .getElementById('top-app-bar__btn-cancel-download-selection') - .click() + document.getElementById('top-app-bar__btn-download-selection').onclick = function () { + for (let i = 0; i < downloadList.length; i++) { + medialibDownloadSelectedFile(downloadList[i]) } + document.getElementById('top-app-bar__btn-cancel-download-selection').click() + } - document.getElementById( - 'top-app-bar__btn-cancel-download-selection', - ).onclick = function () { + document.getElementById('top-app-bar__btn-cancel-download-selection').onclick = function () { for (let i = 0; i < downloadList.length; i++) { - document - .getElementById('mediafile-' + downloadList[i].id) - .classList.remove('selected') + document.getElementById('mediafile-' + downloadList[i].id).classList.remove('selected') } downloadList = [] showTopBarDefault() @@ -48,18 +41,12 @@ export function MediaLib( // api url let url - const attributes = - 'id,name,flavors,packages,category,extension,file_type,size,download_url' + const attributes = 'id,name,flavors,packages,category,extension,file_type,size,download_url' const limit = 1000 if (mediaSearchPath !== '') { url = mediaSearchPath + '&attributes=' + attributes + '&limit=' + limit } else { - url = - mediaLibPackageByNameUrlApi + - '?attributes=' + - attributes + - '&limit=' + - limit + url = mediaLibPackageByNameUrlApi + '?attributes=' + attributes + '&limit=' + limit } fetch(url) @@ -74,9 +61,7 @@ export function MediaLib( } const isFlavored = !fileFlavorArray.includes('pocketcode') - const flavorFound = fileFlavorArray.some((item) => - acceptedFlavors.includes(item), - ) + const flavorFound = fileFlavorArray.some((item) => acceptedFlavors.includes(item)) if (!flavorFound) { return } @@ -114,9 +99,7 @@ export function MediaLib( elementsText += translations.elementsPlural } - document.getElementById( - 'top-app-bar__download-nr-selected', - ).innerText = elementsText + document.getElementById('top-app-bar__download-nr-selected').innerText = elementsText if (downloadList.length > 0) { showTopBarDownload() @@ -190,9 +173,7 @@ export function MediaLib( } else { const catEscaped = file.category.replace(/"/g, '\\"') document - .querySelector( - '#content .category[data-name="' + catEscaped + '"] .files', - ) + .querySelector('#content .category[data-name="' + catEscaped + '"] .files') .prepend(mediafileContainer) } }) @@ -205,9 +186,7 @@ export function MediaLib( const catId = /^category-(.+)$/.exec(item.id)[1] item.style.display = 'block' - document.querySelector( - '#sidebar #menu-mediacat-' + catId, - ).style.display = 'block' + document.querySelector('#sidebar #menu-mediacat-' + catId).style.display = 'block' }) document.getElementById('loading-spinner').style.display = 'none' @@ -288,10 +267,7 @@ export function MediaLib( const imgExtension = file.extension === 'catrobat' ? 'png' : file.extension const image = document.createElement('img') image.setAttribute('alt', file.id) - image.setAttribute( - 'src', - assetsDir + 'thumbs/' + file.id + '.' + imgExtension, - ) + image.setAttribute('src', assetsDir + 'thumbs/' + file.id + '.' + imgExtension) image.setAttribute('title', file.name) image.addEventListener('error', function () { image.remove() diff --git a/assets/MediaLibrary/PackageDetailPage.scss b/assets/MediaLibrary/PackageDetailPage.scss index 92f7fc788a..2bc5e3404f 100644 --- a/assets/MediaLibrary/PackageDetailPage.scss +++ b/assets/MediaLibrary/PackageDetailPage.scss @@ -73,10 +73,8 @@ $img-border-strength: 2px; justify-content: center; img { - max-width: $tile-size-sm - 2 * $tile-padding-y - 2 * - $img-border-strength; - max-height: $tile-size-sm - 2 * $tile-padding-y - 2 * - $img-border-strength; + max-width: $tile-size-sm - 2 * $tile-padding-y - 2 * $img-border-strength; + max-height: $tile-size-sm - 2 * $tile-padding-y - 2 * $img-border-strength; } } @@ -185,10 +183,8 @@ $img-border-strength: 2px; height: $tile-size-md - 2 * $tile-padding-y; img { - max-width: $tile-size-md - 2 * $tile-padding-y - 2 * - $img-border-strength; - max-height: $tile-size-md - 2 * $tile-padding-y - 2 * - $img-border-strength; + max-width: $tile-size-md - 2 * $tile-padding-y - 2 * $img-border-strength; + max-height: $tile-size-md - 2 * $tile-padding-y - 2 * $img-border-strength; } } @@ -213,10 +209,8 @@ $img-border-strength: 2px; height: $tile-size-lg - 4 * $tile-padding-y; img { - max-width: $tile-size-lg - 4 * $tile-padding-y - 2 * - $img-border-strength; - max-height: $tile-size-lg - 4 * $tile-padding-y - 2 * - $img-border-strength; + max-width: $tile-size-lg - 4 * $tile-padding-y - 2 * $img-border-strength; + max-height: $tile-size-lg - 4 * $tile-padding-y - 2 * $img-border-strength; } } diff --git a/assets/Project/CodeView.js b/assets/Project/CodeView.js index e91be02b66..531c9b20b5 100644 --- a/assets/Project/CodeView.js +++ b/assets/Project/CodeView.js @@ -48,9 +48,7 @@ document.addEventListener('DOMContentLoaded', () => { }) .finally(() => { document.getElementById('code-view-spinner').classList.add('d-none') - document - .getElementById('code-view-toggler') - .classList.remove('d-none') + document.getElementById('code-view-toggler').classList.remove('d-none') // CatBlocks need a visible container to calculate the svg sizes. // Still it should be collapsed on a page load. const collapseCodeView = document.getElementById('collapseCodeView') @@ -66,10 +64,7 @@ document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.collapse-btn').forEach((btn) => { btn.addEventListener('click', function () { const nextElement = this.nextElementSibling - if ( - nextElement.style.display === 'none' || - nextElement.style.display === '' - ) { + if (nextElement.style.display === 'none' || nextElement.style.display === '') { nextElement.style.display = 'block' } else { nextElement.style.display = 'none' diff --git a/assets/Project/OwnProjectList.js b/assets/Project/OwnProjectList.js index 7b0141ee02..1f12df60cc 100644 --- a/assets/Project/OwnProjectList.js +++ b/assets/Project/OwnProjectList.js @@ -13,14 +13,11 @@ require('./OwnProjectList.scss') export class OwnProjectList { constructor(container, apiUrl, theme, emptyMessage, baseUrl) { this.container = container - this.projectsContainer = - container.getElementsByClassName('projects-container')[0] + this.projectsContainer = container.getElementsByClassName('projects-container')[0] const attributes = 'attributes=id,project_url,screenshot_small,screenshot_large,name,downloads,views,reactions,comments,private' this.baseUrl = baseUrl - this.apiUrl = apiUrl.includes('?') - ? apiUrl + '&' + attributes - : apiUrl + '?' + attributes + this.apiUrl = apiUrl.includes('?') ? apiUrl + '&' + attributes : apiUrl + '?' + attributes this.projectsLoaded = 0 this.projectsData = {} this.projectFetchCount = 20 @@ -63,9 +60,7 @@ export class OwnProjectList { _initActionMenu() { const self = this - this.projectActionMenu = new MDCMenu( - document.getElementById('project-action-menu'), - ) + this.projectActionMenu = new MDCMenu(document.getElementById('project-action-menu')) this.projectActionMenu.listen('MDCMenu:selected', function (event) { if (event.detail.index === 0) { // Set public/private @@ -92,12 +87,7 @@ export class OwnProjectList { this.fetchActive = true const self = this - const url = - this.apiUrl + - '&limit=' + - this.projectFetchCount + - '&offset=' + - this.projectsLoaded + const url = this.apiUrl + '&limit=' + this.projectFetchCount + '&offset=' + this.projectsLoaded new ApiFetch(url, 'GET', undefined, 'json') .run() @@ -109,11 +99,9 @@ export class OwnProjectList { } if (clear) { - Array.prototype.slice - .call(self.projectsContainer.childNodes) - .forEach(function (child) { - self.projectsContainer.removeChild(child) - }) + Array.prototype.slice.call(self.projectsContainer.childNodes).forEach(function (child) { + self.projectsContainer.removeChild(child) + }) } data.forEach(function (project) { @@ -135,9 +123,7 @@ export class OwnProjectList { if (self.projectsLoaded === 0 && self.empty === false) { self.empty = true if (self.emptyMessage) { - self.projectsContainer.appendChild( - document.createTextNode(self.emptyMessage), - ) + self.projectsContainer.appendChild(document.createTextNode(self.emptyMessage)) self.container.classList.add('empty-with-text') } else { self.container.classList.add('empty') @@ -171,8 +157,7 @@ export class OwnProjectList { img.className = 'lazyload own-project-list__project__image' img.dataset.src = data.screenshot_small // TODO: generate larger thumbnails and adapt here (change 80w to width of thumbs) - img.dataset.srcset = - data.screenshot_small + ' 80w, ' + data.screenshot_large + ' 480w' + img.dataset.srcset = data.screenshot_small + ' 80w, ' + data.screenshot_large + ' 480w' img.dataset.sizes = '(min-width: 768px) 10vw, 25vw' proj.appendChild(img) @@ -198,44 +183,36 @@ export class OwnProjectList { } // eslint-disable-next-line no-array-constructor - Array('downloads', 'views', 'reactions', 'comments').forEach( - function (propertyKey) { - if (Object.prototype.hasOwnProperty.call(data, propertyKey)) { - const propEl = document.createElement('div') - propEl.className = - 'own-project-list__project__details__properties__property' - - const iconEl = document.createElement('span') - iconEl.className = 'material-icons' - iconEl.appendChild(document.createTextNode(icons[propertyKey])) - propEl.appendChild(iconEl) - - const valueEl = document.createElement('span') - valueEl.className = - 'own-project-list__project__details__properties__property__value' - valueEl.appendChild(document.createTextNode(data[propertyKey])) - propEl.appendChild(valueEl) - - properties.appendChild(propEl) - } - }, - ) + Array('downloads', 'views', 'reactions', 'comments').forEach(function (propertyKey) { + if (Object.prototype.hasOwnProperty.call(data, propertyKey)) { + const propEl = document.createElement('div') + propEl.className = 'own-project-list__project__details__properties__property' + + const iconEl = document.createElement('span') + iconEl.className = 'material-icons' + iconEl.appendChild(document.createTextNode(icons[propertyKey])) + propEl.appendChild(iconEl) + + const valueEl = document.createElement('span') + valueEl.className = 'own-project-list__project__details__properties__property__value' + valueEl.appendChild(document.createTextNode(data[propertyKey])) + propEl.appendChild(valueEl) + + properties.appendChild(propEl) + } + }) const visibility = document.createElement('div') visibility.className = 'own-project-list__project__details__visibility' details.appendChild(visibility) const visibilityIcon = document.createElement('span') - visibilityIcon.className = - 'material-icons own-project-list__project__details__visibility__icon' - visibilityIcon.appendChild( - document.createTextNode(data.private ? 'lock' : 'lock_open'), - ) + visibilityIcon.className = 'material-icons own-project-list__project__details__visibility__icon' + visibilityIcon.appendChild(document.createTextNode(data.private ? 'lock' : 'lock_open')) visibility.appendChild(visibilityIcon) const visibilityText = document.createElement('span') - visibilityText.className = - 'own-project-list__project__details__visibility__text' + visibilityText.className = 'own-project-list__project__details__visibility__text' visibilityText.appendChild( document.createTextNode( data.private @@ -255,9 +232,7 @@ export class OwnProjectList { const refreshAndOpenMenu = function () { const visibilityItem = - self.projectActionMenu.items[0].getElementsByClassName( - 'mdc-list-item__text', - )[0] + self.projectActionMenu.items[0].getElementsByClassName('mdc-list-item__text')[0] if (self.projectsData[data.id].private) { // private project visibilityItem.innerText = visibilityItem.dataset.textPublic @@ -332,12 +307,9 @@ export class OwnProjectList { } _actionShareProject(id) { - const clipboardSuccessMessage = - myProfileConfiguration.messages.clipboardSuccessMessage - const clipboardFailMessage = - myProfileConfiguration.messages.clipboardFailMessage - const shareSuccessMessage = - myProfileConfiguration.messages.shareSuccessMessage + const clipboardSuccessMessage = myProfileConfiguration.messages.clipboardSuccessMessage + const clipboardFailMessage = myProfileConfiguration.messages.clipboardFailMessage + const shareSuccessMessage = myProfileConfiguration.messages.shareSuccessMessage const shareFailMessage = myProfileConfiguration.messages.shareFailMessage const projectUrl = this.projectsData[id].project_url const titleMessage = myProfileConfiguration.messages.displayName @@ -384,9 +356,7 @@ export class OwnProjectList { .split('\n') Swal.fire({ title: msgParts[0], - html: project.private - ? msgParts[3] - : msgParts[1] + '

' + msgParts[2], + html: project.private ? msgParts[3] : msgParts[1] + '

' + msgParts[2], icon: 'warning', showCancelButton: true, allowOutsideClick: false, diff --git a/assets/Project/Project.js b/assets/Project/Project.js index 09613beb3f..4997965d17 100644 --- a/assets/Project/Project.js +++ b/assets/Project/Project.js @@ -70,31 +70,27 @@ export const Project = function ( }) }) - document - .querySelectorAll('.js-btn-project-download-disabled') - .forEach((button) => { - button.addEventListener('click', (e) => { - downloadDisabled(e.currentTarget.dataset.redirectUrl) - }) + document.querySelectorAll('.js-btn-project-download-disabled').forEach((button) => { + button.addEventListener('click', (e) => { + downloadDisabled(e.currentTarget.dataset.redirectUrl) }) + }) - document - .querySelectorAll('.js-btn-project-apk-download') - .forEach((button) => { - button.addEventListener('click', (e) => { - download( - e.currentTarget.dataset.pathUrl, - `${e.currentTarget.dataset.projectId}.apk`, - e.currentTarget.dataset.buttonId, - e.currentTarget.dataset.spinnerId, - e.currentTarget.dataset.iconId, - e.currentTarget.dataset.isWebview, - e.currentTarget.dataset.isSupported, - e.currentTarget.dataset.isNotSupportedTitle, - e.currentTarget.dataset.isNotSupportedText, - ) - }) + document.querySelectorAll('.js-btn-project-apk-download').forEach((button) => { + button.addEventListener('click', (e) => { + download( + e.currentTarget.dataset.pathUrl, + `${e.currentTarget.dataset.projectId}.apk`, + e.currentTarget.dataset.buttonId, + e.currentTarget.dataset.spinnerId, + e.currentTarget.dataset.iconId, + e.currentTarget.dataset.isWebview, + e.currentTarget.dataset.isSupported, + e.currentTarget.dataset.isNotSupportedTitle, + e.currentTarget.dataset.isNotSupportedText, + ) }) + }) function download( downloadUrl, @@ -198,10 +194,7 @@ export const Project = function ( console.error('Downloading ' + filename + ' failed') } - function showProjectIsNotSupportedMessage( - isNotSupportedTitle, - isNotSupportedText, - ) { + function showProjectIsNotSupportedMessage(isNotSupportedTitle, isNotSupportedText) { Swal.fire({ icon: 'error', title: isNotSupportedTitle, @@ -236,15 +229,11 @@ export const Project = function ( } function onResult(data) { - const apkPending = document.querySelectorAll( - '#apk-pending, #apk-pending-small', - ) + const apkPending = document.querySelectorAll('#apk-pending, #apk-pending-small') const apkDownload = document.querySelectorAll( '#projectApkDownloadButton, #projectApkDownloadButton-small', ) - const apkGenerate = document.querySelectorAll( - '#apk-generate, #apk-generate-small', - ) + const apkGenerate = document.querySelectorAll('#apk-generate, #apk-generate-small') apkGenerate.forEach((el) => el.classList.add('d-none')) apkDownload.forEach((el) => el.classList.add('d-none')) apkPending.forEach((el) => el.classList.add('d-none')) @@ -359,15 +348,9 @@ export const Project = function ( }) const containerSmall = document.getElementById('project-like-small') - projectLikeButtonsSmall = containerSmall.querySelector( - '#project-like-buttons-small', - ) - projectLikeDetailSmall = containerSmall.querySelector( - '#project-like-detail-small', - ) - projectLikeCounterSmall = containerSmall.querySelector( - '#project-like-counter-small', - ) + projectLikeButtonsSmall = containerSmall.querySelector('#project-like-buttons-small') + projectLikeDetailSmall = containerSmall.querySelector('#project-like-detail-small') + projectLikeCounterSmall = containerSmall.querySelector('#project-like-counter-small') projectLikeButtonsSmall.addEventListener('click', function () { if (projectLikeDetailSmall.style.display === 'flex') { @@ -382,8 +365,7 @@ export const Project = function ( return } const isClickInsideDetail = - projectLikeDetail.contains(event.target) || - projectLikeDetailSmall.contains(event.target) + projectLikeDetail.contains(event.target) || projectLikeDetailSmall.contains(event.target) if (!isClickInsideDetail) { projectLikeDetail.style.display = 'none' projectLikeDetailSmall.style.display = 'none' @@ -391,12 +373,8 @@ export const Project = function ( } }) - projectLikeCounter.addEventListener('click', (event) => - counterClickAction(event, false), - ) - projectLikeCounterSmall.addEventListener('click', (event) => - counterClickAction(event, true), - ) + projectLikeCounter.addEventListener('click', (event) => counterClickAction(event, false)) + projectLikeCounterSmall.addEventListener('click', (event) => counterClickAction(event, true)) projectLikeDetail .querySelectorAll('.btn') @@ -428,9 +406,7 @@ export const Project = function ( const modal = document.getElementById('project-like-modal') const bootstrapModal = new Modal(modal) - const firstTabEl = document.querySelector( - '#reaction-modal-tab li:first-child button', - ) + const firstTabEl = document.querySelector('#reaction-modal-tab li:first-child button') const firstTab = new Tab(firstTabEl) firstTab.show() @@ -482,8 +458,7 @@ export const Project = function ( like.types.forEach((type) => { if (type !== 'wow') { const icon = document.createElement('i') - icon.className = - 'material-icons md-18 ' + iconMappingClasses[type] + icon.className = 'material-icons md-18 ' + iconMappingClasses[type] icon.textContent = iconMapping[type] likeTypes.appendChild(icon) } else { @@ -506,21 +481,14 @@ export const Project = function ( fnUpdateContent('love', loveData) fnUpdateContent('wow', wowData) - document - .getElementById('project-reactions-spinner') - .classList.add('d-none') - document - .getElementById('project-reactions-spinner-small') - .classList.add('d-none') + document.getElementById('project-reactions-spinner').classList.add('d-none') + document.getElementById('project-reactions-spinner-small').classList.add('d-none') bootstrapModal.show() }) .catch((error) => { - document.getElementById('project-reactions-spinner').style.display = - 'none' - document.getElementById( - 'project-reactions-spinner-small', - ).style.display = 'none' + document.getElementById('project-reactions-spinner').style.display = 'none' + document.getElementById('project-reactions-spinner-small').style.display = 'none' showErrorAlert() console.error('Failed fetching like list', error) }) @@ -528,9 +496,7 @@ export const Project = function ( function detailsAction(event) { event.preventDefault() - const action = this.classList.contains('active') - ? likeActionRemove - : likeActionAdd + const action = this.classList.contains('active') ? likeActionRemove : likeActionAdd sendProjectLike( this.dataset.likeType, action, @@ -543,9 +509,7 @@ export const Project = function ( function detailsActionSmall(event) { event.preventDefault() - const action = this.classList.contains('active') - ? likeActionRemove - : likeActionAdd + const action = this.classList.contains('active') ? likeActionRemove : likeActionAdd sendProjectLike( this.dataset.likeType, action, @@ -579,9 +543,7 @@ export const Project = function ( }) .then((response) => response.json()) .then((data) => { - const typeBtn = likeDetail.querySelector( - `.btn[data-like-type="${likeType}"]`, - ) + const typeBtn = likeDetail.querySelector(`.btn[data-like-type="${likeType}"]`) if (likeAction === likeActionAdd) { typeBtn.classList.add('active') } else { @@ -597,10 +559,7 @@ export const Project = function ( likeCounter.classList.remove('d-none') } - if ( - !Array.isArray(data.activeLikeTypes) || - data.activeLikeTypes.length === 0 - ) { + if (!Array.isArray(data.activeLikeTypes) || data.activeLikeTypes.length === 0) { likeButtons.innerHTML = `
thumb_up
` } else { @@ -654,9 +613,7 @@ export const Project = function ( // document.addEventListener('click', function (e) { - const ellipsisContainer = document.getElementById( - 'sign-app-ellipsis-container', - ) + const ellipsisContainer = document.getElementById('sign-app-ellipsis-container') const ellipsis = document.getElementById('sign-app-ellipsis') if ( @@ -668,12 +625,9 @@ document.addEventListener('click', function (e) { }) document.addEventListener('DOMContentLoaded', function () { - document - .getElementById('sign-app-ellipsis') - ?.addEventListener('click', function () { - document.getElementById('sign-app-ellipsis-container').style.display = - 'block' - }) + document.getElementById('sign-app-ellipsis')?.addEventListener('click', function () { + document.getElementById('sign-app-ellipsis-container').style.display = 'block' + }) document.getElementById('toggle_ads')?.addEventListener('click', function () { const adsInfo = document.getElementById('ads_info') @@ -744,13 +698,10 @@ document.addEventListener('DOMContentLoaded', function () { event.preventDefault() const markSafeForKidsText = document.getElementById('markSafeForKidsText') const markNotForKidsText = document.getElementById('markNotForKidsText') - const url = document - .getElementById('projectNotForKidsButton') - .getAttribute('data-url') + const url = document.getElementById('projectNotForKidsButton').getAttribute('data-url') let text = '' if (markSafeForKidsText != null) { - text = - 'Are you sure you want to remove the not for kids flag from this project?' + text = 'Are you sure you want to remove the not for kids flag from this project?' } else if (markNotForKidsText != null) { text = 'Are you sure you want to mark this project as not for kids?' } diff --git a/assets/Project/ProjectComments.js b/assets/Project/ProjectComments.js index 4cb4d9c502..ada2763362 100644 --- a/assets/Project/ProjectComments.js +++ b/assets/Project/ProjectComments.js @@ -22,9 +22,7 @@ export function ProjectComments( ) { let amountOfVisibleComments - const commentUploadDates = document.getElementsByClassName( - 'comment-upload-date', - ) + const commentUploadDates = document.getElementsByClassName('comment-upload-date') for (const element of commentUploadDates) { const commentUploadDate = new Date(element.innerHTML) element.innerHTML = commentUploadDate.toLocaleString('en-GB') @@ -35,9 +33,7 @@ export function ProjectComments( updateCommentsVisibility() updateButtonVisibility() - document - .querySelector('#comment-post-button') - .addEventListener('click', postComment) + document.querySelector('#comment-post-button').addEventListener('click', postComment) const singleComments = document.querySelectorAll('.single-comment') singleComments.forEach((singleComment) => { @@ -53,9 +49,7 @@ export function ProjectComments( reportButtons.forEach((reportButton) => { reportButton.addEventListener('click', function (event) { event.stopPropagation() - const commentId = reportButton.id.substring( - 'comment-report-button-'.length, - ) + const commentId = reportButton.id.substring('comment-report-button-'.length) askForConfirmation(reportComment, commentId, reportConfirmation, reportIt) }) }) @@ -64,32 +58,21 @@ export function ProjectComments( deleteButtons.forEach((deleteButton) => { deleteButton.addEventListener('click', function (event) { event.stopPropagation() - const commentId = deleteButton.id.substring( - 'comment-delete-button-'.length, - ) + const commentId = deleteButton.id.substring('comment-delete-button-'.length) askForConfirmation(deleteComment, commentId, deleteConfirmation, deleteIt) }) }) - document - .querySelector('#comment-message') - ?.addEventListener('change', function () { - sessionStorage.setItem( - 'temp_project_comment', - document.querySelector('#comment-message').value, - ) - }) + document.querySelector('#comment-message')?.addEventListener('change', function () { + sessionStorage.setItem('temp_project_comment', document.querySelector('#comment-message').value) + }) const addCommentButtons = document.querySelectorAll('.add-comment-button') addCommentButtons.forEach((addCommentButton) => { addCommentButton.addEventListener('click', function () { const commentWrapper = document.querySelector('#user-comment-wrapper') - const showCommentWrapperButton = document.querySelector( - '#show-add-comment-button', - ) - const hideCommentWrapperButton = document.querySelector( - '#hide-add-comment-button', - ) + const showCommentWrapperButton = document.querySelector('#show-add-comment-button') + const hideCommentWrapperButton = document.querySelector('#hide-add-comment-button') if (commentWrapper.style.display !== 'none') { commentWrapper.style.display = 'none' hideCommentWrapperButton.style.display = 'none' @@ -102,32 +85,23 @@ export function ProjectComments( }) }) - document - .querySelector('#show-more-comments-button') - ?.addEventListener('click', function () { - showMore(showStep) - }) + document.querySelector('#show-more-comments-button')?.addEventListener('click', function () { + showMore(showStep) + }) - document - .querySelector('#show-less-comments-button') - ?.addEventListener('click', function () { - showLess(showStep) - }) + document.querySelector('#show-less-comments-button')?.addEventListener('click', function () { + showLess(showStep) + }) if ( sessionStorage.getItem('temp_project_comment') != null && sessionStorage.getItem('temp_project_comment') !== '' ) { - document.querySelector('#comment-message').value = sessionStorage.getItem( - 'temp_project_comment', - ) + document.querySelector('#comment-message').value = + sessionStorage.getItem('temp_project_comment') const commentWrapper = document.querySelector('#user-comment-wrapper') - const showCommentWrapperButton = document.querySelector( - '#show-add-comment-button', - ) - const hideCommentWrapperButton = document.querySelector( - '#hide-add-comment-button', - ) + const showCommentWrapperButton = document.querySelector('#show-add-comment-button') + const hideCommentWrapperButton = document.querySelector('#hide-add-comment-button') commentWrapper.style.display = 'block' if (showCommentWrapperButton) { showCommentWrapperButton.style.display = 'none' @@ -143,11 +117,9 @@ export function ProjectComments( return } - const postCommentUrl = document.querySelector('.js-project-comments') - .dataset.pathPostCommentUrl + const postCommentUrl = document.querySelector('.js-project-comments').dataset.pathPostCommentUrl const parentCommentId = - document.querySelector('.js-project-parentComment')?.dataset - ?.parentCommentId ?? 0 + document.querySelector('.js-project-parentComment')?.dataset?.parentCommentId ?? 0 fetch(postCommentUrl, { method: 'POST', @@ -272,12 +244,8 @@ export function ProjectComments( replyButtons.forEach((replyButton) => { replyButton.addEventListener('click', function () { const commentWrapper = document.querySelector('#user-comment-wrapper') - const showCommentWrapperButton = document.querySelector( - '#show-add-reply-button', - ) - const hideCommentWrapperButton = document.querySelector( - '#hide-add-reply-button', - ) + const showCommentWrapperButton = document.querySelector('#show-add-reply-button') + const hideCommentWrapperButton = document.querySelector('#hide-add-reply-button') if (commentWrapper.style.display !== 'none') { commentWrapper.style.display = 'none' if (showCommentWrapperButton) { @@ -315,28 +283,21 @@ export function ProjectComments( } function updateCommentsVisibility() { - const commentsClassSelector = document.querySelector( - '.comments-class-selector', - ).dataset.commentsClassSelector - - document - .querySelectorAll(commentsClassSelector) - .forEach((comment, index) => { - if (index < amountOfVisibleComments) { - comment.style.display = 'block' - } else { - comment.style.display = 'none' - } - }) + const commentsClassSelector = document.querySelector('.comments-class-selector').dataset + .commentsClassSelector + + document.querySelectorAll(commentsClassSelector).forEach((comment, index) => { + if (index < amountOfVisibleComments) { + comment.style.display = 'block' + } else { + comment.style.display = 'none' + } + }) } function updateButtonVisibility() { - const showLessCommentsButton = document.querySelector( - '#show-less-comments-button', - ) - const showMoreCommentsButton = document.querySelector( - '#show-more-comments-button', - ) + const showLessCommentsButton = document.querySelector('#show-less-comments-button') + const showMoreCommentsButton = document.querySelector('#show-more-comments-button') if (amountOfVisibleComments > minAmountOfVisibleComments) { showLessCommentsButton.style.display = 'block' @@ -352,28 +313,21 @@ export function ProjectComments( } function showMore(step) { - amountOfVisibleComments = Math.min( - amountOfVisibleComments + step, - totalAmountOfComments, - ) + amountOfVisibleComments = Math.min(amountOfVisibleComments + step, totalAmountOfComments) setVisibleCommentsSessionVar() updateCommentsVisibility() updateButtonVisibility() } function showLess(step) { - amountOfVisibleComments = Math.max( - amountOfVisibleComments - step, - minAmountOfVisibleComments, - ) + amountOfVisibleComments = Math.max(amountOfVisibleComments - step, minAmountOfVisibleComments) setVisibleCommentsSessionVar() updateCommentsVisibility() updateButtonVisibility() } function getVisibleCommentsSessionVarName() { - return document.querySelector('.session-vars-names').dataset - .visibleCommentsSessionVar + return document.querySelector('.session-vars-names').dataset.visibleCommentsSessionVar } function setVisibleCommentsSessionVar() { diff --git a/assets/Project/ProjectCredits.js b/assets/Project/ProjectCredits.js index c7337248ed..8d4fcb44bf 100644 --- a/assets/Project/ProjectCredits.js +++ b/assets/Project/ProjectCredits.js @@ -1,17 +1,8 @@ -export function ProjectCredits( - programId, - usersLanguage, - myProgram, - customTranslationApi, -) { +export function ProjectCredits(programId, usersLanguage, myProgram, customTranslationApi) { const credits = document.getElementById('credits') if (!myProgram) { - customTranslationApi.getCustomTranslation( - programId, - usersLanguage.substring(0, 2), - setCredits, - ) + customTranslationApi.getCustomTranslation(programId, usersLanguage.substring(0, 2), setCredits) function setCredits(value) { credits.textContent = value diff --git a/assets/Project/ProjectDescription.js b/assets/Project/ProjectDescription.js index 25fc988f11..b2e0020553 100644 --- a/assets/Project/ProjectDescription.js +++ b/assets/Project/ProjectDescription.js @@ -7,13 +7,9 @@ export function ProjectDescription( customTranslationApi, ) { const description = document.getElementById('description') - const descriptionCreditsContainer = document.getElementById( - 'description-credits-container', - ) + const descriptionCreditsContainer = document.getElementById('description-credits-container') const showMoreToggle = document.getElementById('descriptionShowMoreToggle') - const descriptionShowMoreText = document.getElementById( - 'descriptionShowMoreText', - ) + const descriptionShowMoreText = document.getElementById('descriptionShowMoreText') initShowMore() diff --git a/assets/Project/ProjectEditor.js b/assets/Project/ProjectEditor.js index ac3e8a0a04..17d4ef3cc1 100644 --- a/assets/Project/ProjectEditor.js +++ b/assets/Project/ProjectEditor.js @@ -6,14 +6,10 @@ import { DIALOG } from './ProjectEditorModel' export function ProjectEditor(projectDescriptionCredits, programId, model) { this.body = document.body this.editTextUI = document.getElementById('edit-text-ui') - this.languageSelectorList = document.getElementById( - 'edit-language-selector-list', - ) + this.languageSelectorList = document.getElementById('edit-language-selector-list') this.saveButton = document.getElementById('edit-submit-button') - this.languageSelect = new MDCSelect( - document.querySelector('#edit-language-selector'), - ) + this.languageSelect = new MDCSelect(document.querySelector('#edit-language-selector')) this.closeEditorDialog = new ProjectEditorDialog( projectDescriptionCredits.dataset.transCloseEditorPrompt, @@ -29,9 +25,7 @@ export function ProjectEditor(projectDescriptionCredits, programId, model) { this.saveButton.addEventListener('click', model.save) - document - .getElementById('edit-delete-button') - .addEventListener('click', model.deleteTranslation) + document.getElementById('edit-delete-button').addEventListener('click', model.deleteTranslation) this.languageSelect.listen('MDCSelect:change', () => { if (!this.editTextUI.classList.contains('d-none')) { @@ -39,28 +33,18 @@ export function ProjectEditor(projectDescriptionCredits, programId, model) { } }) - Array.from(document.querySelectorAll('.mdc-text-field__input')).forEach( - (input) => { - input.addEventListener('input', model.onInput) - }, - ) + Array.from(document.querySelectorAll('.mdc-text-field__input')).forEach((input) => { + input.addEventListener('input', model.onInput) + }) - this.show = ( - navigationCallback, - language, - showLanguageSelect, - showDeleteButton, - headerText, - ) => { + this.show = (navigationCallback, language, showLanguageSelect, showDeleteButton, headerText) => { this.navigationCallback = navigationCallback this.showLanguageSelect = showLanguageSelect this.showDeleteButton = showDeleteButton model.show(language) - const languageSelectElement = document.getElementById( - 'edit-language-selector', - ) + const languageSelectElement = document.getElementById('edit-language-selector') if (this.showLanguageSelect) { languageSelectElement.classList.remove('d-none') } else { diff --git a/assets/Project/ProjectEditorModel.js b/assets/Project/ProjectEditorModel.js index 8ce6582a78..f8dd07f7fd 100644 --- a/assets/Project/ProjectEditorModel.js +++ b/assets/Project/ProjectEditorModel.js @@ -84,11 +84,7 @@ export function ProjectEditorModel(programId, textFieldModels) { this.deleteTranslationResult = (result) => { if (result.isDenied) { - Promise.all( - this.textFieldModels.map((textField) => - textField.delete(this.selectedLanguage), - ), - ) + Promise.all(this.textFieldModels.map((textField) => textField.delete(this.selectedLanguage))) .then((results) => { if (results.length === this.textFieldModels.length) { this.onClose() @@ -128,10 +124,7 @@ export function ProjectEditorModel(programId, textFieldModels) { }) .then((response) => { if (response.ok) { - if ( - this.selectedLanguage === '' || - this.selectedLanguage === 'default' - ) { + if (this.selectedLanguage === '' || this.selectedLanguage === 'default') { this.onReload() } } else if (response.status === 401) { @@ -174,11 +167,10 @@ export function ProjectEditorModel(programId, textFieldModels) { document.addEventListener('DOMContentLoaded', () => this.getLanguages()) this.getLanguages = () => { - const languagesPromise = fetch('../languages').then((response) => - response.json(), + const languagesPromise = fetch('../languages').then((response) => response.json()) + const definedLanguagesPromise = this.customTranslationApi.getCustomTranslationLanguages( + this.programId, ) - const definedLanguagesPromise = - this.customTranslationApi.getCustomTranslationLanguages(this.programId) Promise.all([languagesPromise, definedLanguagesPromise]).then((results) => { this.languages = results[0] @@ -202,9 +194,7 @@ export function ProjectEditorModel(programId, textFieldModels) { } this.areChangesSaved = () => { - return this.textFieldModels.every((textField) => - textField.areChangesSaved(), - ) + return this.textFieldModels.every((textField) => textField.areChangesSaved()) } this.fetchText = () => { diff --git a/assets/Project/ProjectEditorNavigation.js b/assets/Project/ProjectEditorNavigation.js index 7e2774c806..85d17d48b0 100644 --- a/assets/Project/ProjectEditorNavigation.js +++ b/assets/Project/ProjectEditorNavigation.js @@ -1,11 +1,7 @@ import { CustomTranslationApi } from '../Api/CustomTranslationApi' import { showCustomTopBarTitle, showDefaultTopBarTitle } from '../Layout/TopBar' -export function ProjectEditorNavigation( - projectDescriptionCredits, - programId, - programEditor, -) { +export function ProjectEditorNavigation(projectDescriptionCredits, programId, programEditor) { const self = this this.programId = programId @@ -13,9 +9,7 @@ export function ProjectEditorNavigation( this.body = document.body this.editTextNavigation = document.getElementById('edit-text-navigation') - this.navigationLanguageList = document.getElementById( - 'navigation-language-list', - ) + this.navigationLanguageList = document.getElementById('navigation-language-list') this.languages = {} @@ -23,19 +17,14 @@ export function ProjectEditorNavigation( this.translationsText = projectDescriptionCredits.dataset.transTranslations this.defaultText = projectDescriptionCredits.dataset.transDefault - this.translationTitleText = - projectDescriptionCredits.dataset.transTranslationTitle + this.translationTitleText = projectDescriptionCredits.dataset.transTranslationTitle this.editDefaultText = projectDescriptionCredits.dataset.transEditDefault - this.editTranslationText = - projectDescriptionCredits.dataset.transEditTranslation - this.createTranslationText = - projectDescriptionCredits.dataset.transCreateTranslation - - document - .getElementById('add-translation-button') - .addEventListener('click', () => { - this.openEditor(null, true, false, this.createTranslationText) - }) + this.editTranslationText = projectDescriptionCredits.dataset.transEditTranslation + this.createTranslationText = projectDescriptionCredits.dataset.transCreateTranslation + + document.getElementById('add-translation-button').addEventListener('click', () => { + this.openEditor(null, true, false, this.createTranslationText) + }) document.addEventListener('DOMContentLoaded', getLanguages) @@ -85,12 +74,7 @@ export function ProjectEditorNavigation( this.editTextNavigation.classList.add('d-none') } - this.openEditor = ( - language, - showLanguageSelect, - showDeleteButton, - headerText, - ) => { + this.openEditor = (language, showLanguageSelect, showDeleteButton, headerText) => { window.removeEventListener('popstate', this.popStateHandler) this.programEditor.show( diff --git a/assets/Project/ProjectEditorTextField.js b/assets/Project/ProjectEditorTextField.js index 8832522976..ac1b4239d1 100644 --- a/assets/Project/ProjectEditorTextField.js +++ b/assets/Project/ProjectEditorTextField.js @@ -1,19 +1,13 @@ import { MDCTextField } from '@material/textfield' export function ProjectEditorTextField(model) { - this.editText = document.querySelector( - '#edit-' + model.programSection + '-text', - ) - this.editTextError = document.querySelector( - '#edit-' + model.programSection + '-text-error', - ) + this.editText = document.querySelector('#edit-' + model.programSection + '-text') + this.editTextError = document.querySelector('#edit-' + model.programSection + '-text-error') this.textLoadingSpinner = document.querySelector( '#edit-' + model.programSection + '-loading-spinner', ) - new MDCTextField( - document.querySelector('#edit-' + model.programSection + '-mdc-text-field'), - ) + new MDCTextField(document.querySelector('#edit-' + model.programSection + '-mdc-text-field')) this.editText.addEventListener('input', () => { model.setText(this.editText.value.trim()) diff --git a/assets/Project/ProjectEditorTextFieldModel.js b/assets/Project/ProjectEditorTextFieldModel.js index a164895d32..9f82ecb3e1 100644 --- a/assets/Project/ProjectEditorTextFieldModel.js +++ b/assets/Project/ProjectEditorTextFieldModel.js @@ -143,10 +143,6 @@ export function ProjectEditorTextFieldModel( this.shouldDisable = (languageSelected) => { // User should not be able to define custom translation if field is not defined in default language - return ( - !this.hasDefaultLanguage && - languageSelected !== '' && - languageSelected !== 'default' - ) + return !this.hasDefaultLanguage && languageSelected !== '' && languageSelected !== 'default' } } diff --git a/assets/Project/ProjectList.js b/assets/Project/ProjectList.js index 1ac21dd727..21a6147470 100644 --- a/assets/Project/ProjectList.js +++ b/assets/Project/ProjectList.js @@ -26,9 +26,7 @@ export class ProjectList { this.$title = container.querySelector('.project-list__title') this.$body = document.body this.$chevronLeft = container.querySelector('.project-list__chevrons__left') - this.$chevronRight = container.querySelector( - '.project-list__chevrons__right', - ) + this.$chevronRight = container.querySelector('.project-list__chevrons__right') this.apiUrl = this.formatApiUrl(apiUrl) this.popStateHandler = this.closeFullView.bind(this) @@ -40,10 +38,7 @@ export class ProjectList { let attributes = 'id,name,project_url,screenshot_small,screenshot_large,not_for_kids,uploaded_string,' - if ( - this.propertyToShow && - !attributes.includes(`,${this.propertyToShow},`) - ) { + if (this.propertyToShow && !attributes.includes(`,${this.propertyToShow},`)) { attributes += this.propertyToShow } return apiUrl.includes('?') @@ -58,9 +53,7 @@ export class ProjectList { this.fetchActive = true - fetch( - `${this.apiUrl}limit=${this.projectFetchCount}&offset=${this.projectsLoaded}`, - ) + fetch(`${this.apiUrl}limit=${this.projectFetchCount}&offset=${this.projectsLoaded}`) .then((response) => response.json()) .then((data) => { if (!Array.isArray(data)) { @@ -91,10 +84,7 @@ export class ProjectList { this.fetchActive = false }) .catch((error) => { - console.error( - `Failed loading projects in category ${this.category}`, - error, - ) + console.error(`Failed loading projects in category ${this.category}`, error) this.container.classList.remove('loading') }) } @@ -128,10 +118,7 @@ export class ProjectList { createImageElement(data) { const img = document.createElement('img') img.setAttribute('data-src', data.screenshot_small) - img.setAttribute( - 'data-srcset', - `${data.screenshot_small} 80w, ${data.screenshot_large} 480w`, - ) + img.setAttribute('data-srcset', `${data.screenshot_small} 80w, ${data.screenshot_large} 480w`) img.setAttribute('data-sizes', '(min-width: 768px) 10vw, 25vw') img.className = 'lazyload project-list__project__image' if (data.not_for_kids) { @@ -152,9 +139,7 @@ export class ProjectList { } const propertyValue = - this.propertyToShow === 'uploaded' - ? data.uploaded_string - : data[this.propertyToShow] + this.propertyToShow === 'uploaded' ? data.uploaded_string : data[this.propertyToShow] const icon = document.createElement('i') icon.className = 'material-icons' @@ -171,8 +156,7 @@ export class ProjectList { addNotForKidsElement(projectElement) { const notForKidsDiv = document.createElement('div') - notForKidsDiv.className = - 'lazyload project-list__project__property__not-for-kids' + notForKidsDiv.className = 'lazyload project-list__project__property__not-for-kids' const notForKidsImg = document.createElement('img') notForKidsImg.className = 'lazyload project-list__not-for-kids-logo' @@ -191,9 +175,7 @@ export class ProjectList { if (!this.$chevronRight) { return } - if ( - this.projectsContainer.scrollWidth > this.projectsContainer.clientWidth - ) { + if (this.projectsContainer.scrollWidth > this.projectsContainer.clientWidth) { this.$chevronRight.style.display = 'block' } else { this.$chevronRight.style.display = 'none' @@ -211,31 +193,15 @@ export class ProjectList { initListeners() { window.addEventListener('popstate', this.handlePopState.bind(this)) - this.projectsContainer?.addEventListener( - 'scroll', - this.handleHorizontalScroll.bind(this), - ) - this.container?.addEventListener( - 'scroll', - this.handleVerticalScroll.bind(this), - ) + this.projectsContainer?.addEventListener('scroll', this.handleHorizontalScroll.bind(this)) + this.container?.addEventListener('scroll', this.handleVerticalScroll.bind(this)) this.$title?.addEventListener('click', this.handleTitleClick.bind(this)) - this.$chevronLeft?.addEventListener( - 'click', - this.handleChevronLeftClick.bind(this), - ) - this.$chevronRight?.addEventListener( - 'click', - this.handleChevronRightClick.bind(this), - ) + this.$chevronLeft?.addEventListener('click', this.handleChevronLeftClick.bind(this)) + this.$chevronRight?.addEventListener('click', this.handleChevronRightClick.bind(this)) } handlePopState(event) { - if ( - event.state && - event.state.type === 'ProjectList' && - event.state.full === true - ) { + if (event.state && event.state.type === 'ProjectList' && event.state.full === true) { document.querySelector(`#${event.state.id}`).data('list').openFullView() } } @@ -253,8 +219,7 @@ export class ProjectList { handleVerticalScroll() { const pctVertical = - this.container.scrollTop / - (this.container.scrollHeight - this.container.clientHeight) + this.container.scrollTop / (this.container.scrollHeight - this.container.clientHeight) if (pctVertical >= 0.8) { this.fetchMore() } @@ -274,16 +239,12 @@ export class ProjectList { } handleChevronLeftClick() { - const width = this.projectsContainer.querySelector( - '.project-list__project', - ).offsetWidth + const width = this.projectsContainer.querySelector('.project-list__project').offsetWidth this.projectsContainer.scrollLeft -= 2 * width } handleChevronRightClick() { - const width = this.projectsContainer.querySelector( - '.project-list__project', - ).offsetWidth + const width = this.projectsContainer.querySelector('.project-list__project').offsetWidth this.projectsContainer.scrollLeft += 2 * width } @@ -299,9 +260,7 @@ export class ProjectList { this.$body.classList.add('overflow-hidden') if ( this.container.clientHeight === this.container.scrollHeight || - this.container.scrollTop / - (this.container.scrollHeight - this.container.clientHeight) >= - 0.8 + this.container.scrollTop / (this.container.scrollHeight - this.container.clientHeight) >= 0.8 ) { this.fetchMore() } diff --git a/assets/Project/ProjectLoader.js b/assets/Project/ProjectLoader.js index 4e899d995a..1911cdecc5 100644 --- a/assets/Project/ProjectLoader.js +++ b/assets/Project/ProjectLoader.js @@ -1,9 +1,6 @@ /* global sessionStorage */ -import { - showTopBarSearch, - controlTopBarSearchClearButton, -} from '../Layout/TopBar' +import { showTopBarSearch, controlTopBarSearchClearButton } from '../Layout/TopBar' require('./ProjectList.scss') /** @@ -54,12 +51,8 @@ export class ProjectLoader { return } - searchResultsText.querySelector('span').innerText = - data.CatrobatInformation.TotalProjects - this.totalNumberOfFoundProjects = parseInt( - data.CatrobatInformation.TotalProjects, - 10, - ) + searchResultsText.querySelector('span').innerText = data.CatrobatInformation.TotalProjects + this.totalNumberOfFoundProjects = parseInt(data.CatrobatInformation.TotalProjects, 10) await this.setup(data) } catch (error) { @@ -119,13 +112,10 @@ export class ProjectLoader { } async updateInitialDownloadLimit() { - if ( - this.restored_numberOfVisibleProjects === this.totalNumberOfFoundProjects - ) { + if (this.restored_numberOfVisibleProjects === this.totalNumberOfFoundProjects) { this.initialDownloadLimit = this.totalNumberOfFoundProjects } else if (this.initialDownloadLimit > this.downloadLimit) { - this.initialDownloadLimit -= - this.initialDownloadLimit % this.downloadLimit + this.initialDownloadLimit -= this.initialDownloadLimit % this.downloadLimit } else { this.initialDownloadLimit = this.downloadLimit } @@ -169,17 +159,10 @@ export class ProjectLoader { async showMoreProjects() { if (this.numberOfVisibleProjects >= this.totalNumberOfFoundProjects) { await this.hide(this.container.querySelector('.btn-show-more')) - } else if ( - this.numberOfLoadedProjects >= - this.numberOfVisibleProjects + this.downloadLimit - ) { - await this.updateNumberOfVisiblePrograms( - this.numberOfVisibleProjects + this.downloadLimit, - ) + } else if (this.numberOfLoadedProjects >= this.numberOfVisibleProjects + this.downloadLimit) { + await this.updateNumberOfVisiblePrograms(this.numberOfVisibleProjects + this.downloadLimit) await this.updateUIVisibility() - } else if ( - this.totalNumberOfFoundProjects === this.numberOfLoadedProjects - ) { + } else if (this.totalNumberOfFoundProjects === this.numberOfLoadedProjects) { await this.updateNumberOfVisiblePrograms(this.totalNumberOfFoundProjects) await this.updateUIVisibility() } else { @@ -210,8 +193,7 @@ export class ProjectLoader { async showLessProjects() { await this.updateNumberOfVisiblePrograms( - this.numberOfVisibleProjects - - (this.numberOfVisibleProjects % this.downloadLimit), + this.numberOfVisibleProjects - (this.numberOfVisibleProjects % this.downloadLimit), ) await this.updateUIVisibility() } @@ -246,10 +228,7 @@ export class ProjectLoader { restoreParamsWithSessionStorage() { const storageId = window.location.href.split('?')[0] - this.restored_numberOfVisibleProjects = parseInt( - sessionStorage.getItem(storageId), - 10, - ) + this.restored_numberOfVisibleProjects = parseInt(sessionStorage.getItem(storageId), 10) } async buildProjectInHtml(project, data) { diff --git a/assets/Project/ProjectName.js b/assets/Project/ProjectName.js index 960ae47e5d..a423368ac9 100644 --- a/assets/Project/ProjectName.js +++ b/assets/Project/ProjectName.js @@ -13,11 +13,7 @@ export function ProjectName( editorNavigation.show() }) } else { - customTranslationApi.getCustomTranslation( - programId, - usersLanguage.substring(0, 2), - setName, - ) + customTranslationApi.getCustomTranslation(programId, usersLanguage.substring(0, 2), setName) function setName(value) { name.textContent = value diff --git a/assets/Project/ProjectPage.js b/assets/Project/ProjectPage.js index f620532508..56e69c06d4 100644 --- a/assets/Project/ProjectPage.js +++ b/assets/Project/ProjectPage.js @@ -25,9 +25,7 @@ require('./ProjectPage.scss') const projectElement = document.querySelector('.js-project') const projectShareElement = document.querySelector('.js-project-share') -const projectDescriptionCreditsElement = document.querySelector( - '.js-project-description-credits', -) +const projectDescriptionCreditsElement = document.querySelector('.js-project-description-credits') const projectCommentsElement = document.querySelector('.js-project-comments') const appLanguageElement = document.querySelector('#app-language') @@ -62,11 +60,7 @@ if (projectElement.dataset.myProject === 'true') { const projectEditorModel = new ProjectEditorModel( projectDescriptionCreditsElement.dataset.projectId, - [ - nameEditorTextFieldModel, - descriptionEditorTextFieldModel, - creditsEditorTextFieldModel, - ], + [nameEditorTextFieldModel, descriptionEditorTextFieldModel, creditsEditorTextFieldModel], ) const projectEditor = new ProjectEditor( projectDescriptionCreditsElement, @@ -170,9 +164,7 @@ function initProjectScreenshotUpload() { const reader = new window.FileReader() reader.onerror = () => { document.getElementById('upload-image-spinner').classList.add('d-none') - MessageDialogs.showErrorMessage( - projectConfiguration.messages.screenshotInvalid, - ) + MessageDialogs.showErrorMessage(projectConfiguration.messages.screenshotInvalid) } reader.onload = (event) => { const image = event.currentTarget.result // base64 data url @@ -181,36 +173,26 @@ function initProjectScreenshotUpload() { projectElement.dataset.projectId, { screenshot: image }, function () { - const imageElement = document.getElementById( - 'project-thumbnail-big', - ) + const imageElement = document.getElementById('project-thumbnail-big') if (imageElement.src.includes('?')) { imageElement.src += '&x=' + new Date().getTime() } else { imageElement.src += '?x=' + new Date().getTime() } - document - .querySelector('.text-img-upload-success') - .classList.remove('d-none') + document.querySelector('.text-img-upload-success').classList.remove('d-none') setTimeout(function () { - document - .querySelector('.text-img-upload-success') - .classList.add('d-none') + document.querySelector('.text-img-upload-success').classList.add('d-none') }, 3000) }, function () { - document - .getElementById('upload-image-spinner') - .classList.add('d-none') + document.getElementById('upload-image-spinner').classList.add('d-none') }, ) } reader.readAsDataURL(input.files[0]) } } - const changeButton = document.getElementById( - 'change-project-thumbnail-button', - ) + const changeButton = document.getElementById('change-project-thumbnail-button') if (changeButton) { // otherwise user is not allowed to change screenshot (e.g., not owner of project) changeButton.addEventListener('click', function () { @@ -236,30 +218,26 @@ function initProjectScreenshotUpload() { initProjects() function initProjects() { - const recommendedProjectsElement = document.querySelector( - '#recommended-projects', - ) - document - .querySelectorAll('.project-list', recommendedProjectsElement) - .forEach((element) => { - const id = element.dataset.projectId - const category = element.dataset.category - const property = element.dataset.property - const theme = element.dataset.theme - const flavor = element.dataset.flavor - const baseUrl = element.dataset.baseUrl + const recommendedProjectsElement = document.querySelector('#recommended-projects') + document.querySelectorAll('.project-list', recommendedProjectsElement).forEach((element) => { + const id = element.dataset.projectId + const category = element.dataset.category + const property = element.dataset.property + const theme = element.dataset.theme + const flavor = element.dataset.flavor + const baseUrl = element.dataset.baseUrl - let url = `${baseUrl}/api/project/${id}/recommendations?category=${category}` + let url = `${baseUrl}/api/project/${id}/recommendations?category=${category}` - if (flavor !== 'pocketcode' || category === 'example') { - // Only the pocketcode flavor shows projects from all flavors! - // Other flavors must only show projects from their flavor. - url += `&flavor=${flavor}` - } + if (flavor !== 'pocketcode' || category === 'example') { + // Only the pocketcode flavor shows projects from all flavors! + // Other flavors must only show projects from their flavor. + url += `&flavor=${flavor}` + } - const list = new ProjectList(element, category, url, property, theme) - element.dataset.list = list - }) + const list = new ProjectList(element, category, url, property, theme) + element.dataset.list = list + }) } new TranslateComments( diff --git a/assets/Project/ProjectPage.scss b/assets/Project/ProjectPage.scss index 9c7702cfc6..1aaefb2564 100644 --- a/assets/Project/ProjectPage.scss +++ b/assets/Project/ProjectPage.scss @@ -107,14 +107,10 @@ $like-detail-button-size: 2.4rem; $like-detail-triangle-width: 2rem; $like-detail-triangle-height: math.div($like-detail-triangle-width, 1.38); - $like-detail-triangle-left: math.div( - $like-button-size, - 2 - $like-detail-left - ); + $like-detail-triangle-left: math.div($like-button-size, 2 - $like-detail-left); position: absolute; - top: -$like-detail-button-size - 2 * $like-detail-padding - - $like-detail-triangle-height; + top: -$like-detail-button-size - 2 * $like-detail-padding - $like-detail-triangle-height; left: $like-detail-left; display: none; padding: $like-detail-padding; diff --git a/assets/Project/ProjectReport.js b/assets/Project/ProjectReport.js index b99afb723a..77a1981f2a 100644 --- a/assets/Project/ProjectReport.js +++ b/assets/Project/ProjectReport.js @@ -25,26 +25,18 @@ export function ProjectReport( const SESSION_OLD_REPORT_REASON = 'oldReportReason' + programId const SESSION_OLD_REPORT_CATEGORY = 'oldReportCategory' + programId - document - .getElementById('top-app-bar__btn-report-project') - .addEventListener('click', function () { - if (!loggedIn) { - window.location.href = loginUrl - return - } + document.getElementById('top-app-bar__btn-report-project').addEventListener('click', function () { + if (!loggedIn) { + window.location.href = loginUrl + return + } - const oldReportReason = - sessionStorage.getItem(SESSION_OLD_REPORT_REASON) || '' - const oldReportCategory = - sessionStorage.getItem(SESSION_OLD_REPORT_CATEGORY) || '' - reportProgramDialog(false, oldReportReason, oldReportCategory) - }) + const oldReportReason = sessionStorage.getItem(SESSION_OLD_REPORT_REASON) || '' + const oldReportCategory = sessionStorage.getItem(SESSION_OLD_REPORT_CATEGORY) || '' + reportProgramDialog(false, oldReportReason, oldReportCategory) + }) - function reportProgramDialog( - error = false, - oldReason = '', - oldCategory = '', - ) { + function reportProgramDialog(error = false, oldReason = '', oldCategory = '') { Swal.fire({ title: reportDialogTitle, html: getReportDialogHtml(error, oldReason, oldCategory), @@ -62,8 +54,7 @@ export function ProjectReport( return new Promise(function (resolve) { resolve([ document.getElementById('report-reason').value, - document.querySelector('input[name="report-category"]:checked') - .value, + document.querySelector('input[name="report-category"]:checked').value, ]) }) }, @@ -159,8 +150,7 @@ export function ProjectReport( const errorClass = error ? 'text-area-empty' : '' const reasonPlaceholder = oldReason ? '' : reportDialogReason - const checkedInappropriate = - oldCategory === INAPPROPRIATE_VALUE ? CHECKED : '' + const checkedInappropriate = oldCategory === INAPPROPRIATE_VALUE ? CHECKED : '' const checkedCopyright = oldCategory === COPYRIGHT_VALUE ? CHECKED : '' const checkedSpam = oldCategory === SPAM_VALUE ? CHECKED : '' const checkedDislike = oldCategory === DISLIKE_VALUE ? CHECKED : '' diff --git a/assets/Search/LegacySearchPage.js b/assets/Search/LegacySearchPage.js index cbb2a1bbd7..45ddbff83f 100644 --- a/assets/Search/LegacySearchPage.js +++ b/assets/Search/LegacySearchPage.js @@ -7,10 +7,7 @@ class SearchOld { this.resultContainer = this.searchElement.dataset.resultContainer this.pathSearch = this.searchElement.dataset.pathSearch this.query = this.searchElement.dataset.query - this.projectLoader = new ProjectLoader( - this.resultContainer, - this.pathSearch, - ) + this.projectLoader = new ProjectLoader(this.resultContainer, this.pathSearch) } searchResult() { diff --git a/assets/Search/SearchPage.js b/assets/Search/SearchPage.js index 44f569f3aa..30b45bd5d4 100644 --- a/assets/Search/SearchPage.js +++ b/assets/Search/SearchPage.js @@ -1,7 +1,4 @@ -import { - controlTopBarSearchClearButton, - showTopBarSearch, -} from '../Layout/TopBar' +import { controlTopBarSearchClearButton, showTopBarSearch } from '../Layout/TopBar' import { ProjectList } from '../Project/ProjectList' import { UserList } from '../User/UserList' import './Search.scss' @@ -43,15 +40,7 @@ class Search { noProjects, ) - this.userList = new UserList( - searchUsers, - baseUrl, - userUrl, - theme, - projectString, - 30, - noUsers, - ) + this.userList = new UserList(searchUsers, baseUrl, userUrl, theme, projectString, 30, noUsers) } } diff --git a/assets/Security/LoginTokenHandler.js b/assets/Security/LoginTokenHandler.js index 12ffbc696e..a0f5c312c4 100644 --- a/assets/Security/LoginTokenHandler.js +++ b/assets/Security/LoginTokenHandler.js @@ -18,15 +18,13 @@ export class LoginTokenHandler { initListeners() { const self = this - document - .getElementById('login-form') - .addEventListener('submit', function (event) { - event.preventDefault() - self.login({ - username: document.getElementById('username__input').value, - password: document.getElementById('password__input').value, - }) + document.getElementById('login-form').addEventListener('submit', function (event) { + event.preventDefault() + self.login({ + username: document.getElementById('username__input').value, + password: document.getElementById('password__input').value, }) + }) } login(data) { @@ -45,12 +43,7 @@ export class LoginTokenHandler { } }) .then((data) => { - setCookie( - 'BEARER', - data.token, - 'Tue, 19 Jan 2038 00:00:01 GMT', - this.baseUrl + '/', - ) + setCookie('BEARER', data.token, 'Tue, 19 Jan 2038 00:00:01 GMT', this.baseUrl + '/') setCookie( 'REFRESH_TOKEN', data.refresh_token, diff --git a/assets/Security/TokenExpirationHandler.js b/assets/Security/TokenExpirationHandler.js index 3c0821108c..0c618c7c61 100644 --- a/assets/Security/TokenExpirationHandler.js +++ b/assets/Security/TokenExpirationHandler.js @@ -8,11 +8,7 @@ export class TokenExpirationHandler { this.indexPath = routingDataset.index this.authenticationRefreshPath = routingDataset.authenticationRefresh this.checkBearerTokenExpiration() - this.interval = this.setScopedInterval( - this.checkBearerTokenExpiration, - 60000, - this, - ) + this.interval = this.setScopedInterval(this.checkBearerTokenExpiration, 60000, this) } checkBearerTokenExpiration() { @@ -52,12 +48,7 @@ export class TokenExpirationHandler { } }) .then((data) => { - setCookie( - 'BEARER', - data.token, - 'Tue, 19 Jan 2038 00:00:01 GMT', - this.baseUrl + '/', - ) + setCookie('BEARER', data.token, 'Tue, 19 Jan 2038 00:00:01 GMT', this.baseUrl + '/') setCookie( 'REFRESH_TOKEN', data.refresh_token, diff --git a/assets/Studio/AddProject.js b/assets/Studio/AddProject.js index d94467e3e0..8ded4534f6 100644 --- a/assets/Studio/AddProject.js +++ b/assets/Studio/AddProject.js @@ -44,7 +44,5 @@ function handleImageClickRemove(projectId) { } document.getElementById('clicked-projects_own_and_studio_projects').value = - clickedProjectsRemove.length > 0 - ? JSON.stringify(clickedProjectsRemove) - : '' + clickedProjectsRemove.length > 0 ? JSON.stringify(clickedProjectsRemove) : '' } diff --git a/assets/Studio/CreatePage.js b/assets/Studio/CreatePage.js index 5f1d570a2f..af3a2a413b 100644 --- a/assets/Studio/CreatePage.js +++ b/assets/Studio/CreatePage.js @@ -50,8 +50,7 @@ document.addEventListener('DOMContentLoaded', function () { } function drag() { - document.getElementById('uploadFile').parentNode.className = - 'draging dragBox' + document.getElementById('uploadFile').parentNode.className = 'draging dragBox' } function drop() { @@ -75,9 +74,7 @@ document.addEventListener('DOMContentLoaded', function () { }) } - const checkboxesPublic = document.getElementsByClassName( - 'check-studios-public', - ) + const checkboxesPublic = document.getElementsByClassName('check-studios-public') for (let i = 0; i < checkboxesPublic.length; i++) { checkboxesPublic[i].addEventListener('input', function (event) { resetCssInvalidCheckbox(checkboxesPublic) @@ -85,9 +82,7 @@ document.addEventListener('DOMContentLoaded', function () { }) } - const checkboxesComments = document.getElementsByClassName( - 'check-studios-comments', - ) + const checkboxesComments = document.getElementsByClassName('check-studios-comments') for (let i = 0; i < checkboxesComments.length; i++) { checkboxesComments[i].addEventListener('input', function (event) { resetCssInvalidCheckbox(checkboxesComments) @@ -98,12 +93,8 @@ document.addEventListener('DOMContentLoaded', function () { function submitForm() { const nameInput = document.getElementById('inputStudioName').value.trim() - const descriptionInput = document - .getElementById('inputStudioDescription') - .value.trim() - const isEnabledValue = document.querySelector( - '.check-studios[name="form[is_enabled]"]:checked', - ) + const descriptionInput = document.getElementById('inputStudioDescription').value.trim() + const isEnabledValue = document.querySelector('.check-studios[name="form[is_enabled]"]:checked') const isPublicValue = document.querySelector( '.check-studios-public[name="form[is_public]"]:checked', ) @@ -170,9 +161,7 @@ function cancelForm() { } function parseInput() { - const isEnableChecked = document.querySelector( - '.check-studios[name="form[is_enabled]"]:checked', - ) + const isEnableChecked = document.querySelector('.check-studios[name="form[is_enabled]"]:checked') const isPublicChecked = document.querySelector( '.check-studios-public[name="form[is_public]"]:checked', ) @@ -199,15 +188,12 @@ function parseInput() { } if (!allowCommentsChecked) { - const radioInputs = document.getElementsByClassName( - 'check-studios-comments', - ) + const radioInputs = document.getElementsByClassName('check-studios-comments') for (let i = 0; i < radioInputs.length; i++) { radioInputs[i].classList.add('warning') } const warningMessage = document.getElementById('allow-comments-warning') - warningMessage.textContent = - 'Please select whether to allow comments or not in the studio!' + warningMessage.textContent = 'Please select whether to allow comments or not in the studio!' wrongInput = true } if (!isPublicChecked) { @@ -216,8 +202,7 @@ function parseInput() { radioInputs[i].classList.add('warning') } const warningMessage = document.getElementById('is-public-warning') - warningMessage.textContent = - 'Please select whether the studio should be private or public!' + warningMessage.textContent = 'Please select whether the studio should be private or public!' wrongInput = true } if (wrongInput) { diff --git a/assets/Studio/StudioDetailPage.js b/assets/Studio/StudioDetailPage.js index 7d415d9998..6575a16657 100644 --- a/assets/Studio/StudioDetailPage.js +++ b/assets/Studio/StudioDetailPage.js @@ -23,33 +23,19 @@ document.getElementById('std-header-form')?.addEventListener('change', () => { document.querySelectorAll('.comment-delete-button').forEach((element) => element.addEventListener('click', (e) => { const studioId = document.getElementById('studio-id').value - new StudioCommentHandler().removeComment( - studioId, - element, - element.dataset.commentId, - false, - 0, - ) + new StudioCommentHandler().removeComment(studioId, element, element.dataset.commentId, false, 0) }), ) -document - .getElementById('studio-send-comment') - ?.addEventListener('click', () => { - const studioId = document.getElementById('studio-id').value - new StudioCommentHandler().postComment(studioId, false) - }) +document.getElementById('studio-send-comment')?.addEventListener('click', () => { + const studioId = document.getElementById('studio-id').value + new StudioCommentHandler().postComment(studioId, false) +}) document.querySelectorAll('.comment-replies').forEach((element) => element.addEventListener('click', (e) => { const studioId = document.getElementById('studio-id').value - new StudioCommentHandler().loadReplies( - studioId, - element, - element.dataset.commentId, - false, - 0, - ) + new StudioCommentHandler().loadReplies(studioId, element, element.dataset.commentId, false, 0) }), ) function uploadCoverImage(file, studioId) { @@ -100,12 +86,8 @@ document.addEventListener('DOMContentLoaded', () => { }) }) - const pendingJoinButton = document.querySelectorAll( - '#pending-join-requests button.mdc-switch', - ) - const buttonsDeclined = document.querySelectorAll( - '#declined-join-requests button.mdc-switch', - ) + const pendingJoinButton = document.querySelectorAll('#pending-join-requests button.mdc-switch') + const buttonsDeclined = document.querySelectorAll('#declined-join-requests button.mdc-switch') pendingJoinButton.forEach(function (button) { button.addEventListener('click', function () { const buttonAriaChecked = button.getAttribute('aria-checked') @@ -176,14 +158,10 @@ document.addEventListener('DOMContentLoaded', function () { clickedProjectsAdminRemove.splice(index, 1) } AJAXdata = - clickedProjectsAdminRemove.length > 0 - ? JSON.stringify(clickedProjectsAdminRemove) - : '' + clickedProjectsAdminRemove.length > 0 ? JSON.stringify(clickedProjectsAdminRemove) : '' } }) - const ajaxRequestDeleteProject = document.getElementById( - 'ajaxRequestDeleteProject', - ) + const ajaxRequestDeleteProject = document.getElementById('ajaxRequestDeleteProject') if (ajaxRequestDeleteProject) { ajaxRequestDeleteProject.addEventListener('click', function () { if (AJAXdata !== '') { diff --git a/assets/Studio/StudiosPage.js b/assets/Studio/StudiosPage.js index a1870a9c22..539706e905 100644 --- a/assets/Studio/StudiosPage.js +++ b/assets/Studio/StudiosPage.js @@ -17,15 +17,13 @@ document.addEventListener('DOMContentLoaded', () => { } }) - document - .querySelectorAll('.studios-list-item .mdc-icon-button') - .forEach((el) => { - el.addEventListener('click', (ev) => { - ev.preventDefault() - const id = el.dataset.studioId - menus[id].open = menus[id].open ? !menus[id].open : true - }) + document.querySelectorAll('.studios-list-item .mdc-icon-button').forEach((el) => { + el.addEventListener('click', (ev) => { + ev.preventDefault() + const id = el.dataset.studioId + menus[id].open = menus[id].open ? !menus[id].open : true }) + }) document.querySelectorAll('.ajaxRequestJoinLeaveReport').forEach((el) => { el.addEventListener('click', (event) => { diff --git a/assets/Translate/TranslateComments.js b/assets/Translate/TranslateComments.js index 039777f068..bd14952373 100644 --- a/assets/Translate/TranslateComments.js +++ b/assets/Translate/TranslateComments.js @@ -8,113 +8,70 @@ export class TranslateComments extends Translation { _initListeners() { const translateComments = this - document - .querySelectorAll('.comment-translation-button') - .forEach((button) => { - button.addEventListener('click', function (event) { - event.stopPropagation() - const commentId = this.id.substring( - 'comment-translation-button-'.length, - ) - const matchingContainer = document.querySelector( - '.comment-translation[data-translate-comment-id="translate-comment-' + - commentId + - '"]', - ) - const translateCommentUrl = - matchingContainer.dataset.pathTranslateComment + document.querySelectorAll('.comment-translation-button').forEach((button) => { + button.addEventListener('click', function (event) { + event.stopPropagation() + const commentId = this.id.substring('comment-translation-button-'.length) + const matchingContainer = document.querySelector( + '.comment-translation[data-translate-comment-id="translate-comment-' + commentId + '"]', + ) + const translateCommentUrl = matchingContainer.dataset.pathTranslateComment - this.style.display = 'none' + this.style.display = 'none' - if ( - translateComments.isTranslationNotAvailable( - '#comment-text-translation-' + commentId, - ) - ) { - document.getElementById( - 'comment-translation-loading-spinner-' + commentId, - ).style.display = 'block' - translateComments.translateComment(translateCommentUrl, commentId) - } else { - translateComments.openTranslatedComment(commentId) - } - }) - }) - - document - .querySelectorAll('.remove-comment-translation-button') - .forEach((button) => { - button.addEventListener('click', function (event) { - event.stopPropagation() - const commentId = this.id.substring( - 'remove-comment-translation-button-'.length, - ) - this.style.display = 'none' - document.getElementById( - 'comment-translation-button-' + commentId, - ).style.display = 'block' - document.getElementById( - 'comment-translation-wrapper-' + commentId, - ).style.display = 'none' + if (translateComments.isTranslationNotAvailable('#comment-text-translation-' + commentId)) { document.getElementById( - 'comment-text-wrapper-' + commentId, + 'comment-translation-loading-spinner-' + commentId, ).style.display = 'block' - }) + translateComments.translateComment(translateCommentUrl, commentId) + } else { + translateComments.openTranslatedComment(commentId) + } + }) + }) + + document.querySelectorAll('.remove-comment-translation-button').forEach((button) => { + button.addEventListener('click', function (event) { + event.stopPropagation() + const commentId = this.id.substring('remove-comment-translation-button-'.length) + this.style.display = 'none' + document.getElementById('comment-translation-button-' + commentId).style.display = 'block' + document.getElementById('comment-translation-wrapper-' + commentId).style.display = 'none' + document.getElementById('comment-text-wrapper-' + commentId).style.display = 'block' }) + }) } setTranslatedCommentData(commentId, data) { - const commentTextTranslation = document.getElementById( - 'comment-text-translation-' + commentId, - ) + const commentTextTranslation = document.getElementById('comment-text-translation-' + commentId) commentTextTranslation.textContent = data.translation commentTextTranslation.setAttribute('lang', data.target_language) const byLineElements = new ByLineElementContainer( - document.getElementById( - 'comment-translation-before-languages-' + commentId, - ), - document.getElementById( - 'comment-translation-between-languages-' + commentId, - ), - document.getElementById( - 'comment-translation-after-languages-' + commentId, - ), - document.getElementById( - 'comment-translation-first-language-' + commentId, - ), - document.getElementById( - 'comment-translation-second-language-' + commentId, - ), + document.getElementById('comment-translation-before-languages-' + commentId), + document.getElementById('comment-translation-between-languages-' + commentId), + document.getElementById('comment-translation-after-languages-' + commentId), + document.getElementById('comment-translation-first-language-' + commentId), + document.getElementById('comment-translation-second-language-' + commentId), ) this.setTranslationCredit(data, byLineElements) } openTranslatedComment(commentId) { - document.getElementById( - 'comment-translation-loading-spinner-' + commentId, - ).style.display = 'none' - document.getElementById( - 'remove-comment-translation-button-' + commentId, - ).style.display = 'block' - document.getElementById( - 'comment-translation-wrapper-' + commentId, - ).style.display = 'block' - document.getElementById('comment-text-wrapper-' + commentId).style.display = + document.getElementById('comment-translation-loading-spinner-' + commentId).style.display = 'none' + document.getElementById('remove-comment-translation-button-' + commentId).style.display = + 'block' + document.getElementById('comment-translation-wrapper-' + commentId).style.display = 'block' + document.getElementById('comment-text-wrapper-' + commentId).style.display = 'none' } commentNotTranslated(commentId) { - document.getElementById( - 'comment-translation-loading-spinner-' + commentId, - ).style.display = 'none' - document.getElementById( - 'comment-translation-button-' + commentId, - ).style.display = 'block' - this.openGoogleTranslatePage( - document.getElementById('comment-text-' + commentId).innerText, - ) + document.getElementById('comment-translation-loading-spinner-' + commentId).style.display = + 'none' + document.getElementById('comment-translation-button-' + commentId).style.display = 'block' + this.openGoogleTranslatePage(document.getElementById('comment-text-' + commentId).innerText) } translateComment(translateCommentUrl, commentId) { diff --git a/assets/Translate/TranslateProgram.js b/assets/Translate/TranslateProgram.js index 4a30222105..8a5cad7f0a 100644 --- a/assets/Translate/TranslateProgram.js +++ b/assets/Translate/TranslateProgram.js @@ -1,13 +1,7 @@ import { ByLineElementContainer, Translation } from './Translation' export class TranslateProgram extends Translation { - constructor( - translatedByLine, - googleTranslateDisplayName, - programId, - hasDescription, - hasCredit, - ) { + constructor(translatedByLine, googleTranslateDisplayName, programId, hasDescription, hasCredit) { super(translatedByLine, googleTranslateDisplayName) this.programId = programId this.hasDescription = hasDescription @@ -29,9 +23,7 @@ export class TranslateProgram extends Translation { this.style.display = 'none' if (translateProgram.isTranslationNotAvailable('#name-translation')) { - document.getElementById( - 'project-translation-loading-spinner', - ).style.display = 'block' + document.getElementById('project-translation-loading-spinner').style.display = 'block' translateProgram.translateProgram() } else { translateProgram.openTranslatedProgram() @@ -42,8 +34,7 @@ export class TranslateProgram extends Translation { .getElementById('remove-project-translation-button') .addEventListener('click', function (event) { this.style.display = 'none' - document.getElementById('project-translation-button').style.display = - 'block' + document.getElementById('project-translation-button').style.display = 'block' const name = document.getElementById('name') const nameTranslation = document.getElementById('name-translation') @@ -63,12 +54,10 @@ export class TranslateProgram extends Translation { if (translateProgram.hasDescription) { document.getElementById('description').style.display = 'block' - document.getElementById('description-translation').style.display = - 'none' + document.getElementById('description-translation').style.display = 'none' } - document.getElementById('credits-translation-wrapper').style.display = - 'none' + document.getElementById('credits-translation-wrapper').style.display = 'none' if (translateProgram.hasCredit) { document.getElementById('credits').style.display = 'block' } @@ -81,13 +70,11 @@ export class TranslateProgram extends Translation { nameTranslation.textContent = data.translated_title if (this.hasDescription) { - document.getElementById('description-translation').textContent = - data.translated_description + document.getElementById('description-translation').textContent = data.translated_description } if (this.hasCredit) { - document.getElementById('credits-translation').textContent = - data.translated_credit + document.getElementById('credits-translation').textContent = data.translated_credit } const byLineElements = new ByLineElementContainer( @@ -102,11 +89,8 @@ export class TranslateProgram extends Translation { } openTranslatedProgram() { - document.getElementById( - 'project-translation-loading-spinner', - ).style.display = 'none' - document.getElementById('remove-project-translation-button').style.display = - 'block' + document.getElementById('project-translation-loading-spinner').style.display = 'none' + document.getElementById('remove-project-translation-button').style.display = 'block' const name = document.getElementById('name') const nameTranslation = document.getElementById('name-translation') @@ -129,19 +113,15 @@ export class TranslateProgram extends Translation { document.getElementById('description').style.display = 'none' } - document.getElementById('credits-translation-wrapper').style.display = - 'block' + document.getElementById('credits-translation-wrapper').style.display = 'block' if (this.hasCredit) { document.getElementById('credits').style.display = 'none' } } programNotTranslated() { - document.getElementById( - 'project-translation-loading-spinner', - ).style.display = 'none' - document.getElementById('project-translation-button').style.display = - 'block' + document.getElementById('project-translation-loading-spinner').style.display = 'none' + document.getElementById('project-translation-button').style.display = 'block' let text = document.getElementById('name').innerText @@ -158,15 +138,9 @@ export class TranslateProgram extends Translation { translateProgram() { const self = this - fetch( - '../translate/project/' + - self.programId + - '?target_language=' + - self.targetLanguage, - { - method: 'GET', - }, - ) + fetch('../translate/project/' + self.programId + '?target_language=' + self.targetLanguage, { + method: 'GET', + }) .then((response) => response.json()) .then((data) => { self.setTranslatedProgramData(data) diff --git a/assets/Translate/Translation.js b/assets/Translate/Translation.js index 17e4d3b2fd..0a4e0621b9 100644 --- a/assets/Translate/Translation.js +++ b/assets/Translate/Translation.js @@ -22,10 +22,7 @@ export class Translation { setTargetLanguage() { const appLanguageElement = document.getElementById('app-language') - this.targetLanguage = appLanguageElement.dataset.appLanguage.replace( - '_', - '-', - ) + this.targetLanguage = appLanguageElement.dataset.appLanguage.replace('_', '-') } setDisplayLanguageMap() { @@ -46,10 +43,7 @@ export class Translation { } this.translatedByLineMap = { - before: this.translatedByLine.substring( - 0, - this.translatedByLine.indexOf(firstLanguage), - ), + before: this.translatedByLine.substring(0, this.translatedByLine.indexOf(firstLanguage)), between: this.translatedByLine.substring( this.translatedByLine.indexOf(firstLanguage) + firstLanguage.length, this.translatedByLine.indexOf(secondLanguage), @@ -68,10 +62,7 @@ export class Translation { } isTranslationNotAvailable(elementId) { - return ( - document.querySelector(elementId).getAttribute('lang') !== - this.targetLanguage - ) + return document.querySelector(elementId).getAttribute('lang') !== this.targetLanguage } openGoogleTranslatePage(text) { @@ -99,15 +90,11 @@ export class Translation { ) if (this.isSourceLanguageFirst()) { - byLineElements.firstLanguage.textContent = - this.displayLanguageMap[data.source_language] - byLineElements.secondLanguage.textContent = - this.displayLanguageMap[data.target_language] + byLineElements.firstLanguage.textContent = this.displayLanguageMap[data.source_language] + byLineElements.secondLanguage.textContent = this.displayLanguageMap[data.target_language] } else { - byLineElements.secondLanguage.textContent = - this.displayLanguageMap[data.target_language] - byLineElements.firstLanguage.textContent = - this.displayLanguageMap[data.source_language] + byLineElements.secondLanguage.textContent = this.displayLanguageMap[data.target_language] + byLineElements.firstLanguage.textContent = this.displayLanguageMap[data.source_language] } } diff --git a/assets/User/FollowerOverview.js b/assets/User/FollowerOverview.js index 4924411d5b..2cce7bf1c5 100644 --- a/assets/User/FollowerOverview.js +++ b/assets/User/FollowerOverview.js @@ -127,11 +127,7 @@ class FollowerOverview { button.addEventListener('click', (e) => { e.preventDefault() e.stopImmediatePropagation() - this.unfollow( - e.target, - e.target.dataset.userId, - e.target.dataset.userName, - ) + this.unfollow(e.target, e.target.dataset.userId, e.target.dataset.userName) }) }) } diff --git a/assets/User/MyProfilePage.js b/assets/User/MyProfilePage.js index 822b811a99..3035d86daa 100644 --- a/assets/User/MyProfilePage.js +++ b/assets/User/MyProfilePage.js @@ -36,13 +36,7 @@ document.addEventListener('DOMContentLoaded', () => { const url = baseUrl + '/api/projects/user' - new OwnProjectList( - projectsContainer, - url, - theme, - emptyMessage, - baseUrl, - ).initialize() + new OwnProjectList(projectsContainer, url, theme, emptyMessage, baseUrl).initialize() new OwnProfile(baseUrl).initializeAll() }) @@ -72,9 +66,7 @@ class OwnProfile { initProfilePictureChange() { const self = this - const avatarElements = document.getElementsByClassName( - 'profile__basic-info__avatar', - ) + const avatarElements = document.getElementsByClassName('profile__basic-info__avatar') if (avatarElements.length) { this.avatarElement = avatarElements[0] this.avatarElement.addEventListener('click', function () { @@ -120,9 +112,7 @@ class OwnProfile { this.avatarElement.removeChild(loadingSpinner) loadingSpinner = null } - MessageDialogs.showErrorMessage( - myProfileConfiguration.messages.profilePictureInvalid, - ) + MessageDialogs.showErrorMessage(myProfileConfiguration.messages.profilePictureInvalid) } reader.onload = (event) => { const image = event.currentTarget.result // base64 data url @@ -149,93 +139,82 @@ class OwnProfile { initSaveProfileSettings() { const self = this - document - .getElementById('profile_settings-save_action') - .addEventListener('click', () => { - const form = document.getElementById('profile-settings-form') - if (form.reportValidity() === true) { - const formData = new window.FormData(form) - const data = {} - formData.forEach((value, key) => (data[key] = value)) - self.updateProfile(data, function () { - window.location.search = 'profileChangeSuccess' - }) - } - }) + document.getElementById('profile_settings-save_action').addEventListener('click', () => { + const form = document.getElementById('profile-settings-form') + if (form.reportValidity() === true) { + const formData = new window.FormData(form) + const data = {} + formData.forEach((value, key) => (data[key] = value)) + self.updateProfile(data, function () { + window.location.search = 'profileChangeSuccess' + }) + } + }) } initSaveSecuritySettings() { const self = this - document - .getElementById('security_settings-save_action') - .addEventListener('click', () => { - const form = document.getElementById('security-settings-form') - if (form.reportValidity() === true) { - const formData = new window.FormData(form) - if (formData.get('password') !== formData.get('repeat-password')) { - MessageDialogs.showErrorMessage( - myProfileConfiguration.messages.security.passwordsDontMatch, - ) - } else { - self.updateProfile( - { - currentPassword: formData.get('current-password'), - password: formData.get('password'), - }, - function () { - MessageDialogs.showSuccessMessage( - myProfileConfiguration.messages.passwordChangedSuccessText, - ).then(() => { - form.reset() - Modal.getInstance( - document.getElementById('security-settings-modal'), - ).hide() - }) - }, - ) - } + document.getElementById('security_settings-save_action').addEventListener('click', () => { + const form = document.getElementById('security-settings-form') + if (form.reportValidity() === true) { + const formData = new window.FormData(form) + if (formData.get('password') !== formData.get('repeat-password')) { + MessageDialogs.showErrorMessage( + myProfileConfiguration.messages.security.passwordsDontMatch, + ) + } else { + self.updateProfile( + { + currentPassword: formData.get('current-password'), + password: formData.get('password'), + }, + function () { + MessageDialogs.showSuccessMessage( + myProfileConfiguration.messages.passwordChangedSuccessText, + ).then(() => { + form.reset() + Modal.getInstance(document.getElementById('security-settings-modal')).hide() + }) + }, + ) } - }) + } + }) } initDeleteAccount() { const routingDataset = document.getElementById('js-api-routing').dataset - document - .getElementById('btn-delete-account') - .addEventListener('click', () => { - const msgParts = - myProfileConfiguration.userSettings.deleteAccount.confirmationText.split( - '\n', - ) - Swal.fire({ - title: msgParts[0], - html: msgParts[1] + '

' + msgParts[2], - icon: 'warning', - showCancelButton: true, - allowOutsideClick: false, - customClass: { - confirmButton: 'btn btn-danger', - cancelButton: 'btn btn-outline-primary', - }, - buttonsStyling: false, - confirmButtonText: msgParts[3], - cancelButtonText: msgParts[4], - }).then((result) => { - if (result.value) { - new ApiDeleteFetch( - this.baseUrl + '/api/user', - 'Delete User', - myProfileConfiguration.messages.unspecifiedErrorText, - function () { - deleteCookie('BEARER', routingDataset.baseUrl + '/') - window.location.href = routingDataset.index - }, - ).run() - } - }) - document.querySelector( - '.swal2-container.swal2-backdrop-show', - ).style.backgroundColor = 'rgba(220, 53, 69, 0.75)' // changes the color of the overlay + document.getElementById('btn-delete-account').addEventListener('click', () => { + const msgParts = + myProfileConfiguration.userSettings.deleteAccount.confirmationText.split('\n') + Swal.fire({ + title: msgParts[0], + html: msgParts[1] + '

' + msgParts[2], + icon: 'warning', + showCancelButton: true, + allowOutsideClick: false, + customClass: { + confirmButton: 'btn btn-danger', + cancelButton: 'btn btn-outline-primary', + }, + buttonsStyling: false, + confirmButtonText: msgParts[3], + cancelButtonText: msgParts[4], + }).then((result) => { + if (result.value) { + new ApiDeleteFetch( + this.baseUrl + '/api/user', + 'Delete User', + myProfileConfiguration.messages.unspecifiedErrorText, + function () { + deleteCookie('BEARER', routingDataset.baseUrl + '/') + window.location.href = routingDataset.index + }, + ).run() + } }) + document.querySelector('.swal2-container.swal2-backdrop-show').style.backgroundColor = + 'rgba(220, 53, 69, 0.75)' // changes the color of the overlay + }) } } diff --git a/assets/User/NotificationsPage.js b/assets/User/NotificationsPage.js index e27ea6a661..196061960c 100644 --- a/assets/User/NotificationsPage.js +++ b/assets/User/NotificationsPage.js @@ -31,16 +31,14 @@ document.addEventListener('DOMContentLoaded', () => { userNotifications.markAllRead() - document - .querySelectorAll('.js-notification-interaction') - .forEach((element) => { - element.addEventListener('click', () => { - userNotifications.redirectUser( - element.getAttribute('data-notification-instance'), - element.getAttribute('data-notification-redirect'), - ) - }) + document.querySelectorAll('.js-notification-interaction').forEach((element) => { + element.addEventListener('click', () => { + userNotifications.redirectUser( + element.getAttribute('data-notification-instance'), + element.getAttribute('data-notification-redirect'), + ) }) + }) }) class UserNotifications { @@ -70,20 +68,14 @@ class UserNotifications { this.notificationsClearError = notificationsClearError this.notificationsUnauthorizedError = notificationsUnauthorizedError this.notificationsFetchCount = 20 - this.allNotificationsLoaded = - document.getElementById('notifications').childElementCount - this.followerNotificationsLoaded = document.getElementById( - 'follow-notifications', - ).childElementCount - this.reactionNotificationsLoaded = document.getElementById( - 'reaction-notifications', - ).childElementCount - this.commentNotificationsLoaded = document.getElementById( - 'comment-notifications', - ).childElementCount - this.remixNotificationsLoaded = document.getElementById( - 'remix-notifications', - ).childElementCount + this.allNotificationsLoaded = document.getElementById('notifications').childElementCount + this.followerNotificationsLoaded = + document.getElementById('follow-notifications').childElementCount + this.reactionNotificationsLoaded = + document.getElementById('reaction-notifications').childElementCount + this.commentNotificationsLoaded = + document.getElementById('comment-notifications').childElementCount + this.remixNotificationsLoaded = document.getElementById('remix-notifications').childElementCount this.empty = false this.fetchActive = false this.profilePath = profilePath @@ -103,93 +95,81 @@ class UserNotifications { } }) - document - .getElementById('follow-notif') - .addEventListener('click', function () { - if (!self.follower) { - self.resetChips() - self.selectChip('follow-notif', 'follow-notifications') - self.follower = true - if (self.followerNotificationsLoaded < self.notificationsFetchCount) { - self.followerNotificationsLoaded = document.getElementById( - 'follow-notifications', - ).childElementCount - self.fetchMoreNotifications( - self.notificationsFetchCount, - self.followerNotificationsLoaded, - 'follow', - 'follow-notification-', - document.getElementById('follow-notifications'), - ) - } + document.getElementById('follow-notif').addEventListener('click', function () { + if (!self.follower) { + self.resetChips() + self.selectChip('follow-notif', 'follow-notifications') + self.follower = true + if (self.followerNotificationsLoaded < self.notificationsFetchCount) { + self.followerNotificationsLoaded = + document.getElementById('follow-notifications').childElementCount + self.fetchMoreNotifications( + self.notificationsFetchCount, + self.followerNotificationsLoaded, + 'follow', + 'follow-notification-', + document.getElementById('follow-notifications'), + ) } - }) + } + }) - document - .getElementById('comment-notif') - .addEventListener('click', function () { - if (!self.comment) { - self.resetChips() - self.selectChip('comment-notif', 'comment-notifications') - self.comment = true - if (self.commentNotificationsLoaded < self.notificationsFetchCount) { - self.commentNotificationsLoaded = document.getElementById( - 'comment-notifications', - ).childElementCount - self.fetchMoreNotifications( - self.notificationsFetchCount, - self.commentNotificationsLoaded, - 'comment', - 'comment-notification-', - document.getElementById('comment-notifications'), - ) - } + document.getElementById('comment-notif').addEventListener('click', function () { + if (!self.comment) { + self.resetChips() + self.selectChip('comment-notif', 'comment-notifications') + self.comment = true + if (self.commentNotificationsLoaded < self.notificationsFetchCount) { + self.commentNotificationsLoaded = + document.getElementById('comment-notifications').childElementCount + self.fetchMoreNotifications( + self.notificationsFetchCount, + self.commentNotificationsLoaded, + 'comment', + 'comment-notification-', + document.getElementById('comment-notifications'), + ) } - }) + } + }) - document - .getElementById('reaction-notif') - .addEventListener('click', function () { - if (!self.reactions) { - self.resetChips() - self.selectChip('reaction-notif', 'reaction-notifications') - self.reactions = true - if (self.reactionNotificationsLoaded < self.notificationsFetchCount) { - self.reactionNotificationsLoaded = document.getElementById( - 'reaction-notifications', - ).childElementCount - self.fetchMoreNotifications( - self.notificationsFetchCount, - self.reactionNotificationsLoaded, - 'reaction', - 'reaction-notification-', - document.getElementById('reaction-notifications'), - ) - } + document.getElementById('reaction-notif').addEventListener('click', function () { + if (!self.reactions) { + self.resetChips() + self.selectChip('reaction-notif', 'reaction-notifications') + self.reactions = true + if (self.reactionNotificationsLoaded < self.notificationsFetchCount) { + self.reactionNotificationsLoaded = + document.getElementById('reaction-notifications').childElementCount + self.fetchMoreNotifications( + self.notificationsFetchCount, + self.reactionNotificationsLoaded, + 'reaction', + 'reaction-notification-', + document.getElementById('reaction-notifications'), + ) } - }) + } + }) - document - .getElementById('remix-notif') - .addEventListener('click', function () { - if (!self.remixes) { - self.resetChips() - self.selectChip('remix-notif', 'remix-notifications') - self.remixes = true - if (self.remixNotificationsLoaded < self.notificationsFetchCount) { - self.remixNotificationsLoaded = document.getElementById( - 'remix-notifications', - ).childElementCount - self.fetchMoreNotifications( - self.notificationsFetchCount, - self.remixNotificationsLoaded, - 'remix', - 'remix-notification-', - document.getElementById('remix-notifications'), - ) - } + document.getElementById('remix-notif').addEventListener('click', function () { + if (!self.remixes) { + self.resetChips() + self.selectChip('remix-notif', 'remix-notifications') + self.remixes = true + if (self.remixNotificationsLoaded < self.notificationsFetchCount) { + self.remixNotificationsLoaded = + document.getElementById('remix-notifications').childElementCount + self.fetchMoreNotifications( + self.notificationsFetchCount, + self.remixNotificationsLoaded, + 'remix', + 'remix-notification-', + document.getElementById('remix-notifications'), + ) } - }) + } + }) window.addEventListener('scroll', function () { const position = window.scrollY @@ -197,8 +177,7 @@ class UserNotifications { const pctVertical = position / bottom if (pctVertical >= 0.7) { if (self.all) { - self.allNotificationsLoaded = - document.getElementById('notifications').childElementCount + self.allNotificationsLoaded = document.getElementById('notifications').childElementCount self.fetchMoreNotifications( self.notificationsFetchCount, self.allNotificationsLoaded, @@ -207,9 +186,8 @@ class UserNotifications { document.getElementById('notifications'), ) } else if (self.follower) { - self.followerNotificationsLoaded = document.getElementById( - 'follow-notifications', - ).childElementCount + self.followerNotificationsLoaded = + document.getElementById('follow-notifications').childElementCount self.fetchMoreNotifications( self.notificationsFetchCount, self.followerNotificationsLoaded, @@ -218,9 +196,8 @@ class UserNotifications { document.getElementById('follow-notifications'), ) } else if (self.comment) { - self.commentNotificationsLoaded = document.getElementById( - 'comment-notifications', - ).childElementCount + self.commentNotificationsLoaded = + document.getElementById('comment-notifications').childElementCount self.fetchMoreNotifications( self.notificationsFetchCount, self.commentNotificationsLoaded, @@ -229,9 +206,8 @@ class UserNotifications { document.getElementById('comment-notifications'), ) } else if (self.reactions) { - self.reactionNotificationsLoaded = document.getElementById( - 'reaction-notifications', - ).childElementCount + self.reactionNotificationsLoaded = + document.getElementById('reaction-notifications').childElementCount self.fetchMoreNotifications( self.notificationsFetchCount, self.reactionNotificationsLoaded, @@ -240,9 +216,8 @@ class UserNotifications { document.getElementById('reaction-notifications'), ) } else if (self.remixes) { - self.remixNotificationsLoaded = document.getElementById( - 'remix-notifications', - ).childElementCount + self.remixNotificationsLoaded = + document.getElementById('remix-notifications').childElementCount self.fetchMoreNotifications( self.notificationsFetchCount, self.remixNotificationsLoaded, @@ -268,10 +243,7 @@ class UserNotifications { data['fetched-notifications'].forEach((fetched) => { self.generateNotificationBody(fetched, idPrefix, container) }) - self.updateNoNotificationsPlaceholder( - type, - data['fetched-notifications'].length, - ) + self.updateNoNotificationsPlaceholder(type, data['fetched-notifications'].length) self.fetchActive = false }) .catch((xhr) => { @@ -307,10 +279,7 @@ class UserNotifications { let notificationDot = '' if (!fetched.seen) { notificationDot = - '
' + - '' + - '' + - '
' + '
' + '' + '' + '
' } const notificationBody = `
${imgLeft}
@@ -331,8 +300,7 @@ class UserNotifications { ` } else { - let imgLeft = - 'notifications_active' + let imgLeft = 'notifications_active' if (fetched.prize) { imgLeft = 'cake' } @@ -377,40 +345,20 @@ class UserNotifications { } resetColor() { - document - .getElementById('all-notif') - .classList.replace('chip-selected', 'chip-default') - document - .getElementById('follow-notif') - .classList.replace('chip-selected', 'chip-default') - document - .getElementById('comment-notif') - .classList.replace('chip-selected', 'chip-default') - document - .getElementById('reaction-notif') - .classList.replace('chip-selected', 'chip-default') - document - .getElementById('remix-notif') - .classList.replace('chip-selected', 'chip-default') + document.getElementById('all-notif').classList.replace('chip-selected', 'chip-default') + document.getElementById('follow-notif').classList.replace('chip-selected', 'chip-default') + document.getElementById('comment-notif').classList.replace('chip-selected', 'chip-default') + document.getElementById('reaction-notif').classList.replace('chip-selected', 'chip-default') + document.getElementById('remix-notif').classList.replace('chip-selected', 'chip-default') document.getElementById('notifications').classList.remove('show', 'active') - document - .getElementById('follow-notifications') - .classList.remove('show', 'active') - document - .getElementById('comment-notifications') - .classList.remove('show', 'active') - document - .getElementById('reaction-notifications') - .classList.remove('show', 'active') - document - .getElementById('remix-notifications') - .classList.remove('show', 'active') + document.getElementById('follow-notifications').classList.remove('show', 'active') + document.getElementById('comment-notifications').classList.remove('show', 'active') + document.getElementById('reaction-notifications').classList.remove('show', 'active') + document.getElementById('remix-notifications').classList.remove('show', 'active') } selectChip(elementId, paneID) { - document - .getElementById(elementId) - .classList.replace('chip-default', 'chip-selected') + document.getElementById(elementId).classList.replace('chip-default', 'chip-selected') document.getElementById(paneID).classList.add('show', 'active') } diff --git a/assets/User/ProfilePage.js b/assets/User/ProfilePage.js index 39a77707c8..0aaf5b6bf3 100644 --- a/assets/User/ProfilePage.js +++ b/assets/User/ProfilePage.js @@ -37,15 +37,7 @@ function initUserProjects() { const url = `${baseUrl}/api/projects/user/${userId}` projectList.dataset.list = JSON.stringify( - new ProjectList( - projectList, - 'user-projects', - url, - property, - theme, - 999, - emptyMessage, - ), + new ProjectList(projectList, 'user-projects', url, property, theme, 999, emptyMessage), ) }) } diff --git a/assets/User/UserList.js b/assets/User/UserList.js index dd00d6f3d1..bfd898aa22 100644 --- a/assets/User/UserList.js +++ b/assets/User/UserList.js @@ -48,13 +48,7 @@ export class UserList { this.fetchActive = true const self = this - fetch( - this.apiUrl + - 'limit=' + - this.userFetchCount + - '&offset=' + - this.usersLoaded, - ) + fetch(this.apiUrl + 'limit=' + this.userFetchCount + '&offset=' + this.usersLoaded) .then((response) => response.json()) .then((data) => { if (!Array.isArray(data)) { @@ -74,9 +68,7 @@ export class UserList { user.innerHTML = '' user.style.display = 'flex' user.style.justifyContent = 'center' - user.innerHTML = document.getElementById( - 'user-opening-spinner', - ).innerHTML + user.innerHTML = document.getElementById('user-opening-spinner').innerHTML }) }) self.container.classList.remove('loading') @@ -100,12 +92,7 @@ export class UserList { self.fetchActive = false }) .catch((jqXHR, textStatus, errorThrown) => { - console.error( - 'Failed loading users', - JSON.stringify(jqXHR), - textStatus, - errorThrown, - ) + console.error('Failed loading users', JSON.stringify(jqXHR), textStatus, errorThrown) self.container.classList.remove('loading') }) } @@ -157,8 +144,7 @@ export class UserList { }) this.usersContainer.addEventListener('scroll', function () { - const pctHorizontal = - this.scrollLeft / (this.scrollWidth - this.clientWidth) + const pctHorizontal = this.scrollLeft / (this.scrollWidth - this.clientWidth) if (pctHorizontal >= 0.8) { self.fetchMore() } @@ -167,8 +153,7 @@ export class UserList { }) this.container.addEventListener('scroll', function () { - const pctVertical = - this.scrollTop / (this.scrollHeight - this.clientHeight) + const pctVertical = this.scrollTop / (this.scrollHeight - this.clientHeight) if (pctVertical >= 0.8) { self.fetchMore() } @@ -188,28 +173,21 @@ export class UserList { }) this.chevronLeft.addEventListener('click', function () { - const width = self.usersContainer.querySelector( - '.user-list__project', - ).offsetWidth + const width = self.usersContainer.querySelector('.user-list__project').offsetWidth self.usersContainer.scrollLeft -= 2 * width }) this.chevronRight.addEventListener('click', function () { - const width = self.usersContainer.querySelector( - '.user-list__project', - ).offsetWidth + const width = self.usersContainer.querySelector('.user-list__project').offsetWidth self.usersContainer.scrollLeft += 2 * width }) } openFullView() { window.addEventListener('popstate', this.popStateHandler) - showCustomTopBarTitle( - this.titleElement.querySelector('h2').textContent, - function () { - window.history.back() - }, - ) + showCustomTopBarTitle(this.titleElement.querySelector('h2').textContent, function () { + window.history.back() + }) this.titleElement.style.display = 'none' this.isFullView = true this.container.classList.add('vertical') @@ -217,9 +195,7 @@ export class UserList { this.body.classList.add('overflow-hidden') if ( this.container.clientHeight === this.container.scrollHeight || - this.container.scrollTop / - (this.container.scrollHeight - this.container.clientHeight) >= - 0.8 + this.container.scrollTop / (this.container.scrollHeight - this.container.clientHeight) >= 0.8 ) { this.fetchMore() } diff --git a/assets/controllers/security/registration_controller.js b/assets/controllers/security/registration_controller.js index 21fab5ed3f..718ae2fbfd 100644 --- a/assets/controllers/security/registration_controller.js +++ b/assets/controllers/security/registration_controller.js @@ -57,9 +57,7 @@ export default class extends AjaxController { this.registrationButton = document.getElementById('register-btn') } if (null === this.registrationButtonSpinner) { - this.registrationButtonSpinner = document.getElementById( - 'register-btn__spinner', - ) + this.registrationButtonSpinner = document.getElementById('register-btn__spinner') } } diff --git a/auto-changelog/catroweb.hbs b/auto-changelog/catroweb.hbs index 656b83226a..94d52a38b7 100644 --- a/auto-changelog/catroweb.hbs +++ b/auto-changelog/catroweb.hbs @@ -1,6 +1,5 @@ -# Changelog All notable changes to this project will be documented in this file. -The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) -and this project adheres to [Semantic +# Changelog All notable changes to this project will be documented in this file. The format is based +on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). {{#unless options.hideCredit}}