electron-progressbar icon indicating copy to clipboard operation
electron-progressbar copied to clipboard

Cannot read properties of null (reading 'classList')

Open XilinJia opened this issue 2 years ago • 0 comments

	public ProgressBarIndefinitive(msg = 'Preparing data...', detail = 'Wait...'): any {
		const progressBar = new ProgressBar({
			text: msg,
			detail: detail,
		});

		progressBar
			.on('completed', () => {
				progressBar.detail = 'Task completed. Exiting...';
			})
			.on('aborted', (_value: number) => {
			});

		return progressBar;
	}

const progressbar = ProgressBarIndefinitive('Saving files');
void LocalFile.populateFolder();
progressbar.setCompleted();

I got this error:

"Uncaught TypeError: Cannot read properties of null (reading 'classList')", source: data:text/html;charset=UTF8,%0A%3C!DOCTYPE%20html%3E%0A%3Chtml%20%3E%0A%09%3Chead%3E%0A%09%09%3Cmeta%20charset%3D%22UTF-8%22%3E%0A%09%09%3Cstyle%3E%0A%09%09%09*%7B%0A%09%09%09%09margin%3A%200%3B%0A%09%09%09%09padding%3A%200%3B%0A%09%09%09%09box-sizing%3A%20border-box%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09body%7B%0A%09%09%09%09margin%3A%2020px%3B%0A%09%09%09%09margin-bottom%3A%200%3B%0A%09%09%09%09font%3A%2013px%20normal%20Verdana%2C%20Arial%2C%20%22sans-serif%22%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23text%7B%0A%09%09%09%09height%3A%2026px%3B%0A%09%09%09%09overflow%3A%20auto%3B%0A%09%09%09%09font-size%3A%2014px%3B%0A%09%09%09%09font-weight%3A%20bold%3B%0A%09%09%09%09padding%3A%205px%200%3B%0A%09%09%09%09word-break%3A%20break-all%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23detail%7B%0A%09%09%09%09height%3A%2040px%3B%0A%09%09%09%09margin%3A%205px%200%3B%0A%09%09%09%09padding%3A%205px%200%3B%0A%09%09%09%09word-break%3A%20break-all%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23progressBarContainer%7B%0A%09%09%09%09text-align%3A%20center%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09progress%7B%0A%09%09%09%09-webkit-appearance%3A%20none%3B%0A%09%09%09%09appearance%3A%20none%3B%0A%09%09%09%09width%3A%20100%25%3B%0A%09%09%09%09height%3A%2025px%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09progress%3A%3A-webkit-progress-bar%7B%0A%09%09%09%09width%3A%20100%25%3B%0A%09%09%09%09box-shadow%3A%200%202px%205px%20rgba(0%2C%200%2C%200%2C%200.25)%20inset%3B%0A%09%09%09%09border-radius%3A%202px%3B%0A%09%09%09%09background%3A%20%23DEDEDE%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09progress%3A%3A-webkit-progress-value%7B%0A%09%09%09%09box-shadow%3A%200%202px%205px%20rgba(0%2C%200%2C%200%2C%200.25)%20inset%3B%0A%09%09%09%09border-radius%3A%202px%3B%0A%09%09%09%09background%3A%20%2322328C%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23progressBar%5Bindeterminate%3D%22t%22%5D%7B%0A%09%09%09%09overflow%3A%20hidden%3B%0A%09%09%09%09position%3A%20relative%3B%0A%09%09%09%09display%3A%20block%3B%0A%09%09%09%09margin%3A%200.5rem%200%201rem%200%3B%0A%09%09%09%09width%3A%20100%25%3B%0A%09%09%09%09height%3A%2010px%3B%0A%09%09%09%09border-radius%3A%202px%3B%0A%09%09%09%09background-color%3A%20%23DEDEDE%3B%0A%09%09%09%09background-clip%3A%20padding-box%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23progressBar%5Bindeterminate%3D%22t%22%5D%20%23progressBarValue%3A%3Abefore%7B%0A%09%09%09%09content%3A%20%22%22%3B%0A%09%09%09%09position%3A%20absolute%3B%0A%09%09%09%09top%3A%200%3B%0A%09%09%09%09bottom%3A%200%3B%0A%09%09%09%09left%3A%200%3B%0A%09%09%09%09will-change%3A%20left%2C%20right%3B%0A%09%09%09%09background%3A%20inherit%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23progressBar%5Bindeterminate%3D%22t%22%5D%20%23progressBarValue%3A%3Abefore%7B%0A%09%09%09%09-webkit-animation%3A%20indeterminate%202.1s%20cubic-bezier(0.65%2C%200.815%2C%200.735%2C%200.395)%20infinite%3B%0A%09%09%09%09animation%3A%20indeterminate%202.1s%20cubic-bezier(0.65%2C%200.815%2C%200.735%2C%200.395)%20infinite%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23progressBar%5Bindeterminate%3D%22t%22%5D%20%23progressBarValue%3A%3Aafter%7B%0A%09%09%09%09content%3A%20%22%22%3B%0A%09%09%09%09position%3A%20absolute%3B%0A%09%09%09%09top%3A%200%3B%0A%09%09%09%09bottom%3A%200%3B%0A%09%09%09%09left%3A%200%3B%0A%09%09%09%09will-change%3A%20left%2C%20right%3B%0A%09%09%09%09background%3A%20inherit%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23progressBar%5Bindeterminate%3D%22t%22%5D%20%23progressBarValue%3A%3Aafter%7B%0A%09%09%09%09-webkit-animation%3A%20indeterminate-short%202.1s%20cubic-bezier(0.165%2C%200.84%2C%200.44%2C%201)%20infinite%3B%0A%09%09%09%09animation%3A%20indeterminate-short%202.1s%20cubic-bezier(0.165%2C%200.84%2C%200.44%2C%201)%20infinite%3B%0A%09%09%09%09-webkit-animation-delay%3A%201.15s%3B%0A%09%09%09%09animation-delay%3A%201.15s%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%23progressBar%5Bindeterminate%3D%22t%22%5D.completed%20%23progressBarValue%3A%3Abefore%2C%0A%09%09%09%23progressBar%5Bindeterminate%3D%22t%22%5D.completed%20%23progressBarValue%3A%3Aafter%7B%0A%09%09%09%09display%3A%20none%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09.completed%23progressBar%5Bindeterminate%3D%22t%22%5D%2C%0A%09%09%09.completed%23progressBar%5Bindeterminate%3D%22t%22%5D%20%23progressBarValue%7B%0A%09%09%09%09-webkit-transition%3A%200.5s%3B%0A%09%09%09%09transition%3A%200.5s%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%40-webkit-keyframes%20indeterminate%7B%0A%09%09%09%090%25%7B%20left%3A%20-35%25%3B%20right%3A%20100%25%3B%20%7D%0A%09%09%09%0960%25%7B%20left%3A%20100%25%3B%20right%3A%20-90%25%3B%20%7D%0A%09%09%09%09100%25%7B%20left%3A%20100%25%3B%20right%3A%20-90%25%3B%20%7D%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%40keyframes%20indeterminate%7B%0A%09%09%09%090%25%7B%20left%3A%20-35%25%3B%20right%3A%20100%25%3B%20%7D%0A%09%09%09%0960%25%7B%20left%3A%20100%25%3B%20right%3A%20-90%25%3B%20%7D%0A%09%09%09%09100%25%7B%20left%3A%20100%25%3B%20right%3A%20-90%25%3B%20%7D%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%40-webkit-keyframes%20indeterminate-short%7B%0A%09%09%09%090%25%7B%20left%3A%20-200%25%3B%20right%3A%20100%25%3B%20%7D%0A%09%09%09%0960%25%7B%20left%3A%20107%25%3B%20right%3A%20-8%25%3B%20%7D%0A%09%09%09%09100%25%7B%20left%3A%20107%25%3B%20right%3A%20-8%25%3B%20%7D%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09%40keyframes%20indeterminate-short%7B%0A%09%09%09%090%25%7B%20left%3A%20-200%25%3B%20right%3A%20100%25%3B%20%7D%0A%09%09%09%0960%25%7B%20left%3A%20107%25%3B%20right%3A%20-8%25%3B%20%7D%0A%09%09%09%09100%25%7B%20left%3A%20107%25%3B%20right%3A%20-8%25%3B%20%7D%0A%09%09%09%7D%0A%09%09%3C%2Fstyle%3E%0A%09%3C%2Fhead%3E%0A%09%3Cbody%3E%0A%09%09%3Cdiv%20id%3D%22text%22%3E%3C%2Fdiv%3E%0A%09%09%3Cdiv%20id%3D%22detail%22%3E%3C%2Fdiv%3E%0A%09%09%3Cdiv%20id%3D%22progressBarContainer%22%3E%3C%2Fdiv%3E%0A%09%09%3Cscript%3E%0A%09%09%09const%20%7B%20ipcRenderer%20%7D%20%3D%20require('electron')%3B%0A%09%09%09var%20currentValue%20%3D%20%7B%0A%09%09%09%09progress%20%3A%20null%2C%0A%09%09%09%09text%20%3A%20null%2C%0A%09%09%09%09detail%20%3A%20null%0A%09%09%09%7D%3B%0A%09%09%09%0A%09%09%09var%20elements%20%3D%20%7B%0A%09%09%09%09text%20%3A%20document.querySelector(%22%23text%22)%2C%0A%09%09%09%09detail%20%3A%20document.querySelector(%22%23detail%22)%2C%0A%09%09%09%09progressBarContainer%20%3A%20document.querySelector(%22%23progressBarContainer%22)%2C%0A%09%09%09%09progressBar%20%3A%20null%20%2F%2F%20set%20by%20createProgressBar()%0A%09%09%09%7D%3B%0A%09%09%09%0A%09%09%09function%20createProgressBar(settings)%7B%0A%09%09%09%09if(settings.indeterminate)%7B%0A%09%09%09%09%09var%20progressBar%20%3D%20document.createElement(%22div%22)%3B%0A%09%09%09%09%09progressBar.setAttribute(%22id%22%2C%20%22progressBar%22)%3B%0A%09%09%09%09%09progressBar.setAttribute(%22indeterminate%22%2C%20%22t%22)%3B%0A%09%09%09%09%09%0A%09%09%09%09%09var%20progressBarValue%20%3D%20document.createElement(%22div%22)%3B%0A%09%09%09%09%09progressBarValue.setAttribute(%22id%22%2C%20%22progressBarValue%22)%3B%0A%09%09%09%09%09progressBar.appendChild(progressBarValue)%3B%0A%09%09%09%09%09%0A%09%09%09%09%09elements.progressBar%20%3D%20progressBar%3B%0A%09%09%09%09%09elements.progressBarContainer.appendChild(elements.progressBar)%3B%0A%09%09%09%09%7Delse%7B%0A%09%09%09%09%09var%20progressBar%20%3D%20document.createElement(%22progress%22)%3B%0A%09%09%09%09%09progressBar.setAttribute(%22id%22%2C%20%22progressBar%22)%3B%0A%09%09%09%09%09progressBar.max%20%3D%20settings.maxValue%3B%0A%09%09%09%09%09%0A%09%09%09%09%09elements.progressBar%20%3D%20progressBar%3B%0A%09%09%09%09%09elements.progressBarContainer.appendChild(elements.progressBar)%3B%0A%09%09%09%09%7D%0A%09%09%09%09%0A%09%09%09%09window.requestAnimationFrame(synchronizeUi)%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09function%20synchronizeUi()%7B%0A%09%09%09%09elements.progressBar.value%20%3D%20currentValue.progress%3B%0A%09%09%09%09elements.text.innerHTML%20%3D%20currentValue.text%3B%0A%09%09%09%09elements.detail.innerHTML%20%3D%20currentValue.detail%3B%0A%09%09%09%09window.requestAnimationFrame(synchronizeUi)%3B%0A%09%09%09%7D%0A%09%09%09%0A%09%09%09ipcRenderer.on(%22CREATE_PROGRESS_BAR%22%2C%20(event%2C%20settings)%20%3D%3E%20%7B%0A%09%09%09%09createProgressBar(settings)%3B%0A%09%09%09%7D)%3B%0A%09%09%09%0A%09%09%09ipcRenderer.on(%22SET_PROGRESS%22%2C%20(event%2C%20value)%20%3D%3E%20%7B%0A%09%09%09%09currentValue.progress%20%3D%20value%3B%0A%09%09%09%7D)%3B%0A%09%09%09%0A%09%09%09ipcRenderer.on(%22SET_COMPLETED%22%2C%20(event)%20%3D%3E%20%7B%0A%09%09%09%09elements.progressBar.classList.add('completed')%3B%0A%09%09%09%7D)%3B%0A%09%09%09%0A%09%09%09ipcRenderer.on(%22SET_TEXT%22%2C%20(event%2C%20value)%20%3D%3E%20%7B%0A%09%09%09%09currentValue.text%20%3D%20value%3B%0A%09%09%09%7D)%3B%0A%09%09%09%0A%09%09%09ipcRenderer.on(%22SET_DETAIL%22%2C%20(event%2C%20value)%20%3D%3E%20%7B%0A%09%09%09%09currentValue.detail%20%3D%20value%3B%0A%09%09%09%7D)%3B%0A%09%09%3C%2Fscript%3E%0A%09%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A (198)

XilinJia avatar Jan 31 '24 06:01 XilinJia