Skip to content

Instantly share code, notes, and snippets.

@cyrilis

cyrilis/confirm-rails.js

Created May 22, 2015 10:43
Download ZIP

Revisions

  1. cyrilis created this gist May 22, 2015.
    95 changes: 95 additions & 0 deletions confirm-rails.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    $.rails.allowAction = function(link){
    if(link.attr('data-confirm')){
    $.rails.showConfirm(link);
    return false;
    }else{
    return true;
    }
    };

    $.rails.confirmed = function(link){
    link.removeAttr('data-confirm');
    link.trigger('click.rails');
    };

    $.rails.showConfirm = function (link){
    var option = {
    title: "Are you sure Mr. President?",
    content: "<p>" + $(link).data("confirm") + "</p>",
    confirm: {
    text: "Just do it!",
    callback: function(){
    $.rails.confirmed(link);
    }
    }
    };
    return new Modal(option);
    };


    var Modal = function(option){
    this.init(option);
    return this;
    };
    Modal.prototype = {
    init: function(option){
    this.option = option;
    this.option.confirm = option.confirm || {text: "Confirm"};
    if(typeof option.confirm === "string"){
    this.option.confirm = {
    hide: false,
    text: option.confirm
    };
    }
    this.option.cancel = option.cancel || {text: "Cancel"};
    if(typeof option.cancel === "string"){
    this.cancel = {
    hide: false,
    text: option.cancel
    };
    }
    console.log(option);
    var $body = $("body");
    $body.append("<div class='backdrop'></div>");
    $body.append("<div class='modal-box'>" +
    "<div class='modal-title'>"+ option.title +"<div class='modal-close'>&times;</div></div>" +
    "<div class='modal-body'>" + option.content + "</div>"+
    "<div class='modal-footer'>" +
    "<button class='button modal-cancel'>"+ (option.cancel.text || "Cancel") +"</button>" +
    "<button class='button modal-confirm'>" + (option.confirm.text || "Confirm") + "</button>" +
    "</div>" +
    "</div>");
    this.setup();
    return this;
    },
    setup: function(){
    var self = this;
    var $template = $(".modal-box");
    self.template = $template;
    window.setTimeout(function(){
    $template.addClass("show");
    $(".backdrop").addClass("show");
    }, self.option.delay || 300);
    $template.find(".modal-close").click(function(){
    self.close();
    });
    self.option.confirm.callback = self.option.confirm.callback || function(){};
    self.option.cancel.callback = self.option.cancel.callback || function(){};
    self.template.find(".modal-confirm").click(self.option.confirm.callback.bind(self));
    self.template.find(".modal-cancel").click(self.option.cancel.callback.bind(self));
    self.template.find(".modal-close, .modal-cancel").click(function(){self.close();});
    if (!self.option.stay){self.template.find(".modal-confirm").click(function(){self.close();});}
    },
    show: function(){
    this.template.addClass("show");
    },
    close: function(){
    var self = this;
    self.template.removeClass("show");
    $(".backdrop").removeClass("show");
    window.setTimeout(function(){
    self.template.remove();
    $(".backdrop").remove();
    }, self.option.delay || 300);
    }
    };