buildSearchSpotlight() {
this.spotlightModal = document.createElement('DIV');
this.spotlightModal.setAttribute('id', 'spotlightModal')
this.spotlightModal.classList.add('hidden');
this.searchBar = document.createElement('INPUT');
this.searchBar.setAttribute('id', 'search-box')
this.searchbarWrapper = document.createElement('DIV');
this.searchbarWrapper.appendChild(this.searchBar)
this.spotlightModal.appendChild(this.searchbarWrapper);
// Add styling
this.spotlightModal.style.position = 'absolute'
this.spotlightModal.style.width = '100vw'
this.spotlightModal.style.height = '100vh'
this.spotlightModal.style.left = '0'
this.spotlightModal.style.top = '0'
this.spotlightModal.style.backgroundColor = 'rgba(0, 0, 0, 0.2)'
this.spotlightModal.style.display = 'flex'
this.spotlightModal.style.justifyContent = 'center'
this.spotlightModal.style.padding = '40px'
this.searchBar.style.height = '50px'
this.searchBar.style.width = '600px'
this.searchBar.style.borderRadius = '10px'
document.body.appendChild(this.spotlightModal);
// Add event listeners
this.spotlightInitiator.addEventListener('click', e => {
this.toggleSpotlight()
})
this.spotlightModal.addEventListener('click', e => {
this.toggleSpotlight()
})
// Stop the clicking of the search bar closing the modal
this.searchBar.addEventListener('click', e => {
e.stopPropagation()
})
}
See why 4M developers consider Sentry, “not bad.”
Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)