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

/* ------------------------------------------------------------------------------
*
*  # jQuery UI Widgets
*
*  Specific JS code additions for jqueryui_components.html page
*
*  Version: 1.0
*  Latest update: Nov 12, 2015
*
* ---------------------------------------------------------------------------- */

$(function() {


    // Buttons
    // -------------------------

    // Basic button
    $(".jui-button").button();


    // Button set
    $(".jui-button-set").buttonset();


    // Split button
    $(".jui-button-split").button().click(function() {
        alert("Running the last action");
    })
    .next()
    .button({
        text: false,
        icons: {
            primary: "icon-arrow-down22"
        }
    }).click(function() {
        var menu = $( this ).parent().next().show().position({
            my: "right top",
            at: "right bottom",
            of: this
        });

        $(document).one("click", function() {
            menu.hide();
        });
        return false;
    }).parent().buttonset().next().hide().menu();


    //
    // With icons
    //

    // Left icon
    $('.jui-button-icon-left').button({
        icons: {
            primary: "icon-twitter"
        }
    });


    // Right icon
    $('.jui-button-icon-right').button({
        icons: {
            secondary: "icon-dribbble3"
        }
    });


    // Left and right icons
    $('.jui-button-icon-both').button({
        icons: {
        primary: "icon-github4",
            secondary: "icon-arrow-down22"
        }
    });


    // Icons only
    $('.jui-button-icon-both-only').button({
        icons: {
            primary: "icon-github4",
            secondary: "icon-arrow-down22"
        },
        text: false
    });


    // Single icon only
    $('.jui-button-icon-only').button({
        icons: {
            primary: "icon-vimeo"
        },
        text: false
    });



    // Progress bars
    // -------------------------

    // Basic example
    $(".jui-progressbar").progressbar({
        value: 60
    });


    // Maximum value
    $(".jui-progressbar-max").progressbar({
        max: 1000,
        value: 400
    });


    // Indeterminate progress bar
    $(".jui-progressbar-indeterminate").progressbar({
        value: false
    }).on("create", function (event) {
        var target = $(event.target),
        progressbar = $(".jui-progressbar-indeterminate"),
        progressbarValue = progressbar.find(".ui-progressbar-value");
        progressbar.progressbar("option", "value", false);
    });


    //
    // Custom label
    //

    // Define elements
    var progressbar = $( ".jui-progressbar-custom" ),
        progressLabel = $(".ui-progress-label");

    // Initialize progress bar
    progressbar.progressbar({
        value: false,
        change: function() {
            progressLabel.text(progressbar.progressbar("value") + "%");
        },
        complete: function() {
            progressLabel.text("Complete!");
        }
    });

    // Custom progress function
    function progress() {
        var val = progressbar.progressbar("value") || 0;
        progressbar.progressbar("value", val + 2);

        if (val < 99) {
            setTimeout(progress, 80);
        }
    }

    // Update progress after 2000ms
    setTimeout(progress, 2000);



    // Dialogs
    // -------------------------

    // Basic example
    $('#jui-dialog-basic').dialog({
        autoOpen: false,
        width: 400
    });


    // With overlay
    $('#jui-dialog-overlay').dialog({
        autoOpen: false,
        modal: true,
        width: 400
    });


    // Animated
    $('#jui-dialog-animated').dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        show: {
            effect: "fade",
            duration: 500
        },
        hide: {
            effect: "fade",
            duration: 500
        }
    });


    // With buttons
    $('#jui-dialog-buttons').dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        buttons: {
            Save: function() {
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });


    // Buttons with icons
    $('#jui-dialog-buttons-icons').dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        buttons: [
            {
                text: 'Submit',
                icons: {
                    primary: 'icon-checkmark5'
                },
                click: function() {
                    $(this).dialog('close');
                }
            },
            {
                text: 'Cancel',
                icons: {
                    primary: 'icon-cross3'
                },
                click: function() {
                    $(this).dialog('close');
                }
            }
        ]
    });


    // Disable resize
    $('#jui-dialog-resize').dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        resizable: false
    });


    // Disable close on escape
    $('#jui-dialog-close-escape').dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        closeOnEscape: false
    });


    // Disable drag
    $('#jui-dialog-drag-disabled').dialog({
        autoOpen: false,
        modal: true,
        width: 400,
        draggable: false
    });


    // Append to element
    $('#jui-dialog-append').dialog({
        appendTo: '#modal-append-target',
        autoOpen: false,
        modal: true,
        width: 400
    });


    //
    // With forms
    //

    // Vertical form dialog
    $('#jui-dialog-form-vertical').dialog({
        autoOpen: false,
        modal: true,
        width: 500,
        buttons: {
            Submit: function() {
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });


    // Horizontal form dialog
    $('#jui-dialog-form-horizontal').dialog({
        autoOpen: false,
        modal: true,
        width: 500,
        buttons: {
            Submit: function() {
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });


    // Inline form dialog
    $('#jui-dialog-form-inline').dialog({
        autoOpen: false,
        modal: true,
        width: 555,
        buttons: {
            Submit: function() {
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });


    //
    // Optional widths
    //

    // Default width
    $('#jui-dialog-width-default').dialog({
        autoOpen: false,
        modal: true
    });


    // Pixel width
    $('#jui-dialog-width-pixel').dialog({
        autoOpen: false,
        modal: true,
        width: 400
    });


    // Percentage width
    $('#jui-dialog-width-percentage').dialog({
        autoOpen: false,
        modal: true,
        width: '50%'
    });


    // Full width
    $('#jui-dialog-width-full').dialog({
        autoOpen: false,
        modal: true,
        width: '96%'
    });


    //
    // Dialog openers
    //


    $('#jui-dialog-basic-opener').click(function() {
        $('#jui-dialog-basic').dialog('open');
    });

    $('#jui-dialog-overlay-opener').click(function() {
        $('#jui-dialog-overlay').dialog('open');
    });

    $('#jui-dialog-animated-opener').click(function() {
        $('#jui-dialog-animated').dialog('open');
    });

    $('#jui-dialog-buttons-opener').click(function() {
        $('#jui-dialog-buttons').dialog('open');
    });

    $('#jui-dialog-buttons-icons-opener').click(function() {
        $('#jui-dialog-buttons-icons').dialog('open');
    });

    $('#jui-dialog-resize-opener').click(function() {
        $('#jui-dialog-resize').dialog('open');
    });

    $('#jui-dialog-close-escape-opener').click(function() {
        $('#jui-dialog-close-escape').dialog('open');
    });

    $('#jui-dialog-drag-disabled-opener').click(function() {
        $('#jui-dialog-drag-disabled').dialog('open');
    });

    $('#jui-dialog-append-opener').click(function() {
        $('#jui-dialog-append').dialog('open');
    });


    $('#jui-dialog-form-vertical-opener').click(function() {
        $('#jui-dialog-form-vertical').dialog('open');
    });

    $('#jui-dialog-form-horizontal-opener').click(function() {
        $('#jui-dialog-form-horizontal').dialog('open');
    });

    $('#jui-dialog-form-inline-opener').click(function() {
        $('#jui-dialog-form-inline').dialog('open');
    });


    $('#jui-dialog-width-default-opener').click(function() {
        $('#jui-dialog-width-default').dialog('open');
    });

    $('#jui-dialog-width-pixel-opener').click(function() {
        $('#jui-dialog-width-pixel').dialog('open');
    });

    $('#jui-dialog-width-percentage-opener').click(function() {
        $('#jui-dialog-width-percentage').dialog('open');
    });

    $('#jui-dialog-width-full-opener').click(function() {
        $('#jui-dialog-width-full').dialog('open');
    });

});