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. 🙂