Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Javascript Utilities-- assorted utilities useful on their own
JavaScript HTML CSS
branch: master
Failed to load latest commit information.
lib remove extra stuff I didnt need to commit
spec unknown tweaks
spec_helpers Mass of updates! Moving files all around and trying to provide a litt…
util Mass of updates! Moving files all around and trying to provide a litt…
.gitignore
LICENSE.txt Add fixie jQuery tool
README.markdown Clean up readme
brad_pitt.jpg Internet meme jQuery plugin.
color_factory.js Update color helper fns.
color_helpers.js Update color helper fns.
doc_reporter.js Mass of updates! Moving files all around and trying to provide a litt…
funk.js Add fixie jQuery tool
image.html README update
image_preload.html Mass of updates! Moving files all around and trying to provide a litt…
job.html various cleanups and renames.
jquery.columnize.js columnize update and docs
jquery.data_context.js Mass of updates! Moving files all around and trying to provide a litt…
jquery.delegate_event.js Mass of updates! Moving files all around and trying to provide a litt…
jquery.fixie.js unknown tweaks
jquery.meme.js Internet meme jQuery plugin.
life.html various cleanups and renames.
meme.html Internet meme jQuery plugin.
model.js Start playing with model ideas, ala ember.js
model_spec_runner.html Add JSHash table and model base
regenx.html Genetic algorithm regexp generator.
sex_simulator.html add sex simulator
spec_runner.html Mass of updates! Moving files all around and trying to provide a litt…
stub_console.js stub console added
window-v2.html Prototype NYTimes style slider
window.html Prototype NYTimes style slider

README.markdown

Various javascript utilities that don't (yet) warrant packaging on their own.

Copyright (c) Andrew J. Peterson, NDP Software

jQuery Plugins

dataContext

jQuery plugin to collect multiple data attributes into an object, using the data attribute names as keys. Looks up the DOM and collects all data attributes, but the deepest ones win.

Usage:

   $('<div data-product-id="1"></div>').dataContext(); // => {'product-id': '1'}
   $('<div data-a="1"><span data-b="2"></span></div>').find('span').dataContext()); // => {a: '1', b: '2'}
   

delegateEvent

Simple jQuery plugin to forward events from one element to a new target. Optionally provide a new event name.

Usage:

$('#id').bindAndDelegate('click',$('#other'));
$('#id').bindAndDelegate('click',$('#other'),'id-clicked'); // new event

columnize

Column level event triggering on a table. Handlers receive jQuery objects with all the cells of a single table row, so that hover and click behavior can be implemented on tables. Usage:

 $('table').columnize().bind('columnmouseenter',function(e, $cells) {
     $cells.addClass('hover');
 }).bind('columnmouseleave',function(e, $cells) {
     $cells.removeClass('hover');
 });

This is a primitive version of various other plugins, but generally all that is needed for most jobs.

.fixie

Moved into its own repo, github.com/ndp/fixie

Jasmine Helpers

Simple Fixture

This is a lighter-weight alternative to jQuery-jasmine's fixture scheme. Provides a jQuery object $fixture that is in the DOM and cleaned out before each test.

This tool does not facilitate loading of file-based fixtures. I advise against this, but if you must, use jQuery-jasmine.

Usage: Include simple_fixture.js. Usually placing this in a spec_helper folder and restarting jasmine will do the trick.

Color Matchers

toBeDistinguishable and toBeVisuallyClose

color_helpers.js

Utilities to perform color math and manipulation (extracted from Csster).

  • "#ab342c".darken(%) -- make color darker by given percent
  • "#ab342c".lighten(%) -- make color lighter by given percent
  • "#ab342c".saturate(%) -- make color more saturated by given percent. To desaturate, use negative values for the percent. Note that "#ab342c".saturate(-100) renders in grayscale.

There are also color conversion routines if you want to build your own manipulation.

  • "blue".toHexColor()
  • "#9cf".toHexColor()
  • "#ab342c".toHexColor() (no-op)
  • "#ab342c".toRGB() converts to array of three values, 0 - 255
  • "#ab342c".toHSL() returns an array of hue, saturation and lightness. Hue is a range from 0-360, while the others are from 0 to 100.
  • Csster.hslToHexColor(h,s,l) converts a triplet to a hex color

Opacity is currently not supported by the color model.

color_factory.js

Generate color schemes appropriate to prototypes, visualizations and maps.

Standard colors

  • ColorFactory.primaryColors() is yellow, red and blue.
  • ColorFactory.primaryAndSecondaryColors() yellow, orange, red, violet, blue and green.

Random colors

  • ColorFactory.random() a random color, somewhat evenly distributed.
  • ColorFactory.randomGray() a random gray scale value.
  • ColorFactory.randomHue() given a saturation and lightness returns a random color.

Related colors

  • ColorFactory.complementary(src)
  • ColorFactory.interpolate(color1, colorN, steps) fills in any number of colors "between" the two colors.
  • ColorFactory.analogous(src) returns colors near the given color on the color wheel, at an angle of 30°
  • ColorFactory.analogous(src, angle) returns colors near the given color on the color wheel, at the specified angle

Color Schemes

Color scheme generation inspired by http://www.personal.psu.edu/cab38/ColorSch/Schemes.html

  • ColorFactory.qualitative([refColor], count) returns a qualitative scheme. This scheme does not imply magnitude differences between colors, and hues are used to create the primary visual differences between classes. Qualitative schemes are best suited to representing nominal or categorical data.
  • ColorFactory.sequential(startColor, [endColor], count) returns a sequential scheme. This is suited to ordered data that progress from low to high. Lightness steps dominate the look of these schemes, with light colors for low data values to dark colors for high data values.
  • ColorFactory.binary(trueColor) returns an array or two colors. Element 0 is the true (darker) color, and element 1 is the false (lighter) color.

funks.js

"Functional" helpers that contemplate different programming paradigms.

Something went wrong with that request. Please try again.