/assets/js/pages/form_controls_extended.js

/* ------------------------------------------------------------------------------
*
*  # 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: [
                '<div class="empty-message">',
                'unable to find any Best Picture winners that match the current query',
                '</div>'
            ].join('\n'),
            suggestion: Handlebars.compile('<p><strong>{{value}}</strong> – {{year}}</p>')
        }
    });



    // 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: '<span class="tt-heading">NBA Teams</span>'
            }
        },
        {
            name: 'group',
            displayKey: 'team',
            source: nhlTeams.ttAdapter(),
            templates: {
                header: '<span class="tt-heading">NHL Teams</span>'
            }
        }
    );



    // 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()
        }
    );

});