LimitLess-admin-panel/assets/js/pages/alpaca_controls.js

/* ------------------------------------------------------------------------------
*
*  # Alpaca - Basic inputs
*
*  Specific JS code additions for alpaca_controls.html page
*
*  Version: 1.0
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */

$(function() {


    // Checkboxes
    // ------------------------------

    // Checkbox with label
    $("#alpaca-checkbox-label").alpaca({
        "data": true,
        "options": {
            "label": "Question:",
            "rightLabel": "Do you like Alpaca?"
        }
    });


    // Display only mode
    $("#alpaca-checkbox-static").alpaca({
        "data": false,
        "view": "bootstrap-display",
        "options": {
            "label": "Registered?"
        }
    });


    // Styled checkbox
    $("#alpaca-checkbox-styled").alpaca({
        "data": true,
        "options": {
            "label": "Question:",
            "rightLabel": "Do you like Alpaca?",
            "fieldClass": "checkbox-styled"
        },
        "postRender": function(control) {
            $('.checkbox-styled').find('input[type=checkbox]').uniform();
        }
    });


    // Disabled checkbox
    $("#alpaca-checkbox-styled-disabled").alpaca({
        "data": true,
        "options": {
            "label": "Question:",
            "rightLabel": "Do you like Alpaca?",
            "fieldClass": "checkbox-styled-disabled",
            "disabled": true
        },
        "postRender": function(control) {
            $('.checkbox-styled-disabled').find('input[type=checkbox]').uniform();
        }
    });


    // Switchery toggle
    $("#alpaca-switchery").alpaca({
        "data": true,
        "options": {
            "label": "Question:",
            "rightLabel": "Do you like Alpaca?",
            "fieldClass": "switchery-demo"
        },
        "postRender": function(control) {

            // Init Switchery
            var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-demo input[type=checkbox]'));
            elems.forEach(function(html) {
              var switchery = new Switchery(html);
            });

            // Add proper spacing
            $('.switchery-demo').find('.checkbox').addClass('checkbox-switchery');
        }
    });


    // Switchery toggle
    $("#alpaca-switchery-disabled").alpaca({
        "data": true,
        "options": {
            "label": "Question:",
            "rightLabel": "Do you like Alpaca?",
            "fieldClass": "switchery-disabled-demo",
            "disabled": true
        },
        "postRender": function(control) {

            // Init Switchery
            var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-disabled-demo input[type=checkbox]'));
            elems.forEach(function(html) {
              var switchery = new Switchery(html);
            });

            // Add proper spacing
            $('.switchery-disabled-demo').find('.checkbox').addClass('checkbox-switchery');
        }
    });


    // Basic checkbox list
    $("#alpaca-checkbox-list").alpaca({
        "data": ["sandwich", "cookie", "drink"],
        "schema": {
            "type": "array",
            "enum": ["sandwich", "chips", "cookie", "drink"]
        },
        "options": {
            "type": "checkbox",
            "label": "What would you like with your order?",
            "optionLabels": ["A Sandwich", "Potato Chips", "A Cookie", "Soft Drink"]
        }
    });


    // Styled checkbox list
    $("#alpaca-checkbox-list-styled").alpaca({
        "data": ["sandwich", "cookie", "drink"],
        "schema": {
            "type": "array",
            "enum": ["sandwich", "chips", "cookie", "drink"]
        },
        "options": {
            "type": "checkbox",
            "label": "What would you like with your order?",
            "optionLabels": ["A Sandwich", "Potato Chips", "A Cookie", "Soft Drink"],
            "fieldClass": "checkbox-styled-list"
        },
        "postRender": function(control) {
            $('.checkbox-styled-list').find('input[type=checkbox]').uniform();
        }
    });



    // Radios
    // ------------------------------

    // Basic radios
    $("#alpaca-radio-basic").alpaca({
        "data": "green",
        "options": {
            "type": "radio",
            "label": "Favorite Color",
            "helper": "Pick your favorite color",
            "optionLabels": {
                "red": "Red",
                "green": "Green",
                "blue": "Blue",
                "white": "White",
                "black": "Black"
            }
        },
        "schema": {
            "required": true,
            "enum": ["red", "green", "blue", "white", "black"]
        }
    });


    // Disabled mode
    $("#alpaca-radio-basic-disabled").alpaca({
        "data": "Jimi Hendrix",
        "schema": {
            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
        },
        "options": {
            "type": "radio",
            "label": "Who is your favorite guitarist?",
            "vertical": true,
            "disabled": true
        }
    });


    // Styled radios
    $("#alpaca-radio-styled").alpaca({
        "data": "Jimi Hendrix",
        "schema": {
            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
        },
        "options": {
            "type": "radio",
            "label": "Who is your favorite guitarist?",
            "fieldClass": "radio-styled-demo",
            "vertical": true
        },
        "postRender": function(control) {
            $('.radio-styled-demo').find('input[type=radio]').uniform({
                radioClass: 'choice'
            });
        }
    });


    // Disabled mode
    $("#alpaca-radio-styled-disabled").alpaca({
        "data": "Jimi Hendrix",
        "schema": {
            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
        },
        "options": {
            "type": "radio",
            "label": "Who is your favorite guitarist?",
            "vertical": true,
            "fieldClass": "radio-styled-disabled-demo",
            "disabled": true
        },
        "postRender": function(control) {
            $('.radio-styled-disabled-demo').find('input[type=radio]').uniform({
                radioClass: 'choice'
            });
        }
    });


    // Required radios
    $("#alpaca-radio-required").alpaca({
        "data": "Coffee2",
        "options": {
            "label": "Ice cream",
            "helper": "Guess my favorite ice cream?",
            "optionLabels": ["Vanilla Flavor", "Chocolate Flavor", "Coffee Flavor"]
        },
        "schema": {
            "required": true,
            "enum": ["Vanilla", "Chocolate", "Coffee"]
        }
    });


    // Options
    $("#alpaca-radio-options").alpaca({
        "data": "Jimi Hendrix",
        "schema": {
            "enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
        },
        "options": {
            "type": "radio",
            "label": "Who is your favorite guitarist?",
            "removeDefaultNone": true,
            "vertical": true
        }
    });



    // Tokenfield
    // ------------------------------

    // Basic setup
    $("#alpaca-tokenfield").alpaca({
        "schema": {
            "title": "Character Names",
            "type": "string"
        },
        "options": {
            "type": "token",
            "focus": false,
            "tokenfield": {
                "autocomplete": {
                    "source": ["marty", "doc", "george", "biff", "lorraine", "mr. strickland"],
                    "delay": 100
                },
                "showAutocompleteOnFocus": true
            }
        },
        "data": "marty,doc,george,biff"
    });


    // Display only mode
    $("#alpaca-tokenfield-static").alpaca({
        "schema": {
            "title": "Character Names",
            "type": "string"
        },
        "options": {
            "type": "token",
            "focus": false,
            "tokenfield": {
                "autocomplete": {
                    "source": ["marty", "doc", "george", "biff", "lorraine", "mr. strickland"],
                    "delay": 100
                },
                "showAutocompleteOnFocus": true
            }
        },
        "data": "marty,doc,george,biff",
        "view": "bootstrap-display"
    });

});