Javascript Mixins

[Kevin Carwile]

How are javascript mixins used? Currently no docs on them that I can see. I've found a need to overload/modify a method on a core javascript controller. Can mixins be used for this?

[Michael.J]

I used this article for the few times I've needed to override a javascript file. Let me know if you want a few examples from my mods.

 

[Kevin Carwile]

Excellent. Thanks Mike.

[Kevin Carwile]

How do you trigger mixins to be added to the page from php?

[HeadStand]

1 hour ago, Kevin Carwile said:

How do you trigger mixins to be added to the page from php?

They're loaded automatically. 

[Michael.J]

2 hours ago, Kevin Carwile said:

How do you trigger mixins to be added to the page from php?

It depends if you want your mixin to load automatically or you want to trigger it within html.

Plugin Example

Here is an example mixin file that I've placed in my plugins dev/js/ folder, notice how the 3rd argument is true. This auto loads the mixin when my plugin javascript file loads and hooks into the comment feed.

ips.controller.mixin('plugin.liveTopics', 'core.front.core.commentFeed', true, function () {

Application Example

Here is an example of me overloading the table controller for one of my applications. I've disabled the auto loading argument and placed this mixin within my dev/js/front/mixins/ folder.

ips.controller.mixin('groupfinder.table', 'core.global.core.table', false, function () {

And the html changes in my table template to make sure my mixin overloads the table controller.

<div data-baseurl='{$table->baseUrl}' data-resort='{$table->resortKey}' data-controller='core.global.core.table(groupfinder.table)

[Kevin Carwile]

Right. But I meant how do you tell the framework that you have a mixin file that needs to be included in the javascript bundle.

3 hours ago, HeadStand said:

They're loaded automatically. 

So I guess that it is scanned and included automatically. Because that's not the case with controllers. You actually have to add a javascript bundle to the output stack for those.

[Numbered]

Hi @Mike John. Can you help me with this question? I am create js file in <my_app>/dev/js/front/mixins/mouseOutScope.js, which contain 

ips.controller.mixin('mouseOutScope', 'core.front.core.navBar', true, function () {
	this.after('mouseOutScope', function () {
		Debug.log('test');
	});
});

Can you say why this file is not autoloaded? Where is my mistake? I put this file into <my_app>/dev/js - don't not load. In /dev/js it's load ok, but it is wront place for standard working.

[bfarber]

Is IN_DEV enabled, and are you viewing a page within your application or are you viewing a different page (i.e. the forum index)?

[Numbered]

I am try with IN_DEV enabled and disabled. But I have not my app in special link. My app contain special table with a lot of additional user information. Which load from hook and plugins as necessary. So i am watch any ips page (forum index, topic, calendar). This js will autoloaded only if i create special call to my app with special link? Bad.. So if i haven't them i nedd make a special call to insert js via \IPS\Theme method?

Some additional info. I changed my theme layout and transfer userBar from top inside navBar (cut template call from header and put it inside navBar). All be ok, but when i open dropdown ipsMenu from my userBar elements (such as, show notification dropdown list) they hide in moment, when i try to mouseover on it. I research this and found issue. This is because dropdown meny create inside body element with position absolute. But userBar has mouseleave method, which get all 'ipsMenu' items inside navBar and trigger 'closeMenu', which close my menu. So for that i want to create mixin, which check mouse position over ipsMenu and if true - stop mouseleave timer from navBar. I think - better way is include my functional in template plugin and call js from it?

[bfarber]

Plugin javascript is automatically included on every page, however javascript for an application is only included within that application, unless you create a hook to output it on every page. Hopefully this helps.