| 1 |
/* The message is still written with text nodes only, so no markup can come out of it. |
| 2 |
`highlight` just wraps those exact substrings in <strong> built the same DOM way. */ |
| 3 |
function __tagembed__confirmDialogMessage(target, message, highlight) { |
| 4 |
message = String(message); |
| 5 |
let parts = Array.isArray(highlight) ? highlight.filter(function (part) { return part && String(part).length; }) : []; |
| 6 |
if (!parts.length) { |
| 7 |
target.textContent = message; |
| 8 |
return; |
| 9 |
} |
| 10 |
let pattern = parts.map(function (part) { return String(part).replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }).join('|'); |
| 11 |
let pieces = message.split(new RegExp('(' + pattern + ')', 'g')); |
| 12 |
pieces.forEach(function (piece) { |
| 13 |
if (!piece) return; |
| 14 |
if (parts.indexOf(piece) !== -1) { |
| 15 |
let strongEl = document.createElement('strong'); |
| 16 |
strongEl.textContent = piece; |
| 17 |
target.appendChild(strongEl); |
| 18 |
} else { |
| 19 |
target.appendChild(document.createTextNode(piece)); |
| 20 |
} |
| 21 |
}); |
| 22 |
} |
| 23 |
function __tagembed__confirmDialog(option, action) { |
| 24 |
let title = (option.title) ? option.title : 'Action'; |
| 25 |
let message = (option.message) ? option.message : 'Are you sure? ' |
| 26 |
let cancelButtonText = (option.cancelButtonText) ? option.cancelButtonText : 'Cancel'; |
| 27 |
let cancelButtonClass = (option.cancelButtonClass) ? option.cancelButtonClass : ''; |
| 28 |
let buttonText = (option.buttonText) ? option.buttonText : 'Delete'; |
| 29 |
let buttonClass = (option.buttonClass) ? option.buttonClass : ''; |
| 30 |
let typeClass = ''; |
| 31 |
let icon = ''; |
| 32 |
let type = (option.type) ? option.type : 'info'; |
| 33 |
if (type == 'info') { |
| 34 |
typeClass = '__tagembed__bg-info'; |
| 35 |
icon = "fa-info"; |
| 36 |
} else if (type == 'warning') { |
| 37 |
typeClass = '__tagembed__bg-warning'; |
| 38 |
icon = "fa-exclamation"; |
| 39 |
} else if (type == 'success') { |
| 40 |
typeClass = '__tagembed__bg-success'; |
| 41 |
icon = "fa-check"; |
| 42 |
} else if (type == 'danger') { |
| 43 |
typeClass = '__tagembed__bg-danger'; |
| 44 |
icon = "fa-times"; |
| 45 |
} |
| 46 |
|
| 47 |
/* The dialog is built with DOM methods. The title and the message are assigned through |
| 48 |
textContent, so no markup can be produced from them. */ |
| 49 |
let elemId = 'tagembedConfirmDialog'; |
| 50 |
let overlay = document.createElement('div'); |
| 51 |
overlay.setAttribute('id', elemId); |
| 52 |
overlay.className = '__tagembed__overlay'; |
| 53 |
|
| 54 |
let popupWrap = document.createElement('div'); |
| 55 |
popupWrap.className = '__tagembed__popupwrap'; |
| 56 |
overlay.appendChild(popupWrap); |
| 57 |
|
| 58 |
let iconArea = document.createElement('div'); |
| 59 |
iconArea.className = '__tagembed__iconarea ' + typeClass; |
| 60 |
let iconEl = document.createElement('i'); |
| 61 |
iconEl.className = 'fa ' + icon; |
| 62 |
iconEl.setAttribute('aria-hidden', 'true'); |
| 63 |
iconArea.appendChild(iconEl); |
| 64 |
popupWrap.appendChild(iconArea); |
| 65 |
|
| 66 |
let horizontalBorder = document.createElement('hr'); |
| 67 |
horizontalBorder.className = '__tagembed__horizontaborder'; |
| 68 |
popupWrap.appendChild(horizontalBorder); |
| 69 |
|
| 70 |
let titleWrap = document.createElement('div'); |
| 71 |
titleWrap.className = '__tagembed__title'; |
| 72 |
let titleEl = document.createElement('h2'); |
| 73 |
titleEl.textContent = title; |
| 74 |
titleWrap.appendChild(titleEl); |
| 75 |
popupWrap.appendChild(titleWrap); |
| 76 |
|
| 77 |
let descWrap = document.createElement('div'); |
| 78 |
descWrap.className = '__tagembed__desc'; |
| 79 |
let descEl = document.createElement('p'); |
| 80 |
if (option.align) descEl.style.textAlign = option.align; |
| 81 |
__tagembed__confirmDialogMessage(descEl, message, option.highlight); |
| 82 |
descWrap.appendChild(descEl); |
| 83 |
popupWrap.appendChild(descWrap); |
| 84 |
|
| 85 |
let btnWrap = document.createElement('div'); |
| 86 |
btnWrap.className = '__tagembed__btnwrap'; |
| 87 |
popupWrap.appendChild(btnWrap); |
| 88 |
|
| 89 |
let okayButton = document.createElement('button'); |
| 90 |
okayButton.className = '__tagembed__okaybtn ' + buttonClass + ' ' + typeClass; |
| 91 |
okayButton.setAttribute('id', elemId + 'OkayButton'); |
| 92 |
okayButton.textContent = buttonText; |
| 93 |
btnWrap.appendChild(okayButton); |
| 94 |
|
| 95 |
let cancelButton = document.createElement('button'); |
| 96 |
cancelButton.className = '__tagembed__cancelbtn ' + buttonClass; |
| 97 |
cancelButton.setAttribute('id', elemId + 'CancelButton'); |
| 98 |
cancelButton.textContent = 'Cancel'; |
| 99 |
btnWrap.appendChild(cancelButton); |
| 100 |
|
| 101 |
cancelButton.onclick = function () { |
| 102 |
document.querySelector('#' + elemId).remove(); |
| 103 |
}; |
| 104 |
okayButton.onclick = function () { |
| 105 |
document.querySelector('#' + elemId).remove(); |
| 106 |
(action)(); |
| 107 |
}; |
| 108 |
document.body.appendChild(overlay); |
| 109 |
} |
| 110 |
|
