- added um-confirm JS library for better UI with js.confirm interfaces;

This commit is contained in:
Mykyta Synelnikov
2024-05-02 13:13:19 +03:00
parent a04c244b97
commit 3b63b19cbb
6 changed files with 237 additions and 3 deletions
+65
View File
@@ -0,0 +1,65 @@
#um_confirm_block {
display: none;
}
#um_confirm_block_back {
background-color: rgba( 0,0,0, 0.2);
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 2147483646;
}
.um_confirm {
position: fixed;
color: #fff;
width: 400px;
background-color: rgb( 0,0,0);
left: 50%;
top: 50%;
z-index: 2147483647;
/*display: none;*/
}
.um_confirm #um_confirm_title {
background-color: rgba(0, 0, 0, 0.4);
border-bottom: 1px solid #5c5c5c;
color: #cccccc;
font-weight: bold;
height: 15px;
padding: 10px;
text-align: center;
width: calc(100% - 20px);
}
.um_confirm #um_confirm_message {
width: calc(100% - 40px);
text-align: center;
padding: 20px;
}
.um_confirm #um_confirm_buttons {
height: 40px;
width: 100%;
}
.um_confirm .um_confirm_button {
/*font-family: verdana, arial;*/
border-top: 1px solid #5c5c5c;
color: #aaa;
font-size: 15px;
font-weight: bold;
float: left;
line-height: 40px;
text-align: center;
width: 50%;
cursor: pointer;
}
.um_confirm .um_confirm_button:hover {
background-color: rgba(0, 0, 0, 0.6);
border-top: 1px solid #fff;
color: #fff;
}
+154
View File
@@ -0,0 +1,154 @@
/*
* WPO Confirm Plugin
* Open dialog popup (YES/NO)
*/
(function( $, undefined ) {
var options;
var default_options = {
'message' : '',
'yes_label' : 'Yes',
'no_label' : 'No'
};
var methods = {
init : function( settings ) {
//merge default & current options
options = $.extend( {}, default_options, settings );
$( this ).each( function() {
$( this ).data( 'options', options );
methods.build.apply( $( this ), [options] );
//init links clicks for show confirm
$( this ).click( function(e) {
var options = $( this ).data( 'options' );
$( '#um_confirm_message' ).html( options.message );
$( '#um_confirm_button_yes' ).html( options.yes_label );
$( '#um_confirm_button_no' ).html( options.no_label );
methods.show.apply( this );
e.stopPropagation();
});
});
},
build : function( settings ) {
if( !methods.is_builded.apply( this ) ) {
var obj = $( '<div id="um_confirm_block"></div>').appendTo( 'body' ).html( '<div class="um_confirm">' +
'<div id="um_confirm_title">Confirmation</div>' +
'<div id="um_confirm_message"></div>' +
'<div id="um_confirm_buttons">' +
'<div id="um_confirm_button_yes" class="um_confirm_button">Yes</div>' +
'<div id="um_confirm_button_no" class="um_confirm_button">No</div>' +
'</div>' +
'</div>' +
'<div id="um_confirm_block_back"></div>' );
$( document ).on( 'click', '#um_confirm_button_yes', function() {
var obj = $( '#um_confirm_block').data( 'obj' );
methods.yes.apply( obj );
});
$( document ).on( 'click', '#um_confirm_button_no', function() {
var obj = $( '#um_confirm_block').data( 'obj' );
methods.no.apply( obj );
});
$( document ).on( 'click', '#um_confirm_block_back', function() {
var obj = $( '#um_confirm_block').data( 'obj' );
methods.close.apply( obj );
});
}
},
is_builded : function() {
//return confirm already exists
return $('#um_confirm_block').length;
},
show : function() {
$( '#um_confirm_block').data( 'obj', this ).show();
var width = $('.um_confirm').width();
var height = $('.um_confirm').height();
$('.um_confirm').css('margin', '-' + height/2 + 'px 0 0 -' + width/2 + 'px' );
},
close : function() {
var opt = $( this ).data( 'options' );
$( '#um_confirm_message' ).html( '' );
$( '#um_confirm_block' ).hide();
if( typeof opt.onClose === "function" ) {
opt.onClose.apply( this );
}
},
yes : function() {
var opt = $( this ).data( 'options' );
var data = {};
if( $( '#um_confirm_block').find('form').length ) {
var temp = $( '#um_confirm_block').find('form').serializeArray();
for( key in temp ) {
data[ temp[ key ]['name'] ] = temp[ key ]['value'];
}
}
methods.close.apply( this );
if( typeof opt.onYes === "function" ) {
opt.onYes.apply( this, [ data ] );
}
},
no : function() {
var opt = $( this ).data( 'options' );
var data = {};
if( $( '#um_confirm_block').find('form').length ) {
var temp = $( '#um_confirm_block').find('form').serializeArray();
for( key in temp ) {
data[ temp[ key ]['name'] ] = temp[ key ]['value'];
}
}
methods.close.apply( this );
if( typeof opt.onNo === "function" ) {
opt.onNo.apply( this, [ data ] );
}
}
};
$.fn.um_confirm = function( method ) {
if( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ) );
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist for jQuery.um_confirm plugin' );
}
};
$.um_confirm = function( settings ) {
options = $.extend( {}, default_options, settings );
$( settings.object ).data( 'options', options );
methods.build.apply( $( settings.object ), [options] );
if ( options.title ) {
$( '#um_confirm_title' ).html( options.title );
}
$( '#um_confirm_message' ).html( options.message );
$( '#um_confirm_button_yes' ).html( options.yes_label );
$( '#um_confirm_button_no' ).html( options.no_label );
methods.show.apply( settings.object );
}
})( jQuery );
+1
View File
@@ -0,0 +1 @@
#um_confirm_block{display:none}#um_confirm_block_back{background-color:rgba(0,0,0,.2);width:100%;height:100%;position:fixed;left:0;top:0;z-index:2147483646}.um_confirm{position:fixed;color:#fff;width:400px;background-color:#000;left:50%;top:50%;z-index:2147483647}.um_confirm #um_confirm_title{background-color:rgba(0,0,0,.4);border-bottom:1px solid #5c5c5c;color:#ccc;font-weight:700;height:15px;padding:10px;text-align:center;width:calc(100% - 20px)}.um_confirm #um_confirm_message{width:calc(100% - 40px);text-align:center;padding:20px}.um_confirm #um_confirm_buttons{height:40px;width:100%}.um_confirm .um_confirm_button{border-top:1px solid #5c5c5c;color:#aaa;font-size:15px;font-weight:700;float:left;line-height:40px;text-align:center;width:50%;cursor:pointer}.um_confirm .um_confirm_button:hover{background-color:rgba(0,0,0,.6);border-top:1px solid #fff;color:#fff}
+1
View File
@@ -0,0 +1 @@
!function(t){var i,n={message:"",yes_label:"Yes",no_label:"No"},m={init:function(o){i=t.extend({},n,o),t(this).each(function(){t(this).data("options",i),m.build.apply(t(this),[i]),t(this).click(function(o){var i=t(this).data("options");t("#um_confirm_message").html(i.message),t("#um_confirm_button_yes").html(i.yes_label),t("#um_confirm_button_no").html(i.no_label),m.show.apply(this),o.stopPropagation()})})},build:function(o){m.is_builded.apply(this)||(t('<div id="um_confirm_block"></div>').appendTo("body").html('<div class="um_confirm"><div id="um_confirm_title">Confirmation</div><div id="um_confirm_message"></div><div id="um_confirm_buttons"><div id="um_confirm_button_yes" class="um_confirm_button">Yes</div><div id="um_confirm_button_no" class="um_confirm_button">No</div></div></div><div id="um_confirm_block_back"></div>'),t(document).on("click","#um_confirm_button_yes",function(){var o=t("#um_confirm_block").data("obj");m.yes.apply(o)}),t(document).on("click","#um_confirm_button_no",function(){var o=t("#um_confirm_block").data("obj");m.no.apply(o)}),t(document).on("click","#um_confirm_block_back",function(){var o=t("#um_confirm_block").data("obj");m.close.apply(o)}))},is_builded:function(){return t("#um_confirm_block").length},show:function(){t("#um_confirm_block").data("obj",this).show();var o=t(".um_confirm").width(),i=t(".um_confirm").height();t(".um_confirm").css("margin","-"+i/2+"px 0 0 -"+o/2+"px")},close:function(){var o=t(this).data("options");t("#um_confirm_message").html(""),t("#um_confirm_block").hide(),"function"==typeof o.onClose&&o.onClose.apply(this)},yes:function(){var o=t(this).data("options"),i={};if(t("#um_confirm_block").find("form").length){var n=t("#um_confirm_block").find("form").serializeArray();for(key in n)i[n[key].name]=n[key].value}m.close.apply(this),"function"==typeof o.onYes&&o.onYes.apply(this,[i])},no:function(){var o=t(this).data("options"),i={};if(t("#um_confirm_block").find("form").length){var n=t("#um_confirm_block").find("form").serializeArray();for(key in n)i[n[key].name]=n[key].value}m.close.apply(this),"function"==typeof o.onNo&&o.onNo.apply(this,[i])}};t.fn.um_confirm=function(o){return m[o]?m[o].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof o&&o?void t.error("Method "+o+" does not exist for jQuery.um_confirm plugin"):m.init.apply(this,arguments)},t.um_confirm=function(o){i=t.extend({},n,o),t(o.object).data("options",i),m.build.apply(t(o.object),[i]),t("#um_confirm_message").html(i.message),t("#um_confirm_button_yes").html(i.yes_label),t("#um_confirm_button_no").html(i.no_label),m.show.apply(o.object)}}(jQuery);