Is there a tutorial on controlling settings from an externally linked self-invoked function?

I am trying to pass control settings to override defaults in the functions from a script tag below the external link in HTML. I am using vanilla JavaScript.

<script src="agility.js"></script>
<script type="text/javascript">
- agility.init();
- on windows load, find ('.someClass').
- control settings of agility.js for (.someClass) from external JS
</script>

Just point me to some examples that are not saturated in jQuery and I will do the rest, thanks.

1 Like

Just pass what you need into the agility functions.

agility.init({setting: true})
agility.find('.someClass').then(function(el) {
  console.log(el)
})

It depends on the api you want, you shouldn’t be trying to set global variables inside of the agility script.

Any global variables I have are only global to a private variable though I am not sure I did it right.

I found that I needed to start the invoke with a variable for function assigment:

var agility = (function(){
	"use strict";
	var agInfrastructure = {
		//global variables, functions, etc.
	    };

        var agPower = {
           //initialize
           init: function(){
            agInfrastructure.defaultBreak();
            agInfrastructure.placementBlock();
            agInfrastructure.agProcess();
            agInfrastructure.agMiscOptions();
    
            //Window Triggers
            window.onresize = agInfrastructure.placementBlock;
           }
        };

        return agPower;
}();

agility.init();

Do I need the first variable to do this? Or is there another technique?

You want to pass options into the functions.

var agility = (function(){

  var agInfrastructure = {};

  var agPower = {
    init: function(options) {
      options = options || {}
      options.setting = options.setting || false
      agInfrastructure.options = options
    }
  };

  return agPower;
}();

This works but relies on side-effects so perhaps a better way is to pass options into the functions on agPower as you need them.

var agility = (function(){

  var agInfrastructure = {};

  var agPower = {
    init: function() { }
    doSomething: function(options) {
      options = options || {}
      if (options.force) {
        console.log("DO IT")
      }
      else {
        console.log("do it")
      }
    }
  };

  return agPower;
}();

Is this a namespacing pattern to check if a variable exist?

var agInfrastructure = {};

Would it make more sense to check to see if it exists?
Like:

var agInfrastructure = agInfrastructure || {};

Like you did with the options even though it is a private variable.

What does .force represent?

No, that’s just an example of where I thought you would be saving these settings if you wanted to go that route.

What does .force represent?

Again, just an example of how you can pass settings into your functions, these options are typically the last argument.

agility.doSomething({ force: true })

Maybe you should explain what agility does and what the settings are so we can recommend a good API.

I am building a JS gallery in vanilla. No frameworks is important for me and it helps me learn more as I progress and put out the plugin for free and premium.

Slight change to the structure, everything is now on one variable statement:
var:

  1. agInfrastructure - disables default CSS when JS is disabled, all the functions to build, place, and animate the image blocks.
  2. shape library - a long list of declared variables that the default settings grab.
  3. default settings - pulls from the shape library and into the agInfrastructure to process the shape/size/padding/ etc.
  4. Initializer function - grabs all the functions from the agInfrastructure to turn them on all at once.

Return Init - sends the Initializer out so it can be fired from the HTML.

I currently have no options control, mainly because I just do not know how, and the worse part is that I probably already did it and not realized it.

I wanted the default settings at the top of the file so I do not have to scroll down every time, but it needs to be below the shape library to grab the variable objects. The shape library is going to grow taller overtime and I’d prefer it be at the bottom. I figured I could turn both into a function and put it under infraStructure but am not sure how to do it since I am told you can’t declare globals inside a scope.

But that’s part of the learning process right, get annoyed and figure it out, then feel great. Like a drug…

Thanks for responding btw, this like other forums seem less responsive.

I’ve tried explaining this twice but might make more sense if I make it gallery specific.
All you need to do is pass with the options in as arguments to the functions.

function agility(selector, options) {
  options = options || {}
  // do something with options
}

agility('.gallery', {
  transition: 'ease',
  duration: 300
})

What options you choose to allow and what functions you expose are completely up to you.

1 Like

You did, I was saying it was new to me and responding with the current state of my progress. Thanks for the clarification as I am not use to putting objects as arguments.

In JavaScript everything is an object (except primitives which are automatically converted to objects if you want to use them that way) so you could say that every JavaScript call you have ever made is using objects as arguments.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.