RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

removed innerHTML based rendering

Browse Source
This commit is contained in:
sairaj mote 2023-02-20 02:39:45 +05:30
parent 4e53a79fca
commit 51e450d08b
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/dist/notifications.js vendored
View File

@ -217,26 +217,30 @@ customElements.define('sm-notifications', class extends HTMLElement {
const { pinned = false, icon = '', action } = options; const { pinned = false, icon = '', action } = options;
const notification = document.createElement('div') const notification = document.createElement('div')
notification.id = this.randString(8) notification.id = this.randString(8)
notification.classList.add('notification'); notification.className = `notification ${pinned ? 'pinned' : ''}`
let composition = ``; const iconContainer = document.createElement('div')
composition += ` iconContainer.className = 'icon-container'
<div class="icon-container">${icon}</div> iconContainer.innerHTML = icon
<output>${message}</output> const output = document.createElement('output')
`; output.textContent = message
notification.append(iconContainer, output)
if (action) { if (action) {
composition += ` const button = document.createElement('button')
<button class="action">${action.label}</button> button.className = 'action'
` button.innerText = action.label
button.addEventListener('click', action.callback)
} }
if (pinned) { if (pinned) {
notification.classList.add('pinned'); const button = document.createElement('button')
composition += ` button.className = 'close'
<button class="close"> button.innerHTML = `
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button> `
`; button.addEventListener('click', () => {
this.remove(notification.id)
})
notification.append(button)
} }
notification.innerHTML = composition;
return notification; return notification;
} }

2
components/dist/notifications.min.js vendored
View File

File diff suppressed because one or more lines are too long