search-course/public/assets/global/js/demo_pages/alpaca_basic.js

/* ------------------------------------------------------------------------------
 *
 *  # Alpaca - Basic inputs
 *
 *  Demo JS code for alpaca_basic.html page
 *
 * ---------------------------------------------------------------------------- */


// Setup module
// ------------------------------

var AlpacaBasic = function() {


    //
    // Setup module components
    //

    // Alpaca examples
    var _componentAlpaca = function() {
        if (!$().alpaca) {
            console.warn('Warning - alpaca.min.js is not loaded.');
            return;
        }


        // Text input
        // ------------------------------

        // Basic example
        $('#alpaca-basic').alpaca({
            data: 'I Love Alpaca Ice Cream!',
            options: {
                focus: false
            }
        });

        // Display only view
        $('#alpaca-static').alpaca({
            data: 'I Love Alpaca Ice Cream!',
            schema: {
                type: 'string'
            },
            view: 'bootstrap-display'
        });

        // Input field label
        $('#alpaca-input-label').alpaca({
            data: 'I Love Alpaca Ice Cream!',
            options: {
                label: 'Input label',
                focus: false
            }
        });

        // Static input label
        $('#alpaca-static-label').alpaca({
            data: 'I Love Alpaca Ice Cream!',
            schema: {
                type: 'string'
            },
            options: {
                label: 'Input label'
            },
            view: 'bootstrap-display'
        });

        // Validation
        $('#alpaca-validation').alpaca({
            data: 'Mint',
            schema: {
                minLength: 3,
                maxLength: 5
            },
            options: {
                label: 'Ice Cream',
                helper: 'Your favorite ice cream?',
                size: 30,
                focus: false
            }
        });

        // Validation with predefined value
        $('#alpaca-validation-predefined').alpaca({
            data: 'Mint Chocolate',
            schema: {
                minLength: 3,
                maxLength: 5
            },
            options: {
                label: 'Ice Cream',
                helper: 'Please tell us the kind of ice cream you love most!',
                size: 30,
                focus: false,
                placeholder: 'Enter an ice cream flavor'
            }
        });

        // Disallow empty spaces
        $('#alpaca-disallow-empty').alpaca({
            schema: {
                type: 'string'
            },
            options: {
                type: 'lowercase',
                label: 'User Name',
                disallowEmptySpaces: true,
                helper: 'Type something with empty space',
                focus: false
            }
        });

        // Disallow values
        $('#alpaca-disallow-values').alpaca({
            data: 'Mickey Mantle',
            schema: {
                type: 'string',
                disallow: ['Mickey Mantle', 'Mickey']
            },
            options: {
                label: 'Name',
                focus: false
            }
        });

        // Typeahead integration
        $('#alpaca-typeahead').alpaca({
            schema: {
                type: 'string'
            },
            options: {
                type: 'text',
                label: 'Company Name',
                helper: 'Select the name of a computing company',
                placeholder: 'Enter "a"',
                focus: false,
                typeahead: {
                    config: {
                        highlight: true,
                        hint: true,
                        minLength: 1
                    },
                    datasets: {
                        type: 'local',
                        displayKey: 'value',
                        source: ['Google', 'Amazon', 'Microsoft', 'Apple', 'Spotify', 'Alpaca', 'Another company', 'Facebook']
                    }
                }
            }
        });

        // [RTL] Typeahead integration
        $('#alpaca-typeahead-rtl').alpaca({
            schema: {
                type: 'string'
            },
            options: {
                type: 'text',
                label: 'Company Name',
                helper: 'Select the name of a computing company',
                placeholder: 'Enter "a"',
                focus: false,
                fieldClass: 'typeahead-rtl',
                typeahead: {
                    config: {
                        highlight: true,
                        hint: true,
                        minLength: 1
                    },
                    datasets: {
                        type: 'local',
                        displayKey: 'value',
                        source: ['Google', 'Amazon', 'Microsoft', 'Apple', 'Spotify', 'Alpaca', 'Another company', 'Facebook']
                    }
                }
            },
            postRender: function() {
                $('.typeahead-rtl').find('.form-control').attr('dir', 'rtl');
            }
        });

        // Maxlength integration
        $('#alpaca-maxlength').alpaca({
            schema: {
                type: 'string',
                minLength: 3,
                maxLength: 25
            },
            options: {
                type: 'text',
                label: 'What is your name?',
                constrainMaxLength: true,
                constrainMinLength: true,
                showMaxLengthIndicator: true,
                focus: false
            },
            data: 'Jackie Robinson'
        });


        // Textareas
        // ------------------------------

        // Basic textarea
        $('#alpaca-textarea').alpaca({
            data: 'Ice cream or ice-cream is a frozen dessert usually made from dairy products, such as milk and cream, and often combined with fruits or other ingredients and flavours.',
            options: {
                type: 'textarea',
                label: 'Receipt',
                helper: 'Receipt for Best Homemade Ice Cream',
                rows: 4,
                cols: 80,
                focus: false
            }
        });

        // With placeholder
        $('#alpaca-textarea-placeholder').alpaca({
            options: {
                type: 'textarea',
                label: 'Receipt',
                helper: 'Receipt for Best Homemade Ice Cream',
                placeholder: 'Enter your favorite ice cream here...',
                rows: 4,
                cols: 80,
                focus: false
            }
        });

        // Display mode
        $('#alpaca-textarea-static').alpaca({
            data: 'Ice cream or ice-cream is a frozen dessert usually made from dairy products, such as milk and cream, and often combined with fruits or other ingredients and flavours.',
            options: {
                type: 'textarea',
                label: 'Receipt',
                rows: 6,
                cols: 80,
                focus: false
            },
            view: 'bootstrap-display'
        });

        // Single field render
        $('#alpaca-textarea-override').alpaca({
            data: 'My name is Dr. Jacobian and I am a neuroscientist from the Cornell University.  I\'ve perfected a DNA transcription process which makes it possible for the first time to use DNA nucleotides to store pedabytes of information in real-time.',
            schema: {
                type: 'string'
            },
            options: {
                type: 'textarea',
                label: 'Tell us about yourself',
                view: 'bootstrap-display'
            }
        });


        // Selects
        // ------------------------------

        // Basic select
        $('#alpaca-select').alpaca({
            data: 'coffee',
            schema: {
                enum: ['vanilla', 'chocolate', 'coffee', 'strawberry', 'mint']
            },
            options: {
                label: 'Ice cream',
                helper: 'What flavor of ice cream do you prefer?',
                focus: false
            }
        });

        // External data source
        $('#alpaca-select-external').alpaca({
            options: {
                label: 'Ice cream',
                helper: 'Guess my favorite ice cream?',
                type: 'select',
                focus: false,
                dataSource: '../../../../global_assets/demo_data/alpaca/selects.json'
            }
        });
    };

    // Alpaca with Select2
    var _componentAlpacaSelect2 = function() {
        if (!$().alpaca || !$().select2) {
            console.warn('Warning - alpaca.min.js and/or select2.min.js is not loaded.');
            return;
        }

        // Select2 select
        $('#alpaca-select2').alpaca({
            data: 'coffee',
            schema: {
                enum: ['vanilla', 'chocolate', 'coffee', 'strawberry', 'mint']
            },
            options: {
                label: 'Ice cream',
                helper: 'What flavor of ice cream do you prefer?',
                id: 'select2-basic',
                focus: false
            },
            postRender: function(control) {
                $('#select2-basic').select2({
                    minimumResultsForSearch: Infinity
                });
            }
        });

        // Select2 select with search
        $('#alpaca-select2-search').alpaca({
            data: 'coffee',
            schema: {
                enum: ['vanilla', 'chocolate', 'coffee', 'strawberry', 'mint']
            },
            options: {
                label: 'Ice cream',
                helper: 'What flavor of ice cream do you prefer?',
                id: 'select2-search',
                focus: false
            },
            postRender: function(control) {
                $('#select2-search').select2();
            }
        });
    };

    // Alpaca with Multiselect
    var _componentAlpacaMultiselect = function() {
        if (!$().alpaca || !$().multiselect) {
            console.warn('Warning - alpaca.min.js and/or bootstrap-multiselect.js is not loaded.');
            return;
        }

        // Multiselect
        $('#alpaca-multiselect').alpaca({
            data: ['Vanilla', 'Chocolate'],
            schema: {
                type: 'array',
                items: {
                    title: 'Ice Cream',
                    type: 'string',
                    enum: ['Vanilla', 'Chocolate', 'Strawberry', 'Mint'],
                    minItems: 2,
                    maxItems: 3
                }
            },
            options: {
                label: 'Ice cream',
                helper: 'Guess my favorite ice cream?',
                type: 'select',
                size: 5,
                id: 'multiselect',
                focus: false
            }
        });

        // Multiselect with remote data
        $('#alpaca-multiselect-remote').alpaca({
            options: {
                label: 'Select your favorite flavor of ice cream',
                type: 'select',
                multiple: true,
                helper: 'Guess my favorite ice cream?',
                size: 3,
                focus: false,
                id: 'multiselect-remote',
                dataSource: '../../../../global_assets/demo_data/alpaca/selects.json'
            }
        });
    };


    //
    // Return objects assigned to module
    //

    return {
        init: function() {
            _componentAlpaca();
            _componentAlpacaSelect2();
            _componentAlpacaMultiselect();
        }
    }
}();


// Initialize module
// ------------------------------

document.addEventListener('DOMContentLoaded', function() {
    AlpacaBasic.init();
});