Implement progressbar with <progress> #147
Comments
seanpdoyle
added a commit
to seanpdoyle/turbo
that referenced
this issue
Feb 7, 2021
Closes hotwired#61 Closes hotwired#147 --- Extends the `Adapter` interface to support new `formSubmissionStarted(FormSubmission)` and `formSubmissionFinished(FormSubmission)` delegate methods to hook into a page's form submission lifecycle. Making the Adapter aware of form submissions provides an opportunity to show and hide the progress bar in the same way as driving the page with Visits. Additionally, replace the `HTMLDivElement` implementation of the progress bar with a [progress][] element and an instance of [HTMLProgressElement][]. When updating the progress, set the `HTMLProgressElement.value` attribute, and let the browser-native implementation update its width. Since the element's `value` attribute is accessible via a property, we no longer have to synchronize via `requestAnimationFrame()`. To support the built-in element, there are some proprietary pseudoelements to consider across the browsers, including: * [-moz-progress-bar][] for the Firefox bar * [-webkit-progress-bar][] for the Safari and Chrome bar background * [-webkit-progress-value][] for the Safari and Chrome bar progress * [-ms-fill][] for IE bars [progress]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress [HTMLProgressElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement [-moz-progress-bar]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar [-webkit-progress-bar]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar [-webkit-progress-value]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value [-ms-fill]: https://developer.mozilla.org/en-US/docs/Archive/Web/CSS/::-ms-fill
seanpdoyle
added a commit
to seanpdoyle/turbo
that referenced
this issue
Feb 7, 2021
Closes hotwired#61 Closes hotwired#147 --- Extends the `Adapter` interface to support new `formSubmissionStarted(FormSubmission)` and `formSubmissionFinished(FormSubmission)` delegate methods to hook into a page's form submission lifecycle. Making the Adapter aware of form submissions provides an opportunity to show and hide the progress bar in the same way as driving the page with Visits. Additionally, replace the `HTMLDivElement` implementation of the progress bar with a [progress][] element and an instance of [HTMLProgressElement][]. When updating the progress, set the `HTMLProgressElement.value` attribute, and let the browser-native implementation update its width. Since the element's `value` attribute is accessible via a property, we no longer have to synchronize via `requestAnimationFrame()`. To support the built-in element, there are some proprietary pseudoelements to consider across the browsers, including: * [-moz-progress-bar][] for the Firefox bar * [-webkit-progress-bar][] for the Safari and Chrome bar background * [-webkit-progress-value][] for the Safari and Chrome bar progress * [-ms-fill][] for IE bars [progress]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress [HTMLProgressElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement [-moz-progress-bar]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar [-webkit-progress-bar]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar [-webkit-progress-value]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value [-ms-fill]: https://developer.mozilla.org/en-US/docs/Archive/Web/CSS/::-ms-fill
seanpdoyle
added a commit
to seanpdoyle/turbo
that referenced
this issue
Feb 7, 2021
Closes hotwired#61 Closes hotwired#147 --- Extends the `Adapter` interface to support new `formSubmissionStarted(FormSubmission)` and `formSubmissionFinished(FormSubmission)` delegate methods to hook into a page's form submission lifecycle. Making the Adapter aware of form submissions provides an opportunity to show and hide the progress bar in the same way as driving the page with Visits. Additionally, replace the `HTMLDivElement` implementation of the progress bar with a [progress][] element and an instance of [HTMLProgressElement][]. When updating the progress, set the `HTMLProgressElement.value` attribute, and let the browser-native implementation update its width. Since the element's `value` attribute is accessible via a property, we no longer have to synchronize via `requestAnimationFrame()`. To support the built-in element, there are some proprietary pseudoelements to consider across the browsers, including: * [-moz-progress-bar][] for the Firefox bar * [-webkit-progress-bar][] for the Safari and Chrome bar background * [-webkit-progress-value][] for the Safari and Chrome bar progress * [-ms-fill][] for IE bars [progress]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress [HTMLProgressElement]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLProgressElement [-moz-progress-bar]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-progress-bar [-webkit-progress-bar]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-bar [-webkit-progress-value]: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-progress-value [-ms-fill]: https://developer.mozilla.org/en-US/docs/Archive/Web/CSS/::-ms-fill
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Right now Turbo can add a progressbar to the DOM.
It does this by inserting a div. Why not use the standard progress HTML element ? This way, no need for a default CSS styling. WDYT ?
The text was updated successfully, but these errors were encountered: