How to connect "file.js" in the public folder to the home page code file.

Hi guys. I have a really big code on my home page wich is the same code repeating 89 times for 89 objects. If I put all of it on the home page where I write my code it will be more than 6000 lines. i did some googling and read Velo staff and it sims I can split my code for different parts making js files in my public directory but I can’t understand how I can connect then these files together so all will work on the homepage.

here’s my code

import wixWindow from 'wix-window';

// Animations
let fadeOptions = {
  "duration": 100,
  "direction": "center",
  "intensity": "soft"
};

// 1 D30
let hideTimeout1;

// Function to toggle box visibility
export function toggleBoxVisibility1(show) {
  clearTimeout(hideTimeout1); // Clear any existing timeout

  if (show) {
    $w('#1b').show('bounce', fadeOptions);
  } else {
    // Delay hiding the box by a small duration
    hideTimeout1 = setTimeout(() => {
      $w('#1b').hide('bounce', fadeOptions);
    }, 100); // Adjust the delay as needed
  }
}

// Event handlers for mouse hover
$w('#d30, #d30o').onMouseIn(() => {
  toggleBoxVisibility1(true);
});

$w('#d30, #d30o').onMouseOut(() => {
  toggleBoxVisibility1(false);
});

// area d30 წაიკითხეთ ქვემოთ მოცემული ინსტრუქცია. გამოიყენეთ მხოლოდ ქვემოთ მოცემულ ორ 
// ამ ნაწილში ნაკვეთის ნომრის წინ ჩაწერეთ "//" ფართის გაყიდვის შემთხვევაში. მაგალითად ასე $w('#//d30').
// ფართის ისევ ხელმისაწვდომი სტატუსის დაბრუნებისთის ამოშალეთ სიმბოლო "//". მაგალითად ასე $w('#d30').

$w('#d30').onClick((event) => {
  $w('#d30o').show();
  wixWindow.openLightbox("d30");

  // Hide #d30o after 3 seconds
  setTimeout(() => {
    $w('#d30o').hide();
  }, 3000);

});

// 2 d31
let hideTimeout2;

// Function to toggle box visibility
export function toggleBoxVisibility2(show) {
  clearTimeout(hideTimeout2); // Clear any existing timeout

  if (show) {
    $w('#2b').show('bounce', fadeOptions);
  } else {
    // Delay hiding the box by a small duration
    hideTimeout2 = setTimeout(() => {
      $w('#2b').hide('bounce', fadeOptions);
    }, 100); // Adjust the delay as needed
  }
}

// Event handlers for mouse hover
$w('#d31, #d31o').onMouseIn(() => {
  toggleBoxVisibility2(true);
});

$w('#d31, #d31o').onMouseOut(() => {
  toggleBoxVisibility2(false);
});

// area d31 წაიკითხეთ ქვემოთ მოცემული ინსტრუქცია. გამოიყენეთ მხოლოდ ქვემოთ მოცემულ ორ 
// ამ ნაწილში ნაკვეთის ნომრის წინ ჩაწერეთ "//" ფართის გაყიდვის შემთხვევაში. მაგალითად ასე $w('#//d31').
// ფართის ისევ ხელმისაწვდომი სტატუსის დაბრუნებისთის ამოშალეთ სიმბოლო "//". მაგალითად ასე $w('#d31').

$w('#d31').onClick((event) => {
  $w('#d31o').show();
  wixWindow.openLightbox("d31");

  // Hide #d31o after 3 seconds
  setTimeout(() => {
    $w('#d31o').hide();
  }, 3000);

});

as you can see I have 2 parts of this code 1 starts with // 1 D30 and then second one // 2 d31 I have code places like this from 1 to 90

now i have my code in home page.

i want to have seperate js files in my public folder and so i can split my code with 10 peace in each and then write little code on homepage wich will conect all js files to work on homepage

here is link from the website i’m working on:

i’m trying to create an interactive map. which I did and it works but can’t split the code.

can anyone please help, thank you

  1. Notice that you can not use → $w(‘# …’) on JS-Files.
  2. Always try to generate your codes as much dynamic and flexible as possible…

Not really dynamic…
$w('#d30, #d30o’).onMouseIn(() => {
toggleBoxVisibility1(true);
});

$w('#d30, #d30o’).onMouseOut(() => {
toggleBoxVisibility1(false);
});

Already better…

$w('#d30, #d30o').onMouseIn(() => {  
	toggleBoxVisibility(true, 1);
});

$w('#d30, #d30o').onMouseOut(() => {  
	toggleBoxVisibility(false, 1);
});

In this example you send the number of the current element, directly to your function.
This way you need just one function for all elements.

  1. A much better solution would be…

    let myElements = ;
    myElements[0] = $w(‘#d30’)
    myElements[1] = $w(‘#d31’)
    myElements[2] = $w(‘#d32’)
    myElements[3] = $w(‘#d33’)
    myElements[4] = $w(‘#d34’)
    myElements[5] = $w(‘#d35’)

…following by…

$w(myElements[0], '#d30o').onMouseIn((event) => {  
	toggleBoxVisibility(true, event);
});

$w(myElements[0], '#d30o').onMouseOut((event) => {  
	toggleBoxVisibility(false, event);
});

red = bad !!!
green = good !!!

Let’s improve it…

 let elementsX =  [ ];
     elementsX[0] = $w('#d30');
     elementsX[1] = $w('#d31');
     elementsX[2] = $w('#d32');
	 elementsX[3] = $w('#d33');
	 elementsX[4] = $w('#d34');
	 elementsX[5] = $w('#d35');

let elementsY =  [ ];
     elementsY[0] = $w('#d30o'); //<-- still not completely good!
     elementsY[1] = $w('#d31o'); //<-- still not completely good!
     elementsY[2] = $w('#d32o'); //<-- still not completely good!
	 elementsY[3] = $w('#d33o'); //<-- still not completely good!
	 elementsY[4] = $w('#d34o'); //<-- still not completely good!
	 elementsY[5] = $w('#d35o'); //<-- still not completely good!

// still not a completely systematic coding...
// ID variates in length ---> d31o ---> vs ---> d31
// 4-digit-ID vs ---> 3-digit-ID ---> NOT GOOD for systematic coding !!!!

…followed by…

$w(elementsX[0], elementsY[0]).onMouseIn((event) => {  
	toggleBoxVisibility(true, event);
});

$w(elementsX[0], elementsY[0]).onMouseOut((event) => {  
	toggleBoxVisibility(false, event);
});

Your… toggle-function…(one function for all toggle-actions)…

function toggleBoxVisibility(status, event) {
	console.log("Status: ", status);
	console.log("Event: , event);
	console.log("Current-ID: ", event.target.id);
	
	//result for ID --> "d31" or "d31o"
	//at this point you will recognize, why it was a bad idea
	//...to use different ID-length! ! !
	
	//Because now you need could cut of first DIGIT out of 
	...STRING ----> result ---> 31 and 31o
	
	---> at least you got the number of the clicked element! 
}

What else we can improve ???

Read more here…

!!! Good-luck and happy coding !!!

Thank you very much