Plugins for small functionalities

xyrin_plugin.js

//plugin for confirm dialogue
(function() {
    //default variables
    {
        $.xt = {};
        $.fn.xt = {};
    }

    //confirm dialogue
    {
        $.xt.confirm = function(msg) {
            var dfd = $.Deferred();
            if(!msg)
                msg = "Are you sure?";
            //target
            {
                var confirm_modal_id = 'xt_confirm_dialogue_modal';
                var target = function() { return $('#' + confirm_modal_id); }
            }
            
            //yes and no buttons
            {
                //ids
                {
                    var yes_btn_id = 'yes';
                    var no_btn_id = 'no';
                }
                
                //selectors
                {
                    var yes_btn = function() {
                        return target().find('#' + yes_btn_id);
                    }
                    var no_btn = function() {
                        return target().find('#' + no_btn_id);
                    }
                }
            }

            //remove taget if exists
            {
                if(target().length)
                    target().remove();
            }
            
            //make html
            var html = '<div class="modal fade" id="' + confirm_modal_id + '" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body" style="border-top: solid 10px #D0373E;padding-top: 0;">' + msg + '</div><div class="modal-footer"> <button type="button" id="' + no_btn_id + '" class="btn btn-sm dark btn-outline">Cancel</button> <button type="button" id="' + yes_btn_id + '" class="btn btn-sm green">Confirm</button> </div></div></div></div>';
            
            //place into dom
            $(html).appendTo('body');
            
            //show modal
            {
                target().modal({
                    backdrop: 'static',
                    keyboard: false,
                });
            }
            yes_btn().click(function() {
                target().modal('hide');
                dfd.resolve();
            });
            no_btn().click(function() {
                target().modal('hide');
                dfd.reject();
            });
            return dfd.promise();
        };
        $.xt.confirm_dialogue = $.xt.confirm;
    }
    
    //prompt dialogue
    {
        $.xt.prompt = function(opts) {
            var dfd = $.Deferred();
            if(typeof opts === 'string')
                opts = {msg: opts};
            opts = $.extend({
                //default values
                msg: "Enter the value!",
                type: 'text',
                autofocus: false,
                keyboard: false,
                value: '',
            }, opts);
    
            //prompt msg
            var msg = opts.msg;
    
            //prompt control
            {
                var prompt_control = '';
                switch (opts.type) {
                    case 'text':
                    case 'number':
                    case 'password':
                    case 'email':
                        prompt_control = '<input name="prompt_control" type="' + opts.type + '" class="form-control" value="' + opts.value + '"' + (opts.autofocus === true ? ' autofocus' : '') + ' />';
                        break;
                    default:
                        prompt_control = '<input name="prompt_control" type="text" class="form-control" value="' + opts.value + '"' + (opts.autofocus === true ? ' autofocus' : '') + ' />';
                        break;
                }
            }
            if($('#prompt_dialogue_modal').length)
                $('#prompt_dialogue_modal').remove();
            var confirm_dialogue_modal_html = '<div class="modal fade" id="prompt_dialogue_modal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body" style="border-top: solid 10px #D0373E;padding-top: 0;"><div class="prompt_msg_container">' + msg + '</div><div class="clearfix"></div><div class="prompt_control_container">' + prompt_control + '</div></div><div class="modal-footer"> <button type="button" id="confirm_dialogue_modal_no" class="btn btn-sm dark btn-outline">Cancel</button> <button type="button" id="prompt_dialogue_modal_yes" class="btn btn-sm green">Done</button> </div></div></div></div>';
            $('body').append(confirm_dialogue_modal_html);
            var confirm_dialogue_modal = $('#prompt_dialogue_modal');
            confirm_dialogue_modal.modal({backdrop: 'static', keyboard: (typeof opts.keyboard === 'boolean' ? opts.keyboard : false)});
            promptControl = confirm_dialogue_modal.find('[name="prompt_control"]');
            if(opts.autofocus === true) {
                confirm_dialogue_modal.on('shown.bs.modal', function() {
                    promptControl.focus();
                });
            }
            if(opts.keyboard === true) {
                promptControl.keydown(function(e) {
                    if(e.keyCode === 13 && promptControl.val())
                        confirm_dialogue_modal.find('#prompt_dialogue_modal_yes').click();
                });
            }
            confirm_dialogue_modal.find('#prompt_dialogue_modal_yes').click(function() {
                confirm_dialogue_modal.modal('hide');
                dfd.resolve($('[name="prompt_control"]').val());
            });
            confirm_dialogue_modal.find('#confirm_dialogue_modal_no').click(function() {
                confirm_dialogue_modal.modal('hide');
                dfd.reject();
            });
            return dfd.promise();
        }
        $.xt.prompt_dialogue = $.xt.prompt;
    }
})(jQuery);

(function($) {
    $.fn.xt_locker = function(opts) {
        opts = $.extend({
            
        }, opts);
        var lock_div = this;

        var locker_icon = $('<div class="xt_locker_icon"><i class="fa fa-lock fa-3x"></i></div>');
        locker_icon.insertBefore(lock_div)
            .attr('style', 'position: absolute;width: 58px;bottom: 25px;left: 25px;z-index: 3;text-align: center;height: 49px;line-height: 70px;cursor: pointer;background: #fff;border-radius: 50% !important')
            .click(function(e) {
                e.preventDefault();
                e.stopPropagation();
                var locker_icon = $(this);
                var icon = locker_icon.find('i');
                locker_icon.toggleClass('dimmed');
                var locker_container = locker_icon.siblings('.xt_locker_container');
                locker_container.toggleClass('locked').css('z-index', '2');
    
                if(locker_container.hasClass('locked')) {
                    icon.removeClass('fa-unlock').addClass('fa-lock');
                } else {
                    locker_container.css('z-index', '0');
                    icon.removeClass('fa-lock').addClass('fa-unlock');
                }
            }).hover(function() {
                $(this).css('opacity', 1);
            }, function() {
                if($(this).hasClass('dimmed'))
                    $(this).css('opacity', 0.2);
            });

        var locker_container = $('<div class="xt_locker_container locked"></div>');
        locker_container.insertBefore(lock_div)
        .attr('style', 'position: absolute;background: #000;opacity: 0.2;top: 0px;height: 100%;cursor: not-allowed;z-index: 2;')
        .css('width', lock_div.outerWidth());
        
        return this;
    }
})(jQuery);