legionaire Posted July 7, 2020 Share Posted July 7, 2020 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 I have created a scrollers folder in arcade/front/controllers I have placed the javascript file into the scrollers folder and named it ips.scrollers.latest.scores.js 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' ) ); 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 Link to comment Share on other sites More sharing options...
Adriano Faria Posted July 7, 2020 Share Posted July 7, 2020 (edited) 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 Link to comment Share on other sites More sharing options...
legionaire Posted July 7, 2020 Author Share Posted July 7, 2020 @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 ? Link to comment Share on other sites More sharing options...
Adriano Faria Posted July 7, 2020 Share Posted July 7, 2020 (edited) 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 IPCommerceFan 1 Link to comment Share on other sites More sharing options...
legionaire Posted July 7, 2020 Author Share Posted July 7, 2020 Because this is a widget that is contained in the app, do I need a hook ? Link to comment Share on other sites More sharing options...
Adriano Faria Posted July 7, 2020 Share Posted July 7, 2020 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. Link to comment Share on other sites More sharing options...
legionaire Posted July 7, 2020 Author Share Posted July 7, 2020 Yes my app, thanks a lot of your help, will see what trouble I can get into trying to follow your directions Link to comment Share on other sites More sharing options...
Recommended Posts