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 the following snippet of 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.
This code operates only on the published version of your project.
<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:
