Skip to content

Instantly share code, notes, and snippets.

@scottb
Created October 4, 2012 00:52
Show Gist options
  • Save scottb/3830866 to your computer and use it in GitHub Desktop.
Save scottb/3830866 to your computer and use it in GitHub Desktop.
Rudimentary jQuery-based code to make "reactive documents", similar to http://worrydream.com/#!/Tangle
.adjustable { color: blue; border-bottom: dotted blue 1px; cursor: col-resize; }
.adjusting { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
jQuery( function($) {
$( '.adjustable')
.mousedown( function( event) {
var target = $( this);
var start_value = parseFloat( target.text());
var current_value = start_value;
var offset = 0;
var start_position = event.pageX;
var minimum = parseFloat( target.attr( 'data-minimum'));
var maximum = parseFloat( target.attr( 'data-maximum'));
var precision = parseFloat( target.attr( 'data-precision'));
if ( isNaN( precision)) precision = 1;
$( 'body').addClass( 'adjusting');
$( window)
.on( 'mousemove.adjusting', function( event) {
var new_offset = precision * Math.round(( event.pageX - start_position) / 10);
if ( new_offset == offset) return;
var new_value = start_value + new_offset;
if ( new_value < minimum || new_value > maximum) return; // this is meant to allow NaNs for minimum and maximum to mean "unbounded"
target.trigger( 'adjust', { from: new_value, to: current_value });
target.text( new_value);
offset = new_offset;
current_value = new_value;
})
.mouseup( function( event) {
$( window).off( 'mousemove.adjusting');
target.trigger( 'adjusted', { from: start_value, to: current_value });
$( 'body').removeClass( 'adjusting');
});
});
});
@scottb
Copy link
Author

scottb commented Oct 4, 2012

Usage notes:

Looks for text marked with class 'adjustable', and turns it into a reactive number. Click and drag to adjust the number, let go to set the final value. Fires jQuery "adjust" events every time the number changes, and a jQuery "adjusted" event when you let go.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment