npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sorti-boxes

v1.1.0

Published

Creates boxes with selectable and sortable elements

Downloads

10

Readme

Sorti Boxes

Build Status Coverage Status

Creates boxes with selectable and sortable elements. Requires jQuery 1.7+ and Bootstrap 2+.

  • possible to define custom params
  • data organized by multiple sections, each containing multiple boxes
  • elements beside params can use additional options: special, selected and status
  • possible to add optional additional heading
  • possible to define custom texts (i.e. for showing / hiding available elements)
  • possible to define custom column width for element names (in px or %)
  • possible to define amount of visible elements (to define when the container should be scrollable)
  • possible to define custom callback function after boxes are rendered and elements are moved

TODO

  • support for Bootstrap 3
  • test for different versions of jQuery
  • CSS to BEM
  • CSS: remove magic numbers and quirky code for rwd
  • add stylelint
  • provide optional custom scope for binded events
  • method behind rendering boxes: extract to separate methods

Installation (only if used with npm)

npm install sorti-boxes

Usage

// pull with <link> and <script> tags (the oldschool way) or require from node_modules (more advised):
require('bootstrap-css-only/css/bootstrap.min.css');
require('kovarik-glyphicons-bootstrap2/glyphicons.css');
require('sorti-boxes/dist/themes/default.css');
require('sorti-boxes');

$('#sortiBoxesContainer').sortiBoxes(options)

Options Example

var options = {
        params: [
            {
                name:  'foo', // used for matching element values
                label: 'Foo' // used for displaying in <thead> of all boxes
            },
            {
                name:  'bar',
                label: 'Bar'
            }
        ],
        data:   [
            {
                id:   1,
                name: 'Section name', // will appear as <h5> header

                boxes: [{
                    id:   1,
                    name: 'Box name', // will appear as box header

                    elements: [
                        {
                            id:       1,
                            name:     'Element A', // will appear under Name column
                            special:  true, // will add red dot
                            selected: true, // makes element visible in selected area
                            status:   true, // not used yet, TODO: add new class when element.status == true
                            params: {
                                // keys must match names of main params
                                foo: 7,
                                // accepts HTML too:                                
                                bar: '<span><input type="text" name="box[1][element][1][bar]" value="9"></span>'
                            }
                        },
                        {
                            id:       2,
                            name:     'Element B',
                            special:  false,
                            selected: true,
                            status:   true,
                            params: {
                                foo: 33,
                                bar: '<span><input type="text" name="box[1][element][2][bar]" value="46"></span>'                                
                            }
                        }
                    ]
                }]
            }
        ],
        additionalHeading: '<tr><td>Additional Heading</td></tr>', // will be appended to <thead>, to all boxes
        labels: {
             // labels behind hiding/showing available elements section:
            toggleAvailableOn:  'Show available elements',
            toggleAvailableOff: 'Hide available elements',
             
            selectedBoxInitMsg: 'No elements selected' // will be displayed if no elements are selected
        },
        bootstrapVersion: 2, // will change used Bootstrap classes
        colWidthName:     '25%', // or: '250px'
        amountVisibleInAvailableBox: 10, // defines max-height of the available elements section
        amountVisibleInSelectedBox:  5, // defines max-height of the selected elements section
        // function to fire after element is moved up or down:
        callbackElementMoved: function () {
            console.log('element moved, pass data to form');
        },
        // function to fire after all boxes have been rendered:
        callbackBoxesRendered: function () {
            console.log('boxes rendered, paint them black');
        }
};

Tests

npm test