diff --git a/bootstrap-maxlength/bootstrap-maxlength-tests.ts b/bootstrap-maxlength/bootstrap-maxlength-tests.ts new file mode 100644 index 000000000..8a17cc7ff --- /dev/null +++ b/bootstrap-maxlength/bootstrap-maxlength-tests.ts @@ -0,0 +1,70 @@ +/// +/// + +// Examples from the projects github page +$('input[maxlength]').maxlength(); + +$('input.className').maxlength({ + threshold: 20 +}); + +$('input.className').maxlength({ + alwaysShow: true, + threshold: 10, + warningClass: "label label-info", + limitReachedClass: "label label-warning", + placement: 'top', + preText: 'used ', + separator: ' of ', + postText: ' chars.' +}); + +$('input.className').maxlength({ + alwaysShow: true, + threshold: 10, + warningClass: "label label-info", + limitReachedClass: "label label-warning", + placement: 'top', + message: 'used %charsTyped% of %charsTotal% chars.' +}); +// Testing the events +$('input.className').on('maxlength.shown', function(){ + console.log('shown'); +}); +$('input.className').on('maxlength.hidden', function(){ + console.log('hidden'); +}); +$('textarea').on('autosize.resized', function () { + $(this).trigger('maxlength.reposition'); +}); + + +// using message string +$('input.className').maxlength({ + message: 'used %charsTyped% of %charsTotal% chars.' +}); +// using message function +$('input.className').maxlength({ + threshold: 20, + message: function (currentText, maxLength) { + return '' + Math.ceil(currentText.length / 160) + ' SMS Message(s)'; + } +}); + + +// placement string +$('input.className').maxlength({ + placement: 'top-left' +}); +// placement object +$('input.className').maxlength({ + placement: { + top: 10, + left: '30%' + } +}); +// placement function +$('input.className').maxlength({ + placement: function (currentInput: JQuery, maxLengthIndicator: JQuery, currentInputPosition: BootstrapMaxlength.PositionParam) { + } +}); diff --git a/bootstrap-maxlength/bootstrap-maxlength.d.ts b/bootstrap-maxlength/bootstrap-maxlength.d.ts new file mode 100644 index 000000000..4d36c7038 --- /dev/null +++ b/bootstrap-maxlength/bootstrap-maxlength.d.ts @@ -0,0 +1,158 @@ +// Type definitions for bootstrap-maxlength v1.7.0 +// Project: https://github.com/mimo84/bootstrap-maxlength +// Definitions by: Dan Manastireanu +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module BootstrapMaxlength { + + /** + * Possible options for the position of the counter. (passed to $.fn.css) + */ + interface PlacementOptions { + /** + * The top position of the counter (Number of pixels, or a px or percent string) + */ + top?: Number | string, + /** + * The right position of the counter (Number of pixels, or a px or percent string) + */ + right?: Number | string, + /** + * The bottom position of the counter (Number of pixels, or a px or percent string) + */ + bottom?: Number | string, + /** + * The left position of the counter (Number of pixels, or a px or percent string) + */ + left?: Number | string, + /** + * The positioning to use. For example 'relative', 'absolute' + */ + position?: string + } + + /** + * Representation of the current input position + */ + interface PositionParam { + top: Number, + right: Number, + bottom: Number, + left: Number, + width: Number, + height: Number + } + + export interface Options { + /** + * If true the threshold will be ignored and the remaining length indication will be always showing up while typing or on focus on the input + * @default false + */ + alwaysShow?: Boolean, + /** + * This is a number indicating how many chars are left to start displaying the indications + * @default 10 + */ + threshold?: Number, + /** + * It's the class of the element with the indicator. By default is the bootstrap "label label-success" but can be changed to anything you'd like. + * @default 'label label-success' + */ + warningClass?: string, + /** + * It's the class the element gets when the limit is reached. Default is "label label-important label-danger" (to support Bootstrap 2 and 3). + * @default 'label label-important label-danger' + */ + limitReachedClass?: string, + /** + * Represents the separator between the number of typed chars and total number of available chars. + * @default ' / ' + */ + separator?: string, + /** + * Is a string of text that can be outputted in front of the indicator. + * @default '' + */ + preText?: string, + /** + * Is a string outputted after the indicator. + * @default '' + */ + postText?: string, + /** + * If false, will display just the number of typed characters, e.g. will not display the max length. + * @default true + */ + showMaxLength?: Boolean, + /** + * If false, will display just the remaining length, e.g. will display remaining lenght instead of number of typed characters. + * @default true + */ + showCharsTyped?: Boolean, + /** + * Is a string, define where to output the counter. + * Options: bottom, left, top, right, bottom-right, top-right, top-left, bottom-left and centered-right + * @default 'bottom' + */ + placement?: string | PlacementOptions | ((currentInput: JQuery, maxLengthIndicator: JQuery, currentInputPosition: PositionParam) => void), + /** + * Appends the maxlength indicator badge to the parent of the input rather than to the body. + * @default false + */ + appendToParent?: boolean, + /** + * An alternative way to provide the message text. + * String example: 'You have typed %charsTyped% chars, %charsRemaining% of %charsTotal% remaining'. + * %charsTyped%, %charsRemaining% and %charsTotal% will be replaced by the actual values. This overrides the options separator, preText, postText and showMaxLength. + * Alternatively you may supply a function that the current text and max length and returns the string to be displayed. + * Function example: function(currentText, maxLength) { return '' + Math.ceil(currentText.length / 160) + ' SMS Message(s)'; } + * @default null + */ + message?: string | ((currentText : string, maxLength: Number) => string), + /** + * If true the input will count using utf8 bytesize/encoding. For example: the '£' character is counted as two characters. + * @default false + */ + utf8?: boolean, + /** + * Shows the badge as soon as it is added to the page, similar to alwaysShow + * @default false + */ + showOnReady?: boolean, + /** + * Count linebreak as 2 characters to match IE/Chrome textarea validation. As well as DB storage. + * @default true + */ + twoCharLinebreak?: boolean, + /** + * Allows a custom attribute to display indicator without triggering native maxlength behaviour. + * Ignored if value greater than a native maxlength attribute. + * 'overmax' class gets added when exceeded to allow user to implement form validation. + * @default null (use the maxlength attribute and browser functionality) + */ + customMaxAttribute?: string, + /** + * Will allow the input to be over the customMaxLength. Useful in soft max situations. + * @default false + */ + allowOverMax?: boolean, + /** + * If the browser doesn't support the maxlength attribute, attempt to type more than + * the indicated chars, will be prevented. + * @default false + */ + validate?: boolean + } +} + + +interface JQuery { + /** Apply the maxlength plugin on the selected elemens */ + maxlength(options?: BootstrapMaxlength.Options): JQuery; + on(events: 'maxlength.shown', handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery; + on(events: 'maxlength.hidden', handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery; + trigger(eventType: 'maxlength.reposition', extraParameters?: any[]|Object): JQuery; + +}