From d8ecb4d77d64a7d5520eeb9d93fdd3d517c99291 Mon Sep 17 00:00:00 2001 From: Gidon Date: Sun, 13 Jul 2014 18:27:15 +0300 Subject: [PATCH 1/4] Fixed typeahead signatures - Updated according to official documentation: see https://github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md - Added one more test (from official samples) --- typeahead/typeahead-tests.ts | 57 ++++++++++++++++++++++++++++++++---- typeahead/typeahead.d.ts | 29 ++++++++---------- 2 files changed, 64 insertions(+), 22 deletions(-) diff --git a/typeahead/typeahead-tests.ts b/typeahead/typeahead-tests.ts index 67fc8d31a..5ce51629d 100644 --- a/typeahead/typeahead-tests.ts +++ b/typeahead/typeahead-tests.ts @@ -8,7 +8,7 @@ declare var Hogan: string; // Countries // Prefetches data, stores it in localStorage, and searches it on the client -$('.example-countries .typeahead').typeahead({ +$('.example-countries .typeahead').typeahead(null, { name: 'countries', prefetch: '../data/countries.json', limit: 10 @@ -16,7 +16,7 @@ $('.example-countries .typeahead').typeahead({ // Open Source Projects by Twitter // Defines a custom template and template engine for rendering suggestions -$('.example-twitter-oss .typeahead').typeahead({ +$('.example-twitter-oss .typeahead').typeahead(null, { name: 'twitter-oss', prefetch: '../data/repos.json', template: [ @@ -29,7 +29,7 @@ $('.example-twitter-oss .typeahead').typeahead({ // Arabic Phrases // Hardcoded list showing Right - To - Left(RTL) support -$('.example-arabic .typeahead').typeahead({ +$('.example-arabic .typeahead').typeahead(null, { name: 'arabic', local: [ "الإنجليزية", @@ -47,7 +47,7 @@ $('.example-arabic .typeahead').typeahead({ // NBA and NHL Teams // Two datasets that are prefetched, stored, and searched on the client -$('.example-sports .typeahead').typeahead([ +$('.example-sports .typeahead').typeahead(null, [ { name: 'nba-teams', prefetch: '../data/nba.json', @@ -62,7 +62,7 @@ $('.example-sports .typeahead').typeahead([ // Best Picture Winners // Prefetches some data then relies on remote requests for suggestions when prefetched data is insufficient -$('.example-films .typeahead').typeahead([ +$('.example-films .typeahead').typeahead(null, [ { name: 'best-picture-winners', remote: '../data/films/queries/%QUERY.json', @@ -85,3 +85,50 @@ $('.example-countries .typeahead').typeahead({ prefetch: '../data/countries.json', limit: 10 }); + + +var substringMatcher = function (strs) { + return function findMatches(q, cb) { + var matches, substrRegex; + + // an array that will be populated with substring matches + matches = []; + + // regex used to determine if a string contains the substring `q` + substrRegex = new RegExp(q, 'i'); + + // iterate through the pool of strings and for any string that + // contains the substring `q`, add it to the `matches` array + $.each(strs, function (i, str) { + if (substrRegex.test(str)) { + // the typeahead jQuery plugin expects suggestions to a + // JavaScript object, refer to typeahead docs for more info + matches.push({ value: str }); + } + }); + + cb(matches); + }; +}; + +var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', + 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', + 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', + 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', + 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', + 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', + 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', + 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', + 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' +]; + +$('#the-basics .typeahead').typeahead({ + hint: true, + highlight: true, + minLength: 1 +}, + { + name: 'states', + displayKey: 'value', + source: substringMatcher(states) + }); \ No newline at end of file diff --git a/typeahead/typeahead.d.ts b/typeahead/typeahead.d.ts index f6f387986..3f4c61b1d 100644 --- a/typeahead/typeahead.d.ts +++ b/typeahead/typeahead.d.ts @@ -6,21 +6,6 @@ /// interface JQuery { - /** - * Turns an input[type="text"] element into a typeahead. - * - * @constructor - * @param dataset Single dataset - */ - typeahead(dataset: Twitter.Typeahead.Dataset): JQuery; - - /** - * Turns an input[type="text"] element into a typeahead. - * - * @constructor - * @param dataset Array of datasets - */ - typeahead(datasets: Twitter.Typeahead.Dataset[]): JQuery; /** * Destroys previously initialized typeaheads. This entails reverting @@ -57,9 +42,19 @@ interface JQuery { * * @constructor * @param options ('hint' or 'highlight' or 'minLength' all of which are optional) - * @param dataset Array of datasets + * @param datasets Array of datasets */ - typeahead(options: Twitter.Typeahead.Options, dataset: Twitter.Typeahead.Dataset): JQuery; + typeahead(options: Twitter.Typeahead.Options, datasets: Twitter.Typeahead.Dataset[]): JQuery; + + /** + * Accomodates specifying options such as hint and highlight. + * This is in correspondence to the examples mentioned in http://twitter.github.io/typeahead.js/examples/ + * + * @constructor + * @param options ('hint' or 'highlight' or 'minLength' all of which are optional) + * @param datasets One or more datasets passed in as arguments. + */ + typeahead(options: Twitter.Typeahead.Options, ... datasets: Twitter.Typeahead.Dataset[]): JQuery; } declare module Twitter.Typeahead { From 2cc58f14033679b5775c524c3a95f041fd90dc75 Mon Sep 17 00:00:00 2001 From: Gidon Date: Wed, 16 Jul 2014 16:58:46 +0300 Subject: [PATCH 2/4] Updated to typeahead 0.10.4 Updated from 0.9.3 to 0.10.4 API has changed quite a bit. Part of the functionality (prefetch etc) has been taken out from the core lib, and merged into a new lib called Bloodhound. Bloodhound still has to be ts-ed. --- typeahead/typeahead-tests.ts | 99 +++--------- typeahead/typeahead.d.ts | 283 ++++++++++++----------------------- 2 files changed, 116 insertions(+), 266 deletions(-) diff --git a/typeahead/typeahead-tests.ts b/typeahead/typeahead-tests.ts index 5ce51629d..835fbfb57 100644 --- a/typeahead/typeahead-tests.ts +++ b/typeahead/typeahead-tests.ts @@ -6,87 +6,6 @@ // declare var Hogan: string; -// Countries -// Prefetches data, stores it in localStorage, and searches it on the client -$('.example-countries .typeahead').typeahead(null, { - name: 'countries', - prefetch: '../data/countries.json', - limit: 10 -}); - -// Open Source Projects by Twitter -// Defines a custom template and template engine for rendering suggestions -$('.example-twitter-oss .typeahead').typeahead(null, { - name: 'twitter-oss', - prefetch: '../data/repos.json', - template: [ - '

{{language}}

', - '

{{name}}

', - '

{{description}}

' - ].join(''), - engine: Hogan -}); - -// Arabic Phrases -// Hardcoded list showing Right - To - Left(RTL) support -$('.example-arabic .typeahead').typeahead(null, { - name: 'arabic', - local: [ - "الإنجليزية", - "نعم", - "لا", - "مرحبا", - "کيف الحال؟", - "أهلا", - "مع السلامة", - "لا أتكلم العربية", - "لا أفهم", - "أنا جائع" - ] -}); - -// NBA and NHL Teams -// Two datasets that are prefetched, stored, and searched on the client -$('.example-sports .typeahead').typeahead(null, [ - { - name: 'nba-teams', - prefetch: '../data/nba.json', - header: '

NBA Teams

' - }, - { - name: 'nhl-teams', - prefetch: '../data/nhl.json', - header: '

NHL Teams

' - } -]); - -// Best Picture Winners -// Prefetches some data then relies on remote requests for suggestions when prefetched data is insufficient -$('.example-films .typeahead').typeahead(null, [ - { - name: 'best-picture-winners', - remote: '../data/films/queries/%QUERY.json', - prefetch: '../data/films/post_1960.json', - template: '

{{value}} – {{year}}

', - engine: Hogan - } -]); - -// Countries - Modified the first test here to add options -// Specifies options to display hint with a highlight and adds a minimum length restriction for search -// Prefetches data, stores it in localStorage, and searches it on the client -$('.example-countries .typeahead').typeahead({ - hint: true, - highlight: true, - minLength: 2 -}, -{ - name: 'countries', - prefetch: '../data/countries.json', - limit: 10 -}); - - var substringMatcher = function (strs) { return function findMatches(q, cb) { var matches, substrRegex; @@ -131,4 +50,20 @@ $('#the-basics .typeahead').typeahead({ name: 'states', displayKey: 'value', source: substringMatcher(states) - }); \ No newline at end of file + }); + + +// custom templates +$('#custom-templates .typeahead').typeahead(null, { + name: 'best-pictures', + displayKey: 'value', + source: bestPictures.ttAdapter(), + templates: { + empty: [ + '
', + 'unable to find any Best Picture winners that match the current query', + '
' + ].join('\n'), + suggestion: Handlebars.compile('

{{value}} – {{year}}

') + } +}); \ No newline at end of file diff --git a/typeahead/typeahead.d.ts b/typeahead/typeahead.d.ts index 3f4c61b1d..fe8584639 100644 --- a/typeahead/typeahead.d.ts +++ b/typeahead/typeahead.d.ts @@ -1,6 +1,6 @@ -// Type definitions for typeahead.js 0.9.3 +// Type definitions for typeahead.js 0.10.4 // Project: http://twitter.github.io/typeahead.js/ -// Definitions by: Ivaylo Gochkov +// Definitions by: Ivaylo Gochkov , Gidon Junge // Definitions: https://github.com/borisyankov/DefinitelyTyped /// @@ -17,22 +17,55 @@ interface JQuery { typeahead(methodName: 'destroy'): JQuery; /** - * Sets the current query of the typeahead. This is always preferable to - * using $("input.typeahead").val(query), which will result in unexpected - * behavior. To clear the query, simply set it to an empty string. - * - * @constructor - * @param methodName Method 'setQuery' - * @param query The query to be set - */ - typeahead(methodName: 'setQuery', query: string): JQuery; + * Opens the dropdown menu of typeahead. Note that being open does not mean that the menu is visible. + * The menu is only visible when it is open and has content. + * + * @constructor + * @param methodName Method 'open' + */ + typeahead(methodName: 'open'): JQuery; /** - * Accommodates the destroy and setQuery overloads. + * Closes the dropdown menu of typeahead. + * + * @constructor + * @param methodName Method 'close' + */ + typeahead(methodName: 'close'): JQuery; + + /** + * Returns the current value of the typeahead. + * The value is the text the user has entered into the input element. + * + * @constructor + * @param methodName Method 'val' + */ + typeahead(methodName: 'val'): string; + + /** + * Sets the value of the typeahead. This should be used in place of jQuery#val. * * @constructor - * @param methodName Method name ('destroy' or 'setQuery') - * @param query The query to be set in case method 'setQuery' is used. + * @param methodName Method 'val' + * @param query The value to be set + */ + typeahead(methodName: 'val', val: string): JQuery; + + /** + * Accommodates the val overload. + * + * @constructor + * @param methodName Method name ('val') + */ + typeahead(methodName: string): string; + + + /** + * Accommodates multiple overloads. + * + * @constructor + * @param methodName Method name + * @param query The query to be set in case method 'val' is used. */ typeahead(methodName: string, query: string): JQuery; @@ -66,188 +99,70 @@ declare module Twitter.Typeahead { */ interface Dataset { /** - * The string used to identify the dataset. Used by typeahead.js - * to cache intelligently. - */ - name: string; + * The backing data source for suggestions. + * Expected to be a function with the signature (query, cb). + * It is expected that the function will compute the suggestion set (i.e. an array of JavaScript objects) for query and then invoke cb with said set. + * cb can be invoked synchronously or asynchronously. + * + */ + source: (query: string, cb: (result: any) => void) => void; + /** - * The key used to access the value of the datum in the datum object. - * Defaults to value. + * The name of the dataset. + * This will be appended to tt-dataset- to form the class name of the containing DOM element. + * Must only consist of underscores, dashes, letters (a-z), and numbers. + * Defaults to a random number. */ - valueKey?: string; + name?: string; + /** - * The max number of suggestions from the dataset to display - * for a given query. Defaults to 5. - */ - limit?: number; + * For a given suggestion object, determines the string representation of it. + * This will be used when setting the value of the input control after a suggestion is selected. Can be either a key string or a function that transforms a suggestion object into a string. + * Defaults to value. + */ + displayKey?: string; + /** - * The template used to render suggestions. Can be a string or - * a precompiled template. If not provided, suggestions will render - * as their value contained in a

element (i.e.

value

). - */ - template?: any; - /** - * The template engine used to compile/render template if it is a - * string. Any engine can use used as long as it adheres to the - * expected API. Required if template is a string. - */ - engine?: string; - /** - * The header rendered before suggestions in the dropdown menu. - * Can be either a DOM element or HTML. - */ - header?: any; - /** - * The footer rendered after suggestions in the dropdown menu. - * Can be either a DOM element or HTML. - */ - footer?: any; - /** - * An array of datums or strings. - */ - local?: any[]; - /** - * Can be a URL to a JSON file containing an array of datums or, - * if more configurability is needed, a prefetch options object. - */ - prefetch?: any; - /** - * Can be a URL to fetch suggestions from when the data provided by - * local and prefetch is insufficient or, if more configurability is - * needed, a remote options object. - */ - remote?: any; + * A hash of templates to be used when rendering the dataset. + * Note a precompiled template is a function that takes a JavaScript object as its first argument and returns a HTML string. + */ + templates?: Templates; } - /** - * Prefetched data is fetched and processed on initialization. - * If the browser supports localStorage, the processed data will be cached - * there to prevent additional network requests on subsequent page loads. - */ - interface PrefetchOptions { - /** - * A URL to a JSON file containing an array of datums. Required. - */ - url: string; + + interface Templates { /** - * The time (in milliseconds) the prefetched data should be cached - * in localStorage. Defaults to 86400000 (1 day). - */ - ttl?: number; + * Rendered when 0 suggestions are available for the given query. + * Can be either a HTML string or a precompiled template. + * If it's a precompiled template, the passed in context will contain query + */ + empty?: string; /** - * A function that transforms the response body into an array of datums. - * - * @param parsedResponse Response body - */ - filter?: (parsedResponse: any) => Datum[]; + * Rendered at the bottom of the dataset. + * Can be either a HTML string or a precompiled template. + * If it's a precompiled template, the passed in context will contain query and isEmpty. + */ + footer?: string; + + /** + * Rendered at the top of the dataset. + * Can be either a HTML string or a precompiled template. + * If it's a precompiled template, the passed in context will contain query and isEmpty. + */ + header?: string; + + /** + * Used to render a single suggestion. + * If set, this has to be a precompiled template. + * The associated suggestion object will serve as the context. + * Defaults to the value of displayKey wrapped in a p tag i.e.

{{value}}

. + */ + suggestion?: string; + } - /** - * Remote data is only used when the data provided by local and prefetch - * is insufficient. In order to prevent an obscene number of requests - * being made to remote endpoint, typeahead.js rate-limits remote requests. - */ - interface RemoteOptions { - /** - * A URL to make requests to when the data provided by local and - * prefetch is insufficient. Required. - */ - url: string; - - /** - * The type of data you're expecting from the server. Defaults to json. - * @see http://api.jquery.com/jQuery.ajax/ for more info. - */ - dataType?: string; - - /** - * Determines whether or not the browser will cache responses. - * @see http://api.jquery.com/jQuery.ajax/ for more info. - */ - cache?: boolean; - - /** - * Sets a timeout for requests. - * @see http://api.jquery.com/jQuery.ajax/ for more info. - */ - timeout?: number; - - /** - * The pattern in url that will be replaced with the user's query - * when a request is made. Defaults to %QUERY. - */ - wildcard?: string; - - /** - * Overrides the request URL. If set, no wildcard substitution will - * be performed on url. - * - * @param url Replacement URL - * @param uriEncodedQuery Encoded query - * @returns A valid URL - */ - replace?: (url: string, uriEncodedQuery: string) => string; - - /** - * The function used for rate-limiting network requests. - * Can be either 'debounce' or 'throttle'. Defaults to 'debounce'. - */ - rateLimitFn?: string; - - /** - * The time interval in milliseconds that will be used by rateLimitFn. - * Defaults to 300. - */ - rateLimitWait?: number; - - /** - * The max number of parallel requests typeahead.js can have pending. - * Defaults to 6. - */ - maxParallelRequests?: number; - - /** - * A pre-request callback. Can be used to set custom headers. - * @see http://api.jquery.com/jQuery.ajax/ for more info. - */ - beforeSend?: (jqXhr: JQueryXHR, settings: JQueryAjaxSettings) => void; - - /** - * Transforms the response body into an array of datums. - * - * @param parsedResponse Response body - */ - filter?: (parsedResponse: any) => Datum[]; - } - - /** - * The individual units that compose datasets are called datums. - * The canonical form of a datum is an object with a value property and - * a tokens property. - * - * For ease of use, datums can also be represented as a string. - * Strings found in place of datum objects are implicitly converted - * to a datum object. - * - * When datums are rendered as suggestions, the datum object is the - * context passed to the template engine. This means if you include any - * arbitrary properties in datum objects, those properties will be - * available to the template used to render suggestions. - */ - interface Datum { - /** - * The string that represents the underlying value of the datum - */ - value: string; - - /** - * A collection of single-word strings that aid typeahead.js in - * matching datums with a given query. - */ - tokens: string[]; - } /** * When initializing a typeahead, there are a number of options you can configure. From 0421179b561d7cd227cbfd55b09b63ca9eeddca6 Mon Sep 17 00:00:00 2001 From: Gidon Date: Wed, 16 Jul 2014 17:04:51 +0300 Subject: [PATCH 3/4] Fixed Tests for Typeahead --- typeahead/typeahead-tests.ts | 21 +++------------------ 1 file changed, 3 insertions(+), 18 deletions(-) diff --git a/typeahead/typeahead-tests.ts b/typeahead/typeahead-tests.ts index 835fbfb57..aa8a400b6 100644 --- a/typeahead/typeahead-tests.ts +++ b/typeahead/typeahead-tests.ts @@ -6,9 +6,9 @@ // declare var Hogan: string; -var substringMatcher = function (strs) { - return function findMatches(q, cb) { - var matches, substrRegex; +var substringMatcher = function (strs: any) { + return function findMatches(q: any, cb: any) { + var matches: any, substrRegex: any; // an array that will be populated with substring matches matches = []; @@ -52,18 +52,3 @@ $('#the-basics .typeahead').typeahead({ source: substringMatcher(states) }); - -// custom templates -$('#custom-templates .typeahead').typeahead(null, { - name: 'best-pictures', - displayKey: 'value', - source: bestPictures.ttAdapter(), - templates: { - empty: [ - '
', - 'unable to find any Best Picture winners that match the current query', - '
' - ].join('\n'), - suggestion: Handlebars.compile('

{{value}} – {{year}}

') - } -}); \ No newline at end of file From 05ba8a69a5c48d95ec16d89bb900403300012a4e Mon Sep 17 00:00:00 2001 From: Gidon Date: Thu, 17 Jul 2014 15:43:06 +0300 Subject: [PATCH 4/4] Updated History JS Upgraded to version 1.8, which is now community supported. --- history/history.d.ts | 60 +++++++++++++++++++++++++++++++++----------- 1 file changed, 45 insertions(+), 15 deletions(-) diff --git a/history/history.d.ts b/history/history.d.ts index a8a3c4004..07a31d011 100644 --- a/history/history.d.ts +++ b/history/history.d.ts @@ -1,13 +1,13 @@ -// Type definitions for History.js -// Project: https://github.com/balupton/History.js -// Definitions by: Boris Yankov +// Type definitions for History.js 1.8.0 +// Project: https://github.com/browserstate/history.js +// Definitions by: Boris Yankov , Gidon Junge // Definitions: https://github.com/borisyankov/DefinitelyTyped interface HistoryAdapter { - bind(element, event, callback); - trigger(element, event); - onDomLoad(callback); + bind(element: any, event: string, callback: () => void); + trigger(element: any, event: string); + onDomLoad(callback: () => void); } // Since History is defined in lib.d.ts as well @@ -17,15 +17,45 @@ interface HistoryAdapter { // var Historyjs: Historyjs = History; interface Historyjs { + enabled: boolean; - pushState(data, title, url); - replaceState(data, title, url); - getState(); - getHash(); + + pushState(data: any, title: string, url: string); + replaceState(data: any, title: string, url: string); + getState(): HistoryState; + getStateByIndex(index: number): HistoryState; + getCurrentIndex(): number; + getHash(): string; + Adapter: HistoryAdapter; - back(); - forward(); - go(X); - log(...messages: any[]); - debug(...messages: any[]); + + back(): void; + forward(): void; + go(x: Number): void; + + log(...messages: any[]): void; + debug(...messages: any[]): void; + + options: HistoryOptions; } + +interface HistoryState { + data?: any; + title?: string; + url: string; +} + +interface HistoryOptions { + hashChangeInterval?: number; + safariPollInterval?: number; + doubleCheckInterval?: number; + disableSuid?: boolean; + storeInterval?: number; + busyDelay?: number; + debug?: boolean; + initialTitle?: string; + html4Mode?: boolean; + delayInit?: number; + + +} \ No newline at end of file