JSFiddle - React, Tailwind, and code Playground

by johnny_reilly

HTML

<script src="https://s3-us-west-1.amazonaws.com/q-releases/q.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<h3>Roll your own confirm</h3>

<div class="form-group">
    <label for="confirmMessage">Message</label>
    <input type="text" class="form-control" id="confirmMessage" placeholder="Enter confirm message" value="Answer me this!">
</div>
<div class="form-group">
    <label for="confirmTitle">Title</label>
    <input type="text" class="form-control" id="confirmTitle" placeholder="Enter confirm title (optional)">
</div>
<div class="form-group">
    <label for="confirmOKButtonText">OK Button text</label>
    <input type="text" class="form-control" id="confirmOKButtonText" placeholder="Enter confirm OK Button text (optional)">
</div>
<div class="form-group">
    <label for="confirmOKButtonText">Cancel Button text</label>
    <input type="text" class="form-control" id="confirmCancelButtonText" placeholder="Enter confirm Cancel Button text (optional)">
</div>
<button type="button" class="btn btn-primary" id="dialogButton">Show me the dialog...</button>
<p><strong class="text-success" id="results"></strong></p>

CSS

body {
    padding: 0em 1em 0em;
}
p {
    padding-top: 1em;
}

JavaScript

/**
  * Show a "confirm" dialog to the user (using jQuery UI's dialog)
  *
  * @param {string} message The message to display to the user
  * @param {string} okButtonText OPTIONAL - The OK button text, defaults to "Yes"
  * @param {string} cancelButtonText OPTIONAL - The Cancel button text, defaults to "No"
  * @param {string} title OPTIONAL - The title of the dialog box, defaults to "Confirm..."
  * @returns {Q.Promise<boolean>} A promise of a boolean value
  */
function confirmDialog(message, okButtonText, cancelButtonText, title) {
    okButtonText = okButtonText || "Yes";
    cancelButtonText = cancelButtonText || "No";
    title = title || "Confirm...";

    var deferred = Q.defer();
    $('<div title="' + title + '">' + message + '</div>').dialog({
        modal: true,
        buttons: [{
            // The OK button
            text: okButtonText,
            click: function () {
                // Resolve the promise as true indicating the user clicked "OK"
                deferred.resolve(true);
                $(this).dialog("close");
            }
        }, {
            // The Cancel button
            text: cancelButtonText,
            click: function () {
                $(this).dialog("close");
            }
        }],
        close: function (event, ui) {
            // Destroy the jQuery UI dialog and remove it from the DOM
            $(this).dialog("destroy").remove();
            
            // If the promise has not yet been resolved (eg the user clicked the close icon) 
            // then resolve the promise as false indicating the user did *not* click "OK"
            if (deferred.promise.isPending()) {
                deferred.resolve(false);
            }
        }
    });

    return deferred.promise;
}

$(function () {
    $("#dialogButton").click(function () {

        var confirmMessage = $("#confirmMessage").val();
        if (confirmMessage) {
            confirmDialog(confirmMessage,
                $("#confirmTitle").val(),
 ...