El código JS deja de funcionar cuando se actualiza la página

[ogulcan1787]

Hola,

¿Cómo podemos arreglar eso? Por favor, ayúdame

<script>
let intervalId = setInterval(() => {
  const tags = document.querySelectorAll('.discourse-tag');
  if (tags.length > 0) {
    Array.prototype.forEach.call(tags, (tag) => {
      const tagClone = tag.cloneNode(true);
      tagClone.style.fontSize = 'var(--font-down-2)';
      tagClone.style.backgroundColor = '#1f1f33';
      tagClone.style.margin = '1px';
      tagClone.style.borderRadius = '7px';
      tagClone.style.padding = '2px 8px';
      const title = tag.closest('.main-link').querySelector('.title');
      title.parentNode.insertBefore(tagClone, title);
      tag.remove();
    });
    clearInterval(intervalId);
  }
}, 100);
</script>

[Firepup650 (Firepup Sixfifty)]

¿Por qué haces esto con JS en lugar de aplicar estilos CSS?

[ogulcan1787]

Las etiquetas no estaban posicionadas como quería con CSS

[Firepup650 (Firepup Sixfifty)]

¿Cómo así? La inyección manual de estilos debería tener el mismo resultado que un cambio en CSS.

[ogulcan1787]

No soy un profesional. Solo puedo hacer ediciones con los códigos que encuentro. No puedo escribir código desde cero.
Puedes consultar mi foro
https://pvpfarm.com

Mi prioridad siempre es editar con CSS. Mis primeros códigos JS.

[Arkshine]

Creo que quieres algo como esto:

1. Mueve las etiquetas usando el outlet del plugin topic-list-before-status.

<script type="text/x-handlebars" data-template-name="/connectors/topic-list-before-status/tag.raw">
  {{discourse-tags context.topic mode="list" tagsForUser=context.tagsForUser}}
</script>

2. Usa CSS para ocultar la etiqueta original y darles estilo (puede que necesites ajustarlo)

.link-bottom-line .discourse-tags {
    display: none;
}

.link-top-line .discourse-tags {
    column-gap: 5px;
    vertical-align: text-top;
    
    .discourse-tag {
        font-size: var(--font-down-2);
        border-radius: 7px;
        padding: 2px 8px;
        background-color: #1f1f33;
    }

    .discourse-tag::after {
        content: '' !important;
        margin: none !important;
    }
}

[ogulcan1787]

Gracias por tu ayuda.
Estoy usando estos códigos ahora mismo y funciona.

function moveTagsToTitle() {
    const mainLinks = document.querySelectorAll('.main-link');
    mainLinks.forEach(mainLink => {
        const discourseTags = mainLink.querySelector('.discourse-tags');
        const titleElement = mainLink.querySelector('.title');

        if (discourseTags && titleElement) {
            const tags = discourseTags.querySelectorAll('.discourse-tag');

            tags.forEach(tag => {
                const tagSpan = document.createElement('span');
                tagSpan.className = 'discourse-tag box';
                tagSpan.textContent = tag.textContent;
                tagSpan.style.fontSize = 'var(--font-down-2)';
                tagSpan.style.borderRadius = '10px';
                tagSpan.style.border = '1px solid #444460';
                tagSpan.style.backgroundColor = '#1f1f33';
                tagSpan.style.color = 'white';
                tagSpan.style.margin = '2px';
                tagSpan.style.padding = '2px 8px';
                tagSpan.style.display = 'inline-block';
                tagSpan.style.overflow = 'hidden';
                tagSpan.style.whiteSpace = 'nowrap';
                tagSpan.style.textOverflow = 'ellipsis';
                tagSpan.style.verticalAlign = 'middle';
                tagSpan.style.marginRight = '5px';
                titleElement.insertBefore(tagSpan, titleElement.firstChild);
            });

            if (discourseTags.parentNode) {
                discourseTags.parentNode.removeChild(discourseTags);
            }
        }
    });
}

window.addEventListener('load', moveTagsToTitle);
const observer = new MutationObserver(moveTagsToTitle);
const targetNode = document.body;
const observerOptions = {
    childList: true,
    subtree: true
};
observer.observe(targetNode, observerOptions);

[Arkshine]

Me alegra que te funcione. Sí, usar JavaScript plano puede funcionar. Sin embargo, sugiero encarecidamente usar la API de Discourse y el plugin outlet para lograr tu objetivo. Es más limpio y más resistente a los cambios.

[ogulcan1787]

Mi inglés es inadecuado en muchas materias.
No quiero que ningún código dañe el sitio.
Por ejemplo, no quiero que estos códigos JS ralenticen el sitio. (Espero )
Gracias por tu ayuda

[pfaffman (Jay Pfaffman)]

Creo que esa no es una buena manera de hacer lo que intentas.

¿Qué intentas hacer?

[ogulcan1787]

Moví las etiquetas a la izquierda del título del tema.
Esto funcionó, pero no tengo opción. Porque no puedo escribir código con CSS.
Puedes visitar mi sitio. Escribí el enlace arriba.

[Arkshine]

En mi publicación anterior #6, te di una forma más limpia de hacerlo.

Idealmente, querrías actualizar la plantilla directamente, pero eso no es una buena práctica ya que conducirá a problemas de mantenimiento y compatibilidad.

[ogulcan1787]

He subido los códigos que me diste a los lugares requeridos. Pero no funcionó como funciona ahora.

Los códigos que me diste ahora están activos en el sitio. ¿Te gustaría echar un vistazo?

[Arkshine]

¡Veo el problema!

Es extraño; no existe un outlet de plugin en la plantilla de “lista de temas más recientes” en la página de categoría.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/latest-topic-list-item.hbs#L13

Así que sí, tienes razón. Desafortunadamente, mi código no funciona en esa página.

Sin embargo, debería funcionar en /latest.

lo que veo en mi discourse local

[ogulcan1787]

Si alguna vez escribo código, lo haré con CSS.
O vendrá un héroe y me ayudará.