Writing options (from page) to new JS file

[louisstephens]

So I have a fairly unusual project, and I am still trying to wrap my head around it (so excuse me if this doesnt make much sense). A user will create parent page (in the backend) with a modal (piece of cake), but then have a custom js file for each parent page. I wouldn't have an issue with creating a new file everytime, but this instance calls for it pretty much to be an automated process as the users are not tech savy.

I was thinking that I could create the template for the modal (which will be iframed elsewhere), and using an approach found here, automatically create a "js" child page that I could then somehow output to a custom js file.

I guess I have several questions regarding this since the modal is iframed in:

1. Since the init script for the modal has to be outside of the iframe (and placed elsewhere), what is the best way to render the custom script (which will be generated from options on the page in the backend.

2. Would it even be safe/secure to even attempt this since the js file would be referenced elsewhere (though still in a file on the pw install)

[Robin S]

I'm afraid I'm not able to understand your scenario any better than the last time you raised it, but I think you might be asking about how to send data from PHP to Javascript.

If your Javascript will run in the back-end then you can use the ProcessWire.config object via $config->js().

In your PHP...

$config->js('my_data', [
    'noun' => 'dog',
    'verb' => 'barking',
]);

In your Javascript...

alert('The ' + ProcessWire.config.my_data.noun + ' is ' + ProcessWire.config.my_data.verb);

 

If your Javascript will run in the front-end then you can do this in your template file...

<?php
$my_data = [
    'noun' => 'dog',
    'verb' => 'barking',
];
?>

<script>
    // Create Javascript object
    var my_data = <?= json_encode($my_data) ?>;
</script>

...and later in your Javascript...

alert('The ' + my_data.noun + ' is ' + my_data.verb);

 

[LostKobrakai]

I'd support @Robin S solution. Generating JS is something I would avoid at all cost if there's a way to have a fixed js just comsume changes from a plain datastructure.

[louisstephens]

I am sorry about that @Robin S .. I went on vacation and honestly forgot about my previous question. I do appreciate the help. I guess I was trying to figure out a way to "write" the custom js to a file that could be referenced later like 

	<script src="js/custom.js" type="text/javascript"></script>

As it stands, I can parse my custom data into the init script and have it out put like:

$(".custom-modal").iziModal({
	title: '',
    subtitle: '',
    headerColor: '',
	background: null,
});

But all of this was going to be wrapped in a cookie script, so to make it "easier" on whomever was posting, I needed to find a way to throw the init script into a file. Perhaps I am just making things way more difficult than they need to be.

[elabx]

What about serving the data in an endpoint? Like, not actually write it to a file but have a json response in an endpoint and asynchronously request for that and have your scripts just respond to that. 

[LostKobrakai]

Maybe you want to clarify a few things here: 

1. You're talking about an iframe. What's the page holding the iframe and what the page within the iframe?
2. What's the javascript you're trying to execute and where in the iframe story does it belong?

[louisstephens]

I will gladly share some insight.

1. The system (processwire) allows a user to create a modal using a template that has various options: text color, image, width, etc etc that will be passed to the js init function for the modal. However, since there will be different modals (All with different settings) the init codes all need to be different.

In the long run, these modals are being used elsewhere off-system. The modal has some data attributes that allow the modal to be "iframed", so I can use the js init to target the div with the data attribute and load the desired url as an iframe on the site. I have one running just fine (hard coded), but it occurred to me that since it is acting like it is iframed in, the scripts to make it work need to be outside the page that the user made, and posted off-system to make it work in the desired fashion.

2. The javascript that I am executing are the custom init scripts to fire the modal, which are unique to each one. I had thought of posting all the custom selected options on a page, and use fopen() to create a new unique file and provide a url to that so users could copy the custom script url along with the url to the page, and once posted the modal would fire. However, if there is a more elegant solution, I am all ears. 

 

Sorry if it seems confusing, I am still trying to wrap my head around everything as well.

[LostKobrakai]

I'd use two endpoints for each modal (or one if you want to differenciate by content type header). One would return the modal content (if I understand that correctly, that's what your users create) and one for "modal settings", which would just return a json string of those options.

Your external system can then use an ajax request to query the options - sanitize them and merge with own options - and start the modal with the results.

Edit:

Having the modal page itself pass the options probably won't work as the modal first needs to be opened before the iframe is even loaded - at least that's what I would expect.