Forums

relative path of a file in js

Permalink 3 users found helpful
Hi all
I'm creating a theme which has a js file. I've included the file in header. Now the problem is that, it calls different css files on some specific condition. My problem is that I cannot point the css path correctly as js file won't allow me to add getThemepath function.

Currently I've added the relative path hard-coded, but its not the best option for a theme. Is there any suitable way to do that?

BTW here is my code:
window._config = {
   preset: 'standard',
   prefix: '/path/to/theme/css/style',
   resetCSS: true,
   breakpoints: {
      '1000px': {
         grid: {
            gutters: 25
         }
      }
   }
};


I need to set the path automatically. I was thinking to add the javascript on theme load. Is there any way to do that. If there is no way then I have to put the code in header as a open script.

Rony
ronyDdeveloper
 
JohntheFish replied on at Permalink Reply
JohntheFish
The path you want will be either relative to the actual js file or a full url.

A trick for passing any c5 derived info is to add it to a data attribute of a dom element, then read that attribute from the script.

<div id="my_id" data-my_path="<?php echo get_my_path();?>
</div>


var my_path = $('#my_id').attr('data-my_path');
juliandale replied on at Permalink Reply
juliandale
Can't you just set the JavaScript variable using the PHP variable, and then reference that?

<script>
var themePath = "<?php echo $this->getThemePath(); ?>";
</script>


Then use it like this:

window._config = {
   preset: 'standard',
   prefix: themePath,
   resetCSS: true,
   breakpoints: {
      '1000px': {
         grid: {
            gutters: 25
         }
      }
   }
};


The JavaScript variable is available to other .js files, but as the PHP runs first, it can set the theme path before the JavaScript runs.
JohntheFish replied on at Permalink Reply
JohntheFish
Yes (and that is what I use a lot of the time). However, I suspect Rony is seeking looser coupling between a js script file and php.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Actually the piece of code is in external js file. So I cannot add the php there.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Anyone? I really need help!

Rony
juliandale replied on at Permalink Reply
juliandale
What about if you change the external .js file to be a php file that writes the JavaScript out, using a querystring to pass the folder path to the external file, such as this:

<script type="text/javascript" src="http://www.myjsdomain.com.au/myscript.php?folderPath=my&#47folder&#47path"></script>


Then in the php file, change the code to use PHP to output the JavaScript:

<?
$folderPath = $_GET["folderPath"];
if (empty($folderPath)){
  $folderPath = "/default/folder/path/here";
}
echo "window._config = {";
echo "   preset: 'standard',";
echo "   prefix: '".$folderPath."',";
echo "   resetCSS: true,";
echo "   breakpoints: {";
echo "      '1000px': {";
echo "         grid: {";
echo "            gutters: 25";
echo "         }";
echo "      }";
Viewing 15 lines of 18 lines. View entire code block.
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
A very good way to resolve that, but will it be acceptable in marketplace if I do this for a theme? I'm creating a theme which I'll post for review shortly.

Rony
juliandale replied on at Permalink Reply
juliandale
I have no idea whether it would be allowed through the PRB, but if it was my site, I'd want to have everything packaged within the theme, otherwise you are relying on the external site for the JavaScript to function. What if the site goes down, what if the file is moved, what if the code subsequently breaks, what if I want to overwrite/extend the JavaScript, etc...
JohntheFish replied on at Permalink Reply
JohntheFish
Unlikely, because if you are changing the file, you can:

- Change it to read a data attribute and just write the data attribute from the theme header.

OR
- Change it to read a javascript constant, and set the constant from the header.

OR
- Change it to a callable function, and call the function with a parameter from some code in ready handler in the theme header or footer.

All are simple solutions that do not involve the overhead of streaming a JavaScript file from php.