Calling functions inside _main.js

sage
1

In my experience developing with the Sage theme thus far, I’m confused about to declare functions and then invoke them on a page.

I added the following function under 'common', trying inside both'init' and 'finalize' (but not at the same time):

    function footerAlign() {
      $('footer').css('height', 'auto');
      var footerHeight = $('footer').outerHeight();
      $('body').css('padding-bottom', footerHeight);
      $('footer').css('height', footerHeight);
    }

I then called this function in my 'home' code block - footerAlign(); - but no matter what, the browser console informs me that footerAlign() is not defined.

Of course, if I remove the function declaration and add it under 'home', right above when I’m invoking it, everything works as expected. I’m wondering what I’m doing wrong? I recently updated to Sage from an outdated version of Roots. But in Roots, I was able to declare common functions at the top of main.js and then invoke them on a page without any issues.

2

This is just a scoping issue. There are lots of things you can do:

(function($) {
  var Toolbox = {
    bgToBlue: function() {
      $('body').css('background-color','blue');
    },
    bgToRed: function() {
      $('body').css('background-color','red');
    }
  };

  // Use this variable to set up the common and page specific functions. If you
  // rename this variable, you will also need to rename the namespace below.
  var Sage = {
    // All pages
    'common': {
      init: function() {
        // JavaScript to be fired on all pages
        Toolbox.bgToBlue();
      },
      finalize: function() {
        // JavaScript to be fired on all pages, after page specific JS is fired
        Toolbox.bgToRed();
      }
    }
  };

You could also remove the toolbox from main.js and move it to another file:

// toolbox.js
(function($) {
  var Toolbox = {
    bgToBlue: function() {
      $('body').css('background-color','blue');
    },
    bgToRed: function() {
      $('body').css('background-color','red');
    }
  };
  // Attach Toolbox to window
  window.Toolbox = Toolbox;
})(jQuery);

Don’t forget to update the manifest:

...
    "main.js": {
      "files": [
        "scripts/toolbox.js",
        "scripts/main.js"
      ],
      "main": true
    },
...
3 Likes