diff --git a/.gitignore b/.gitignore index 804b8f5ace..1248296b2b 100644 --- a/.gitignore +++ b/.gitignore @@ -13,5 +13,6 @@ _docs/api/build/ .parcel-cache node_modules freesound/static/bw-frontend/dist/ +freesound/static/bw-frontend/dist-dark/ bw_static/ npm-debug.log diff --git a/README.md b/README.md index 81677f14b9..3fd1ad700a 100644 --- a/README.md +++ b/README.md @@ -81,23 +81,15 @@ If you a prompted for a password, use `localfreesoundpgpassword`, this is define docker compose run --rm web python manage.py createsuperuser -11. Build static files (use this every time you edit a frontend file, or use the frontend profile: see next step) - - docker compose run --rm frontend_builder npm run build - -12. Run services 🎉 +11. Run services 🎉 docker compose up When running this command, the most important services that make Freesound work will be run locally. - This includes the web application and database, but also the search engine, cache manager, queue manager and asynchronous workers, including audio processing. + This includes the web application and database, but also the forntend builder (static files), search engine, cache manager, queue manager and asynchronous workers, including audio processing. You should be able to point your browser to `http://localhost:8000` and see the Freesound website up and running! - If you are working on frontend assets (JS, CSS, SCSS), use the `frontend` profile to automatically rebuild on changes: - - docker compose --profile frontend up - -13. Build the search index, so you can search for sounds and forum posts +12. Build the search index, so you can search for sounds and forum posts # Open a new terminal window so the services started in the previous step keep running docker compose run --rm web python manage.py reindex_search_engine_sounds @@ -110,7 +102,7 @@ If you a prompted for a password, use `localfreesoundpgpassword`, this is define Because the `web` container mounts a named volume for the home folder of the user running the shell plus process, command history should be kept between container runs :) -14. (extra) Load audio descriptors and similarity vectors to the database and reindex the search index. This is necessary to make audio descriptors available thorugh the API and to make similarity search work. Note that for this to work, you need to have properly set the development data folder, and you should see some files inside the `freesound-data/analysis` folders which store the (previously computed) results of Freesound audio analysers. +13. (extra) Load audio descriptors and similarity vectors to the database and reindex the search index. This is necessary to make audio descriptors available thorugh the API and to make similarity search work. Note that for this to work, you need to have properly set the development data folder, and you should see some files inside the `freesound-data/analysis` folders which store the (previously computed) results of Freesound audio analysers. # First run the following command which will create relevant objects in the DB. Note that this can take some minutes. docker compose run --rm web python manage.py create_consolidated_sound_analysis_and_sim_vectors --force @@ -124,6 +116,11 @@ The steps above will get Freesound running, but to save resources in your local docker compose --profile analyzers up # To run all basic services + sound analyzers docker compose --profile all up # To run all services +Among the services defined in `docker-compose.yml`, there is a `frontend_builder` that will watch for file changes in the `freesound/static/src` directory and automatically rebuild static so you don't have to manually do that. Nevertheless, a build of the frontend canbe triggered by running: + + docker compose run --rm frontend_builder npm run build + + ### Running tests diff --git a/docker-compose.yml b/docker-compose.yml index f5ec0dddec..67e09f19df 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -63,7 +63,6 @@ services: - .:/code - /code/node_modules command: npm run dev - profiles: ["frontend"] # Search server search: diff --git a/freesound.code-workspace b/freesound.code-workspace index da62aed17e..c8fd62822b 100644 --- a/freesound.code-workspace +++ b/freesound.code-workspace @@ -60,13 +60,7 @@ { "label": "Build static", "type": "shell", - "command": "docker compose run --rm frontend_builder npm run build && docker compose run --rm web python manage.py collectstatic --clear --noinput", - "problemMatcher": [] - }, - { - "label": "Install static", - "type": "shell", - "command": "docker compose run --rm frontend_builder npm install", + "command": "docker compose run --rm frontend_builder npm run build", "problemMatcher": [] }, { diff --git a/freesound/static/bw-frontend/src/components/afterDownloadModal.js b/freesound/static/bw-frontend/src/components/afterDownloadModal.js index 021d2b877b..421d5c7a89 100644 --- a/freesound/static/bw-frontend/src/components/afterDownloadModal.js +++ b/freesound/static/bw-frontend/src/components/afterDownloadModal.js @@ -1,9 +1,9 @@ import { handleGenericModal } from './modal'; const prepareAfterDownloadSoundModals = () => { - const downloadButtonElements = document.getElementsByClassName( + const downloadButtonElements = [...document.getElementsByClassName( 'sound-download-button' - ); + )]; downloadButtonElements.forEach(element => { const showModalUrl = element.dataset.showAfterDownloadModalUrl; element.addEventListener('click', () => { diff --git a/freesound/static/bw-frontend/src/components/asyncSection.js b/freesound/static/bw-frontend/src/components/asyncSection.js index 3d2342aef1..9a5f784260 100644 --- a/freesound/static/bw-frontend/src/components/asyncSection.js +++ b/freesound/static/bw-frontend/src/components/asyncSection.js @@ -3,7 +3,7 @@ import { initializeStuffInContainer } from '../utils/initHelper'; const prepareAsyncSections = container => { const asyncSectionPlaceholders = - container.getElementsByClassName('async-section'); + [...container.getElementsByClassName('async-section')]; asyncSectionPlaceholders.forEach(element => { const contentUrl = element.dataset.asyncSectionContentUrl; const req = new XMLHttpRequest(); diff --git a/freesound/static/bw-frontend/src/components/bstCategoryFormField.js b/freesound/static/bw-frontend/src/components/bstCategoryFormField.js index ecf798a655..b088bea478 100644 --- a/freesound/static/bw-frontend/src/components/bstCategoryFormField.js +++ b/freesound/static/bw-frontend/src/components/bstCategoryFormField.js @@ -25,7 +25,7 @@ const updateSubcategoriesList = ( const prepareCategoryFormFields = mainContainer => { const categoryFieldContainers = - mainContainer.getElementsByClassName('bst-category-field'); + [...mainContainer.getElementsByClassName('bst-category-field')]; categoryFieldContainers.forEach(container => { const hiddenField = container.querySelectorAll('input[type=hidden]')[0]; const topButtons = container.querySelectorAll('.top-buttons .btn'); diff --git a/freesound/static/bw-frontend/src/components/collapsableBlock.js b/freesound/static/bw-frontend/src/components/collapsableBlock.js index b2887df95d..fece408f18 100644 --- a/freesound/static/bw-frontend/src/components/collapsableBlock.js +++ b/freesound/static/bw-frontend/src/components/collapsableBlock.js @@ -40,7 +40,7 @@ const handleCollapsable = e => { const makeCollapsableBlocks = container => { const collapsableToggles = container.getElementsByClassName('collapsable-toggle'); - collapsableToggles.forEach(element => { + [...collapsableToggles].forEach(element => { if (element.dataset.initialized !== undefined) { return; } diff --git a/freesound/static/bw-frontend/src/components/dropdown.js b/freesound/static/bw-frontend/src/components/dropdown.js index 48a83958b2..5789309e4e 100644 --- a/freesound/static/bw-frontend/src/components/dropdown.js +++ b/freesound/static/bw-frontend/src/components/dropdown.js @@ -51,7 +51,7 @@ const makeDropdowns = container => { const dropdownOptions = dropdownContainer.getElementsByClassName('dropdown-menu')[0]; dropdownOptions.setAttribute('role', 'menu'); - dropdownOptions.getElementsByClassName('dropdown-item').forEach(item => { + [...dropdownOptions.getElementsByClassName('dropdown-item')].forEach(item => { item.setAttribute('role', 'menuitem'); }); toggle.addEventListener('click', () => toggleExpandDropdown(toggle)); diff --git a/freesound/static/bw-frontend/src/components/explicit.js b/freesound/static/bw-frontend/src/components/explicit.js index f596319247..5c3ee3bec5 100644 --- a/freesound/static/bw-frontend/src/components/explicit.js +++ b/freesound/static/bw-frontend/src/components/explicit.js @@ -2,12 +2,11 @@ const addExplicitSoundWarnings = container => { const warningElements = container.getElementsByClassName( 'explicit-sound-blocker' ); - warningElements.forEach(element => { + [...warningElements].forEach(element => { const dismissButtonAnchor = element.getElementsByTagName('button')[0]; dismissButtonAnchor.addEventListener('click', () => { - element.parentElement - .getElementsByClassName('blur') - .forEach(blurredElement => { + [...element.parentElement + .getElementsByClassName('blur')].forEach(blurredElement => { blurredElement.classList.remove('blur'); }); element.remove(); diff --git a/freesound/static/bw-frontend/src/components/flagging.js b/freesound/static/bw-frontend/src/components/flagging.js index dc37d905dc..973bc4f611 100644 --- a/freesound/static/bw-frontend/src/components/flagging.js +++ b/freesound/static/bw-frontend/src/components/flagging.js @@ -27,7 +27,7 @@ function post_flag(div_id, flag_type, object_id, url) { } const bindFlagUserButtons = container => { - const flagUserElements = container.getElementsByClassName('post-flag'); + const flagUserElements = [...container.getElementsByClassName('post-flag')]; flagUserElements.forEach(element => { element.addEventListener('click', () => { post_flag( diff --git a/freesound/static/bw-frontend/src/components/followUnfollowTags.js b/freesound/static/bw-frontend/src/components/followUnfollowTags.js index fec3d6dab0..7758872029 100644 --- a/freesound/static/bw-frontend/src/components/followUnfollowTags.js +++ b/freesound/static/bw-frontend/src/components/followUnfollowTags.js @@ -68,7 +68,7 @@ const followOrUnFollowTags = (tags, button) => { const bindFollowTagsButtons = container => { const followUnfollowButtons = - container.getElementsByClassName('follow-tags-button'); + [...container.getElementsByClassName('follow-tags-button')]; followUnfollowButtons.forEach(button => { const tags = button.dataset.followTagsUrl .split('/follow/follow_tags/')[1] diff --git a/freesound/static/bw-frontend/src/components/formDisableOnSubmit.js b/freesound/static/bw-frontend/src/components/formDisableOnSubmit.js index a55c4e26b9..132d111719 100644 --- a/freesound/static/bw-frontend/src/components/formDisableOnSubmit.js +++ b/freesound/static/bw-frontend/src/components/formDisableOnSubmit.js @@ -1,6 +1,6 @@ const bindDisableOnSubmitForms = container => { const formElementsWithDisableOnSubmit = - container.getElementsByClassName('disable-on-submit'); + [...container.getElementsByClassName('disable-on-submit')]; formElementsWithDisableOnSubmit.forEach(formElement => { if (formElement.dataset.alreadyBinded !== undefined) { return; @@ -8,7 +8,7 @@ const bindDisableOnSubmitForms = container => { formElement.dataset.alreadyBinded = true; formElement.onsubmit = evt => { - var buttonElements = formElement.getElementsByTagName('button'); + var buttonElements = [...formElement.getElementsByTagName('button')]; buttonElements.forEach(element => { element.disabled = true; if (element.name !== undefined && element == evt.submitter) { diff --git a/freesound/static/bw-frontend/src/components/formDoNotSubmitOnEnter.js b/freesound/static/bw-frontend/src/components/formDoNotSubmitOnEnter.js index b40c1b88af..8cd406352f 100644 --- a/freesound/static/bw-frontend/src/components/formDoNotSubmitOnEnter.js +++ b/freesound/static/bw-frontend/src/components/formDoNotSubmitOnEnter.js @@ -8,7 +8,7 @@ const formFieldShouldAllowEnterEvents = element => { }; const bindDoNotSubmitOnEnterForms = container => { - var formElements = container.getElementsByClassName('do-not-submit-on-enter'); + var formElements = [...container.getElementsByClassName('do-not-submit-on-enter')]; formElements.forEach(formElement => { formElement.onkeydown = evt => { if (evt.key == 'Enter' && !formFieldShouldAllowEnterEvents(evt.target)) { diff --git a/freesound/static/bw-frontend/src/components/geotagFormField.js b/freesound/static/bw-frontend/src/components/geotagFormField.js index 11c2b02eb5..af0512ddd4 100644 --- a/freesound/static/bw-frontend/src/components/geotagFormField.js +++ b/freesound/static/bw-frontend/src/components/geotagFormField.js @@ -126,9 +126,9 @@ const showGeotagFieldAndRemoveShowButton = ( const prepareGeotagFormFields = container => { // Note that this need to run after mapbox scripts have been load (for example, after the DOMContentLoaded is fired) - const showGeolocationButtons = container.getElementsByClassName( + const showGeolocationButtons = [...container.getElementsByClassName( 'show-geolocation-button' - ); + )]; showGeolocationButtons.forEach(buttonElement => { const geotagFieldElement = buttonElement.parentNode; if (geotagFieldElement.dataset.hasGeotag) { diff --git a/freesound/static/bw-frontend/src/components/geotagPicker.js b/freesound/static/bw-frontend/src/components/geotagPicker.js index 834ac3f7a3..16a1a8052a 100644 --- a/freesound/static/bw-frontend/src/components/geotagPicker.js +++ b/freesound/static/bw-frontend/src/components/geotagPicker.js @@ -60,7 +60,7 @@ const copyValue = () => { document.addEventListener('DOMContentLoaded', () => { const showGeotagPickerElements = document.getElementsByClassName('show-geotag-picker'); - showGeotagPickerElements.forEach(element => { + [...showGeotagPickerElements].forEach(element => { element.setAttribute('onclick', ''); element.addEventListener('click', () => { showGeotagPickerHelpTool(element.dataset.refElementId); diff --git a/freesound/static/bw-frontend/src/components/mapsMapbox.js b/freesound/static/bw-frontend/src/components/mapsMapbox.js index dbfc78decb..bba2dda3cd 100644 --- a/freesound/static/bw-frontend/src/components/mapsMapbox.js +++ b/freesound/static/bw-frontend/src/components/mapsMapbox.js @@ -60,13 +60,13 @@ function toggleMapStyle(map) { if (map.getStyle().sprite.indexOf(FREESOUND_STREETS_STYLE_ID) !== -1) { // Using streets map, switch to satellite map.setStyle('mapbox://styles/freesound/' + FREESOUND_SATELLITE_STYLE_ID); - mapElement.getElementsByClassName('map_terrain_menu').forEach(element => { + [...mapElement.getElementsByClassName('map_terrain_menu')].forEach(element => { element.innerText = 'Show streets'; }); } else { // Using satellite map, switch to streets map.setStyle('mapbox://styles/freesound/' + FREESOUND_STREETS_STYLE_ID); - mapElement.getElementsByClassName('map_terrain_menu').forEach(element => { + [...mapElement.getElementsByClassName('map_terrain_menu')].forEach(element => { element.innerText = 'Show terrain'; }); } diff --git a/freesound/static/bw-frontend/src/components/modal.js b/freesound/static/bw-frontend/src/components/modal.js index 529de339c1..daafad4790 100644 --- a/freesound/static/bw-frontend/src/components/modal.js +++ b/freesound/static/bw-frontend/src/components/modal.js @@ -261,11 +261,11 @@ const handleGenericModal = ( }); // Make paginator update modal (if any) - modalContainer - .getElementsByClassName('bw-pagination_container') + [...modalContainer + .getElementsByClassName('bw-pagination_container')] .forEach(paginationContainer => { - paginationContainer - .getElementsByTagName('a') + [...paginationContainer + .getElementsByTagName('a')] .forEach(paginatorLinkElement => { const loadPageUrl = paginatorLinkElement.href; paginatorLinkElement.href = 'javascript:void(0);'; diff --git a/freesound/static/bw-frontend/src/components/packFormField.js b/freesound/static/bw-frontend/src/components/packFormField.js index 4457e475bd..8c5e8862b6 100644 --- a/freesound/static/bw-frontend/src/components/packFormField.js +++ b/freesound/static/bw-frontend/src/components/packFormField.js @@ -7,7 +7,7 @@ const togglePackNameDiv = (select, newPackNameDiv) => { }; const preparePackFormFields = container => { - const packSelectWrappers = container.getElementsByClassName('pack-select'); + const packSelectWrappers = [...container.getElementsByClassName('pack-select')]; packSelectWrappers.forEach(selectWrapper => { // Add event listener to toggle "new pack name" div if "create new pack" is selected const select = selectWrapper.getElementsByTagName('select')[0]; diff --git a/freesound/static/bw-frontend/src/components/player/player-ui.js b/freesound/static/bw-frontend/src/components/player/player-ui.js index 9f0ceaf271..09bafe8119 100644 --- a/freesound/static/bw-frontend/src/components/player/player-ui.js +++ b/freesound/static/bw-frontend/src/components/player/player-ui.js @@ -21,7 +21,7 @@ import { } from '../../utils/browser'; const removeAllLastPlayedClasses = () => { - document.getElementsByClassName('last-played').forEach(element => { + [...document.getElementsByClassName('last-played')].forEach(element => { element.classList.remove('last-played'); }); }; @@ -40,14 +40,12 @@ const replaceTimesinceIndicators = parentNode => { // Checks if timesince information has been added in the player metadata and if so, finds if there are // any elements with class timesince-target and replaces their content with the timesince information // NOTE: this modifies the sound display UI, not only strictly the "player" UI, but it's here because - // because this seems the best place to handle this logic + // this seems the best place to handle this logic if (parentNode.dataset.timesince !== undefined) { - parentNode.parentNode - .getElementsByClassName('timesince-target') - .forEach(timesinceTargetElement => { - timesinceTargetElement.innerHTML = - parentNode.dataset.timesince + ' ago'; - }); + const timesinceTargetElements = parentNode.parentNode.getElementsByClassName('timesince-target'); + [...timesinceTargetElements].forEach(timesinceTargetElement => { + timesinceTargetElement.innerHTML = parentNode.dataset.timesince + ' ago'; + }); } }; diff --git a/freesound/static/bw-frontend/src/components/player/utils.js b/freesound/static/bw-frontend/src/components/player/utils.js index 368b07afeb..118e4c3c70 100644 --- a/freesound/static/bw-frontend/src/components/player/utils.js +++ b/freesound/static/bw-frontend/src/components/player/utils.js @@ -45,7 +45,7 @@ export const formatAudioDuration = (duration, showMilliseconds) => { export const stopAllPlayers = () => { const players = [...document.getElementsByClassName('bw-player')]; players.forEach(player => { - player.getElementsByTagName('audio').forEach(audioElement => { + [...player.getElementsByTagName('audio')].forEach(audioElement => { audioElement.pause(); }); }); @@ -54,7 +54,7 @@ export const stopAllPlayers = () => { export const stopAllPlayersInContainer = container => { const players = [...container.getElementsByClassName('bw-player')]; players.forEach(player => { - player.getElementsByTagName('audio').forEach(audioElement => { + [...player.getElementsByTagName('audio')].forEach(audioElement => { audioElement.pause(); }); }); diff --git a/freesound/static/bw-frontend/src/components/radio.js b/freesound/static/bw-frontend/src/components/radio.js index 38590ffb20..50a307c54a 100644 --- a/freesound/static/bw-frontend/src/components/radio.js +++ b/freesound/static/bw-frontend/src/components/radio.js @@ -21,7 +21,7 @@ const addVisibleRadio = radioEl => { radioIcon.setAttribute('role', 'radio'); radioIcon.setAttribute('aria-checked', radioEl.checked); radioEl.addEventListener('change', () => { - const radioOptions = document.getElementsByName(radioEl.name); + const radioOptions = [...document.getElementsByName(radioEl.name)]; radioOptions.forEach(option => { option.parentNode .getElementsByClassName('bw-icon-radio-unchecked')[0] diff --git a/freesound/static/bw-frontend/src/components/rating.js b/freesound/static/bw-frontend/src/components/rating.js index e7cbc3cadf..97398dd2ca 100644 --- a/freesound/static/bw-frontend/src/components/rating.js +++ b/freesound/static/bw-frontend/src/components/rating.js @@ -142,7 +142,7 @@ const handleRatingInput = ratingInput => { const makeRatingWidgets = container => { const ratingInputs = container.getElementsByClassName('bw-rating__input'); - ratingInputs.forEach(ratingInput => { + [...ratingInputs].forEach(ratingInput => { ratingInput.addEventListener('click', evt => { handleRatingInput(ratingInput); evt.stopPropagation(); diff --git a/freesound/static/bw-frontend/src/components/scrollSpy.js b/freesound/static/bw-frontend/src/components/scrollSpy.js index b722464914..3571e39db7 100644 --- a/freesound/static/bw-frontend/src/components/scrollSpy.js +++ b/freesound/static/bw-frontend/src/components/scrollSpy.js @@ -1,7 +1,7 @@ import { isScrolledIntoView } from '../utils/elementVisibility'; import debounce from 'lodash.debounce'; -const scrollSpyElements = document.getElementsByClassName('scroll-spy'); +const scrollSpyElements = [...document.getElementsByClassName('scroll-spy')]; const addClassToSpiedElement = () => { let elementToActivate = undefined; diff --git a/freesound/static/bw-frontend/src/components/tagsFormField.js b/freesound/static/bw-frontend/src/components/tagsFormField.js index 9cfd397814..d5b95cda3e 100644 --- a/freesound/static/bw-frontend/src/components/tagsFormField.js +++ b/freesound/static/bw-frontend/src/components/tagsFormField.js @@ -152,7 +152,7 @@ const updateTags = (inputElement, newTagsStr) => { }; const prepareTagsFormFields = container => { - const tagsInputFields = container.getElementsByClassName('tags-field'); + const tagsInputFields = [...container.getElementsByClassName('tags-field')]; tagsInputFields.forEach(tagsFieldElement => { const tagsHiddenInput = tagsFieldElement.querySelectorAll( 'input[name$="tags"]' diff --git a/freesound/static/bw-frontend/src/components/unsecureImageCheck.js b/freesound/static/bw-frontend/src/components/unsecureImageCheck.js index 253082a65b..465687e4d7 100644 --- a/freesound/static/bw-frontend/src/components/unsecureImageCheck.js +++ b/freesound/static/bw-frontend/src/components/unsecureImageCheck.js @@ -1,9 +1,9 @@ import { showToast } from './toast'; const bindUnsecureImageCheckListeners = container => { - const elementsToCheckForUnsecureImages = container.getElementsByClassName( + const elementsToCheckForUnsecureImages = [...container.getElementsByClassName( 'unsecure-image-check' - ); + )]; elementsToCheckForUnsecureImages.forEach(element => { ['keydown', 'focusin'].forEach(eventName => { element.addEventListener(eventName, () => { diff --git a/freesound/static/bw-frontend/src/components/userAnnotationsModal.js b/freesound/static/bw-frontend/src/components/userAnnotationsModal.js index e7041a162e..41e7514b0c 100644 --- a/freesound/static/bw-frontend/src/components/userAnnotationsModal.js +++ b/freesound/static/bw-frontend/src/components/userAnnotationsModal.js @@ -19,8 +19,8 @@ const saveAnnotation = (addAnnotationUrl, text, user_id) => { // Annotation saved successfully. Close model and show feedback dismissModal(`moderationAnnotationsModal`); const responseData = JSON.parse(responseText); - document - .getElementsByClassName('annotation-counter-' + user_id) + [...document + .getElementsByClassName('annotation-counter-' + user_id)] .forEach(element => { element.innerText = responseData.num_annotations; }); diff --git a/freesound/static/bw-frontend/src/index-dark.js b/freesound/static/bw-frontend/src/index-dark.js index f8dd512e57..8e1a3fd222 100644 --- a/freesound/static/bw-frontend/src/index-dark.js +++ b/freesound/static/bw-frontend/src/index-dark.js @@ -1 +1,2 @@ +import 'normalize.css'; import '../styles/index-dark.scss'; diff --git a/freesound/static/bw-frontend/src/pages/donate.js b/freesound/static/bw-frontend/src/pages/donate.js index e745f60797..c3db2ce561 100644 --- a/freesound/static/bw-frontend/src/pages/donate.js +++ b/freesound/static/bw-frontend/src/pages/donate.js @@ -10,7 +10,7 @@ const donationButtonPaypalElement = document.getElementById( 'donation_button_paypal' ); const recurringCheckboxElement = document.getElementById('id_recurring'); -const nameOptionRadioButtons = document.getElementsByName('donation_type'); +const nameOptionRadioButtons = [...document.getElementsByName('donation_type')]; const nameOptionOtherInputElement = document.getElementById('id_name_option'); // Make "other" input appear or disappear accordingly diff --git a/freesound/static/bw-frontend/src/pages/editDescribeSounds.js b/freesound/static/bw-frontend/src/pages/editDescribeSounds.js index 1e68d17a59..d8f4c2244f 100644 --- a/freesound/static/bw-frontend/src/pages/editDescribeSounds.js +++ b/freesound/static/bw-frontend/src/pages/editDescribeSounds.js @@ -20,7 +20,7 @@ var inputTypeSubmitElements = formElement.querySelectorAll( ); inputTypeSubmitElements.forEach(button => { button.addEventListener('click', e => { - const tagsInputFields = formElement.getElementsByClassName('tags-field'); + const tagsInputFields = [...formElement.getElementsByClassName('tags-field')]; tagsInputFields.forEach(tagsFieldElement => { const inputElement = tagsFieldElement.getElementsByClassName('tags-input')[0]; diff --git a/freesound/static/bw-frontend/src/pages/messages.js b/freesound/static/bw-frontend/src/pages/messages.js index c8a6c34d92..e4c9654a96 100644 --- a/freesound/static/bw-frontend/src/pages/messages.js +++ b/freesound/static/bw-frontend/src/pages/messages.js @@ -2,7 +2,7 @@ import { wrapInDiv } from '../utils/wrap'; import debounce from 'lodash.debounce'; const checkboxSelectAllElement = document.getElementById('selectAll'); -const messageCheckboxes = document.getElementsByClassName('message-checkbox'); +const messageCheckboxes = [...document.getElementsByClassName('message-checkbox')]; const actionsMenu = document.getElementsByClassName('actions-menu')[0]; const messageActionButtons = document.getElementsByClassName('message-action'); const LastMessageElement = document.getElementById('message-last'); @@ -13,7 +13,7 @@ if (LastMessageElement) { } const handleAllCheckboxes = () => { - const allCheckboxes = document.getElementsByClassName('message-checkbox'); + const allCheckboxes = [...document.getElementsByClassName('message-checkbox')]; allCheckboxes.forEach(checkboxElement => { checkboxElement.checked = checkboxSelectAllElement.checked; @@ -66,8 +66,8 @@ messageCheckboxes.forEach(checkbox => ); if (actionsMenu !== undefined) { - actionsMenu - .getElementsByClassName('bw-nav__action') + [...actionsMenu + .getElementsByClassName('bw-nav__action')] .forEach(actionElement => actionElement.addEventListener('click', () => applyActionToMessages( diff --git a/freesound/static/bw-frontend/src/pages/moderation.js b/freesound/static/bw-frontend/src/pages/moderation.js index 79d4ba3794..a8460abbb9 100644 --- a/freesound/static/bw-frontend/src/pages/moderation.js +++ b/freesound/static/bw-frontend/src/pages/moderation.js @@ -14,7 +14,7 @@ const moderateFormTitle = document.getElementById('moderate-form-title-label'); const moderateFormWrapper = document.getElementById('moderate-form-wrapper'); const moderateForm = moderateFormWrapper.getElementsByTagName('form')[0]; const ticketsTable = document.getElementById('assigned-tickets-table'); -const ticketCheckboxes = ticketsTable.getElementsByClassName('bw-checkbox'); +const ticketCheckboxes = [...ticketsTable.getElementsByClassName('bw-checkbox')]; const templateResponses = document .getElementById('template-responses') .getElementsByTagName('a'); diff --git a/freesound/static/bw-frontend/src/pages/profile.js b/freesound/static/bw-frontend/src/pages/profile.js index b28954557c..24c8db17af 100644 --- a/freesound/static/bw-frontend/src/pages/profile.js +++ b/freesound/static/bw-frontend/src/pages/profile.js @@ -5,9 +5,9 @@ import { setURLHash, hashEquals } from '../utils/urls'; // Latest sounds/Latest tags taps const taps = [...document.querySelectorAll('[data-toggle="tap"]')]; -const tapsElements = document.getElementsByClassName( +const tapsElements = [...document.getElementsByClassName( 'bw-profile__tap_container' -); +)]; const cleanActiveClass = () => { taps.forEach(tap => tap.classList.remove('active')); @@ -66,8 +66,8 @@ const setFollowModalUrlParamToCurrentPage = modalActivationParam => { const genericModalWrapperElement = document.getElementById( 'genericModalWrapper' ); - genericModalWrapperElement - .getElementsByClassName('bw-pagination_selected') + [...genericModalWrapperElement + .getElementsByClassName('bw-pagination_selected')] .forEach(element => { page = parseInt(element.firstChild.innerHTML, 10); }); diff --git a/freesound/static/bw-frontend/src/pages/search.js b/freesound/static/bw-frontend/src/pages/search.js index def35bf79d..f5692cdb91 100644 --- a/freesound/static/bw-frontend/src/pages/search.js +++ b/freesound/static/bw-frontend/src/pages/search.js @@ -135,8 +135,8 @@ let initialAdvancedSearchInputValues = undefined; // NOTE: this is filled out in const serializeAdvanceSearchOptionsInputsData = () => { const values = []; - advancedSearchOptionsDiv - .getElementsByTagName('input') + [...advancedSearchOptionsDiv + .getElementsByTagName('input')] .forEach(inputElement => { if (inputElement.type == 'hidden') { // Don't include hidden elements as only the visible items are necessary @@ -146,8 +146,8 @@ const serializeAdvanceSearchOptionsInputsData = () => { values.push(inputElement.value); } }); - advancedSearchOptionsDiv - .getElementsByTagName('select') + [...advancedSearchOptionsDiv + .getElementsByTagName('select')] .forEach(selectElement => { values.push(selectElement.value); }); @@ -165,7 +165,7 @@ const onAdvancedSearchOptionsInputsChange = () => { !advancedSearchOptionsHaveChangedSinceLastQuery(); }; -advancedSearchOptionsDiv.getElementsByTagName('input').forEach(inputElement => { +[...advancedSearchOptionsDiv.getElementsByTagName('input')].forEach(inputElement => { inputElement.addEventListener('change', evt => { onAdvancedSearchOptionsInputsChange(); }); @@ -174,9 +174,8 @@ advancedSearchOptionsDiv.getElementsByTagName('input').forEach(inputElement => { }); }); -advancedSearchOptionsDiv - .getElementsByTagName('select') - .forEach(selectElement => { +[...advancedSearchOptionsDiv + .getElementsByTagName('select')].forEach(selectElement => { selectElement.addEventListener('change', evt => { onAdvancedSearchOptionsInputsChange(); }); @@ -186,7 +185,7 @@ advancedSearchOptionsDiv var searchFormElement = document.getElementById('search_form'); -searchFormElement.getElementsByClassName('bw-checkbox').forEach(checkbox => { +[...searchFormElement.getElementsByClassName('bw-checkbox')].forEach(checkbox => { const hiddenCheckbox = document.createElement('input'); hiddenCheckbox.type = 'hidden'; hiddenCheckbox.name = checkbox.name; @@ -209,7 +208,7 @@ if (sortByElement !== null) { // Make radio cluster elements submit the form when changed (also when cluster section is loaded asynchronously) export const bindClusteringRadioButtonsSubmit = () => { - document.getElementsByName('cid').forEach(radio => { + [...document.getElementsByName('cid')].forEach(radio => { radio.addEventListener('change', evt => { setTimeout(() => { searchFormElement.submit(); diff --git a/freesound/static/bw-frontend/src/pages/sound.js b/freesound/static/bw-frontend/src/pages/sound.js index 1f417b51ef..8984597627 100644 --- a/freesound/static/bw-frontend/src/pages/sound.js +++ b/freesound/static/bw-frontend/src/pages/sound.js @@ -108,7 +108,7 @@ const findTimeLinksAndAddEventListeners = element => { playIconHtml ); // Add listener events to each of the created anchors - element.getElementsByClassName('play-at-time').forEach(playAyTimeElement => { + [...element.getElementsByClassName('play-at-time')].forEach(playAyTimeElement => { playAyTimeElement.addEventListener('click', e => { if (!e.altKey) { const seconds = @@ -126,7 +126,7 @@ const soundDescriptionElement = document.getElementById( 'soundDescriptionSection' ); const soundCommentsSection = document.getElementById('soundCommentsSection'); -const soundCommentElements = soundCommentsSection.getElementsByTagName('p'); +const soundCommentElements = [...soundCommentsSection.getElementsByTagName('p')]; soundCommentElements.forEach(element => { findTimeLinksAndAddEventListeners(element); diff --git a/freesound/static/bw-frontend/src/utils/initHelper.js b/freesound/static/bw-frontend/src/utils/initHelper.js index 745fc04e63..dc18a745ab 100644 --- a/freesound/static/bw-frontend/src/utils/initHelper.js +++ b/freesound/static/bw-frontend/src/utils/initHelper.js @@ -79,7 +79,7 @@ const initializeStuffInContainer = (container, bindModals, activateModals) => { } // Init maps (note that already initialized maps won't be re-initialized) - const maps = document.getElementsByClassName('map'); + const maps = [...document.getElementsByClassName('map')]; maps.forEach(map => { const staticMapWrapper = document.getElementById('static_map_wrapper'); const mapIsBehindStaticMap = diff --git a/freesound/static/bw-frontend/styles/layout/global.scss b/freesound/static/bw-frontend/styles/layout/global.scss index 59f07c9751..dfe0dc207a 100644 --- a/freesound/static/bw-frontend/styles/layout/global.scss +++ b/freesound/static/bw-frontend/styles/layout/global.scss @@ -15,7 +15,7 @@ html { body { font-family: - BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, + BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: $base-size-mobile; line-height: $base-line-height-mobile; diff --git a/freesound/static/bw-frontend/styles/pages/messages.scss b/freesound/static/bw-frontend/styles/pages/messages.scss index 99c7931eef..54a0b16518 100644 --- a/freesound/static/bw-frontend/styles/pages/messages.scss +++ b/freesound/static/bw-frontend/styles/pages/messages.scss @@ -3,14 +3,6 @@ left: 0; } - .bw-nav__search { - margin-left: 20px; - - &::placeholder { - color: $navy-light-grey; - } - } - &__messages-list { height: 60vh; overflow: scroll; diff --git a/freesound/static/bw-frontend/styles/pages/search.scss b/freesound/static/bw-frontend/styles/pages/search.scss index 65a8d85d96..a5fa157b22 100644 --- a/freesound/static/bw-frontend/styles/pages/search.scss +++ b/freesound/static/bw-frontend/styles/pages/search.scss @@ -89,18 +89,6 @@ } } -.bw-search__input2 { - font-size: 32px; - line-height: 38px; - font-weight: bold; - width: 90%; - text-align: center; - - &::placeholder { - color: $navy-light-grey; - } -} - .bw-search__input_wrapper { width: 80%; font-size: 32px; diff --git a/templates/500.html b/templates/500.html index 3d6df53b8f..a48cd4ec0b 100644 --- a/templates/500.html +++ b/templates/500.html @@ -24,7 +24,7 @@
- +
diff --git a/templates/accounts/account.html b/templates/accounts/account.html index 2f48e8a287..118375e248 100644 --- a/templates/accounts/account.html +++ b/templates/accounts/account.html @@ -219,5 +219,5 @@
Most used tags
{% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/accounts/bulk_describe.html b/templates/accounts/bulk_describe.html index 19ce50f756..ddf4bb0e37 100644 --- a/templates/accounts/bulk_describe.html +++ b/templates/accounts/bulk_describe.html @@ -210,5 +210,5 @@

This bulk description process is closed

{% endblock %} {% block extrabody %} - + {% endblock %} \ No newline at end of file diff --git a/templates/accounts/describe_pack.html b/templates/accounts/describe_pack.html index a9efa72e05..128c33b69b 100644 --- a/templates/accounts/describe_pack.html +++ b/templates/accounts/describe_pack.html @@ -19,5 +19,5 @@

Pick a pack

{% endblock %} {% block extrabody %} - + {% endblock %} \ No newline at end of file diff --git a/templates/accounts/edit.html b/templates/accounts/edit.html index baecfd34fe..de2895dac4 100644 --- a/templates/accounts/edit.html +++ b/templates/accounts/edit.html @@ -52,5 +52,5 @@

{{ user.username }}

{% endblock %} {% block extrabody %} - + {% endblock %} \ No newline at end of file diff --git a/templates/accounts/manage_sounds.html b/templates/accounts/manage_sounds.html index 2d98a01a82..eef5f231a0 100644 --- a/templates/accounts/manage_sounds.html +++ b/templates/accounts/manage_sounds.html @@ -171,5 +171,5 @@
Describing sounds is disabled... 😟
{% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/accounts/upload.html b/templates/accounts/upload.html index cfe6107ed0..ee093711eb 100644 --- a/templates/accounts/upload.html +++ b/templates/accounts/upload.html @@ -93,5 +93,5 @@
Uploads disabled... 😟
{% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/api/monitor_api_credential.html b/templates/api/monitor_api_credential.html index 069e4587a3..58114f6af7 100644 --- a/templates/api/monitor_api_credential.html +++ b/templates/api/monitor_api_credential.html @@ -26,7 +26,7 @@
Number of daily API requests for credentials "{{ client. {% block extrabody %} - + diff --git a/templates/collections/edit_collection.html b/templates/collections/edit_collection.html index 2c88825480..a7ba458a93 100644 --- a/templates/collections/edit_collection.html +++ b/templates/collections/edit_collection.html @@ -78,5 +78,5 @@

{{ collection.name }}

{% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/donations/donate.html b/templates/donations/donate.html index 41c9c32439..b2cbcc6a15 100644 --- a/templates/donations/donate.html +++ b/templates/donations/donate.html @@ -60,5 +60,5 @@

Why should I donate to Freesound?

{% block extrabody %} - + {% endblock %} diff --git a/templates/follow/stream.html b/templates/follow/stream.html index bf42d40b1a..4959aff1dd 100644 --- a/templates/follow/stream.html +++ b/templates/follow/stream.html @@ -114,5 +114,5 @@
From tag{{ tags|pluralize }} " {% endblock %} {% block extrabody %} - + {% endblock %} \ No newline at end of file diff --git a/templates/front.html b/templates/front.html index a2eb8b6bd1..0523b00a0b 100644 --- a/templates/front.html +++ b/templates/front.html @@ -25,7 +25,7 @@

Find any sound you like

- +
@@ -218,5 +218,5 @@

Hot forum threads

{% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/geotags/geotags.html b/templates/geotags/geotags.html index bb4386abcf..126be5e535 100644 --- a/templates/geotags/geotags.html +++ b/templates/geotags/geotags.html @@ -54,6 +54,6 @@

{% block extrabody %} {% if not error_text %} - + {% endif %} {% endblock %} diff --git a/templates/geotags/geotags_content.html b/templates/geotags/geotags_content.html index de3815a62b..15ad88dcb3 100644 --- a/templates/geotags/geotags_content.html +++ b/templates/geotags/geotags_content.html @@ -12,7 +12,6 @@ data-map-tag="{% if tag %}{{ tag }}{% endif %}" data-geotags-url="{{ url }}" data-geotags-embed-base-url="{% absurl 'embed-geotags' %}" - data-access-token="pk.eyJ1IjoiZnJlZXNvdW5kIiwiYSI6ImNrd3E0Mm9lbjBqM2Qyb2wwdmwxaWI3a3oifQ.MZkgLSByRuk_Xql67CySAg" > diff --git a/templates/messages/messages_list.html b/templates/messages/messages_list.html index 9dd6f35922..ba648b3ed4 100644 --- a/templates/messages/messages_list.html +++ b/templates/messages/messages_list.html @@ -24,5 +24,5 @@ {% endblock %} {% block extrabody %} - + {% endblock %} \ No newline at end of file diff --git a/templates/messages/new.html b/templates/messages/new.html index ea0ae0bfdf..844ea0b7db 100644 --- a/templates/messages/new.html +++ b/templates/messages/new.html @@ -26,5 +26,5 @@

{% if is_reply %}Reply to message{% else %}New message{% {% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/moderation/assigned.html b/templates/moderation/assigned.html index 29866b5a96..97f7ed14be 100644 --- a/templates/moderation/assigned.html +++ b/templates/moderation/assigned.html @@ -143,5 +143,5 @@

{% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/molecules/navbar.html b/templates/molecules/navbar.html index 4592abd125..4fc105262e 100644 --- a/templates/molecules/navbar.html +++ b/templates/molecules/navbar.html @@ -8,7 +8,7 @@
- +
diff --git a/templates/molecules/navbar_front_page.html b/templates/molecules/navbar_front_page.html index 60fe846f17..c7127a660f 100644 --- a/templates/molecules/navbar_front_page.html +++ b/templates/molecules/navbar_front_page.html @@ -8,7 +8,7 @@
- +
diff --git a/templates/molecules/navbar_search_page.html b/templates/molecules/navbar_search_page.html index 6b8d057059..637600441d 100644 --- a/templates/molecules/navbar_search_page.html +++ b/templates/molecules/navbar_search_page.html @@ -11,7 +11,7 @@
- +
diff --git a/templates/monitor/base.html b/templates/monitor/base.html index 9f0d150e48..a12f75d2e4 100644 --- a/templates/monitor/base.html +++ b/templates/monitor/base.html @@ -39,7 +39,7 @@

Monitor

{% block extrabody %} - + diff --git a/templates/search/search.html b/templates/search/search.html index ae8a1583b7..8016c58b67 100644 --- a/templates/search/search.html +++ b/templates/search/search.html @@ -251,7 +251,6 @@

Loading map...
@@ -333,6 +332,6 @@
No results... 😟
{% if not error_text %} {% comment %}If there were errors reaching the search server, don't even load the JS bits because we only display the error message{% endcomment %} - + {% endif %} {% endblock %} diff --git a/templates/sounds/display_sound.html b/templates/sounds/display_sound.html index 758c54d465..abf76d713e 100644 --- a/templates/sounds/display_sound.html +++ b/templates/sounds/display_sound.html @@ -169,7 +169,7 @@
{{ sound.num_comments|formatnumber }}
-
+
diff --git a/templates/sounds/display_sound_small_icons.html b/templates/sounds/display_sound_small_icons.html index 6a8186f1af..c17943793a 100644 --- a/templates/sounds/display_sound_small_icons.html +++ b/templates/sounds/display_sound_small_icons.html @@ -29,7 +29,7 @@ {% endif %} -
+
{% if sound.num_ratings >= min_num_ratings %} diff --git a/templates/sounds/edit_and_describe.html b/templates/sounds/edit_and_describe.html index f0b11e155d..2ff3300526 100644 --- a/templates/sounds/edit_and_describe.html +++ b/templates/sounds/edit_and_describe.html @@ -147,5 +147,5 @@

Sounds to {% if describing %}describe{% else % {% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/sounds/pack.html b/templates/sounds/pack.html index a55e3ebe59..ce71ba2b84 100644 --- a/templates/sounds/pack.html +++ b/templates/sounds/pack.html @@ -128,5 +128,5 @@

Geotags in this pack
{% endblock %} {% block extrabody %} - + {% endblock %} \ No newline at end of file diff --git a/templates/sounds/pack_edit.html b/templates/sounds/pack_edit.html index 67829d2245..ce18426510 100644 --- a/templates/sounds/pack_edit.html +++ b/templates/sounds/pack_edit.html @@ -41,5 +41,5 @@

{{ pack.name }}

{% endblock %} {% block extrabody %} - + {% endblock %} diff --git a/templates/sounds/sound.html b/templates/sounds/sound.html index 99d03eee27..399aba1b71 100644 --- a/templates/sounds/sound.html +++ b/templates/sounds/sound.html @@ -367,5 +367,5 @@
Comments
{% endblock %} {% block extrabody %} - + {% endblock %}