IRMA

Execute: Overlay 

<div class="execute-overlay">
    <h3 class="title">Please wait...</h3>

    <div class="body">We're processing your request</div>
</div>
 
<div class="execute-overlay">
	<h3 class="title">Please wait...</h3>

	<div class="body">We're processing your request</div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .execute-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 3rem;

	background: rgba($color-irma-navy, 0.85);
	color: white;

	&.-error {
		background: rgba(#494949, 0.85);

		&::after {
			content: 'Something went wrong';

			@include font-size-other(21px);
			@include font-primary-bold;
			text-align: center;
		}

		&::before {
			content: '\f071';

			display: block;
			margin-bottom: 6rem;

			@include font-icon;
			@include font-size-other(54px);
		}

		.title, .body {
			display: none;
		}
	}

	.title {
		@include font-size-other(30px);
		@include font-primary-bold;
		text-align: center;

		&::before {
			content: '';

			display: block;
			width: 200px;
			height: 200px;
			margin-bottom: 16rem;

			background: {
				size: 100%;
				repeat: no-repeat;
				position: center;
				image: url('../img/spinner-white.png');
			}

			animation: progress-spinner 1s linear infinite;
		}
	}

	.body {
		margin-top: 4rem;

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

@keyframes progress-spinner {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}
  • URL: /components/raw/execute/_execute.scss
  • Filesystem Path: components/01-components/execute/_execute.scss
  • Size: 1.2 KB
  • Content: 
    /* 
 *	_execute.js
 */

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

	var executeCode = function (codeBlock) {
		$.get(irma.assetPath + '/templates/execute/execute--overlay.hbs?v=' + irma.templateVersion, function (template) {
			var templateScript = Handlebars.compile(template);

			var html = templateScript();

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

		var url = irma.baseURL + "executeCode.asp?" + irma.urlParams + "&irmaCodeBlock=" + codeBlock;

		$.ajax({
			url: url
		}).done(function (res) {
			if (res.status == 'success') {
				window.location = res.data[0].irmaURLredirect;
			}
			else {
				var $overlay = $('.execute-overlay');

				$overlay.addClass('-error');

				setTimeout(function () {
					$overlay.remove();
				}, 3600);
			}

		}).fail(function (error) {
			var $overlay = $('.execute-overlay');

			$overlay.addClass('-error');

			setTimeout(function () {
				$overlay.remove();
			}, 3600);
		});
	};

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

		});
	};

	return {
		init: init
	};

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

There are no notes for this item.