autosize
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
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
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
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.
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.
<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 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.
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.
<input class="form-control" type="text"
data-flatpickr
data-alt-input="true"
data-date-format="Y-m-d">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.
<input class="form-control" type="text"
data-flatpickr
data-alt-input="true"
data-enable-time="true"
data-date-format="Y-m-d H:i">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.
<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">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.
<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">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.
<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
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:
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.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.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.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."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."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').listsThe returned array contains all List.js instances upon which you can operate using the documented List.js API.
Popper.js
Prism
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.