Skip to main content
Code Review

Return to Answer

mention object.assign simplification
Source Link

###Edit:

The code can be simplified by using Object.assign() - each function call to dialog_Handler() can use that to assign the button on the object that gets destructured:

dialog_Handler(Object.assign(arguments[0], {buttons: buttons}));

Then each function can omit the object properties it doesn't use (e.g. message, title)...

//could use const
var dialogId = 'dialogContainer';
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p id='"+dialogId+"'>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 $('#'+dialogId).dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 messageObject.assign(arguments[0], {buttons: buttons}));
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 messageObject.assign(arguments[0], {buttons,
 input
 : buttons}));
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 messageObject.assign(arguments[0], {buttons: buttons}));
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>
//could use const
var dialogContainer = $('#dialogContainer');
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 dialogContainer.text(message).show().dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 dialogContainer.hide();
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 dialogContainer.dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 messageObject.assign(arguments[0], {buttons: buttons}));
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 messageObject.assign(arguments[0], {buttons,
 input
 : buttons}));
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 messageObject.assign(arguments[0], {buttons: buttons}));
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<p id="dialogContainer" style="display: none"></p>
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>

Also, I hadn't really seen much code that useslike the optionsapplication of object destructuring for namingpassing the named parameters - that is quite nifty!

//could use const
var dialogId = 'dialogContainer';
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p id='"+dialogId+"'>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 $('#'+dialogId).dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message, buttons });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message, buttons,
 input
  });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message, buttons });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>
//could use const
var dialogContainer = $('#dialogContainer');
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 dialogContainer.text(message).show().dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 dialogContainer.hide();
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 dialogContainer.dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message, buttons });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message, buttons,
 input
  });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message, buttons });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<p id="dialogContainer" style="display: none"></p>
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>

Also, I hadn't really seen much code that uses the options object for naming the parameters - that is quite nifty!

###Edit:

The code can be simplified by using Object.assign() - each function call to dialog_Handler() can use that to assign the button on the object that gets destructured:

dialog_Handler(Object.assign(arguments[0], {buttons: buttons}));

Then each function can omit the object properties it doesn't use (e.g. message, title)...

//could use const
var dialogId = 'dialogContainer';
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p id='"+dialogId+"'>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 $('#'+dialogId).dialog("close");
}
function dialog_OkCancel({
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler(Object.assign(arguments[0], {buttons: buttons}));
 return;
}
function dialog_Input_OkCancel({
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler(Object.assign(arguments[0], {buttons: buttons}));
 return;
}
function dialog_YesNoCancel({
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler(Object.assign(arguments[0], {buttons: buttons}));
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>
//could use const
var dialogContainer = $('#dialogContainer');
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 dialogContainer.text(message).show().dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 dialogContainer.hide();
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 dialogContainer.dialog("close");
}
function dialog_OkCancel({
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler(Object.assign(arguments[0], {buttons: buttons}));
 return;
}
function dialog_Input_OkCancel({
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler(Object.assign(arguments[0], {buttons: buttons}));
 return;
}
function dialog_YesNoCancel({
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler(Object.assign(arguments[0], {buttons: buttons}));
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<p id="dialogContainer" style="display: none"></p>
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>

I really like the application of object destructuring for passing the named parameters - that is quite nifty!

Bounty Awarded with 50 reputation awarded by Takit Isy
add links to jQuery docs for hide/show
Source Link

One could also create a hidden element in the DOM, have dialog_Handler() update the text/HTML of that element and show it (using .show() - or toggle a class name that shows it), then hide it (using .hide() ) when destroying the dialog. That way, the abstracted close function can just utilize that element.

One could also create a hidden element in the DOM, have dialog_Handler() update the text/HTML of that element and show it, then hide it when destroying the dialog. That way, the abstracted close function can just utilize that element.

One could also create a hidden element in the DOM, have dialog_Handler() update the text/HTML of that element and show it (using .show() - or toggle a class name that shows it), then hide it (using .hide() ) when destroying the dialog. That way, the abstracted close function can just utilize that element.

update explanation
Source Link

It appears that the only difference between dialog_OkCancel and dialog_Input_OkCancel is that it accepts the input parameter and passes that along. One could just combine those two into a single function and if the input parameter is defined, it will get passed along.

See the snippet below whereLooking at the twothree functions are combined into a single function. Presuming that works, one could conceivably merge the functionality of that function intocall dialog_Handler(), but perhaps it appears that wouldn't work because therethe main redundancies are other functions that call that function.with the click handlers for the buttons. See the response to the question below for one technique to simplify that logic.

###Edit: InIn a comment, you asked:

//could use const
var dialogId = 'dialogContainer';
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p id='"+dialogId+"'>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 $('#'+dialogId).dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>

One could also create a hidden element in the DOM, have dialog_Handler() update the text/HTML of that element and show it, then hide it when destroying the dialog. That way, the abstracted close function can just utilize that element.

//could use const
var dialogContainer = $('#dialogContainer');
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 dialogContainer.text(message).show().dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 dialogContainer.hide();
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 dialogContainer.dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<p id="dialogContainer" style="display: none"></p>
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>

It appears that the only difference between dialog_OkCancel and dialog_Input_OkCancel is that it accepts the input parameter and passes that along. One could just combine those two into a single function and if the input parameter is defined, it will get passed along.

See the snippet below where the two functions are combined into a single function. Presuming that works, one could conceivably merge the functionality of that function into dialog_Handler(), but perhaps that wouldn't work because there are other functions that call that function...

###Edit: In a comment, you asked:

//could use const
var dialogId = 'dialogContainer';
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p id='"+dialogId+"'>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 $('#'+dialogId).dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>

Looking at the three functions that call dialog_Handler() it appears that the main redundancies are with the click handlers for the buttons. See the response to the question below for one technique to simplify that logic.

In a comment, you asked:

//could use const
var dialogId = 'dialogContainer';
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 $("<p id='"+dialogId+"'>" + message + "</p>").dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 $('#'+dialogId).dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>

One could also create a hidden element in the DOM, have dialog_Handler() update the text/HTML of that element and show it, then hide it when destroying the dialog. That way, the abstracted close function can just utilize that element.

//could use const
var dialogContainer = $('#dialogContainer');
// jQuery UI dialog custom management
function dialog_Handler({
 title,
 message,
 buttons,
 input
}) {
 dialogContainer.text(message).show().dialog({ // Could use "var dialog = "
 //autoOpen: false, // false would prevents regular opening
 show: "drop",
 open: function(event, ui) {
 // Overlay parameterization
 $("div.ui-widget-overlay").css({
 "background": "#000",
 "opacity": "0.4"
 });
 $(".ui-widget-overlay").hide().fadeIn();
 // Adds some more configuration if input needed
 if (input) {
 // Adds input field right under the message
 $(this).append('<br /><br /><input id="dialog_Input" style="width: 350px; padding: 4px;" type="text" value="' + input + '"><br />');
 // Binds "Enter" to press first button (usually "Ok")
 $(this).keydown(function(event) {
 if (event.keyCode == $.ui.keyCode.ENTER) {
 $(this).parent().find("button:eq(1)").trigger("click");
 return false;
 }
 });
 }
 },
 title: title,
 buttons: buttons,
 modal: true,
 resizable: false,
 height: "auto",
 width: 400,
 hide: {
 effect: "drop",
 duration: "fast"
 },
 closeOnEscape: true,
 // Overlay fadeout
 beforeClose: function(event, ui) {
 // Wait for the overlay to be faded out to try closing again
 if ($('.ui-widget-overlay').is(":visible")) {
 $('.ui-widget-overlay').fadeOut("fast", function() {
 $('.ui-widget-overlay').hide();
 $('.ui-icon-closethick').trigger('click');
 });
 return false;
 }
 },
 close: function() {
 $(this).dialog("destroy");
 dialogContainer.hide();
 }
 });
 return;
}
function closeDialog(callback) {
 (typeof callback === "function") && callback();
 dialogContainer.dialog("close");
}
function dialog_OkCancel({
 title,
 message,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
function dialog_Input_OkCancel({
 title,
 message,
 input,
 funk_Ok
}) {
 var buttons = {
 "Ok": closeDialog.bind(null, funk_Ok),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons,
 input
 });
 return;
}
function dialog_YesNoCancel({
 title,
 message,
 funk_Yes,
 funk_No
}) {
 var buttons = {
 "Yes": closeDialog.bind(null, funk_Yes),
 "No": closeDialog.bind(null, funk_No),
 "Cancel": closeDialog
 }
 dialog_Handler({
 title,
 message,
 buttons
 });
 return;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<p id="dialogContainer" style="display: none"></p>
<button class="dialog" onclick='dialog_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 funk_Ok: function(){ console.log("Sorry. :("); }
 });'>Dialog<br>Ok/Cancel</button>
 <button class="dialog" onclick='dialog_Input_OkCancel({
 title: "Title",
 message: "I do not have any idea for the message.",
 input: "Type something...", 
 funk_Ok: function(){ console.log("Give me more words ! :)"); }
 });'>Dialog<br>Input</button>
 <button class="dialog" onclick='dialog_YesNoCancel({
 title: "Just talking...",
 message: "Are you fine?",
 funk_Yes: function(){ console.log("You said "Yes"! :)"); },
 funk_No: function(){ console.log("You said "No"! :("); }
 });'>Dialog<br>Yes/No/Cancel</button>
Post Undeleted by Sᴀᴍ Onᴇᴌᴀ ♦
update answer per updated question
Source Link
Loading
Post Deleted by Sᴀᴍ Onᴇᴌᴀ ♦
update layout
Source Link
Loading
update layout
Source Link
Loading
update binding of this on click handlers
Source Link
Loading
expand explanation of function binding
Source Link
Loading
mention technique for closing dialog in abstracted function
Source Link
Loading
Source Link
Loading
default

AltStyle によって変換されたページ (->オリジナル) /