You already gave it up ?
Or found another solution ? If so, which one, just curious.
In the meanwhile, if you still did not find any other solution, you can test this already improved (mini-repeater) sending it some data and see the result inside the HTML-Component.
What & how to do exactly???
STEP-1: Add a HTML-Component to your page.
STEP-2: Add the following CODE → into your HTML-Component…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
background-color: white;
}
.divMainContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 98vw;
height: 90vh;
overflow: auto;
background-color: rgba(200, 120, 220, 0.8);
margin-top: 1%;
margin-bottom: 1%;
border-radius: 15px;
padding: 25px 0px 25px 0px;
}
.divImage {}
.divOwner {}
.divBoolean {
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
font-weight: bold;
text-align: center;
color: #ffffff; /* Text color */
}
.containerItem {
width: 90vw;
min-height: 8vh;
margin: auto;
margin-top: 0.5%;
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
position: relative;
background: rgba(175, 165, 155, 0.5);
transition: background-color 0.5s, color 0.8s;
display: flex;
align-items: center;
flex-wrap: wrap;
position: relative;
}
.containerItem:hover .divBoolean{
background: rgba(255, 155, 155, 0.5);
border-radius: 5px;
font-weight: bold;
text-align: center;
}
.containerItem .divImage {transition: transform 0.4s ease, border-radius 0.7s ease !important;}
.containerItem:hover .divImage {
transform: scale(1.5) translate(0px, -5px);
border: 3px solid lightgrey;
animation: glow 1s infinite alternate;
box-shadow: 0 0 20px rgba(20, 20, 200, 0.9);
border-radius: 40px !important;
}
.containerItem:hover {
background-color: rgba(100, 150, 250, 0.3);
}
.containerItem:hover .divID {
color: black !important;
background-color: rgba(100, 150, 250, 0.5) !important;
border: 2px solid white !important;
}
.containerItem:hover .divOwner {
color: black !important;
background-color: rgba(100, 150, 250, 0.5) !important;
border: 2px solid white !important;
}
.containerItem:after {
content: '';
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid lightgrey;
position: absolute;
bottom: 0;
left: 0;
width: 10vw;
height: 9vh;
border-radius: 0 50px 0 0;
transform: scale(100%);
transform-origin: bottom left;
transition: transform 0.5s, color 1.5s;
}
.containerItem:hover .containerString {transform: translateX(+19%);}
.containerItem:hover .containerNumber {transform: translateX(+20%);}
.containerItem:hover .containerBoolean {transform: translateX(+20%);}
.containerItem:hover .divKey {color: black; background: rgba(255, 200, 155, 0.7);}
.containerItem:hover .divValue {color: black; background: rgba(255, 255, 255, 0.8);}
.containerItem:hover:after {
transform: scale(40%);
color: red;
background: rgba(255, 255, 255, 0.4);
}
.containerString:hover {background: rgba(155, 175, 255, 0.8) !important; cursor: pointer;}
.containerNumber:hover {background: rgba(155, 175, 255, 0.8) !important; cursor: pointer;}
.containerBoolean:hover {background: rgba(155, 175, 255, 0.8) !important; cursor: pointer;}
.divDataHolder {
width: 100%;
display: flex;
justify-content: space-between;
background: transparent;
margin-bottom: 1px;
}
.divKey{
color: white;
background: rgba(255, 255, 255, 0.1);
border-radius: 3%;
margin:1px;
padding: 1px;
background: rgba(200, 175, 155, 0.5);;
}
.divValue{
color: white;
background: rgba(255, 255, 255, 0.1);
border-radius: 3%;
margin:1px;
padding: 1px;
}
.divModalWindow {
width: 60%;
height: 50%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow-y: auto;
padding: 10px;
background-color: rgba(120, 100, 150, 0.9);
z-index: 9998;
border-radius: 5%;
}
.divModalWindow div {
margin-bottom: 10px;
}
.closeButton {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(120, 100, 150, 0.9);
color: white;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
cursor: pointer;
}
.divCounter {
position: absolute;
bottom: 0;
left: 0;
color: black;
margin: auto;
padding: 1%;
font-size: 20px;
border-radius: 0% 0% 20% 0%;
width: 50px;
height: 10px;
z-index: 9999;
}
.closeButton:hover {background-color: rgba(250, 150, 150, 0.9);}
</style>
<script>
function init() {
// when a message is received from the page code
window.onmessage = (event)=> {
let repData = event.data
if (repData) {console.log("HTML Code Element received a message!");
create_Repeater(divMainContainer, repData);
}
}
}
function create_Repeater(container, data){console.log('create-repeater running...');
let counter = 1;
const divMain = document.createElement('div');
divMain.id = 'divMain';
container.appendChild(divMain);
if (divMain) {
data.forEach((item, index) => {
let containerString;
let containerNumber;
let containerBoolean;
//--------------------------------
let containerStringCreated = false;
let containerNumberCreated = false;
let containerBooleanCreated = false;
//-----------------------------------
const containerItem = document.createElement('div');
containerItem.classList.add('containerItem');
//-----------------------------------
const divCounter = document.createElement('div');
divCounter.textContent = `#${counter}`;
divCounter.classList.add('divCounter');
containerItem.appendChild(divCounter);
//-----------------------------------
const divImage = document.createElement('img');
divImage.classList.add('divImage');
divImage.src = item.imgSrc || 'default-image.jpg';
divImage.style.width = '150px';
divImage.style.height = '125px';
divImage.style.backgroundColor = 'white';
divImage.style.objectFit = 'cover';
divImage.style.borderRadius = '10%';
divImage.style.marginRight = '10px';
divImage.style.padding = '3px';
divImage.style.transition = 'transform 0.5s ease';
divImage.style.cursor = 'pointer';
containerItem.appendChild(divImage);
//-----------------------------------
const divID = document.createElement('div');
divID.classList.add('divID');
divID.textContent = `ID: ${item._id}`;
divID.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
divID.style.border = '1px solid lightgrey';
divID.style.position = 'absolute';
divID.style.top = 0;
divID.style.right = 0;
divID.style.maxHeight = '10px';
divID.style.color = 'grey';
divID.style.margin = 'auto';
divID.style.padding = '1%';
divID.style.borderRadius = '0% 0% 0% 20%';
containerItem.appendChild(divID);
//-----------------------------------
const divOwner = document.createElement('div');
divOwner.classList.add('divOwner');
divOwner.textContent = `Owner: ${item._owner}`;
divOwner.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
divOwner.style.border = '1px solid lightgrey';
divOwner.style.position = 'absolute';
divOwner.style.bottom = 0;
divOwner.style.right = 0;
divOwner.style.maxHeight = '10px';
divOwner.style.color = 'grey';
divOwner.style.margin = 'auto';
divOwner.style.padding = '1%';
divOwner.style.borderRadius = '20% 0% 0% 0%';
containerItem.appendChild(divOwner);
//-----------------------------------
for (const key in item) {
//-------------------------------------
const divDataHolder = document.createElement('div');
divDataHolder.classList.add('divDataHolder');
const divKey = document.createElement('div');
divKey.classList.add('divKey');
divKey.style.width = '35%';
divKey.style.padding = '0.7%';
divKey.style.overflow = 'hidden';
const divValue = document.createElement('div');
divValue.classList.add('divValue');
divValue.style.width = '65%';
divValue.style.padding = '0.7%';
divValue.style.display = 'flex';
divValue.style.overflow = 'hidden';
divValue.style.justifyContent = 'center';
//-------------------------------------
if (key !== '_owner' && key !== '_id' && key !== 'imgSrc') {
divKey.textContent = key;
divValue.textContent = item[key];
divDataHolder.appendChild(divKey);
divDataHolder.appendChild(divValue);
//----------[ CONTAINER-STRING ]--------------------------------------------------------------------------------------
if (typeof item[key] === 'string') {
if (!containerStringCreated) {//console.log('Generieren eines CONTAINERS für --> NUMBER-WERTE wenn nötig.');
containerString = document.createElement('div');
containerStringCreated = true;
containerString.classList.add('containerString');
containerString.id = 'containerString';
containerString.style.width = '22vw';
containerString.style.minHeight = '100px';
containerString.style.backgroundColor = 'rgba(200, 200, 200, 0.2)';
containerString.style.borderRadius = '1%';
containerString.style.padding = '0.5%';
containerString.style.margin = '0.5%';
containerString.style.transition = 'transform 0.7s ease';
containerString.style.color = 'white';
containerString.style.display = 'flex';
containerString.style.flexDirection = 'column';
} containerString.appendChild(divDataHolder);
}
//----------[ CONTAINER-NUMBER ]--------------------------------------------------------------------------------------
else if (typeof item[key] === 'number') {
if (!containerNumberCreated) {//console.log('Generieren eines CONTAINERS für --> NUMBER-WERTE wenn nötig.');
containerNumber = document.createElement('div');
containerNumber.classList.add('containerNumber');
containerNumber.id = 'containerNumber';
containerNumberCreated = true;
containerNumber.style.width = '20vw';
containerNumber.style.minHeight = '100px';
containerNumber.style.backgroundColor = 'rgba(220, 200, 200, 0.2)';
containerNumber.style.borderRadius = '1%';
containerNumber.style.padding = '0.5%';
containerNumber.style.margin = '0.5%';
containerNumber.style.transition = 'transform 0.7s ease';
//center_dataHolder();
} containerNumber.appendChild(divDataHolder);
}
if (typeof item[key] === 'boolean') {
if (!containerBooleanCreated) {//console.log('Generieren eines CONTAINERS für --> NUMBER-WERTE wenn nötig.');
containerBoolean = document.createElement('div');
containerBooleanCreated = true;
containerBoolean.classList.add('containerBoolean');
containerBoolean.id = 'containerBoolean';
containerBoolean.style.width = '20vw';
containerBoolean.style.minHeight = '100px';
containerBoolean.style.backgroundColor = 'rgba(220, 200, 200, 0.2)';
containerBoolean.style.borderRadius = '1%';
containerBoolean.style.padding = '0.5%';
containerBoolean.style.margin = '0.5%';
containerBoolean.style.transition = 'transform 0.7s ease';
containerBoolean.style.color = 'white';
//center_dataHolder();
} containerBoolean.appendChild(divDataHolder);
}
/*
//----------[ CONTAINER-BOOLEAN ]------------------------------------------------------------------
else if (typeof item[key] === 'boolean') {
if (!containerBooleanCreated) {//console.log('Generieren eines CONTAINERS für --> BOOLEAN-WERTE wenn nötig.');
containerBoolean = document.createElement('div');
containerBoolean.classList.add('containerBoolean');
containerBoolean.id = 'containerBoolean';
containerBoolean.style.width = '10vw';
containerBoolean.style.minHeight = '100px';
containerBoolean.style.backgroundColor = 'rgba(240, 200, 200, 0.2)';
containerBoolean.style.padding = '0.5%';
containerBoolean.style.margin = '0.5%';
containerBoolean.style.transition = 'transform 0.7s ease';
containerItem.appendChild(containerBoolean);
containerBooleanCreated = true;
//--------------------
divKey.style.width = '60%';
divValue.style.width = '40%';
center_dataHolder();
} containerBoolean.appendChild(divDataHolder);
const divBoolean = document.createElement('div');
divBoolean.classList.add('divBoolean');
divBoolean.id = 'divBoolean';
divBoolean.innerHTML = `<div class="icon">${item[key] ? '✓' : '✗'}</div>`;
divBoolean.style.padding = '0 10px 0 10px';
divBoolean.style.margin = '0.5%';
//---------------------
if(item.isActive===true) {divBoolean.style.background = 'rgba(155, 255, 155, 0.5)';}
else {divBoolean.style.background = "rgba(255, 155, 155, 0.5)";}
//divBoolean.style.background = "rgba(155, 255, 155, 0.5)";
//-------------------------------------
divDataHolder.appendChild(divBoolean);
containerItem.appendChild(containerBoolean);
}
*/
//----------[ ELSE ]--------------------------------------------------------------------------------------
else {}
}
function center_dataHolder() {
divValue.style.display = 'flex';
divValue.style.justifyContent = 'center';
divKey.style.display = 'flex';
divKey.style.justifyContent = 'center';
}
}
containerItem.addEventListener('click', () => showPopup(item));
divMain.appendChild(containerItem);
counter++;
containerItem.appendChild(containerString);
containerItem.appendChild(containerNumber);
containerItem.appendChild(containerBoolean);
});
}
const showPopup = (item) => {
// Close existing modal, if any
const existingModal = document.getElementById('myModalWindow');
if (existingModal) {
existingModal.remove();
}
// Create new modal
let modalDiv = document.createElement('div');
modalDiv.id = 'myModalWindow';
modalDiv.classList.add('modalDiv');
modalDiv.style.position = 'absolute';
modalDiv.style.display = 'block';
document.body.appendChild(modalDiv);
let modalContent = document.createElement('div');
modalContent.classList.add('divModalWindow');
// Add content to the modal
for (const key in item) {
const detail = document.createElement('div');
detail.textContent = `${key}: ${item[key]}`;
modalContent.appendChild(detail);
}
// Add close button
const closeButton = document.createElement('button');
closeButton.classList.add('closeButton');
closeButton.id = 'btnClose';
closeButton.textContent = 'Close';
closeButton.addEventListener('click', () => {
modalDiv.remove();
});
modalDiv.appendChild(modalContent);
modalContent.appendChild(closeButton);
};
};
</script>
</head>
<body onload="init();" style="background-color:lightgray;">
<div class="divMainContainer" id="divMainContainer"></div>
</body>
</html>
STEP-3: Save your HTML-Component-Setup.
STEP-4: Add the following code to your wix-page…
//-------- [ USER-INTERFACE ]----------------------------
const repData = [
{_owner: 'Monkey-Lord', _id: '123', Firstname: 'George', Lastname: 'Banana', _online: false, age: 30, City: 'ExampleCity', imgSrc: 'https://img.freepik.com/free-photo/view-funny-monkey-human-clothing_23-2150758496.jpg', email: 'george.banana@monkeymail.com', isActive: false, height: 1.2},
{_owner: 'Gorilla-Kong', _id: 456, Firstname: 'Bob', Lastname: 'Jungle', age: 25, City: 'SampleVille', isActive: false, imgSrc: 'https://img.freepik.com/premium-photo/funny-monkey-wearing-glasses_818056-2904.jpg', email: 'bob.jungle@monkeymail.com', height: 1.5},
{_owner: 'Baby-Chimp', _id: 789, Firstname: 'Alice', Lastname: 'Chatter', age: 35, City: 'Testburg', isActive: true, imgSrc: 'https://t4.ftcdn.net/jpg/05/73/29/83/360_F_573298394_aSZmtISYIo9cGLoXwCx4lWOzDjDpO8mp.jpg', email: 'alice.chatter@monkeymail.com', height: 1.0},
{_owner: 'Gorilla-Kong', _id: 606, Firstname: 'Sophie', Lastname: 'abc, age: 31, City: 'Sampleton', isActive: true, imgSrc: 'https://news.vanderbilt.edu/manage/wp-content/uploads/Chimpanzee_smiling.jpg', email: 'sophie.abc@monkeymail.com', height: 1.3},
{_owner: 'Orangu-Chimp', _id: 707, Firstname: 'Oliver', Lastname: 'Orange', age: 29, City: 'Testington', isActive: false, imgSrc: 'https://img.freepik.com/free-photo/view-funny-monkey-human-clothing_23-2150758510.jpg', email: 'oliver.orange@monkeymail.com', height: 1.1},
{_owner: 'Monkey-Lord', _id: '123', Firstname: 'Anna', Lastname: 'Banana', age: 30, City: 'ExampleCity', isActive: true, imgSrc: 'https://wallpapers.com/images/featured/funny-monkey-pictures-gapupnyhalncb5nx.jpg', email: 'anna.banana@monkeymail.com', height: 1.4},
{_owner: 'Gorilla-Kong', _id: 456, Firstname: 'John', Lastname: 'Jungle', age: 25, City: 'SampleVille', isActive: false, imgSrc: 'https://i.pinimg.com/564x/cb/dc/38/cbdc38861144e29b9d923d92846339f0.jpg', email: 'john.jungle@monkeymail.com', height: 1.6},
{owner: 'Baby-Chimp', _id: 789, Firstname: 'Alice', Lastname: 'Chatter', age: 35, City: 'Testburg', isActive: true, imgSrc: 'https://img.freepik.com/free-photo/view-funny-monkey-human-clothing_23-2150758498.jpg?size=626&ext=jpg&ga=GA1.1.386372595.1698537600&semt=ais', email: 'alice.chatter@monkeymail.com', height: 1.2},
{_owner: 'Gorilla-Kong', _id: 606, Firstname: 'Sophie', Lastname: 'abc', age: 31, City: 'Sampleton', isActive: true, imgSrc: 'https://news.vanderbilt.edu/manage/wp-content/uploads/Chimpanzee_smiling.jpg', email: 'sophie.abc@monkeymail.com', height: 1.3},
{_owner: 'Orangu-Chimp', _id: 707, Firstname: 'Oliver', Lastname: 'Orange', age: 29, City: 'Testington', isActive: false, imgSrc: 'https://t3.ftcdn.net/jpg/05/32/26/32/360_F_532263218_oxFJyvZiVPOj04lTGfAod8tcIAAbeep8.jpg', email: 'oliver.orange@monkeymail.com', height: 1.1},
];
//-------- [ USER-INTERFACE ]----------------------------
$w.onReady(()=>{
// ----------[ RECIEVING FROM HTML ] ----------
$w("#html1").onMessage((event)=>{let recievedData = event.data;
console.log("RECIEVED-DATA: " , recievedData);
});
//--------------------------------------------
$w('#yourButtonIDhere').onClick(()=>{send_data(repData);});
});
// ----------[ SENDING TO HTML ] ----------
function send_data(data) {console.log('recieving-data...');
$w("#html1").postMessage(data);
}
STEP-5: Don’t forget to create (add) a button onto your page and also editing all element-IDs ↔ $w(‘#yourButtonIDhere’).onClick(()=>{send_data(repData);});
STEP-6: Change the DATA inside the USER-INTERFACE-DATA-CODE.
STEP-7: PUBLISH your website again.
STEP-8: Check the changes inside the Mini-REPEATER.
NOTE: The example should look like the following…
New integrated FEATURES:
-automatic BOOLEAN-VALUES-RECOGNITION
-Wix-Website-Interface (easy connection to Wix-Websites and Wix-Website’s data)