stable 1.0.0

Matizer

A declarative DOM sorter: put data-order-list on a container and its children are reordered at mount — alphabetically, numerically or by length. Link ng_matizer.js.

By default the direct children are sorted by their text. data-target picks a different item selector, data-sort-pattern (a regex) extracts the value to compare. No markup requirements — it works on any list.

Alphabetical

The source order here is Tooltips → Buttons → Badge → Card → Modal; rendered sorted:

Tooltips
Buttons
Badge
Card
Modal

matizer.html

<ul class="ng-list bordered divided" data-order-list data-sort="a-z">
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Tooltips</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Buttons</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Badge</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Card</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Modal</div></div></li>
</ul>

Reverse

a-z-rev (every type has a -rev twin).

Banana
Apple
Orange
Pear
Strawberry

matizer.html

<ul class="ng-list bordered divided" data-order-list data-sort="a-z-rev">
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Banana</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Apple</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Orange</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Pear</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">Strawberry</div></div></li>
</ul>

Numeric

num compares numbers, not strings: 3 → 7 → 42 → 56 → 120.

matizer.html

<ul class="ng-list bordered divided" data-order-list data-sort="num">
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">42</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">7</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">120</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">3</div></div></li>
    <li class="ng-list-item"><div class="ng-list-content"><div class="ng-list-title">56</div></div></li>
</ul>

Live re-sort (API)

Press the button: the list flips between a-z and a-z-rev via ng.matizer.sort() — no reload, the DOM is reordered in place.

Modal
Accordion
Tooltip
Badge
Dropdown

Attributes & API

`data-order-list`	Marks the container — required.
`data-sort`	`a-z` (default) · `num` · `custom` · `len`, each with a `-rev` variant.
`data-invert`	`true` inverts the direction.
`data-target`	Selector for the items (default: direct children).
`data-sort-pattern`	Regex applied to the text to extract the compare value.
`data-values`	Sort from an explicit value list instead of the DOM text.

app.js

ng.matizer.sort(el, 'a-z');   // sort programmatically
ng.matizer.refresh(el);       // re-sort with the element's data-* config

Reference

Generated from the component source (ng_matizer.js).

Component info

Name	`matizer`
Type	`js`
Version	`1.0.0`
Status	`stable`
JS	`/assets/js/ng_matizer.js`