Foundation - JavaScript Utilities

Foundation includes JavaScript utilities that 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 of a 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, a Boolean value is returned, which is either a conflict with edge of the window or optional or a parent element.

  • The two options specified in the line given 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 following 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
   }
});

The Foundation.Keyboard.register function can be called 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.

  • The 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 following code broadcasts 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 the browser to perform an animation; it requests 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, finished.zf.animate is fired.

Timer & Images Loaded

Orbit uses both, the function timer and the 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 the 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);

The following two methods are 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 is completed.

Advertisements