Custom code works on all paid plans (except for the archived Creator plan). With a Free plan, you can see working code in Preview mode but not in a published project.
In our project Oracle Cards of Design Manifestos, you can browse through dozens of inspiring quotes shuffled with a single click. Recreate the same mechanics in your R/m project by following these steps:
- Create a multi-page project with repeating content. Add a button (to use for shuffling) and fix it on all pages.
- Find the ID of the button as shown here.
- Open the Code Editor and paste this code into the BEFORE <BODY> tab. Don’t forget to replace the fragments
"PASTE WIDGET ID HERE"with the ID from step 2. Please note that there are two such fragments in this code.
<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>
The result:
