fmjquery

Fusionary jQuery Plugins

This repo contains some jQuery plugins that we might use at Fusionary. They are sparsely documented below.

All of the following require jQuery. Some require other things, as noted.

jquery.accordiontabs.js

$.fn.accordiontabs(options)

Extends the tabs widget so that tabs will turn into accordion at a certain breakpoint.

options:

Same options as .tabs(), plus:

• breakpoint: Number. Default undefined
• isAccordion: Function
• accordionCollapsible: Boolean
• isAccordionClass: String
• accordionShow: Object {effect: 'slideDown', duration: 200}
• headingHtml: Function

Requires:

• jQuery UI Tabs
• Custom CSS to change the display of tabs nav, etc. depending on presence of isAccordionClass

jquery.cachedajax.js

$.cachedAjax(url, options)

Same options as $.ajax()

Returns the jqXHR Promise-like object

Requires:

• Begins with import {serialize} from './url', so you don't have to do anything if you're using it with the rest of the repo and using Babel/Webpack/whatever

jquery.modal.js

Modal plugin.

Usage

// Initialize
$('.foo').modal({
  beforeOpen: function(data) {
    data.content.empty().append('<div>hello world!</div>');
  }
});

// Open
$('.foo').on('click', function() {
  $('.foo').modal('open', otherOptions);
});

Styles

Default stylesheet is at css/jquery.modal.css. Note that if you change templates, the default styles may no longer work.

Default options:

settings = {
  keepFocus: true,
  templates: {
    modal: '<div class="Modal" aria-live="polite"></div>',
    content: '<div class="Modal-content"></div>',
    closeDiv: '<div class="Modal-close"></div>',
    closeBtn: '<button class="Modal-closeBtn Button Button--close">&times;</button>'
  },
  classes: {
    modal: 'js-modal',
    content: 'js-modalContent',
    closeDiv: 'js-closeModalWrapper',
    closeBtn: 'js-closeModal',
    active: 'is-active'
  },

  // events
  onInit: null,
  beforeOpen: null,
  // If show === false in the callback arg, it does not go through with the open:
  beforeOpenAsync: null, // function(data, callback) { /* do something async */ callback(show); }
  afterOpen: null,
  beforeClose: null,
  afterClose: null
};

Methods

• init: This is the default method. Creates the modal div and appends it to the body.
• open: "Opens" the modal by adding the "is-active" class.
• close: "Closes" the modal by removing the "is-active" class.
• destroy: Removes the modal and its data & events.
• options: Gets or sets options for the modal.

jquery.formfield.js

$.fn.formField(options)

Widget-like plugin that allows for the "float-label" thing.

Default options:

settings = {
  emptyClass: 'is-empty',
  notEmptyClass: 'is-notEmpty',
  focusClass: 'is-focused',
  requiredClass: 'is-required',
  containers: '.FormField--floatLabel',
  inputs: '.FormField-input',
  labels: '.FormField-label'
};

Methods:

• init: This is the default method.
• setFields: e.g. $('form or formFieldContainer(s)').formField('setFields', options). This is helpful if .formField() has already been called on the form and fields are injected later .
• destroy: e.g. $('form or formFieldContainer(s)').formField('destroy')
• options

Requires:

• Custom CSS. A base css file can be imported from fmjs/css/jquery.formfield.css

jquery.imagesloaded.js

$.fn.imagesLoaded(function, context)

Executes a function when images have loaded.

• If none of the selected elements is an image, executes once for each selected element once all images within it have loaded.
• If any of the selected elements is an image itself, executes when all those images have loaded

Default context is first image if there are images in the collection, or current DOM element if no images in collection.

jquery.inlinesvg.js

jquery.social.js

jquery.textsizer.js