Plugins

An overview of the plugins supplied with Pipeline

autosize

Website / Docs, GitHub, npm

Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.

The chat module in Pipeline utilizes autosize to dynamically resize the chat input textarea. Initialization of autosize is handled in the chat section of theme.js.

Draggable

Website, GitHub, Docs, npm

Draggable abstracts native browser events into a comprehensive API to create a custom drag and drop experience.

Pipeline employs Draggable to create sortable checklists and kanban boards. Initialization of Draggable is handled in the checklist and kanban sections of theme.js.

Divs of class kanban-board will be targeted automatically, with div.kanban-col elements becoming sortable within. The resulting Draggable instances are accessible through the mrKanban object on the global scope.

Forms of class checklist will be targeted automatically, with div.row elements becoming sortable within. The resulting Draggable instance is accessible via the mrChecklist object on the global scope.

We've also included swap-animation.js, which is a plugin for Draggable. This adds some feedback while the user drags items around in a list.

DropzoneJS

Website / Docs, Gitlab, npm

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. It’s lightweight, doesn’t depend on any other library (like jQuery) and is highly customizable.

File lists in Pipeline rely on DropzoneJS to provide a droppable upload facility with progress bars and thumbnails.

Dropzones are initialized in theme.js. Applying a dropzone class to any element will make the area droppable and clickable. Dropped files will be appended to any .dropzone-previews div on the page.

Each dropped file will be added to the .dropzone-previews element using HTML contained in the hidden .dz-template element. If the .dz-template is not present on the page, a fallback (using HTML contained in theme.js) will be used.

Flatpickr

Website / Docs, GitHub, npm

Turns a text input into a calendar for date/time picking.

Flatpickr is a flexible, stylish calendar widget for providing users with an easy way to select a date, time or a date range.

Basic Usage

Date pickers are initialized by data-attributes on page load. Options are provided to the Flatpickr library via data-attributes.

A full list of options with defaults can be found at the Flatpickr Docs.

To use Flatpickr in its most basic form, add data-flatpickr to an input element. The input's value will be empty, and the picker will appear when the input element is clicked. Adding a placeholder is advised to indicate to the user to click the input.

Demo
<input class="form-control" type="text" placeholder="Select a Date" data-flatpickr>

Continue reading for more advanced options such as formatting the date string and setting date ranges.

Options

Options are provided to Flatpickr via data attributes on the input element.

Data attributes follow a different format to the native options found in the Flatpickr documentation - all data attributes begin with data- and the option is all lower-case, with a hyphen between words.

For example:

  • allowInput becomes data-allow-input
  • defaultDate becomes data-default-date

A full list of options with defaults can be found at the Flatpickr Docs.

Readable format

Adding further options via data-attributes opens up Flatpickr's flexibility.

The data-alt-input option will hide the original input and create a new input with easy-to-read date format. The original input's value will be updated by Flatpickr and will be sent to server.

To change the format of the alternative input, use the data-alt-format attribute. Find a list of valid formatting tokens at the Flatpickr Docs.

Demo
<input class="form-control" type="text"
  data-flatpickr
  data-alt-input="true"
  data-date-format="Y-m-d">

Enable Time Picker

Flatpickr has a time picker also.

Adding to the above example, the data-enable-time option shows a time picker in the calendar widget when a date has been selected.

Demo
<input class="form-control" type="text"
  data-flatpickr
  data-alt-input="true"
  data-enable-time="true"
  data-date-format="Y-m-d H:i">

Preload Date Value

To initialize the input with a value, add the data-default-date attribute. Provide a date in the format yyyy-mm-dd.

The preloaded date may also contain a time value such as yyyy-mm-dd h:m.

Demo
<input class="form-control" type="text"
  data-flatpickr
  data-alt-input="true"
  data-enable-time="true"
  data-default-date="2022-04-23 13:30"
  data-date-format="Y-m-d H:i">

Date Range

To initialize the input with a value, add the data-default-date attribute. Provide a date in the format yyyy-mm-dd.

The preloaded date may also contain a time value such as yyyy-mm-dd h:m.

Demo
<input type="text" 
  data-flatpickr
  data-alt-input="true"
  data-mode="range"
  data-date-format="Y-m-d"
  data-alt-format="F j"
  data-default-date="2022-04-08">

Time Picker only

Flatpickr can also function as a time picker without showing a calendar.

Add data-no-calendar="true" and change the data-default-date to represent a time only. data-date-format may also be changed to a time-only format.

Demo
<input type="text" 
  data-flatpickr
  data-alt-input="true"
  data-enable-time="true"
  data-no-calendar="true"
  data-date-format="H:i"
  data-default-date="13:45">

List.js

Website, Docs, GitHub, npm

Tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

Each filterable list in Pipeline is enabled by List.js. Script in theme.js interprets the list structure, initializes List.js instances and delegates keyup and paste events to List.js.

Filter List HTML example:

<!-- The outer-most element has the data-filter-list attribute -->
<div data-filter-list="list-group-body">
  ...
  <form>
    <!-- Somewhere within, an input is required with filter-list-input class -->  
    <input class="filter-list-input" />
  </form>
  ...
  <!-- This is the list container as specified by the class in the data-filter-list attribute above -->
  <div class="list-group-body">
    <!-- Each direct child is hidden/shown based on what the user types -->
    <div>
      <!-- Each entry will be filtered by the h5 text and the span's data-tags attribute -->
      <h5 data-filter-by="text">John Johnson</h5>
      <span data-filter-by="data-tags" data-tags="rowing,hunting">Likes rowing and hunting</span>
    </div>
    <div>
      <h5 data-filter-by="text">Amelie Porter</h5>
      <span data-filter-by="data-tags" data-tags="tennis,street luge">Likes Tennis and Street Luge</span>
    </div>
    <div>
      <h5 data-filter-by="text">Emily Parker</h5>
      <span data-filter-by="data-tags" data-tags="pet mice, espresso martinis">Likes Pet mice and Espresso martinis</span>
    </div>
  </div>
</div>

Setting up a filterable list:

  • A wrapping/parent element must be given the data-filter-list attribute. The value of the data-filter-list attribute must be a class which is used to select the child element(s) where the filtering will happen.
  • Inner structure is not important, but the data-filter-list element must contain a text input element with class filter-list-input. This input is used to pass the filter string to List.js.
  • The filterable element(s), which will display filtered results are lists identified by the class specified by the value of data-filter-list on the wrapping element. You may have more than one list within the wrapping element, and each will be filtered by the same text simultaneously.
  • Direct children of the fliterable list element will be hidden/shown based on content of their children. Place the data-filter-by attribute on any child of the list item. The value of data-filter-by may be a comma-separated combination of any of the following options:
    • "text" will filter on the text content of the element. Eg. the text contained in an h5 or span element.
    • Any attribute on the element, Eg. "alt" will filter on the alt attribute and "src" will filter on the content of the src attribute. "class" could be used to filter on the classes applied to the element.
    • Any data-attribute on the element. Eg. "data-tags" could be used to provide a different string to filter on, separate to what is displayed in the text of the element itself. * A comma-separated combination of the above such as data-filter-by="text,alt" or data-filter-by="data-tags,alt,text".

List.js instances are accessible through the jQuery data interface:

$('#yourElement').data('mr.filterList').lists

The returned array contains all List.js instances upon which you can operate using the documented List.js API.

Popper.js

Website, Docs, GitHub, npm

A popper is an element on the screen which "pops out" from the natural flow of your application. Common examples of poppers are tooltips, popovers and drop-downs.

Pipeline's navigation dropdowns rely on this plugin. Initialization of Popper is handled in bootstrap.js.

Prism

Website / Docs, GitHub, npm

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.

Any code element in your HTML will be transformed automatically by an initialization in theme.js.

Select Layout arrow_drop_up