Rewriting jQuery to make it work as a page_object

[Meddysong]

I'm pretty weak at the front-end side. I can sometimes create something in CodePen or JSFiddle, usually building off other examples, but knowing how to make my site use this JS properly always remains a mystery.

I know I have to create a JS file to be included with the Page and it needs to start with something like 

;( function($, _, undefined){
	"use strict";

	ips.controller.register('pages.front.titlename.main', {

and close with

	});
}(jQuery, _));

but am not sure how else to get my function working. I've tried looking at other JS on my site and they're all responding to events such as clicking. I want mine to be a simple onLoad thing, where the browser evaluates the whole page and then adds a class to an element if it detects the presence of a certain trigger class by another element.

Here's a working example I've put together in JSFiddle.

If I wanted that to work on my site as a page_object, how should I write it?

(My user case is something similar. It's for Pages. On some pages I want the header visible but on others I want to hide it. The Pages all start with something like <article class="site">. I want this JS to detect whether the article element has "hide-header" as a class. If it does, it will add a CSS class to my header section which has the properties display: none.)

 

[Meddysong]

@newbie LAC kindly came to the rescue. I thought I'd write it up here in case it came in handy for anybody who finds this topic one day.

My original attempt was:

;( function($, _, undefined){
	"use strict";

	ips.controller.register('pages.front.fullwidth.main', {
      if( $("article").hasClass( "no-header" ) )
    {
      $( ".themeHeader" ).addClass( "ipsHide" );
    }

	});
}(jQuery, _));

The relevant line in my page was:

<article class="hero__outer ce-site menu-large-only no-header" data-controller="pages.front.fullwidth.main">

and I wanted

<div class="themeHeader ipsClearfix">

to become

<div class="themeHeader ipsClearfix ipsHide">

as a result.

Not a bad attempt for somebody who doesn't really understand the intricacies here but not enough for it to work. It needed to be:

;( function($, _, undefined){
	"use strict";

	ips.controller.register('pages.front.fullwidth.main', {
		initialize: function () {
			var scope = this.scope;
			
			if (scope.hasClass("no-header")) {
				$(".themeHeader").addClass("ipsHide");
			}			
		}
	});

}(jQuery, _));

And now it works perfectly 🙂