Jump to content

Javascript Mixins


Kevin Carwile
 Share

Go to solution Solved by Michael.J,

Recommended Posts

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)
Edited by Mike John
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 7 months later...

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...