overlay.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. /**
  2. * Script for overlay.ejs
  3. */
  4. /* Overlay Wrapper Functions */
  5. /**
  6. * Toggle the visibility of the overlay.
  7. *
  8. * @param {boolean} toggleState True to display, false to hide.
  9. * @param {boolean} dismissable Optional. True to show the dismiss option, otherwise false.
  10. * @param {string} content Optional. The content div to be shown.
  11. */
  12. function toggleOverlay(toggleState, dismissable = false, content = 'overlayContent'){
  13. if(toggleState == null){
  14. toggleState = !document.getElementById('main').hasAttribute('overlay')
  15. }
  16. if(typeof dismissable === 'string'){
  17. content = dismissable
  18. }
  19. if(toggleState){
  20. document.getElementById('main').setAttribute('overlay', true)
  21. $('#' + content).parent().children().hide()
  22. $('#' + content).show()
  23. if(dismissable){
  24. $('#overlayDismiss').show()
  25. } else {
  26. $('#overlayDismiss').hide()
  27. }
  28. $('#overlayContainer').fadeIn(250)
  29. } else {
  30. document.getElementById('main').removeAttribute('overlay')
  31. $('#overlayContainer').fadeOut(250, () => {
  32. $('#' + content).parent().children().hide()
  33. $('#' + content).show()
  34. if(dismissable){
  35. $('#overlayDismiss').show()
  36. } else {
  37. $('#overlayDismiss').hide()
  38. }
  39. })
  40. }
  41. }
  42. /**
  43. * Set the content of the overlay.
  44. *
  45. * @param {string} title Overlay title text.
  46. * @param {string} description Overlay description text.
  47. * @param {string} acknowledge Acknowledge button text.
  48. * @param {string} dismiss Dismiss button text.
  49. */
  50. function setOverlayContent(title, description, acknowledge, dismiss = 'Dismiss'){
  51. document.getElementById('overlayTitle').innerHTML = title
  52. document.getElementById('overlayDesc').innerHTML = description
  53. document.getElementById('overlayAcknowledge').innerHTML = acknowledge
  54. document.getElementById('overlayDismiss').innerHTML = dismiss
  55. }
  56. /**
  57. * Set the onclick handler of the overlay acknowledge button.
  58. * If the handler is null, a default handler will be added.
  59. *
  60. * @param {function} handler
  61. */
  62. function setOverlayHandler(handler){
  63. if(handler == null){
  64. document.getElementById('overlayAcknowledge').onclick = () => {
  65. toggleOverlay(false)
  66. }
  67. } else {
  68. document.getElementById('overlayAcknowledge').onclick = handler
  69. }
  70. }
  71. /**
  72. * Set the onclick handler of the overlay dismiss button.
  73. * If the handler is null, a default handler will be added.
  74. *
  75. * @param {function} handler
  76. */
  77. function setDismissHandler(handler){
  78. if(handler == null){
  79. document.getElementById('overlayDismiss').onclick = () => {
  80. toggleOverlay(false)
  81. }
  82. } else {
  83. document.getElementById('overlayDismiss').onclick = handler
  84. }
  85. }