Javascript Utilities-- assorted utilities useful on their own
JavaScript HTML CSS
Permalink
Failed to load latest commit information.
lib remove extra stuff I didnt need to commit Apr 26, 2015
spec unknown tweaks Apr 26, 2015
spec_helpers Mass of updates! Moving files all around and trying to provide a litt… Oct 25, 2012
util Mass of updates! Moving files all around and trying to provide a litt… Oct 25, 2012
.gitignore add function functions and color factory and some basic tests Dec 8, 2010
LICENSE.txt Add fixie jQuery tool Feb 5, 2013
README.markdown Clean up readme Mar 29, 2013
brad_pitt.jpg Internet meme jQuery plugin. Apr 8, 2012
color_factory.js Update color helper fns. Apr 8, 2012
color_helpers.js Update color helper fns. Apr 8, 2012
doc_reporter.js
funk.js
image.html README update Oct 25, 2012
image_preload.html
job.html various cleanups and renames. Dec 3, 2011
jquery.columnize.js columnize update and docs Dec 29, 2010
jquery.data_context.js
jquery.delegate_event.js
jquery.fixie.js
jquery.meme.js Internet meme jQuery plugin. Apr 8, 2012
life.html
meme.html Internet meme jQuery plugin. Apr 8, 2012
model.js Start playing with model ideas, ala ember.js Apr 8, 2012
model_spec_runner.html Add JSHash table and model base Apr 25, 2012
regenx.html Genetic algorithm regexp generator. Apr 8, 2012
sex_simulator.html add sex simulator Apr 8, 2012
spec_runner.html Mass of updates! Moving files all around and trying to provide a litt… Oct 25, 2012
stub_console.js
window-v2.html
window.html Prototype NYTimes style slider Apr 25, 2012

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.