Page Element to Public folder js

I want to be able to get element from my pages, in my public folder files. Is hard to find info regarding this. I know that i can´t use front end element in the backend . But i am trying to use in front end Public.
Any element with $w.(selector) i want to be able to use in public js


This is the only thing thjat i was able to find .
https://support.wix.com/en/article/corvid-working-in-the-code-panel


Something about being able to use element from las page i was on. Before creating js file in public folder.

Any one knows how to accomplish what i am trying to do ??

Here is a video showing the issue , i think would be able to explain better than words !!!
https://www.loom.com/share/630d75adcbef4b639dfd11f992c48d78

Best regards

https://support.wix.com/en/article/corvid-working-with-the-site-structure-sidebar#public
https://www.wix.com/corvid/forum/community-discussion/use-of-public-files-functions

Thanks for the reply GOS, but those link explains a function that is declare in the public folder, how to use/import on the Page or site code.

What i am trying to do is import or be able to use a $w(Selector) element that is use in the Page code, and be able to use in the Public folder . So a little the other way around but with elements.
So i would be able to use in my Public/something.js this code:
$w(“#Element”)

And not get the error “#Element” is not a valid selector

Here is a video showing the issue , i think would be able to explain better than words !!!

https://www.loom.com/share/630d75adcbef4b639dfd11f992c48d78

You can pass an element as an object to a Public file. Try this:

Add a text field #text1 to the page.

Your page code:

import { test } from 'public/test';

$w.onReady(function () {
    test($w('#text1'));
});

A public file called test.js:

// Filename: public/test.js 
export function test(element) {
    element.hide();
}

When you load the page, you’ll see that #text1 is hidden.

Tadum!

Hi ,

I think i didnt explain my self.
I want to know if its posible to be able to call my page element in the public file.

A public file called test.js:

// Filename: public/test.js 
export function test(element) {
    $w('#text1').hide();
}

You explained it just fine - and I understood. You just can’t do it as you’re trying to do. You’ll need to do it as in my example.

Rodrigo, I have been toying with this also. There are basically 2 way of approach;

  1. send a $w-reference to a public file and do your thing (as Yisrael showed)
  2. send $w-code from a public file to the main page (as you are trying to do)

ad 1) you need to pass a reference from $w to a public file. Yisrael showed a possibility. You can also do this for a group of $w-elements (like a form) and in the public function iterate thru all of its .children and test on .type to decide what to do with it
ad 2) put all your code (like ‘$w(“#myButton”).enable()’ in a public file as a string, retrieve it from the main page and eval() it. It works, I tried. Downside is a performance hit, since this code cannot be SSR (Server Side Rendered).

Choice is up to you.