From 26dca076860b1ae0feeaca25da7029387f4423ac Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Wed, 3 Dec 2014 16:13:32 -0500 Subject: [PATCH 1/3] Add selectize typings --- selectize/selectize-tests.ts | 389 +++++++++++++++++++++++ selectize/selectize.d.ts | 600 +++++++++++++++++++++++++++++++++++ 2 files changed, 989 insertions(+) create mode 100644 selectize/selectize-tests.ts create mode 100644 selectize/selectize.d.ts diff --git a/selectize/selectize-tests.ts b/selectize/selectize-tests.ts new file mode 100644 index 0000000000..5c75f52a41 --- /dev/null +++ b/selectize/selectize-tests.ts @@ -0,0 +1,389 @@ +/// +/// + +// All code examples taken from https://github.com/brianreavis/selectize.js/blob/master/examples + +// API example +// -------------------------------------------------------------------------------------------------------------------- + +var $select = $('#select-tools').selectize({ + maxItems: null, + valueField: 'id', + labelField: 'title', + searchField: 'title', + options: [ + {id: 1, title: 'Spectrometer', url: 'http://en.wikipedia.org/wiki/Spectrometers'}, + {id: 2, title: 'Star Chart', url: 'http://en.wikipedia.org/wiki/Star_chart'}, + {id: 3, title: 'Electrical Tape', url: 'http://en.wikipedia.org/wiki/Electrical_tape'} + ], + create: false +}); + +var control = $select[0].selectize; + +$('#button-clear').on('click', function() { + control.clear(); +}); +$('#button-clearoptions').on('click', function() { + control.clearOptions(); +}); +$('#button-addoption').on('click', function() { + control.addOption({ + id: 4, + title: 'Something New', + url: 'http://google.com' + }); +}); +$('#button-additem').on('click', function() { + control.addItem(2); +}); +$('#button-setvalue').on('click', function() { + control.setValue([2, 3]); +}); + + +// Cities example +// -------------------------------------------------------------------------------------------------------------------- + +var xhr: XMLHttpRequest; +var select_state: Selectize.IApi; +var select_city: Selectize.IApi; +var $select_state: JQuery; +var $select_city: JQuery; + +$select_state = $('#select-state').selectize({ + onChange: function(value) { + if (!value.length) return; + select_city.disable(); + select_city.clearOptions(); + select_city.load(function(callback) { + xhr && xhr.abort(); + xhr = $.ajax({ + url: 'http://www.corsproxy.com/api.sba.gov/geodata/primary_city_links_for_state_of/' + value + '.json', + success: function(results) { + select_city.enable(); + callback(results); + }, + error: function() { + callback(); + } + }) + }); + } +}); + +$select_city = $('#select-city').selectize({ + valueField: 'name', + labelField: 'name', + searchField: ['name'] +}); + +select_city = $select_city[0].selectize; +select_state = $select_state[0].selectize; +select_city.disable(); + + +// Confirm example +// -------------------------------------------------------------------------------------------------------------------- + +$('#input-tags').selectize({ + delimiter: ',', + persist: false, + onDelete: function(values) { + return confirm(values.length > 1 ? 'Are you sure you want to remove these ' + values.length + ' items?' : 'Are you sure you want to remove "' + values[0] + '"?'); + } +}); + + +// Contacts example +// -------------------------------------------------------------------------------------------------------------------- + +var REGEX_EMAIL = '([a-z0-9!#$%&\'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&\'*+/=?^_`{|}~-]+)*@' + + '(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)'; +var formatName = function(item) { + return $.trim((item.first_name || '') + ' ' + (item.last_name || '')); +}; + +$('#select-to').selectize({ + persist: false, + maxItems: null, + valueField: 'email', + labelField: 'name', + searchField: ['first_name', 'last_name', 'email'], + sortField: [ + {field: 'first_name', direction: 'asc'}, + {field: 'last_name', direction: 'asc'} + ], + options: [ + {email: 'nikola@tesla.com', first_name: 'Nikola', last_name: 'Tesla'}, + {email: 'brian@thirdroute.com', first_name: 'Brian', last_name: 'Reavis'}, + {email: 'someone@gmail.com'} + ], + render: { + item: function(item, escape) { + var name = formatName(item); + return '
' + + (name ? '' + escape(name) + '' : '') + + (item.email ? '' : '') + + '
'; + }, + option: function(item, escape) { + var name = formatName(item); + var label = name || item.email; + var caption = name ? item.email : null; + return '
' + + '' + escape(label) + '' + + (caption ? '' + escape(caption) + '' : '') + + '
'; + } + }, + createFilter: function(input) { + var regexpA = new RegExp('^' + REGEX_EMAIL + '$', 'i'); + var regexpB = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'); + return regexpA.test(input) || regexpB.test(input); + }, + create: function(input): any { + if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) { + return {email: input}; + } + var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i')); + if (match) { + var name = $.trim(match[1]); + var pos_space = name.indexOf(' '); + var first_name = name.substring(0, pos_space); + var last_name = name.substring(pos_space + 1); + return { + email: match[2], + first_name: first_name, + last_name: last_name + }; + } + alert('Invalid email address.'); + return false; + } +}); + + +// Create filter example +// -------------------------------------------------------------------------------------------------------------------- + +$('#select-words-regex').selectize({ + create: true, + createFilter: $('#regex').val() +}); +$('#select-words-length').selectize({ + create: true, + createFilter: function(input) { return input.length >= parseInt($('#length').val(), 10); } +}); +var unique: Selectize.IApi = $('#select-words-unique').selectize({ + create: true, + createFilter: function(input) { + input = input.toLowerCase(); + return $.grep( unique.getValue(), function(value) { + return value.toLowerCase() === input; + }).length == 0; + } +})[0].selectize; + + +// Customization example +// -------------------------------------------------------------------------------------------------------------------- + +$('#select-links').selectize({ + theme: 'links', + maxItems: null, + valueField: 'id', + searchField: 'title', + options: [ + {id: 1, title: 'DIY', url: 'https://diy.org'}, + {id: 2, title: 'Google', url: 'http://google.com'}, + {id: 3, title: 'Yahoo', url: 'http://yahoo.com'}, + ], + render: { + option: function(data, escape) { + return '
' + + '' + escape(data.title) + '' + + '' + escape(data.url) + '' + + '
'; + }, + item: function(data, escape) { + return '
' + escape(data.title) + '
'; + } + }, + create: function(input) { + return { + id: 0, + title: input, + url: '#' + }; + } +}); + + +// Events +// -------------------------------------------------------------------------------------------------------------------- + +var eventHandler = function(name) { + return function() { + console.log(name, arguments); + $('#log').append('
' + name + '
'); + }; +}; +var $select = $('#select-state').selectize({ + create : true, + onChange : eventHandler('onChange'), + onItemAdd : eventHandler('onItemAdd'), + onItemRemove : eventHandler('onItemRemove'), + onOptionAdd : eventHandler('onOptionAdd'), + onOptionRemove : eventHandler('onOptionRemove'), + onDropdownOpen : eventHandler('onDropdownOpen'), + onDropdownClose : eventHandler('onDropdownClose'), + onInitialize : eventHandler('onInitialize'), +}); + + +// Github example +// -------------------------------------------------------------------------------------------------------------------- + +$('#select-repo').selectize({ + valueField: 'url', + labelField: 'name', + searchField: 'name', + options: [], + create: false, + render: { + option: function(item, escape) { + return '
' + + '' + + '' + escape(item.name) + '' + + '' + escape(item.username) + '' + + '' + + '' + escape(item.description) + '' + + '
    ' + + (item.language ? '
  • ' + escape(item.language) + '
    • ' : '') + + '
  • ' + escape(item.watchers) + ' watchers
    • ' + + '
  • ' + escape(item.forks) + ' forks
    • ' + + '
' + + '
'; + } + }, + score: function(search) { + var score = this.getScoreFunction(search); + return function(item) { + return score(item) * (1 + Math.min(item.watchers / 100, 1)); + }; + }, + load: function(query, callback) { + if (!query.length) return callback(); + $.ajax({ + url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query), + type: 'GET', + error: function() { + callback(); + }, + success: function(res) { + callback(res.repositories.slice(0, 10)); + } + }); + } +}); + + +// Lock example +// -------------------------------------------------------------------------------------------------------------------- + +$('select').selectize({create: true}); +$('#select-locked-empty')[0].selectize.lock(); +$('#select-locked-single')[0].selectize.lock(); +$('#select-locked')[0].selectize.lock(); + + +// Movies example +// -------------------------------------------------------------------------------------------------------------------- + +$('#select-movie').selectize({ + valueField: 'title', + labelField: 'title', + searchField: 'title', + options: [], + create: false, + render: { + option: function(item, escape) { + var actors = []; + for (var i = 0, n = item.abridged_cast.length; i < n; i++) { + actors.push('' + escape(item.abridged_cast[i].name) + ''); + } + return '
' + + '' + + '' + + '' + escape(item.title) + '' + + '' + + '' + escape(item.synopsis || 'No synopsis available at this time.') + '' + + '' + (actors.length ? 'Starring ' + actors.join(', ') : 'Actors unavailable') + '' + + '
'; + } + }, + load: function(query, callback) { + if (!query.length) return callback(); + $.ajax({ + url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json', + type: 'GET', + dataType: 'jsonp', + data: { + q: query, + page_limit: 10, + apikey: '3qqmdwbuswut94jv4eua3j85' + }, + error: function() { + callback(); + }, + success: function(res) { + console.log(res.movies); + callback(res.movies); + } + }); + } +}); + +// Optgroups +// -------------------------------------------------------------------------------------------------------------------- + +$("#select-car").selectize({ + options: [ + {id: 'avenger', make: 'dodge', model: 'Avenger'}, + {id: 'caliber', make: 'dodge', model: 'Caliber'}, + {id: 'caravan-grand-passenger', make: 'dodge', model: 'Caravan Grand Passenger'}, + {id: 'challenger', make: 'dodge', model: 'Challenger'}, + {id: 'ram-1500', make: 'dodge', model: 'Ram 1500'}, + {id: 'viper', make: 'dodge', model: 'Viper'}, + {id: 'a3', make: 'audi', model: 'A3'}, + {id: 'a6', make: 'audi', model: 'A6'}, + {id: 'r8', make: 'audi', model: 'R8'}, + {id: 'rs-4', make: 'audi', model: 'RS 4'}, + {id: 's4', make: 'audi', model: 'S4'}, + {id: 's8', make: 'audi', model: 'S8'}, + {id: 'tt', make: 'audi', model: 'TT'}, + {id: 'avalanche', make: 'chevrolet', model: 'Avalanche'}, + {id: 'aveo', make: 'chevrolet', model: 'Aveo'}, + {id: 'cobalt', make: 'chevrolet', model: 'Cobalt'}, + {id: 'silverado', make: 'chevrolet', model: 'Silverado'}, + {id: 'suburban', make: 'chevrolet', model: 'Suburban'}, + {id: 'tahoe', make: 'chevrolet', model: 'Tahoe'}, + {id: 'trail-blazer', make: 'chevrolet', model: 'TrailBlazer'}, + ], + optgroups: [ + {id: 'dodge', name: 'Dodge'}, + {id: 'audi', name: 'Audi'}, + {id: 'chevrolet', name: 'Chevrolet'} + ], + labelField: 'model', + valueField: 'id', + optgroupField: 'make', + optgroupLabelField: 'name', + optgroupValueField: 'id', + optgroupOrder: ['chevrolet', 'dodge', 'audi'], + searchField: ['model'], + plugins: ['optgroup_columns'], + openOnFocus: false +}); + diff --git a/selectize/selectize.d.ts b/selectize/selectize.d.ts new file mode 100644 index 0000000000..5d0c755856 --- /dev/null +++ b/selectize/selectize.d.ts @@ -0,0 +1,600 @@ +// Type definitions for Selectize 0.11.2 +// Project: https://github.com/brianreavis/selectize.js +// Definitions by: Adi Dahiya +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// + +declare module Selectize { + // see https://github.com/brianreavis/selectize.js/blob/master/docs/usage.md + // option identifiers are parameterized by T; data is parameterized by U + interface IOptions { + + // General + // ------------------------------------------------------------------------------------------------------------ + + /** + * The string to separate items by. This option is only used when Selectize is instantiated from a + * element. + * + * Default: ',' + */ + delimiter?: string; + + /** + * Enable or disable international character support. + * + * Default: true + */ + diacritics?: boolean; + + /** + * Allows the user to create a new items that aren't in the list of options. + * This option can be any of the following: "true", "false" (disabled), or a function that accepts two + * arguments: "input" and "callback". The callback should be invoked with the final data for the option. + * + * Default: false + */ + create?: any; + + /** + * If true, when user exits the field (clicks outside of input or presses ESC) new option is created and + * selected (if `create`-option is enabled). + * + * Default: false + */ + createOnBlur?: boolean; + + /** + * Specifies a RegExp or String containing a regular expression that the current search filter must match to + * be allowed to be created. May also be a predicate function that takes the filter text and returns whether + * it is allowed. + * + * Default: null + */ + createFilter?: any; + + /** + * Toggles match highlighting within the dropdown menu. + * + * Default: true + */ + highlight?: boolean; + + /** + * If false, items created by the user will not show up as available options once they are unselected. + * + * Default: true + */ + persist?: boolean; + + /** + * Show the dropdown immediately when the control receives focus. + * + * Default: true + */ + openOnFocus?: boolean; + + /** + * The max number of items to render at once in the dropdown list of options. + * + * Default: 1000 + */ + maxOptions?: number; + + /** + * The max number of items the user can select. + * + * Default: Infinity + */ + maxItems?: number; + + /** + * If true, the items that are currently selected will not be shown in the dropdown list of available options. + * + * Default: false + */ + hideSelected?: boolean; + + /** + * If true, Selectize will treat any options with a "" value like normal. This defaults to false to + * accomodate the common with