help with the correct way of adding javascript to an app

[legionaire]

I am trying to add a javascript scroller to the arcade for the latest scores, I think that I am close, but no matter what I do, it just does not scroll the scores

1. I have created a scrollers folder in arcade/front/controllers
2. I have placed the javascript file into the scrollers folder and named it ips.scrollers.latest.scores.js
3. I have created a callout in my code for the javascript like this \IPS\Output::i()->jsFiles      = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_scrollers' ) );
4. And, I have put into the HTML file the following line <div data-controller="arcade.front.scrollers.latestScores">

This is the file which I have created, which I suspect may be the cause of the problem

Quote

/**
 * ipsProArcade scroller
 * ips.latestScores.js - Topic view controller
 *
 * Author: legionaire
 */

;( function($, _, undefined){
    "use strict";
    ips.controller.register( 'arcade.front.scrollers.latestScores.js', {
        initialize: function()
        {
            /* A function that runs automatically when it sees an HTML element with "data-controller='app.front.parentFolder.fileName'" as an attribute */
            /* this.scope is a reference to this element */
            this.on( jsEvent, '.childClass', this.latestScores ); /* This is how you listen for an event in a child element inside the scope */
        },

 

        latestScores: function (e) {
            e.preventDefault();

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
    var ob = $('.scrollingtext1');
    var speed = 70000;
    
    ob.bind('marquee', function() {
        var tw = ob.width();
        var ww = ob.parent().width();
        ob.css({ right: -tw });
        ob.animate({ right: ww }, speed, 'linear', function() {
        ob.trigger('marquee');
        });
    }).trigger('marquee');
    
    ob.hover(function() {
        ob.stop();
    }, function() {
        var tw = ob.width();
        var ww = ob.parent().width();
        var cur = parseInt(ob.css('right'), 10);
        var speedDecrease = 1 - ((cur + tw) / (ww + tw));
        ob.animate({ right: ww }, speedDecrease * speed, 'linear', function() {
        ob.trigger('marquee');
        });
    });
});
     </script>
        }
}
}(jQuery, _));

IF anyone could point me in the correct direction it would be much appreciated

[Adriano Faria]

12 minutes ago, legionaire said:

I have placed the javascript file into the scrollers folder and named it ips.scrollers.latest.scores.js

The JS should be something like ips.FOLDER.controller., so latest.scores seems wrong.

12 minutes ago, legionaire said:

And, I have put into the HTML file the following line <div data-controller="arcade.front.scrollers.latestScores">

You used latestScores, which is different than the js above.

-------------

My example:

Quote

dev/js/front/controllers/movies/ips.movies.submit

Then on HTML I got:

...data-ipsForm data-controller="movies.front.movies.submit"{{endif}}>

submit is the controller (php file) on modules/front/movies folder.

Edited July 7, 2020 by Adriano Faria

[legionaire]

@Adriano Faria Thanks a lot for taking a look, I will try to change some things around to see if it makes a difference, because it is being used in a widget would that make a difference on how the javascript should be called ?

[Adriano Faria]

See this other example I have in the Upcoming Events widget from Calendar app. It will add a countdown:

;( function($, _, undefined){
	"use strict";
	ips.controller.register( 'rsvpevents.front.widget.eventcountdown',
	{
		initialize: function()
      
      ...

Then I added the attributes to the Calendar template via template plugin:

/* !Hook Data - DO NOT REMOVE */
public static function hookData() {
 return array_merge_recursive( array (
  'upcomingEvents' => 
  array (
    0 => 
    array (
      'selector' => 'div.ipsWidget_inner > div.ipsPad_half > ul.ipsDataList.ipsDataList_reducedSpacing > li.ipsDataItem.ipsClearfix > div.ipsDataItem_main.cWidgetComments',
      'type' => 'add_inside_end',
      'content' => '{{if \IPS\Settings::i()->rsvpevents_display_countdown}}
	{template="eventCountdown" group="widget" location="front" app="rsvpevents" params="$event"}
{{endif}}
{template="eventAttendees" group="widget" location="front" app="rsvpevents" params="$event"}',
    ),
    1 => 
    array (
      'selector' => 'div.ipsWidget_inner',
      'type' => 'add_attribute',
      'attributes_add' => 
      array (
        0 => 
        array (
          'key' => 'data-controller',
          'value' => 'rsvpevents.front.widget.eventcountdown',
        ),
      ),
    ),
  ),
), parent::hookData() );
}

And then I call the JS, also via pluin, in the init() of the widget:

	/**
	 * Initialize this widget
	 *
	 * @return	void
	 */
	public function init()
	{
		if( \IPS\Settings::i()->rsvpevents_display_countdown )
		{
			\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_widget.js', 'rsvpevents', 'front' ) );
		}

		parent::init();
	}

Will result in:

 

It seems confusing and you bet it is. 🙂

Edited July 7, 2020 by Adriano Faria

[legionaire]

Because this is a widget that is contained in the app, do I need a hook ?

[Adriano Faria]

Is it yours app or from IPS? If it yours, then just add the data-controller to your template. If it isn't, you will need.

[legionaire]

Yes my app, thanks a lot of your help, will see what trouble I can get into trying to follow your directions