Jonathan Rosenbaum
10 years ago
5 changed files with 687 additions and 14 deletions
@ -0,0 +1,311 @@ |
|||||
|
/*jslint browser: true */ |
||||
|
/*jslint white: true */ |
||||
|
|
||||
|
(function( $ ){ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
// Helpers
|
||||
|
|
||||
|
// Test in an object is an instance of jQuery or Zepto.
|
||||
|
function isInstance ( a ) { |
||||
|
return a instanceof $ || ( $.zepto && $.zepto.isZ(a) ); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// Link types
|
||||
|
|
||||
|
function fromPrefix ( target, method ) { |
||||
|
|
||||
|
// If target is a string, a new hidden input will be created.
|
||||
|
if ( typeof target === 'string' && target.indexOf('-inline-') === 0 ) { |
||||
|
|
||||
|
// By default, use the 'html' method.
|
||||
|
this.method = method || 'html'; |
||||
|
|
||||
|
// Use jQuery to create the element
|
||||
|
this.target = this.el = $( target.replace('-inline-', '') || '<div/>' ); |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function fromString ( target ) { |
||||
|
|
||||
|
// If the string doesn't begin with '-', which is reserved, add a new hidden input.
|
||||
|
if ( typeof target === 'string' && target.indexOf('-') !== 0 ) { |
||||
|
|
||||
|
this.method = 'val'; |
||||
|
|
||||
|
var element = document.createElement('input'); |
||||
|
element.name = target; |
||||
|
element.type = 'hidden'; |
||||
|
this.target = this.el = $(element); |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function fromFunction ( target ) { |
||||
|
|
||||
|
// The target can also be a function, which will be called.
|
||||
|
if ( typeof target === 'function' ) { |
||||
|
this.target = false; |
||||
|
this.method = target; |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function fromInstance ( target, method ) { |
||||
|
|
||||
|
if ( isInstance( target ) && !method ) { |
||||
|
|
||||
|
// If a jQuery/Zepto input element is provided, but no method is set,
|
||||
|
// the element can assume it needs to respond to 'change'...
|
||||
|
if ( target.is('input, select, textarea') ) { |
||||
|
|
||||
|
// Default to .val if this is an input element.
|
||||
|
this.method = 'val'; |
||||
|
|
||||
|
// Fire the API changehandler when the target changes.
|
||||
|
this.target = target.on('change.liblink', this.changeHandler); |
||||
|
|
||||
|
} else { |
||||
|
|
||||
|
this.target = target; |
||||
|
|
||||
|
// If no method is set, and we are not auto-binding an input, default to 'html'.
|
||||
|
this.method = 'html'; |
||||
|
} |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function fromInstanceMethod ( target, method ) { |
||||
|
|
||||
|
// The method must exist on the element.
|
||||
|
if ( isInstance( target ) && |
||||
|
(typeof method === 'function' || |
||||
|
(typeof method === 'string' && target[method])) |
||||
|
) { |
||||
|
this.method = method; |
||||
|
this.target = target; |
||||
|
|
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
var |
||||
|
/** @const */ |
||||
|
creationFunctions = [fromPrefix, fromString, fromFunction, fromInstance, fromInstanceMethod]; |
||||
|
|
||||
|
|
||||
|
// Link Instance
|
||||
|
|
||||
|
/** @constructor */ |
||||
|
function Link ( target, method, format ) { |
||||
|
|
||||
|
var that = this, valid = false; |
||||
|
|
||||
|
// Forward calls within scope.
|
||||
|
this.changeHandler = function ( changeEvent ) { |
||||
|
var decodedValue = that.formatInstance.from( $(this).val() ); |
||||
|
|
||||
|
// If the value is invalid, stop this event, as well as it's propagation.
|
||||
|
if ( decodedValue === false || isNaN(decodedValue) ) { |
||||
|
|
||||
|
// Reset the value.
|
||||
|
$(this).val(that.lastSetValue); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
that.changeHandlerMethod.call( '', changeEvent, decodedValue ); |
||||
|
}; |
||||
|
|
||||
|
// See if this Link needs individual targets based on its usage.
|
||||
|
// If so, return the element that needs to be copied by the
|
||||
|
// implementing interface.
|
||||
|
// Default the element to false.
|
||||
|
this.el = false; |
||||
|
|
||||
|
// Store the formatter, or use the default.
|
||||
|
this.formatInstance = format; |
||||
|
|
||||
|
// Try all Link types.
|
||||
|
/*jslint unparam: true*/ |
||||
|
$.each(creationFunctions, function(i, fn){ |
||||
|
valid = fn.call(that, target, method); |
||||
|
return !valid; |
||||
|
}); |
||||
|
/*jslint unparam: false*/ |
||||
|
|
||||
|
// Nothing matched, throw error.
|
||||
|
if ( !valid ) { |
||||
|
throw new RangeError("(Link) Invalid Link."); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Provides external items with the object value.
|
||||
|
Link.prototype.set = function ( value ) { |
||||
|
|
||||
|
// Ignore the value, so only the passed-on arguments remain.
|
||||
|
var args = Array.prototype.slice.call( arguments ), |
||||
|
additionalArgs = args.slice(1); |
||||
|
|
||||
|
// Store some values. The actual, numerical value,
|
||||
|
// the formatted value and the parameters for use in 'resetValue'.
|
||||
|
// Slice additionalArgs to break the relation.
|
||||
|
this.lastSetValue = this.formatInstance.to( value ); |
||||
|
|
||||
|
// Prepend the value to the function arguments.
|
||||
|
additionalArgs.unshift( |
||||
|
this.lastSetValue |
||||
|
); |
||||
|
|
||||
|
// When target is undefined, the target was a function.
|
||||
|
// In that case, provided the object as the calling scope.
|
||||
|
// Branch between writing to a function or an object.
|
||||
|
( typeof this.method === 'function' ? |
||||
|
this.method : |
||||
|
this.target[ this.method ] ).apply( this.target, additionalArgs ); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
// Developer API
|
||||
|
|
||||
|
/** @constructor */ |
||||
|
function LinkAPI ( origin ) { |
||||
|
this.items = []; |
||||
|
this.elements = []; |
||||
|
this.origin = origin; |
||||
|
} |
||||
|
|
||||
|
LinkAPI.prototype.push = function( item, element ) { |
||||
|
this.items.push(item); |
||||
|
|
||||
|
// Prevent 'false' elements
|
||||
|
if ( element ) { |
||||
|
this.elements.push(element); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
LinkAPI.prototype.reconfirm = function ( flag ) { |
||||
|
var i; |
||||
|
for ( i = 0; i < this.elements.length; i += 1 ) { |
||||
|
this.origin.LinkConfirm(flag, this.elements[i]); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
LinkAPI.prototype.remove = function ( flag ) { |
||||
|
var i; |
||||
|
for ( i = 0; i < this.items.length; i += 1 ) { |
||||
|
this.items[i].target.off('.liblink'); |
||||
|
} |
||||
|
for ( i = 0; i < this.elements.length; i += 1 ) { |
||||
|
this.elements[i].remove(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
LinkAPI.prototype.change = function ( value ) { |
||||
|
|
||||
|
if ( this.origin.LinkIsEmitting ) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
this.origin.LinkIsEmitting = true; |
||||
|
|
||||
|
var args = Array.prototype.slice.call( arguments, 1 ), i; |
||||
|
args.unshift( value ); |
||||
|
|
||||
|
// Write values to serialization Links.
|
||||
|
// Convert the value to the correct relative representation.
|
||||
|
for ( i = 0; i < this.items.length; i += 1 ) { |
||||
|
this.items[i].set.apply(this.items[i], args); |
||||
|
} |
||||
|
|
||||
|
this.origin.LinkIsEmitting = false; |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
// jQuery plugin
|
||||
|
|
||||
|
function binder ( flag, target, method, format ){ |
||||
|
|
||||
|
if ( flag === 0 ) { |
||||
|
flag = this.LinkDefaultFlag; |
||||
|
} |
||||
|
|
||||
|
// Create a list of API's (if it didn't exist yet);
|
||||
|
if ( !this.linkAPI ) { |
||||
|
this.linkAPI = {}; |
||||
|
} |
||||
|
|
||||
|
// Add an API point.
|
||||
|
if ( !this.linkAPI[flag] ) { |
||||
|
this.linkAPI[flag] = new LinkAPI(this); |
||||
|
} |
||||
|
|
||||
|
var linkInstance = new Link ( target, method, format || this.LinkDefaultFormatter ); |
||||
|
|
||||
|
// Default the calling scope to the linked object.
|
||||
|
if ( !linkInstance.target ) { |
||||
|
linkInstance.target = $(this); |
||||
|
} |
||||
|
|
||||
|
// If the Link requires creation of a new element,
|
||||
|
// Pass the element and request confirmation to get the changehandler.
|
||||
|
// Set the method to be called when a Link changes.
|
||||
|
linkInstance.changeHandlerMethod = this.LinkConfirm( flag, linkInstance.el ); |
||||
|
|
||||
|
// Store the linkInstance in the flagged list.
|
||||
|
this.linkAPI[flag].push( linkInstance, linkInstance.el ); |
||||
|
|
||||
|
// Now that Link have been connected, request an update.
|
||||
|
this.LinkUpdate( flag ); |
||||
|
} |
||||
|
|
||||
|
/** @export */ |
||||
|
$.fn.Link = function( flag ){ |
||||
|
|
||||
|
var that = this; |
||||
|
|
||||
|
// Delete all linkAPI
|
||||
|
if ( flag === false ) { |
||||
|
|
||||
|
return that.each(function(){ |
||||
|
|
||||
|
// .Link(false) can be called on elements without Links.
|
||||
|
// When that happens, the objects can't be looped.
|
||||
|
if ( !this.linkAPI ) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
$.map(this.linkAPI, function(api){ |
||||
|
api.remove(); |
||||
|
}); |
||||
|
|
||||
|
delete this.linkAPI; |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
if ( flag === undefined ) { |
||||
|
|
||||
|
flag = 0; |
||||
|
|
||||
|
} else if ( typeof flag !== 'string') { |
||||
|
|
||||
|
throw new Error("Flag must be string."); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
to: function( a, b, c ){ |
||||
|
return that.each(function(){ |
||||
|
binder.call(this, flag, a, b, c); |
||||
|
}); |
||||
|
} |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
}( window.jQuery || window.Zepto )); |
||||
@ -0,0 +1,321 @@ |
|||||
|
(function(){ |
||||
|
|
||||
|
'use strict'; |
||||
|
|
||||
|
var |
||||
|
/** @const */ FormatOptions = [ |
||||
|
'decimals', |
||||
|
'thousand', |
||||
|
'mark', |
||||
|
'prefix', |
||||
|
'postfix', |
||||
|
'encoder', |
||||
|
'decoder', |
||||
|
'negativeBefore', |
||||
|
'negative', |
||||
|
'edit', |
||||
|
'undo' |
||||
|
]; |
||||
|
|
||||
|
// General
|
||||
|
|
||||
|
// Reverse a string
|
||||
|
function strReverse ( a ) { |
||||
|
return a.split('').reverse().join(''); |
||||
|
} |
||||
|
|
||||
|
// Check if a string starts with a specified prefix.
|
||||
|
function strStartsWith ( input, match ) { |
||||
|
return input.substring(0, match.length) === match; |
||||
|
} |
||||
|
|
||||
|
// Check is a string ends in a specified postfix.
|
||||
|
function strEndsWith ( input, match ) { |
||||
|
return input.slice(-1 * match.length) === match; |
||||
|
} |
||||
|
|
||||
|
// Throw an error if formatting options are incompatible.
|
||||
|
function throwEqualError( F, a, b ) { |
||||
|
if ( (F[a] || F[b]) && (F[a] === F[b]) ) { |
||||
|
throw new Error(a); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Check if a number is finite and not NaN
|
||||
|
function isValidNumber ( input ) { |
||||
|
return typeof input === 'number' && isFinite( input ); |
||||
|
} |
||||
|
|
||||
|
// Provide rounding-accurate toFixed method.
|
||||
|
function toFixed ( value, decimals ) { |
||||
|
var scale = Math.pow(10, decimals); |
||||
|
return ( Math.round(value * scale) / scale).toFixed( decimals ); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// Formatting
|
||||
|
|
||||
|
// Accept a number as input, output formatted string.
|
||||
|
function formatTo ( decimals, thousand, mark, prefix, postfix, encoder, decoder, negativeBefore, negative, edit, undo, input ) { |
||||
|
|
||||
|
var originalInput = input, inputIsNegative, inputPieces, inputBase, inputDecimals = '', output = ''; |
||||
|
|
||||
|
// Apply user encoder to the input.
|
||||
|
// Expected outcome: number.
|
||||
|
if ( encoder ) { |
||||
|
input = encoder(input); |
||||
|
} |
||||
|
|
||||
|
// Stop if no valid number was provided, the number is infinite or NaN.
|
||||
|
if ( !isValidNumber(input) ) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// Rounding away decimals might cause a value of -0
|
||||
|
// when using very small ranges. Remove those cases.
|
||||
|
if ( decimals && parseFloat(input.toFixed(decimals)) === 0 ) { |
||||
|
input = 0; |
||||
|
} |
||||
|
|
||||
|
// Formatting is done on absolute numbers,
|
||||
|
// decorated by an optional negative symbol.
|
||||
|
if ( input < 0 ) { |
||||
|
inputIsNegative = true; |
||||
|
input = Math.abs(input); |
||||
|
} |
||||
|
|
||||
|
// Reduce the number of decimals to the specified option.
|
||||
|
if ( decimals ) { |
||||
|
input = toFixed( input, decimals ); |
||||
|
} |
||||
|
|
||||
|
// Transform the number into a string, so it can be split.
|
||||
|
input = input.toString(); |
||||
|
|
||||
|
// Break the number on the decimal separator.
|
||||
|
if ( input.indexOf('.') !== -1 ) { |
||||
|
inputPieces = input.split('.'); |
||||
|
|
||||
|
inputBase = inputPieces[0]; |
||||
|
|
||||
|
if ( mark ) { |
||||
|
inputDecimals = mark + inputPieces[1]; |
||||
|
} |
||||
|
|
||||
|
} else { |
||||
|
|
||||
|
// If it isn't split, the entire number will do.
|
||||
|
inputBase = input; |
||||
|
} |
||||
|
|
||||
|
// Group numbers in sets of three.
|
||||
|
if ( thousand ) { |
||||
|
inputBase = strReverse(inputBase).match(/.{1,3}/g); |
||||
|
inputBase = strReverse(inputBase.join( strReverse( thousand ) )); |
||||
|
} |
||||
|
|
||||
|
// If the number is negative, prefix with negation symbol.
|
||||
|
if ( inputIsNegative && negativeBefore ) { |
||||
|
output += negativeBefore; |
||||
|
} |
||||
|
|
||||
|
// Prefix the number
|
||||
|
if ( prefix ) { |
||||
|
output += prefix; |
||||
|
} |
||||
|
|
||||
|
// Normal negative option comes after the prefix. Defaults to '-'.
|
||||
|
if ( inputIsNegative && negative ) { |
||||
|
output += negative; |
||||
|
} |
||||
|
|
||||
|
// Append the actual number.
|
||||
|
output += inputBase; |
||||
|
output += inputDecimals; |
||||
|
|
||||
|
// Apply the postfix.
|
||||
|
if ( postfix ) { |
||||
|
output += postfix; |
||||
|
} |
||||
|
|
||||
|
// Run the output through a user-specified post-formatter.
|
||||
|
if ( edit ) { |
||||
|
output = edit ( output, originalInput ); |
||||
|
} |
||||
|
|
||||
|
// All done.
|
||||
|
return output; |
||||
|
} |
||||
|
|
||||
|
// Accept a sting as input, output decoded number.
|
||||
|
function formatFrom ( decimals, thousand, mark, prefix, postfix, encoder, decoder, negativeBefore, negative, edit, undo, input ) { |
||||
|
|
||||
|
var originalInput = input, inputIsNegative, output = ''; |
||||
|
|
||||
|
// User defined pre-decoder. Result must be a non empty string.
|
||||
|
if ( undo ) { |
||||
|
input = undo(input); |
||||
|
} |
||||
|
|
||||
|
// Test the input. Can't be empty.
|
||||
|
if ( !input || typeof input !== 'string' ) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// If the string starts with the negativeBefore value: remove it.
|
||||
|
// Remember is was there, the number is negative.
|
||||
|
if ( negativeBefore && strStartsWith(input, negativeBefore) ) { |
||||
|
input = input.replace(negativeBefore, ''); |
||||
|
inputIsNegative = true; |
||||
|
} |
||||
|
|
||||
|
// Repeat the same procedure for the prefix.
|
||||
|
if ( prefix && strStartsWith(input, prefix) ) { |
||||
|
input = input.replace(prefix, ''); |
||||
|
} |
||||
|
|
||||
|
// And again for negative.
|
||||
|
if ( negative && strStartsWith(input, negative) ) { |
||||
|
input = input.replace(negative, ''); |
||||
|
inputIsNegative = true; |
||||
|
} |
||||
|
|
||||
|
// Remove the postfix.
|
||||
|
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/slice
|
||||
|
if ( postfix && strEndsWith(input, postfix) ) { |
||||
|
input = input.slice(0, -1 * postfix.length); |
||||
|
} |
||||
|
|
||||
|
// Remove the thousand grouping.
|
||||
|
if ( thousand ) { |
||||
|
input = input.split(thousand).join(''); |
||||
|
} |
||||
|
|
||||
|
// Set the decimal separator back to period.
|
||||
|
if ( mark ) { |
||||
|
input = input.replace(mark, '.'); |
||||
|
} |
||||
|
|
||||
|
// Prepend the negative symbol.
|
||||
|
if ( inputIsNegative ) { |
||||
|
output += '-'; |
||||
|
} |
||||
|
|
||||
|
// Add the number
|
||||
|
output += input; |
||||
|
|
||||
|
// Covert to number.
|
||||
|
output = Number(output.replace(/[^0-9\.\-.]/g, '')); |
||||
|
|
||||
|
// Run the user-specified post-decoder.
|
||||
|
if ( decoder ) { |
||||
|
output = decoder(output); |
||||
|
} |
||||
|
|
||||
|
// Check is the output is valid, otherwise: return false.
|
||||
|
if ( !isValidNumber(output) ) { |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
return output; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// Framework
|
||||
|
|
||||
|
// Validate formatting options
|
||||
|
function validate ( inputOptions ) { |
||||
|
|
||||
|
var i, optionName, optionValue, |
||||
|
filteredOptions = {}; |
||||
|
|
||||
|
for ( i = 0; i < FormatOptions.length; i+=1 ) { |
||||
|
|
||||
|
optionName = FormatOptions[i]; |
||||
|
optionValue = inputOptions[optionName]; |
||||
|
|
||||
|
if ( optionValue === undefined ) { |
||||
|
|
||||
|
// Only default if negativeBefore isn't set.
|
||||
|
if ( optionName === 'negative' && !filteredOptions['negativeBefore'] ) { |
||||
|
filteredOptions[optionName] = '-'; |
||||
|
// Don't set a default for mark when 'thousand' is set.
|
||||
|
} else if ( optionName === 'mark' && filteredOptions['thousand'] !== '.' ) { |
||||
|
filteredOptions[optionName] = '.'; |
||||
|
} else { |
||||
|
filteredOptions[optionName] = false; |
||||
|
} |
||||
|
|
||||
|
// Floating points in JS are stable up to 7 decimals.
|
||||
|
} else if ( optionName === 'decimals' ) { |
||||
|
if ( optionValue > 0 && optionValue < 8 ) { |
||||
|
filteredOptions[optionName] = optionValue; |
||||
|
} |
||||
|
|
||||
|
// These options, when provided, must be functions.
|
||||
|
} else if ( optionName === 'encoder' || optionName === 'decoder' || optionName === 'edit' || optionName === 'undo' ) { |
||||
|
if ( typeof optionValue === 'function' ) { |
||||
|
filteredOptions[optionName] = optionValue; |
||||
|
} |
||||
|
|
||||
|
// Other options are strings.
|
||||
|
} else { |
||||
|
|
||||
|
if ( typeof optionValue === 'string' ) { |
||||
|
filteredOptions[optionName] = optionValue; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Some values can't be extracted from a
|
||||
|
// string if certain combinations are present.
|
||||
|
throwEqualError(filteredOptions, 'mark', 'thousand'); |
||||
|
throwEqualError(filteredOptions, 'prefix', 'negative'); |
||||
|
throwEqualError(filteredOptions, 'prefix', 'negativeBefore'); |
||||
|
|
||||
|
return filteredOptions; |
||||
|
} |
||||
|
|
||||
|
// Pass all options as function arguments
|
||||
|
function passAll ( options, method, input ) { |
||||
|
var i, args = []; |
||||
|
|
||||
|
// Add all options in order of FormatOptions
|
||||
|
for ( i = 0; i < FormatOptions.length; i+=1 ) { |
||||
|
args.push(options[FormatOptions[i]]); |
||||
|
} |
||||
|
|
||||
|
// Append the input, then call the method, presenting all
|
||||
|
// options as arguments.
|
||||
|
args.push(input); |
||||
|
return method.apply('', args); |
||||
|
} |
||||
|
|
||||
|
/** @constructor */ |
||||
|
function wNumb ( options ) { |
||||
|
|
||||
|
if ( !(this instanceof wNumb) ) { |
||||
|
return new wNumb ( options ); |
||||
|
} |
||||
|
|
||||
|
if ( typeof options !== "object" ) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
options = validate(options); |
||||
|
|
||||
|
// Call 'formatTo' with proper arguments.
|
||||
|
this['to'] = function ( input ) { |
||||
|
return passAll(options, formatTo, input); |
||||
|
}; |
||||
|
|
||||
|
// Call 'formatFrom' with proper arguments.
|
||||
|
this['from'] = function ( input ) { |
||||
|
return passAll(options, formatFrom, input); |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/** @export */ |
||||
|
window['wNumb'] = wNumb; |
||||
|
|
||||
|
}()); |
||||
Loading…
Reference in new issue