How to use Javascript in Joomla 4's user.js document

souteasteurope · Post by **souteasteurope** » Wed Aug 23, 2023 2:55 pm

Hello, I would like to make a fade in on scroll animation with css and javascript for module Login. Integration of css code in user.css does not cause any problems in my case and working perfect. The problem occurs when I try to integrate the code into the user.js document. I notice that Joomla 4 does not detect the code from the user.js document.

Example:

If I put the following code in user.css, the login module appears in the form of annimation "a fade in" on each refresh of the web. The animation works normally, no problems.

user.css
/* This is the CSS code for fade in for Login module */
.fade-in-module {
animation: fadeIn 10s;
}

@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}

When I enter the javascript code in the user.js document for the on scroll command. So I want the animation for the login module to activate on scroll. The thing doesn't work.

// Get the text element with the fade-in-section class
var fade-in-module = document.querySelector('.fade-in-module);
// Define a function that checks if an element is visible in the viewport
var checkVisibility = function (element) {
// Get the position and size of the element
var rect = element.getBoundingClientRect();
// Return true if the element is within the viewport, false otherwise
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};

// Define a function that adds the is-visible class to the element if it is visible
var fadeIn = function () {
// Check if the element is visible
if (checkVisibility(fade-in-module)) {
// Add the is-visible class to the element
fade-in-module.classList.add('is-visible');
}
};

// Call the fadeIn function when the page loads
fadeIn();

// Call the fadeIn function when the page scrolls
window.addEventListener('scroll', fadeIn);

Is there any special rule how user.js is used in Joomla 4. Is the principle the same as user.css. I tried several variants of how to connect user.js with the Login module,( with Module Class and without it in Advance section in Module Login, with different variants of code) but without success. Does anyone have experience with integrating user.js with modules and could advise me on how to do it, with examples. Be aware that Login Module dosen't have Toggle Editor.

Post by **AMurray** » Wed Aug 23, 2023 9:30 pm

I found another post on this topic, and there are differing opinions whether user.js works - at least it apparently should work with Cassiopeia - but any other template is another story. See viewtopic.php?f=831&t=1001825.

Also the above post suggests, putting your JS into a custom module, placing it in the 'debug' position of the template.

On a quick search of docs.joomla.org found this: https://docs.joomla.org/Adding_JavaScript but I can't find any J4 specific docs.

I can't find any documentation for J4 about using a user.js file.

But for the sake of argument, wouldn't you simply add the script file reference in the <head> as normal i.e.something similar to:

Code: Select all

<script src="media/templates/site/cassiopeia/js/user.js" type="text/javascript"></script>

.

Place the above in your template's index.php file or better, create a Child template of Cassiopeia and work on the copy instead of the original.

nacc · Post by **nacc** » Wed Aug 23, 2023 9:47 pm

[ redacted ] You can create a user.js file with Cassiopeia. I just did it.

It's done using the Template manager (in a similar manner as you would create a user.css). Create the file in the folder ../media/templates/site/cassiopeia/js and test it yourself. A simple test is to create a file with

Code: Select all

alert ("Hello world");

Try it yourself.

SharkyKZ · Post by **SharkyKZ** » Thu Aug 24, 2023 5:35 am

Created the file and it's loaded. But your code has some errors. For example, fade-in-module is not a valid variable name.

Pavel-ww · Post by **Pavel-ww** » Thu Aug 24, 2023 7:58 am

SharkyKZ wrote: ↑Thu Aug 24, 2023 5:35 am Created the file and it's loaded. But your code has some errors. For example, fade-in-module is not a valid variable name.

I will add: the valid variable name will be fadeinModule or fadeInModule

souteasteurope · Post by **souteasteurope** » Thu Aug 24, 2023 1:22 pm

Pavel-ww wrote: ↑Thu Aug 24, 2023 7:58 am
SharkyKZ wrote: ↑Thu Aug 24, 2023 5:35 am Created the file and it's loaded. But your code has some errors. For example, fade-in-module is not a valid variable name.
I will add: the valid variable name will be fadeinModule or fadeInModule

Ok, I will try to explain the problem in a little more detail. Because I think I wasn't specific enough.

This code in a combination of css and javascript, which is intended to make animation for fade in on scroll, when I directly include this code in the toggle editor in a Custom module for making a text animation, it works perfectly without any problems!

Code: Select all

<div class="hours88">
<h5 class="mod_standard ">Opening hours</h5>
<p><span style="color: #dc582a;"><strong><br />Monday - Friday:</strong></span><br />07.00 am - 16.00 pm</p>
<p><span style="color: #dc582a;"><strong>Saturday - Sunday:</strong></span><br />09.00 am - 02.00 pm</p>
</div>
<style>
/* Set the initial style for the elements */
.hours88 {
opacity: 0;
transition: opacity 0.9s ease-in;
}
.hours88.is-visible { opacity: 1; }
</style>
<script>
  // This is the JavaScript code for adding the is-visible class to the text element when it is scrolled into view
 // Get the text element with the fade-in-section class
  var hours88 = document.querySelector('.hours88');
 // Define a function that checks if an element is visible in the viewport
  var checkVisibility = function (element) {
    // Get the position and size of the element
    var rect = element.getBoundingClientRect();
    // Return true if the element is within the viewport, false otherwise
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  };

  // Define a function that adds the is-visible class to the element if it is visible
  var fadeIn = function () {
    // Check if the element is visible
    if (checkVisibility(hours88)) {
      // Add the is-visible class to the element
      hours88.classList.add('is-visible');
    }
  };
  // Call the fadeIn function when the page loads
  fadeIn();
  // Call the fadeIn function when the page scrolls
  window.addEventListener('scroll', fadeIn);
</script>

When I try to integrate the same code into user.css and user.js for the Login Form Module which does not contain a toggle editor, it does not work. I actually found that the module is still there but not visible. I prove this in the picture attached on this comment, because the hand from the mouse cursor is visible there and when i click the module activate it, so the module is there, it's just not visible! I also tried a similar method using user.css and user.js with a regular Custom Module, and it just doesn't work. So it only works by the method when I integrate the code directly in the Toggle Editor....

user.css

Code: Select all

/* This is the CSS code for fade in for Login module method on scroll */
.description {
opacity: 0; 
transition: opacity 0.9s ease-in;
}
.description.is-visible { opacity: 1; }

user.js

Code: Select all

// This is the JavaScript code for adding the is-visible class to the text element when it is scrolled into view
 // Get the text element with the fade-in-section class
  var description = document.querySelector('.description');
 // Define a function that checks if an element is visible in the viewport
  var checkVisibility = function (element) {
    // Get the position and size of the element
    var rect = element.getBoundingClientRect();
    // Return true if the element is within the viewport, false otherwise
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  };
  // Define a function that adds the is-visible class to the element if it is visible
  var fadeIn = function () {
    // Check if the element is visible
    if (checkVisibility(description)) {
      // Add the is-visible class to the element
  description.classList.add('is-visible');
    }
  };
  // Call the fadeIn function when the page loads
  fadeIn();
  // Call the fadeIn function when the page scrolls
  window.addEventListener('scroll', fadeIn);

I think that for the mentioned issue, Joomla developers will have to define a little more about the use of user.css, user.js and user.scss. With documentation and concrete examples.

In any case, I thank you for the answers to Pavel-ww and SharkyKZ....

souteasteurope · Post by **souteasteurope** » Thu Aug 24, 2023 1:26 pm

nacc wrote: ↑Wed Aug 23, 2023 9:47 pm [ redacted ] You can create a user.js file with Cassiopeia. I just did it.

It's done using the Template manager (in a similar manner as you would create a user.css). Create the file in the folder ../media/templates/site/cassiopeia/js and test it yourself. A simple test is to create a file with
Code: Select all
alert ("Hello world");
Try it yourself.

Thank you for the comment. User.js in some cases is working, but limited. Try to use with a combination with user.css and user.js for making animation on scroll for specific modules. You will see is not working. You can try my example, fade in on scroll, try to use module Login Form. Thank you anyway for the answer.

souteasteurope · Post by **souteasteurope** » Thu Aug 24, 2023 1:30 pm

AMurray wrote: ↑Wed Aug 23, 2023 9:30 pm I found another post on this topic, and there are differing opinions whether user.js works - at least it apparently should work with Cassiopeia - but any other template is another story. See viewtopic.php?f=831&t=1001825.

Also the above post suggests, putting your JS into a custom module, placing it in the 'debug' position of the template.

On a quick search of docs.joomla.org found this: https://docs.joomla.org/Adding_JavaScript but I can't find any J4 specific docs.

I can't find any documentation for J4 about using a user.js file.

But for the sake of argument, wouldn't you simply add the script file reference in the <head> as normal i.e.something similar to:
Code: Select all
<script src="media/templates/site/cassiopeia/js/user.js" type="text/javascript"></script>
.

Place the above in your template's index.php file or better, create a Child template of Cassiopeia and work on the copy instead of the original.

Thank you so much for your effort and answer with links. Anyway for this issuse I didin't found the solution. When I put the code directly in Toggle Editor in Custom Module is working perfectly. But when I try to put code in user.css and user.js is not working. Unfortunately, in certain cases you are limited to using only user.css and user.js methods like in the case of the Login Module! Thanks again for your efforts AMurray.

SharkyKZ · Post by **SharkyKZ** » Thu Aug 24, 2023 3:03 pm

It could be because you're executing the code as soon as the script is loaded but the user.js script does not use defer attribute. In such case try running on DOMContentLoaded event.

The Joomla! Forum™

How to use Javascript in Joomla 4's user.js document

How to use Javascript in Joomla 4's user.js document

Re: How to use Javascript in JOOMLA 4's user.js document

Re: How to use Javascript in JOOMLA 4's user.js document

Re: How to use Javascript in Joomla 4's user.js document

Re: How to use Javascript in Joomla 4's user.js document

Re: How to use Javascript in Joomla 4's user.js document

Re: How to use Javascript in JOOMLA 4's user.js document

Re: How to use Javascript in JOOMLA 4's user.js document

Re: How to use Javascript in Joomla 4's user.js document