/* ------------------------------------------------------------------------------
*
* # Extended form controls
*
* Specific JS code additions for form_controls_extended.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// ========================================
//
// Components
//
// ========================================
// Input formatter
// ------------------------------
// Date
$('[name="format-date"]').formatter({
pattern: '{{99}}/{{99}}/{{9999}}'
});
// Credit card
$('[name="format-credit-card"]').formatter({
pattern: '{{9999}} - {{9999}} - {{9999}} - {{9999}}'
});
// Phone #
$('.format-phone-number').formatter({
pattern: '({{999}}) {{999}} - {{9999}}'
});
// Phone ext
$('[name="format-phone-ext"]').formatter({
pattern: '({{999}}) {{999}} - {{9999}} / {{a999}}'
});
// Currency
$('[name="format-currency"]').formatter({
pattern: '${{999}}.{{99}}'
});
// International phone
$('[name="format-international-phone"]').formatter({
pattern: '+3{{9}} {{999}} {{999}} {{999}}'
});
// Tax id
$('[name="format-tax-id"]').formatter({
pattern: '{{99}} - {{9999999}}'
});
// SSN
$('[name="format-ssn"]').formatter({
pattern: '{{999}} - {{99}} - {{9999}}'
});
// Product key
$('[name="format-product-key"]').formatter({
pattern: '{{a*}} - {{999}} - {{a999}}'
});
// Order #
$('[name="format-order-number"]').formatter({
pattern: '{{aaa}} - {{999}} - {{***}}'
});
// ISBN
$('[name="format-isbn"]').formatter({
pattern: '{{999}} - {{99}} - {{999}} - {{9999}} - {{9}}'
});
// Persistent
$('[name="format-persistent"]').formatter({
pattern: '+3 ({{999}}) {{999}} - {{99}} - {{99}}'
});
// Elastic textarea
// ------------------------------
// Basic example
$('.elastic').autosize();
// Manual trigger
$('.elastic-manual-trigger').on('click', function() {
$('.elastic-manual').val('Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed ultricies nibh, sed faucibus eros. Vivamus tristique fringilla ante, vitae pellentesque quam porta vel. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vehicula gravida nisl non imperdiet. Mauris felis odio, vehicula et laoreet non, tempor non enim. Cras convallis sapien hendrerit nibh sagittis sollicitudin. Fusce nec ultricies justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ac urna in dui consequat cursus vel sit amet mauris. Proin nec bibendum arcu. Aenean sit amet nisi mi. Sed non leo nisl. Mauris leo odio, ultricies interdum ornare ac, posuere eu risus. Suspendisse adipiscing sapien sit amet gravida sollicitudin. Maecenas laoreet velit in dui adipiscing, vel fermentum tellus ullamcorper. Nullam et mi rhoncus, tempus nulla sit amet, varius ipsum.').trigger('autosize.resize');
});
// Destroy method
$('.elastic-destroy-trigger').on('click', function() {
$('.elastic-destroy').trigger('autosize.destroy');
});
// Passy - password generator
// ------------------------------
// Input labels
var $inputLabel = $('.label-indicator input');
var $inputLabelAbsolute = $('.label-indicator-absolute input');
var $inputGroup = $('.group-indicator input');
// Output labels
var $outputLabel = $('.label-indicator > span');
var $outputLabelAbsolute = $('.label-indicator-absolute > span');
var $outputGroup = $('.group-indicator > span');
// Min input length
$.passy.requirements.length.min = 4;
// Strength meter
var feedback = [
{color: '#D55757', text: 'Weak', textColor: '#fff'},
{color: '#EB7F5E', text: 'Normal', textColor: '#fff'},
{color: '#3BA4CE', text: 'Good', textColor: '#fff'},
{color: '#40B381', text: 'Strong', textColor: '#fff'}
];
//
// Setup strength meter
//
// Label indicator
$inputLabel.passy(function(strength) {
$outputLabel.text(feedback[strength].text);
$outputLabel.css('background-color', feedback[strength].color).css('color', feedback[strength].textColor);
});
// Absolute positioned label
$inputLabelAbsolute.passy(function(strength) {
$outputLabelAbsolute.text(feedback[strength].text);
$outputLabelAbsolute.css('background-color', feedback[strength].color).css('color', feedback[strength].textColor);
});
// Input group indicator
$inputGroup.passy(function(strength) {
$outputGroup.text(feedback[strength].text);
$outputGroup.css('background-color', feedback[strength].color).css('border-color', feedback[strength].color).css('color', feedback[strength].textColor);
});
//
// Initialize
//
// Label
$('.generate-label').click(function() {
$inputLabel.passy( 'generate', 12 );
});
// Absolute label
$('.generate-label-absolute').click(function() {
$inputLabelAbsolute.passy( 'generate', 10 );
});
// Group label
$('.generate-group').click(function() {
$inputGroup.passy( 'generate', 8 );
});
// Maxlength
// ------------------------------
// Basic example
$('.maxlength').maxlength();
// Threshold
$('.maxlength-threshold').maxlength({
threshold: 15
});
// Custom label color
$('.maxlength-custom').maxlength({
threshold: 10,
warningClass: "label label-primary",
limitReachedClass: "label label-danger"
});
// Options
$('.maxlength-options').maxlength({
alwaysShow: true,
threshold: 10,
warningClass: "label label-success",
limitReachedClass: "label label-danger",
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.',
validate: true
});
// Always show label
$('.maxlength-textarea').maxlength({
alwaysShow: true
});
// Label position
$('.maxlength-label-position').maxlength({
alwaysShow: true,
warningClass: "label label-danger",
placement: 'top'
});
// ========================================
//
// Typeahead
//
// ========================================
// Basic example
// ------------------------------
// Substring matches
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;
// 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);
};
};
// Add data
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'
];
// Initialize
$('.typeahead-basic').typeahead(
{
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
}
);
// Bloodhound engine
// ------------------------------
// Constructs the suggestion engine
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
// `states` is an array of state names defined in "The Basics"
local: $.map(states, function(state) { return { value: state }; })
});
// Initialize engine
states.initialize();
// Initialize
$('.typeahead-bloodhound').typeahead(
{
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
displayKey: 'value',
// `ttAdapter` wraps the suggestion engine in an adapter that
// is compatible with the typeahead jQuery plugin
source: states.ttAdapter()
}
);
// Prefetched data
// ------------------------------
// Constructs the suggestion engine
var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
limit: 10,
prefetch: {
// url points to a json file that contains an array of country names, see
// https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
url: 'assets/demo_data/typeahead/countries.json',
// the json file contains an array of strings, but the Bloodhound
// suggestion engine expects JavaScript objects so this converts all of
// those strings
filter: function(list) {
return $.map(list, function(country) { return { name: country }; });
}
}
});
// Initialize engine
countries.initialize();
// Passing in `null` for the `options` arguments will result in the default options being used
$('.typeahead-prefetched').typeahead(null, {
name: 'countries',
displayKey: 'name',
// `ttAdapter` wraps the suggestion engine in an adapter that
// is compatible with the typeahead jQuery plugin
source: countries.ttAdapter()
});
// Remote data
// ------------------------------
// Constructs the suggestion engine
var bestPictures = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'assets/demo_data/typeahead/movies.json',
remote: 'assets/json/queries/%QUERY.json'
});
// Initialize engine
bestPictures.initialize();
// Initialize
$('.typeahead-remote').typeahead(null, {
name: 'best-pictures',
displayKey: 'value',
source: bestPictures.ttAdapter()
});
// Custom templates
// ------------------------------
// Initialize with opitons
$('.typeahead-custom-templates').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}}
')
}
});
// Multiple datasets
// ------------------------------
// Constructs the suggestion engine for 1st dataset
var nbaTeams = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'assets/demo_data/typeahead/nba.json'
});
// Constructs the suggestion engine for 2nd dataset
var nhlTeams = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'assets/demo_data/typeahead/nhl.json'
});
// Initialize engines
nbaTeams.initialize();
nhlTeams.initialize();
// Initialize 1st dataset
$('.typeahead-multiple-datasets').typeahead(
{
highlight: true
},
{
name: 'group',
displayKey: 'team',
source: nbaTeams.ttAdapter(),
templates: {
header: 'NBA Teams'
}
},
{
name: 'group',
displayKey: 'team',
source: nhlTeams.ttAdapter(),
templates: {
header: 'NHL Teams'
}
}
);
// Dropdown height
// ------------------------------
// Initialize with options
$('.typeahead-scrollable-menu').typeahead(null, {
name: 'countries',
displayKey: 'name',
source: countries.ttAdapter()
});
// RTL support
// ------------------------------
// Constructs the suggestion engine
var arabicPhrases = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('word'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: [
{ word: "الإنجليزية" },
{ word: "نعم" },
{ word: "لا" },
{ word: "مرحبا" },
{ word: "أهلا" }
]
});
// Initialize engine
arabicPhrases.initialize();
// Initialize
$('.typeahead-rtl-support').typeahead(
{
hint: false
},
{
name: 'arabic-phrases',
displayKey: 'word',
source: arabicPhrases.ttAdapter()
}
);
});