Sortboard是一个便于对元素进行排序和过滤的ES6小型库
Sortboard是用于使用CSS3 matrix()和scale()变换函数c对HTML元素排序和过滤的小型库。 它支持RegEx字符串过滤器。
JavaScript 其它杂项
共26Star
详细介绍
Sortboard
An small library for easy sorting and filtering of elements.
Sortboard is small library for sorting and filtering HTML elements which uses CSS3 matrix()
and scale()
transform functions. It supports RegEx filters and it's responsive by default.
Install
yarn add sortboard --dev
npm install sortboard --save-dev
The UMD build is also available on unpkg.
<script src="https://unpkg.com/sortboard/src/sortboard.umd.min.js"></script>
You can use the library via window.sortboard
Usage
Define some list. For example an ul
with li
child elements, then set your filters in each li
element with the data-filter
attribute. It can add several filters by element separated by whitespace.
Typescript:
import { sortboard, Sortboard, Listener } from 'sortboard'
const sb = sortboard({
container: '#mylist',
selector: 'li'
})
const onEvent: Listener = () => console.log('ok!')
sb.on('filter', onEvent)
sb.filter('programing front-end')
// Or filter using a RegEx
sb.filter(/(webdesign|illustration)/)
Markup:
<ul id="mylist">
<li data-filter="programing"></li>
<li data-filter="programing back-end"></li>
<li data-filter="programing front-end UX"></li>
<li data-filter="graphic-design illustration"></li>
<li data-filter="webdesign front-end"></li>
<li data-filter="graphic-design printing"></li>
</ul>
API
Options
- container : The container of elements.
- selector : The query selector for each element.
- gutter : The margin for each element defined in pixels. Default is
10
pixels. - resetFilterValue : The reset filter value used by
reset()
method. Default isall
. - hiddenClass : Class name for hidden elements. Default is
.sortboard-hidden
class name. - matchedClass : Class name for matched elements. Default is
.sortboard-matched
class name.
Methods
- filter( string | RegExp ) : It's string or
RegExp
regular expresion pattern to filter. Which should match todata-filter
attribute for each element to searching. - reset() : Reset the elements which uses
resetFilterValue
option for resetting. - sort() : Sort the element positions in the container. Sort method is called after the
filter()
method and in each trigger ofwindow.resize
event.
Events
filter
Trigger when filter is completed.
Passed params:
- matchedElements: An
array
with all matched elements. - restElements: An
array
with the rest (not matched) elements. - filterValue: A
string
with the current filter value used.
sb.on('filter', (matchedElements, restElements, filterValue) => {})
sort
Trigger when sort is completed.
sb.on('sort', () => {})
Development
yarn start
Contributions
Feel free to send some pull request or issue.
License
MIT license
© 2017 José Luis Quintana