jsk-togglable

Basic behaviours for togglable elements in a WebPage.

npm install jsk-togglable
40 downloads in the last month

Togglable

JumperSkirt's Togglable provides the basic behaviours for elements that must alternatively be hidden or shown in a page.

Example

A togglable element can be either an anchor with href=#jsk::<element-id> or any other element with the attribute data-jsk-target=<element-id>:

<div class="content">
  <a href="#jsk::info">Show info()</a>
  <div id="info">Some stuff here</div>

  <span data-jsk-target="win">Show window()</span>
  <div id="win">Some window here</div>
</div>

Then instantiate the jsk-togglable library (you can pass a selector engine and an event bridge if you're supporting older browsers), and run the processor on a top level element containing the anchors:

var jskTogglable = require('jsk-togglable')(Sizzle)
jskTogglable('.content')

Requirements and supported platforms

This library makes use of a safely shim-able subset of ECMAScript 5 features. If you need to support older browsers, you'll have to include the es5-shim library.

Installation

If you're using Browserify — you really should! — to manage your dependencies, just grab it from NPM:

$ npm install -d jsk-togglable

Otherwise, download the latest release and include both the Browserify prelude and the Togglable library in your page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ur Awesome Stuff</title>
  </head>
  <body>
    {{ Lots of stuff might go here }}
    <script src="/path/to/browserify.js"></script>
    <script src="/path/to/jsk-togglable.js"></script>
  </body>
</html>

In any of the cases above, Togglable will be a require-able module in your platform, so you can just use require("jsk-togglable") to instantiate it.

Building

If you want to build stuff from the source, you'll need LiveScript. Once you've got that installed and Slake on your path, just run:

$ git clone git:/github.com/killdream/jsk-togglable.git  # Download the project
$ cd jsk-togglable                                       # Move to the project folder
$ npm install -d                                         # Initialise the dependencies
$ slake build:all                                        # Runs the build tasks

Tests

For building the test files, you can use slake test. For building them continuously, use slake test:continuous.

Licence

Togglable is licensed under the delicious and permissive MIT licence. You can happily copy, share, modify, sell or whatever — refer to the actual licence text for less information:

$ less LICENCE.txt
npm loves you