bit-badger/bitbadger.solutions-blog-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update JS example

Browse Source
This commit is contained in:
Daniel J. Summers 2021-11-29 09:30:16 -05:00
parent b44a12eadd
commit 9aa835c93e
1 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
source/_drafts/bootstrap-integration.md
View File

@ -77,53 +77,57 @@ This renders two empty `div`s with the appropriate style attributes; toasts plac
Bootstrap provides `data-` attributes that can make toasts appear; however, since we are creating these in script, we need to use their JavaScript functions. The message coming from the server has the format `TYPE|||The message`. Let's look at [the showToast function][v3-toast] (the largest custom JavaScript function in the entire application): Bootstrap provides `data-` attributes that can make toasts appear; however, since we are creating these in script, we need to use their JavaScript functions. The message coming from the server has the format `TYPE|||The message`. Let's look at [the showToast function][v3-toast] (the largest custom JavaScript function in the entire application):
```javascript ```javascript
showToast (message) { const mpj = {
const [level, msg] = message.split("|||") // ...
showToast (message) {
const [level, msg] = message.split("|||")
let header let header
if (level !== "success") { if (level !== "success") {
const heading = typ => `<span class="me-auto"><strong>${typ.toUpperCase()}</strong></span>` const heading = typ => `<span class="me-auto"><strong>${typ.toUpperCase()}</strong></span>`
header = document.createElement("div") header = document.createElement("div")
header.className = "toast-header" header.className = "toast-header"
header.innerHTML = heading(level === "warning" ? level : "error") header.innerHTML = heading(level === "warning" ? level : "error")
const close = document.createElement("button") const close = document.createElement("button")
close.type = "button" close.type = "button"
close.className = "btn-close" close.className = "btn-close"
close.setAttribute("data-bs-dismiss", "toast") close.setAttribute("data-bs-dismiss", "toast")
close.setAttribute("aria-label", "Close") close.setAttribute("aria-label", "Close")
header.appendChild(close) header.appendChild(close)
} }
const body = document.createElement("div") const body = document.createElement("div")
body.className = "toast-body" body.className = "toast-body"
body.innerText = msg body.innerText = msg
const toastEl = document.createElement("div") const toastEl = document.createElement("div")
toastEl.className = `toast bg-${level === "error" ? "danger" : level} text-white` toastEl.className = `toast bg-${level === "error" ? "danger" : level} text-white`
toastEl.setAttribute("role", "alert") toastEl.setAttribute("role", "alert")
toastEl.setAttribute("aria-live", "assertlive") toastEl.setAttribute("aria-live", "assertlive")
toastEl.setAttribute("aria-atomic", "true") toastEl.setAttribute("aria-atomic", "true")
toastEl.addEventListener("hidden.bs.toast", e => e.target.remove()) toastEl.addEventListener("hidden.bs.toast", e => e.target.remove())
if (header) toastEl.appendChild(header) if (header) toastEl.appendChild(header)
toastEl.appendChild(body) toastEl.appendChild(body)
document.getElementById("toasts").appendChild(toastEl) document.getElementById("toasts").appendChild(toastEl)
new bootstrap.Toast(toastEl, { autohide: level === "success" }).show() new bootstrap.Toast(toastEl, { autohide: level === "success" }).show()
},
// ...
} }
``` ```
Here's what's going on in the code above: Here's what's going on in the code above:
- Line 2 splits the level from the message - Line 4 splits the level from the message
- Lines 4-18 (`let header`) create a header and close button if the message is not a success - Lines 6-20 (`let header`) create a header and close button if the message is not a success
- Lines 20-22 (`const body`) create the body `div` with attributes Bootstrap's styling expects - Lines 22-24 (`const body`) create the body `div` with attributes Bootstrap's styling expects
- Lines 24-28 (`const toastEl`) create the `div` that will contain the toast - Lines 26-30 (`const toastEl`) create the `div` that will contain the toast
- Line 29 adds an event handler to remove the element from the DOM once the toast is hidden - Line 31 adds an event handler to remove the element from the DOM once the toast is hidden
- Lines 30 and 32 add the optional header and mandatory body to the toast `div` - Lines 32 and 34 add the optional header and mandatory body to the toast `div`
- Line 33 adds the toast to the page (within the `toasts` inner `div` defined above) - Line 35 adds the toast to the page (within the `toasts` inner `div` defined above)
- Line 34 initializes the Bootstrap JavaScript component, auto-hiding on success, and shows the toast - Line 36 initializes the Bootstrap JavaScript component, auto-hiding on success, and shows the toast
_(If you've never used JavaScript to create elements that are added to an HTML document, this probably looks weird and verbose; if you have, you look at it and say "they're not wrong...")_ _(If you've never used JavaScript to create elements that are added to an HTML document, this probably looks weird and verbose; if you have, you look at it and say "they're not wrong...")_