El código personalizado funciona en todos los planes de pago (excepto en el plan Creator que ya ha sido archivado). Con un plan gratuito, puedes ver el código de trabajo funcionando en el modo vista previa, pero no en un proyecto publicado.
En nuestro proyecto Oracle Cards of Design Manifestos, puedes encontrar decenas de citas inspiradoras que se barajan con un solo clic. Recrea la misma mecánica en tu proyecto de R/m siguiendo estos pasos:
- Crea un proyecto de varias páginas con contenido repetido. Añade un botón (para usarlo para barajar) y fíjalo en de manera que se muestre en todas las páginas.
- Encuentra el ID de tu widget de texto como se muestra aquí.
- Abre el Code Editor y pega el siguiente código en la pestaña BEFORE <BODY>. No olvides sustituir el fragmento
"PASTE WIDGET ID HERE"por el ID del paso 2. Ten en cuenta que hay dos fragmentos dentro del código que deben ser substituidos.
No olvides remplazar ambos fragmentos de"PASTE WIDGET ID HERE"con el ID del paso 2.
Este código funciona únicamente en la versión publicada del proyecto.
<script>
let buttons;
let pages = [];
const randomInteger = (min, max) => {
let rand = min + Math.random() * (max + 1 - min);
return Math.floor(rand);
}
const getRandomPageNum = () => {
let pageNum;
for(let attempts = 10; attempts > 0; attempts--) {
const randomPageIndex = randomInteger(1, pages.length);
if (pages[randomPageIndex] && pages[randomPageIndex] !== window.RM.viewerRouter.mag.currentPage.num) {
pageNum = pages[randomPageIndex];
break;
}
if (attempts === 1 && !pageNum && pages[randomPageIndex]) {
pageNum = pages[randomPageIndex];
}
}
return pageNum;
};
let timerId = setInterval(() => {
buttons = document.querySelectorAll('.center-page .rmwidget[data-id="paste widget is here"]');
if (buttons && buttons.length) {
clearInterval(timerId);
initPages();
onButtonFound();
}
}, 200);
const initPages = () => {
pages = (window.ServerData.mags.mag.pages || []).map(page => page.num);
};
const onButtonFound = () => {
for (let button of buttons) {
button.addEventListener('click', onClick);
}
};
const onClick = () => {
const pageNum = getRandomPageNum();
console.log(pageNum);
if (pageNum) {
window.RM.viewerRouter.mag.showPage(pageNum, { animation: false });
}
let timerId = setInterval(() => {
const newButtons = document.querySelectorAll('.center-page .rmwidget[data-id="PASTE WIDGET ID HERE"]');
if (newButtons && newButtons.length) {
clearInterval(timerId);
buttons = newButtons;
onButtonFound();
}
}, 200);
// setTimeout(() => {
// for (let button of buttons) {
// button.removeEventListener('click', onClick);
// }
// buttons = document.querySelectorAll('.rmwidget[data-id="PASTE WIDGET ID HERE"]');
// if (buttons && buttons.length) {
// onButtonFound();
// }
// }, 250);
};
</script>
El resultado:
