hi, I searched through the forum & google for how to integrate GSAP or other JS library into microthemer, but so far I only found out 2 things :
1. GSAP implementation is on the roadmap since 2021, but I can’t find the latest update about this
2. there’s a post asking to integrade other framework library on microthemer, and the post points to use other plugins.
// Hook the enqueue function into WordPress
add_action( ‘wp_enqueue_scripts’, ‘enqueue_gsap_from_cdn’ );
?>
I tested in frontend that the script is loaded, and if I go to console and test simple script such as :
gsap.to(‘p’,{y:-50′});
it works correctly,
but somehow in the microthemer ui, when I check the column network, the gsap enqueued script doesn’t get loaded,
could anyone help giving steps to
1. add the gsap script to wordpress so it’s recognized in the microthemer UI
2. get simple tween going, like, anything, (where should I put it in code editor?)
1. does the javascript code editor suggestion gets the suggestion from the loaded library? if the gsap library (or other library) is loaded, could it show the suggestion from it?
2. on the image above, it shows that the draft-scripts.js refused to execute due to the wrong mime type, is this what causing the problem? because even a simple
so after testing more, disabling most plugin, etc, it seems that the culprit is Microthemer version 7.2.2.0 (May 25th, 2023)
it added loading script on /wp-content/micro-themes/active-scripts.js?mts=45&ver=6.2.2
but the scripts itself is not actually created, thus returning a page not found wordpress page, which is of type ‘text/html’ and that’s why in the above screenshot it shows mime error. It’s adding a script that doesn’t exist.
Rolling back to version 7.1, the script works as usual. So now it’s Solved for the problem, and question 2 above is solved.
For Question 1, is it possible to get suggestions from the library, or maybe could you recommend a workflow that enables the suggestion that ease up the development? currently since there’s no suggestion autocomplete on the code editor, I write in console first to see what’s possible, then type it in the editor. I don’t know if it’s possible to show it in the editor as well? *I know there’s already suggestions for the regular javascript library, but is it possible to show suggestion for included library?
First of all, thank you so much for sharing all of your debugging efforts, and in the process making it much easier for me to fix the issue with custom JS not loading. There was a typo in the file extension which meant the JS was written to a .scss file instead of a .js file. Microthemer version 7.2.2.1 fixes this (available now).
In answer to some of your questions:
Microthemer’s JS enqueue feature only allows you to add native JS files that ship with WordPress. I do plan to extend this functionality. The next feature I’m working on is supporting multiple JS, CSS, Sass snippets in the folders (replacing the current full code view). I will look at JS library loading again as part of that.
Thank you so much for the personalized response. I’ll test version 7.2.2.1 asap.
It’s nice to see that GSAP is in the roadmap, so I’m trying to find a workaround to be able to effectively code custom javascript with the help of microthemer.
for now, I’m doing an extremely roundabout way which is :
1. created local folder with the code suggestion that you mention in no.3, so that I can create a .js file that got the benefit of code hinting from vscode
2. while I code, I use watch folder from winscp, so every change I made to the .js file will be automatically transferred to the server
3. use wp_enqueue_script with dynamic version (using date(“h:i:s”)) to make sure the javascript always got loaded not from cache.
all of this just to be able to get code hinting, and seamless integration rather than manually copying the js file to the server every single changes. Do you use better / more simple approach to code javascript for the site beside working everything locally first?
then for microthemer questions:
1. is there anyway to select which area some of the dockings located? for example the full code editor for JS is located on the left, there is a toggle to make it on top. But I’m used with the console command on the bottom but I can’t seems to find a way to make it on the bottom, did I miss something?
2. after looking around, it seems like the custom .js file in microthemer applies to the whole site, and behave differently from the css files where I can assign it per page, is it possible to assign the custom js file for specific page, or global, similar to the css? I mean since I’m doing gsap for the animation, combining all the js animation for everypage to a single js file would be confusing.
The JavaScript editing feature is still fairly primitive. It currently has to be one file that loads globally. The very next feature I’m working on will combine JavaScript with the folders in the main view, and so JS can be applied conditionally then.
For JavaScript, it sounds like MT will be most useful for you once GSAP code hinting is supported and you can add JS snippets to conditional folders. Perhaps then you can just code in MT without VS code and server syncing.
And regarding your question about toolbars, unfortunately there are limited configurations of toolbar layout – just left and top.
because my plan for the time being is just editing the MT .js file through external editor, and if there’s small change, I could directly edit it in the MT UI itself.
problem is since I edit it in external editor, MT doesn’t know that the file is changed, and the “?nomtcache=1685497768&ver=6.2.2” portion remains the same, thus the browser doesn’t update the file to the latest and just get it from cache,
whereas if I edit from MT UI, it will know that there are changes and update the version accordingly so it doesn’t grab the js from cache. If you could point out the ver=*.*.* generation code , I could replace it to date(“h:i:s”) for the time being so it will always be different & revert it to original code after intensive development.
Thank’s Sebastian, so far MT is really handy to use,
On the subject of editing with MT and your text editor, unfortunately that workflow is not workable. MT will just overwrite the active-scripts.js file with code it stores in the database. It doesn’t read from the file, it reads from the DB. So if you are using a text editor for JS, you will need to keep using that. It would be safer to give it another name and enqueue it manually, like you did with GSAP.
When I support CSS/Sass/JS snippets in the folders, I plan to add an option to sync the code with a file, rather than the DB, that way you could use MT + a code editor simultaneously. And not worry about losing code when switching to MT for small updates.
But in case you are still interested in where active-scripts.js loads, it’s in a file called AssetLoad.php which gets copied to /wp-content/micro-themes when MT is installed or updated. See line 443.
.
.