Foundation - JavaScript Utilities

Foundation includes JavaScript utilities which are used to add common functionalities. It is very helpful and easy to use. This JavaScript utilities library can be found in the folder Your_folder_name/node_modules/foundation-sites/js

Box

• Foundation.Box library consists couple of methods.
• The js/foundation.util.box.js is the script filename which can be included while writing the code.
• Either jQuery objects or plain JavaScript elements can be pass to both methods.

var dims = Foundation.Box.GetDimensions(element);

The returned object specifies the dimension of the element as:

{
  height: 54,
  width: 521,
  offset: {
    left: 198,
    top: 1047
  },
  parentDims: {
    height: ... //The same format is share for parentDims and windowDims as the element dimensions.
  },
  windowDims: {
    height: ...
  }
}

• Function ImNotTouchingYou is included.
• Based on the passed element the boolean value is returned which is either conflict with edge of the window or optional or a parent element.
• The two option specified in the line below i.e. leftAndRightOnly, topAndBottomOnly is used to identify the collision on only one axis.

var clear = Foundation.Box.ImNotTouchingYou(element [, parent, leftAndRightOnly, topAndBottomOnly]);

Keyboard

• There are many methods in Foundation.Keyboard which helps to make the keyboard event interaction easy.
• The js/foundation.util.keyboard.js is the script filename which can be included while writing the code.
• The object Foundation.Keyboard.keys consist key/value pairs which keys are used in the framework more frequently.
• Whenever the key is pressed then Foundation.Keyboard.parseKey is called to get a string. This helps to manage your own keyboard inputs.

The below code is used to find all focusable elements within the given $element. Therefore there is no need of writing any function and selector by you.

var focusable = Foundation.Keyboard.findFocusable($('#content'));

• The handleKey function is a main function of this library.
• This method is used to handle the keyboard event; it can be called whenever any plugin is registered with the utility.

Foundation.Keyboard.register('pluginName', {
  'TAB': 'next'
});
...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
  next: function(){
    //do stuff
  }
});

Foundation.Keyboard.register function can be call when you want to use your own key bindings.

MediaQuery

• MediaQuery library is a backbone of all responsive CSS technique.
• The js/foundation.util.mediaQuery.js is the script filename which can be included while writing the code.
• The Foundation.MediaQuery.atLeast('large') is used to check if the screen is at least as wide as a breakpoint.
• The Foundation.MediaQuery.get('medium') gets the media query of a breakpoint.
• The Foundation.MediaQuery.queries are an array of media queries, Foundation uses for breakpoints.
• Foundation.MediaQuery.current is a string of the current breakpoint size.

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

The below code broadcast the media query change on the window.

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

Motion & Move

• Foundation.Motion javascript is similar to Motion UI library which is included in the Foundation 6. It is used to create custom CSS transitions and animations.
• The js/foundation.util.motion.js is the script filename which can be included while writing the code.
• Foundation.Move is used to make CSS3 backed animation simple and elegant.
• requestAnimationFrame(); method tells browser to perform an animation, it request that your animation function be called before the browser performs the next repaint.

Foundation.Move(durationInMS, $element, function(){
  //animation logic
});

When the animation is completed the finished.zf.animate is fired.

Timer & Images Loaded

Orbit uses both the function timer and image loaded. The js/foundation.util.timerAndImageLoader.js is the script filename which can be included while writing the code.

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

The image loaded method runs a callback function in your jQuery collection when images are completely loaded.

 Foundation.onImagesLoaded($images, callback);

Touch

• The methods are used for adding pseudo drag events and swipe to elements.
• The js/foundation.util.touch.js is the script filename which can be included while writing the code.
• The addTouch method is used to bind elements to touch events in the Slider plugin for mobile devices.
• The spotSwipe method binds elements to swipe events in the Orbit plugin for mobile devices.

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

Triggers

• It triggers the specified event for the selected elements.
• The js/foundation.util.triggers.js is the script filename which can be included while writing the code.
• The triggers are utilized in many Foundation plugin.

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

Below there are two methods used in this library i.e. resize and scroll.

• The resize() method triggers the resize event when a resize event occurs.
• The scroll() method triggers the scroll event when a scroll event occurs.

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

Miscellaneous

• Foundation contains few features in the core library which are used in many places.
• The js/foundation.core.js is the script filename which can be included while writing the code.
• Foundation.GetYoDigits([number, namespace]) returns a random base-36 uid with namespacing. It returns the string length of 6 characters long by default.
• Foundation.getFnName(fn) returns a JavaScript function name.
• Foundation.transitionend occurs when CSS transition has completed.