Display ipsDialog?

[LaCollision]

Hi there,

I'm packaging the IPS Suite in an external website.

I'm wondering which javascript file allows the app to display the pop-up modal window "ipsDialog"?

For instance, the pop-up that opens when we receive a new private message:

<div id='elInlineMessage' class='ipsPad' title='Private message title'>
	<div class='ipsPhotoPanel ipsPhotoPanel_medium'>

    (… the content of the pop-up…)		

	</div>
</div>

The javascript produces then a code like that:

<div class="ipsModal" id="ips_uid_2" animating="false" style="z-index: 5050;"></div>
<div class="ipsDialog" style="z-index: 5100; top: 0px;" id="elem_3165658_dialog" role="dialog" aria-label="Private message title" animating="false">
	<div class="ipsPhotoPanel ipsPhotoPanel_medium">
		
	(… pop-up content…)
    
</div></div>

 

Thanks a lot for your help,

[Rikki]

ipsDialog is part of the javascript framework in IPS4, so you would need all the IPS4 javascript in order to use it. Assuming that's the case, you can trigger one by doing:

<a href='http://www.example.com/link/to/your/content' data-ipsDialog data-ipsDialog-title="Dialog title">Click to open dialog</a>

That opens a dialog which loads the content from the link. You can instead have it show the contents of an element that's already on the page by doing:

<a href='#yourContent' data-ipsDialog data-ipsDialog-title="Dialog contents" data-ipsDialog-content="#yourContent">Click to open</a>

<div id='yourContent' class='ipsHide'>
    Your content here
</div>

The ipsHide class hides the div when the page loads, then by specifying the #yourContent selector in the data-ipsDIalog-content option, it will insert the contents of that div.

The private message popup is actually created programatically, rather than using the data-ipsDialog triggers. That's done like so:

var dialog = ips.ui.dialog.create({
	url: 'http://url/to/load',
	modal: true,
	title: "Dialog Title"
});

dialog.show();

Hope that helps  We'll have documentation available for all of the javascript tools soon.

[LaCollision]

Thanks a lot Rikki for your help  

Concerning your answer:

ipsDialog is part of the javascript framework in IPS4, so you would need all the IPS4 javascript in order to use it. 

​… the problem is in fact in loading all the IPS4 javascript! 

I'm doing it in an external page of the IPS Suite, by loading the IPS4 includeJS template:

echo \IPS\Theme::i()->getTemplate('global', 'core', 'global')->includeJS();

 

… With this template, I do get JS files:

<script type='text/javascript' src='//mydomain.com/ips4/uploads/javascript_global/root_library.js.4e735bc7724882ee4f20ef5abae196aa.js?v=a292f9b4dc' data-ips></script>


<script type='text/javascript' src='//mydomain.com/ips4/uploads/javascript_global/root_js_lang_5.js.09fdba56cb26df0b32a1233a797b1604.js?v=a292f9b4dc' data-ips></script>


<script type='text/javascript' src='//mydomain.com/ips4/uploads/javascript_global/root_framework.js.c885a7807236224513450d716f5439ee.js?v=a292f9b4dc' data-ips></script>


<script type='text/javascript' src='//mydomain.com/ips4/uploads/javascript_core/global_global_core.js.411563dd32fdf2c828e042c6adf40a31.js?v=a292f9b4dc' data-ips></script>


<script type='text/javascript' src='//mydomain.com/ips4/uploads/javascript_global/root_front.js.8afab4e031e84ec2c76b01a83f5b3761.js?v=a292f9b4dc' data-ips></script>


<script type='text/javascript' src='//mydomain.com/ips4/uploads/javascript_core/front_front_widgets.js.1dcf07c60ba9b1ac29783dd95fe4d17c.js?v=a292f9b4dc' data-ips></script>

 

… but when I receive a new PM, the <div id="elInlineMessage"> stays at the bottom of the screen, and doesn't open in a pop-up.

So, I think some javascript is not fired up, and that I miss some files… but I have no idea which ones.

Do you know how I can load the entire IPS4 javascript files?

Thanks again,

[Rikki]

That looks correct. You'll also need to add this to your body tag:

data-controller='core.front.core.app'

[LaCollision]

That looks correct. You'll also need to add this to your body tag:

data-controller='core.front.core.app'

​Damn it!!

That works!!

Wow, thank you so much!

I have no idea what it means, but it works 

[Rikki]

There's two main kinds of JS file in IPS4 - widgets and controllers. Widgets are things like the dialog plugin, menus, lightbox etc. Controllers are modules that do something specific to an area of content. The idea behind controllers is that they should only handle what they are actually responsible for - it means the code is cleaner.

Let's take topic view as an example. There's a controller called commentFeed, which wraps topic view and is responsible for the overall feed of posts. It handles quick replies, comment polling for new replies and so on, but it doesn't care what happens in individual comments - that isn't its job. Each post has a comment controller, which handles only the functionality for an individual comment - editing, approving, multiquoting etc. Within a comment, there's also some other controllers used; reputation is one. As before, that handles only the functionality needed for reputation - it doesn't care that it is inside a comment or anywhere else. This is separation of concerns, and it means we end up with specific modules doing clearly-defined jobs.

All of these controllers can emit events when they do something, which lets other controllers know (if they care). If you have some custom code that cares when a user clicks the moderation checkbox in a post for example, you can watch for that event - but the comment controller doesn't need to know or care.

Anyway, after that wild tangent... the core.front.core.app controller is the main 'global' controller for the front end. It handles all the page-wide functionality for the front end  

[LaCollision]

There's two main kinds of JS file in IPS4 - widgets and controllers. Widgets are things like the dialog plugin, menus, lightbox etc. Controllers are modules that do something specific to an area of content. The idea behind controllers is that they should only handle what they are actually responsible for - it means the code is cleaner.

Let's take topic view as an example. There's a controller called commentFeed, which wraps topic view and is responsible for the overall feed of posts. It handles quick replies, comment polling for new replies and so on, but it doesn't care what happens in individual comments - that isn't its job. Each post has a comment controller, which handles only the functionality for an individual comment - editing, approving, multiquoting etc. Within a comment, there's also some other controllers used; reputation is one. As before, that handles only the functionality needed for reputation - it doesn't care that it is inside a comment or anywhere else. This is separation of concerns, and it means we end up with specific modules doing clearly-defined jobs.

All of these controllers can emit events when they do something, which lets other controllers know (if they care). If you have some custom code that cares when a user clicks the moderation checkbox in a post for example, you can watch for that event - but the comment controller doesn't need to know or care.

Anyway, after that wild tangent... the core.front.core.app controller is the main 'global' controller for the front end. It handles all the page-wide functionality for the front end  

​Quote for glory! 

Thanks a lot for your feedback, that's so really appreciated.

You should definitely post more in the forum… oh wait, no, we would start to understand the code 

[PatrickRQ]

Hello,

@Rikki, I try to use it within Pages, in templates but I get unrecognized ips. error in console. What I miss? I use default IPS wrapper.

<script type="text/javascript">
var dialog = ips.ui.dialog.create({
	url: '{$record->url()}',
	modal: true,
	title: "Dialog Title"
});
</script>

 

[BomAle]

add before "</script>"

dialog.show();

some useful js example:

 

[bfarber]

15 hours ago, PatrickRQ said:

Hello,

@Rikki, I try to use it within Pages, in templates but I get unrecognized ips. error in console. What I miss? I use default IPS wrapper.

<script type="text/javascript">
var dialog = ips.ui.dialog.create({
	url: '{$record->url()}',
	modal: true,
	title: "Dialog Title"
});
</script>

 

You probably have javascript loading at the end of page load (i.e. right before the </body> tag), which means you can't reference it directly within templates because the files haven't loaded yet. Instead, you should create a javascript file within the Pages template manager with your code, and then edit the respective page and include that js file.

But...this is a feedback forum and not an appropriate area for custom coding assistance, so I would recommend if you have further questions you should post in the appropriate peer assistance forum.