Ocultar y mostrar botón de Jira Service Desk Widget usando vanilla js
Mostrar y ocultar botón JSD Widget usando vanilla js
El botón como tal es un iframe que lo contiene, este se carga (se renderiza) en la página a partir de la inclusión del
script:
<script data-jsd-embedded
data-key="your-account-key"
data-base-url="https://jsd-widget.atlassian.com"
src="https://jsd-widget.atlassian.com/assets/embed.js"
></script>
El archivo embed.js genera el siguiente iframe:
El código sería el siguiente
let threadId = null
let attempts = 0
//para ocultar, como no se cuando ya está renderizado tengo que estar comprobando si existe el iframe
//seguidamente ver si el botón se ha creado si por algún error fallaria la carga del iframe se quedaria en modo infinito
//por eso le configuro el numero de intentos 20, que 20 x 50ms = 1 seg
export const ocultarJsd = () => {
threadId = setInterval(function(){
attempts++
const $iframe = document.getElementById("jsd-widget")
if ($iframe) {
const iframeContent = $iframe.contentDocument
const $divHelpButton = iframeContent.querySelector("#help-button")
if($divHelpButton) {
$divHelpButton.style.visibility = "hidden"
clearInterval(threadId)
}
}
else if (attempts === 20){
clearInterval(threadId)
attempts = 0
}
}, 50)
}
export const mostrarJsd = () => {
const $iframe = document.getElementById("jsd-widget")
if ($iframe) {
const iframeContent = $iframe.contentDocument
const $divHelpButton = iframeContent.querySelector("#help-button")
if($divHelpButton) {
$divHelpButton.style.visibility = "visible"
}
}
}
//al cargar la página me interesa ocultar ya que solo se verá si ocurre algún error
//por lo tanto configuro la ocultación así:
document.addEventListener("DOMContentLoaded", ocultarJsd)
//en mi caso, si ocurre algún error en la app, pq falten parámetros en la url, que el post devuelva error
//o el usuario este en una pantalla por mucho tiempo entonces muestro un sanckbar y llamo a la función mostrarJsd()
Autor: Eduardo A. F.
Publicado: 23-10-2021 20:38