document.body.addEventListener('click', (event) => { if (event.target.dataset.section) { handleSectionTrigger(event) } else if (event.target.dataset.modal) { handleModalTrigger(event) } else if (event.target.classList.contains('modal-hide')) { hideAllModals() } })
const innerListItemTemplate = txt => { let listText = document.createTextNode(txt); let listItem = document.createElement('div'); listItem.classList.add('list-item'); listItem.appendChild(listText); listItem.addEventListener('click', e => { for (let el of document.querySelectorAll('.list-inner .list-item')) el.classList.remove('active'); e.target.classList.add('active'); _callData(txt); }) return listItem; }
/** * Handle add optimization filter button * @param {event} event */ const handleOptimBtnEvent = event => { if ( event.type !== 'keypress' || (event.type === 'keypress' && event.keyCode === 13) ) { addOptimFilter(); event.target.classList.add('btn--disabled'); setTimeout(() => { event.target.classList.remove('btn--disabled'); }, 1000); } }
document.getElementById('books-cards') .addEventListener('click', e => { const ui = new UI(); if (e.target.classList.contains('delete')){ // console.log(e.target.getAttribute('_id')) ui.deleteBook(e.target.getAttribute('_id')); ui.renderMessage('Book Deleted', 'danger', '2000'); } e.preventDefault(); });
document .getElementById('startBtn') .addEventListener('click', ({ target }) => { const stopBtn = document.getElementById('stopBtn') const saveBtn = document.getElementById('saveBtn') const videoSelectBtn = document.getElementById('videoSelectBtn') stopBtn.removeAttribute('disabled') saveBtn.setAttribute('disabled', 'disabled') videoSelectBtn.setAttribute('disabled', 'disabled') target.setAttribute('disabled', 'disabled') window.mediaRecorder.start() target .classList .add('is-danger') target.textContent = 'Recording' })
/** * Binds change listeners to each registered settings inputs in order * to monitor changes and update the UI accordingly. */ function bindSettingsChangeListeners(){ const eles = document.getElementsByClassName('sinput') for(let i=0; i<eles.length; i++){ const id = eles[i].id if(eles[i].tagName === 'SPAN'){ eles[i].addEventListener('input', (e) => { if(e.target.classList.contains('settingsNumberField')){ validateSettingsNumberField(e.currentTarget) } settingsChangeEval(e.target.innerHTML != settingsState[e.target.id], e.target.id) }) } else if(eles[i].tagName === 'INPUT'){ if(eles[i].getAttribute('type') === 'checkbox'){ eles[i].addEventListener('change', (e) => { settingsChangeEval(e.target.checked !== settingsState[e.target.id], e.target.id) }) } } } }
// showCart(){ // if(this.state.showCart===false){ // this.setState({showCart:true}); // }else{ // this.setState({showCart:false}); // } // } componentDidMount() { // Listen on document for clicks if clicks occur outside the cart pop up it will close if clicks occur within the cart pop up it will stay open unless the shopping cart icon is clicked then it will toggle open/closed document.addEventListener('click', (e)=>{ if(e.target.classList.contains('stay-open')){ this.setState({showCart:true}); }else if(e.target.classList.contains('cart-btn')){ if(this.state.showCart===true){ this.setState({showCart:false}); }else{ this.setState({showCart:true}); } }else{ this.setState({showCart:false}); } }); }
const listItemTemplate = txt => { let listText = document.createTextNode(txt); let listItem = document.createElement('div'); listItem.classList.add('list-item'); let listHead = document.createElement('div'); listHead.classList.add('list-head'); listHead.appendChild(listText); listHead.addEventListener('click', e => { if (e.target.classList.contains('active')) { e.target.classList.remove('active'); e.target.parentElement.querySelector('.list-inner').innerHTML = ""; } else { for (let el of document.querySelectorAll('.list-head')) { el.classList.remove('active'); el.parentElement.querySelector('.list-inner').innerHTML = ""; }; e.target.classList.add('active'); _callTables(txt); } }) let listInner = document.createElement('div'); listInner.classList.add('list-inner'); listItem.appendChild(listHead); listItem.appendChild(listInner); return listItem; }
//When the video icon is clicked document.getElementById( 'toggle-video' ).addEventListener( 'click', ( e ) => { e.preventDefault(); let elem = document.getElementById( 'toggle-video' ); if ( myStream.getVideoTracks()[0].enabled ) { e.target.classList.remove( 'fa-video' ); e.target.classList.add( 'fa-video-slash' ); elem.setAttribute( 'title', 'Show Video' ); myStream.getVideoTracks()[0].enabled = false; } else { e.target.classList.remove( 'fa-video-slash' ); e.target.classList.add( 'fa-video' ); elem.setAttribute( 'title', 'Hide Video' ); myStream.getVideoTracks()[0].enabled = true; } broadcastNewTracks( myStream, 'video' ); } );
// add an event listener to the task rows to handle the delete button clicks. // attaching the handler to the tbody element allows us to set up a single // event listener for all its children including the delete buttons instead of // adding a listener to every delete button individually. taskRows.addEventListener('click', e => { // we have to check that the delete button is the target since we attached // the listener to the tbody element if ( e.target.classList && e.target.classList.contains('delete-button') && confirm(`Delete task # ${e.target.value}?`) ) { // send the request to the server fetch( // include the id in the query string. since we just have a single value to send // it's easier than sending a json object. `/tasks/delete?id=${e.target.value}`, { method: 'POST' } ) .then(() => { // refresh the table to remove the deleted task populateTaskTable(); }); } });
//When the mute icon is clicked document.getElementById( 'toggle-mute' ).addEventListener( 'click', ( e ) => { e.preventDefault(); let elem = document.getElementById( 'toggle-mute' ); if ( myStream.getAudioTracks()[0].enabled ) { e.target.classList.remove( 'fa-microphone-alt' ); e.target.classList.add( 'fa-microphone-alt-slash' ); elem.setAttribute( 'title', 'Unmute' ); myStream.getAudioTracks()[0].enabled = false; } else { e.target.classList.remove( 'fa-microphone-alt-slash' ); e.target.classList.add( 'fa-microphone-alt' ); elem.setAttribute( 'title', 'Mute' ); myStream.getAudioTracks()[0].enabled = true; } broadcastNewTracks( myStream, 'audio' ); } );
document.body.addEventListener('click', (event) => { if (event.target.dataset.section) { handleSectionTrigger(event) } else if (event.target.dataset.modal) { handleModalTrigger(event) } else if (event.target.classList.contains('modal-hide')) { hideAllModals() } })
document.body.addEventListener('click', function (event) { if (event.target.dataset.section) { handleSectionTrigger(event) } else if (event.target.dataset.modal) { handleModalTrigger(event) } else if (event.target.classList.contains('modal-hide')) { hideAllModals() } })