IRMA

Confirm: Buttons 

<form>
    <input hidden name="test" value="test value">

    <button type="submit" class="btn btn-default js-confirm" data-confirm-heading="Are you sure you want<br>to submit this form?" data-confirm-message="Documents will be reviewed for approval." data-confirm-status="good" data-confirm-icon="share-square-o"
        data-confirm-button="Save">Submit</button>
</form>

<div style="margin-top: 40px">
    <button type="button" class="btn btn-default js-confirm" data-confirm-heading="Are you sure you want to<br>delete this record?" data-confirm-message="This action cannot be undone." data-confirm-status="warning" data-confirm-icon="trash-o" data-confirm-button="Delete">Delete</button>
</div>

<div style="margin-top: 40px">
    <button id="save-button" type="button" class="btn btn-default">Custom Confirmation</button>
</div>

<script type="text/javascript">
    document.getElementById('save-button').addEventListener('click', function() {
        var options = {
            confirmStatus: "caution",
            confirmIcon: "exclamation",
            confirmHeading: "Are you sure<br>you want to do this?",
            confirmMessage: "You won't be able to make further changes.",
            confirmButton: "Yes, save",
            confirmCustom: true
        };
        irma.confirm.createNew(options, callbackFunction);
    });
    var callbackFunction = function() {
        alert("You've confirmed it!");
    };
</script>
 
<form>
	<input hidden name="test" value="test value" >

	<button type="submit" class="btn btn-default js-confirm"
		data-confirm-heading="Are you sure you want<br>to submit this form?"
		data-confirm-message="Documents will be reviewed for approval."
		data-confirm-status="good"
		data-confirm-icon="share-square-o"
		data-confirm-button="Save"
		>Submit</button>
</form>

<div style="margin-top: 40px">
	<button type="button" class="btn btn-default js-confirm"
		data-confirm-heading="Are you sure you want to<br>delete this record?"
		data-confirm-message="This action cannot be undone."
		data-confirm-status="warning"
		data-confirm-icon="trash-o"
		data-confirm-button="Delete"
		>Delete</button>
</div>

<div style="margin-top: 40px">
	<button id="save-button" type="button" class="btn btn-default">Custom Confirmation</button>
</div>



<script type="text/javascript">
	document.getElementById('save-button').addEventListener('click', function () {
		var options = {
				confirmStatus: "caution",
				confirmIcon: "exclamation",
				confirmHeading: "Are you sure<br>you want to do this?",
				confirmMessage: "You won't be able to make further changes.",
				confirmButton: "Yes, save",
				confirmCustom: true
			};

		irma.confirm.createNew(options, callbackFunction);
	});

	var callbackFunction = function () {
		alert("You've confirmed it!");
	};
</script>
 
/* No context defined for this component. */
  • Content: 
    .confirm {
	&.modal {
		.modal-inner {
			max-width: 125rem;
		}
	}

	&[data-status="warning"], &[data-status="danger"] {
		.modal-header {
			border-bottom-color: $color-irma-danger;
		}

		.confirm-icon, .btn-confirm-submit {
			background: $color-irma-danger;
		}

		.btn-confirm-submit {
			&:hover, &:focus {
				background: $color-irma-danger-dark;
			}
		}
	}

	&[data-status="good"], &[data-status="success"] {
		.modal-header {
			border-bottom-color: $color-irma-spearmint;
		}

		.confirm-icon, .btn-confirm-submit {
			background: $color-irma-spearmint;
		}

		.btn-confirm-submit {
			&:hover, &:focus {
				background: $color-irma-mint;
			}
		}
	}

	&[data-status="caution"] {
		.modal-header {
			border-bottom-color: $color-irma-goldenrod;
		}

		.confirm-icon, .btn-confirm-submit {
			background: $color-irma-goldenrod;
			color: $color-irma-navy;
		}

		.btn-confirm-submit {
			&:hover, &:focus {
				background: $color-irma-gold;
			}
		}
	}

	.confirm-content {
		text-align: center;

		.button-group {
			margin-top: 10rem;
			justify-content: center;
		}
	}

	.confirm-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 15rem;
		height: 15rem;
		margin: 0 auto;

		border-radius: 50%;
		color: white;

		@include font-size-other(32px);
	}

	.confirm-heading {
		margin-top: 6rem;
	}

	.confirm-body {
		margin-top: 3rem;
	}
}
  • URL: /components/raw/confirm/_confirm.scss
  • Filesystem Path: components/01-components/confirm/_confirm.scss
  • Size: 1.4 KB
  • Content: 
    /* 
 *	_confirm.js
 */

irma.confirm = (function () {
	'use strict';

	var createNew = function (options, callback) {
		$.get(irma.assetPath + '/templates/confirm/confirm.hbs?v=' + irma.templateVersion, function (template) {
			var templateScript = Handlebars.compile(template);

			var html = templateScript(options);

			$('.page-container').append(html);
			irma.modal.openModal('confirm');

			$('.js-confirm-submit-custom').on('click', function () {
				callback();
			});
		});
	};

	var confirm = function ($target, options) {
		$.get(irma.assetPath + '/templates/confirm/confirm.hbs?v=' + irma.templateVersion, function (template) {
			var templateScript = Handlebars.compile(template);

			var html = templateScript(options);

			$('.page-container').append(html);

			irma.modal.openModal('confirm');

			$('.confirm .js-confirm-submit').data('target', $target);
		});
	};

	var init = function () {
		$(document).on('click', '.js-confirm', function (e) {
			var $btn = $(this),
				data = $btn.data();

			if (!data.confirmed) {
				e.stopImmediatePropagation();
				e.preventDefault();
				confirm($btn, data);
			}

			else {
				$btn.data('confirmed', false);	
			}

		}).on('click', '.js-table-action', function (e) {
			var action = _.find(irma.confirmActions, { name: $(this).data().action });

			if (action) {
				var $btn = $(this);

				var data = _.merge(action, $(this).data());

				if (!data.confirmed) {
					e.stopImmediatePropagation();

					confirm($btn, data);
				}
				else {
					$btn.data('confirmed', false);	
				}
			}

		}).on('click', '.js-confirm-submit', function () {
			var $target = $(this).data().target;

			$target.data('confirmed', true)
				.trigger('click');

			$(this).closest('.confirm').remove();

		});
	};

	return {
		init: init,
		createNew: createNew
	};

}());
  • URL: /components/raw/confirm/confirm.js
  • Filesystem Path: components/01-components/confirm/confirm.js
  • Size: 1.8 KB

  • data-confirm-icon reference: https://fontawesome.com/v4.7.0/icons/

  • recommended: use icon “share-square-o” for form submission and “trash-o” for deletion

  • data-status options are “warning” and “good”