<table class="spreadsheet">
    <tr class="table-header table-row">
    </tr>

</table>
<table class="spreadsheet">
	<tr class="table-header table-row">
		{{#each columns }}
		
		<th class="table-cell {{ columnClass }}">
			<span class="text">{{ title }}</span>
			{{#if unit }}
			<span class="unit">{{ unit }}</span>
			{{/if}}
		</th>

		{{/each}}
	</tr>

	{{#each rows }}
		<tr class="table-row">
			{{#each data }}
			<td class="table-cell {{ columnClass }}">
				<input aria-label="{{ label }}" value="{{ value }}">
			</td>
			{{/each}}
		</tr>
	{{/each}}
</table>
/* No context defined for this component. */
  • Content:
    .spreadsheet {
    	.table-row {
    		&:not(.table-header) {
    			border: {
    				bottom: 1px solid $color-irma-silver;
    				left: 1px solid $color-irma-silver;
    			}
    			box-shadow: -1px 0 0 $color-irma-silver inset;
    
    			.table-cell {
    				height: 10rem;
    				overflow: hidden;
    
    				&:not(:first-child) {
    					box-shadow: -1px 0 0 $color-irma-silver;
    				}
    			}
    		}
    	}
    
    	.table-row, .table-cell {
    		&.-invalid {
    			input, textarea, select, .dropdown .dropdown-label, .cke {
    				box-shadow: 0 0 0 1px $color-irma-danger;
    				color: $color-irma-danger;
    			}
    		}
    
    		&.-valid {
    			input, textarea, select, .dropdown .dropdown-label, .cke {
    				box-shadow: 0 0 0 1px $color-irma-spearmint;
    				color: $color-irma-spearmint;
    			}
    		}
    	}
    
    	.table-header {
    		padding: 0 3rem;
    		height: 10rem;
    
    		color: rgba($color-irma-slate, 0.7);
    		border-bottom: 1px solid $color-irma-silver;	
    		background: rgba($color-irma-fog, (1 / 3));
    
    		@include font-primary-bold;
    		text-transform: uppercase;
    
    		.table-cell {
    			padding: 0 2rem;
    
    			color: $color-irma-navy;
    
    			line-height: 10rem;
    			white-space: nowrap;
    			text-overflow: ellipsis;
    
    			&:not(:first-child) {
    				box-shadow: -1px 0 0 rgba($color-irma-fog, (2 / 3));
    			}
    
    			&.-align-right {
    				text-align: right !important;
    			}
    
    			.unit {
    				opacity: 0.8;
    
    				@include font-primary-regular;
    
    				&::before {
    					content: '(';
    				}
    
    				&::after {
    					content: ')';
    				}
    			}
    		}
    	}
    
    	.table-cell {
    		min-width: 21rem;
    
    		color: rgba($color-irma-slate, 0.8);
    
    		line-height: 1.2em;
    		text-align: left;
    
    		&.-align-right {
    			* {
    				text-align: right !important;
    			}
    		}
    
    		input, select {
    			position: relative;
    			z-index: 1;
    
    			height: calc(100% - 2px) !important;
    			width: calc(100% - 3px) !important;
    			margin: 1px 0 0 1px;
    			padding: 0 2rem;
    
    			box-shadow: none;
    
    			line-height: 8rem;
    
    			&:focus {
    				box-shadow: 0 0 0 1px $color-irma-focus inset; 
    			}
    
    			&.-disabled {
    				box-shadow: none;
    			}
    		}
    
    		select {
    			width: 100%;
    
    			background-position: calc(100% - 2rem) center;
    		}
    
    		.dropdown {
    			height: 8rem;
    
    			&:focus {
    				.dropdown-label {
    					box-shadow: 0 0 0 1px $color-irma-focus inset;
    				}
    			}
    
    			.dropdown-label {
    				box-shadow: 0 0 0 1px $color-irma-silver inset;
    
    				line-height: 8.5rem;
    				@include font-size;
    			}
    
    			.dropdown-options {
    				transform: translateY(-1px) translateZ(0);
    				
    				padding: 0;
    
    				box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.075),
    					0 0 0 1px $color-irma-silver inset;
    
    				.dropdown-item {
    					padding: 2rem 4rem;
    				}
    			}
    		}
    	}
    }
  • URL: /components/raw/table/_spreadsheet.scss
  • Filesystem Path: components/01-components/table/_spreadsheet.scss
  • Size: 2.5 KB
  • Content:
    .table {
    	&.-sortable {
    		.table-header {
    			.table-cell {
    				padding-right: 10rem;
    				overflow: hidden;
    				white-space: nowrap;
    				text-overflow: ellipsis;
    			}
    		}
    	}
    
    	.table-input {
    		width: 100%;
    	}
    
    	.table-row {
    		&.table-header {
    			padding: 0 3rem;
    
    			color: rgba($color-irma-slate, 0.7);
    
    			@include font-primary-bold;
    			text-transform: uppercase;
    
    			.table-cell {
    				overflow: hidden;
    				white-space: nowrap;
    				text-overflow: ellipsis;
    
    				.unit {
    					opacity: 0.8;
    
    					@include font-primary-regular;
    
    					&::before {
    						content: '(';
    					}
    
    					&::after {
    						content: ')';
    					}
    				}
    			}
    		}
    
    		&:not(.table-header) {
    			border-bottom: 1px solid $color-irma-silver;
    			// color: rgba($color-irma-slate, 0.8);
    
    			.table-cell:not(.answer-cell) {
    				display: flex;
    				align-items: center;
    				height: 10rem;
    
    				&:not(.cell-actions):not(.table-actions) {
    					overflow: hidden;
    
    					& > * {
    						&:not(input):not(.dropdown):not(select):not(.form-field) {
    							max-height: 7rem;
    							overflow: hidden;
    							text-overflow: ellipsis;
    							-webkit-line-clamp: 2;
    							-webkit-box-orient: vertical;
    							display: -webkit-box;
    						}
    					}
    				}
    			}
    		}
    
    		&:not(.table-header):not(.-with-input) {
    			padding: 0 3rem;
    
    			transition: all $transition;
    		}
    
    		&.table-link {
    			&.-active, &:hover {
    				cursor: pointer;
    			}
    
    			&.-active {
    				background: $color-irma-selected;
    				color: $color-irma-navy;
    
    				.table-cell {
    					.btn-action {
    						&.-active {
    							color: $color-irma-selected;
    						}
    					}
    				}
    			}
    
    			&.-hover:not(.-active), &:focus:not(.-active) {
    				background: $color-irma-hover-select;
    				color: $color-irma-navy;
    
    				.table-cell {
    					.btn-action {
    						&.-active {
    							color: $color-irma-hover-select;
    						}
    					}
    				}
    			}
    		}
    
    		&.-with-input {
    			position: relative;
    
    			&.-hover {
    				.table-group {
    					&::before {
    						box-shadow: 0 0 0 1px $color-irma-mint;
    					}
    
    					&::after {
    						opacity: 0.5;
    					}
    				}
    			}
    
    			input {
    				position: absolute;
    				z-index: 1;
    				top: 50%;
    				transform: translateY(-50%);
    
    				&[type='checkbox'] {
    					left: 3rem;
    				}
    
    				&:focus {
    					& + .table-group {
    						&::before {
    							box-shadow: 0 0 0 1px $color-irma-mint;
    						}
    
    						&::after {
    							opacity: 0.5;
    						}
    					}
    				}
    
    				&:checked {
    					& + .table-group {
    						box-shadow: 0 0 0 1px white;
    						background: rgba($color-irma-mint, 0.15);
    
    						&::before {
    							box-shadow: 0 0 0 1px $color-irma-mint;
    						}
    
    						&::after {
    							opacity: 1;
    						}
    					}
    				}
    			}
    
    			.table-group {
    				position: relative;
    
    				padding: 0 3rem;
    				margin: 0;
    
    				cursor: pointer;
    
    				transition: all $transition;
    
    				&::before, &::after {
    					left: 5.5rem;
    					transform: translate(-50%, -50%);
    				}
    
    				&::before {
    					box-shadow: 0 0 0 1px $color-irma-mist;
    				}
    
    				&::after {
    					background: $color-irma-mint;
    				}
    			}
    
    			.table-cell {
    				&:first-child {
    					padding-left: 10rem;
    				}
    			}
    		}
    
    		&.-highlight-completed {
    			background: rgba($color-irma-success, 0.1);
    		}
    	}
    
    	.table-row, .table-cell {
    		&.-invalid {
    			input, textarea, select, .dropdown .dropdown-label, .cke {
    				box-shadow: 0 0 0 1px $color-irma-danger inset !important;
    				color: $color-irma-danger;
    			}
    		}
    
    		&.-valid {
    			input, textarea, select, .dropdown .dropdown-label, .cke {
    				box-shadow: 0 0 0 1px $color-irma-spearmint inset !important;
    				color: $color-irma-spearmint;
    			}
    		}
    	}
    
    	.table-header {
    		height: 10rem;
    
    		border-bottom: 1px solid $color-irma-silver;	
    		background: rgba($color-irma-fog, (1 / 3));
    
    		& + .table-row {
    			margin-top: 2px;
    		}
    
    		.table-cell {
    			color: $color-irma-navy;
    			line-height: 10rem;
    
    			&.-inactive {
    				opacity: 0.8;
    
    				&:hover {
    					.table-sort {
    						opacity: 0.33;
    					}
    				}
    			}
    
    			&.-active {
    				opacity: 1;
    
    				.table-sort {
    					opacity: 1;
    				}
    			}
    
    			&.-dragging {
    				opacity: 0.1;
    			}
    
    			&.-asc {
    				.table-sort {
    					&::after {
    						transform: rotate(180deg);
    					}
    				}
    			}
    
    			&.-desc {
    				.table-sort {
    					&::after {
    						transform: rotate(0);
    					}
    				}
    			}
    
    			&.table-actions {
    				padding-right: 2rem;
    			}
    		}
    	}
    
    	.table-group {
    		width: calc(100% - 20rem);
    
    		color: inherit;
    		
    		text-decoration: none;
    
    		&.actions-group {
    			position: relative;
    
    			width: 20rem;
    			min-width: 15rem;
    
    			&.status-group {
    				width: 6rem;
    				min-width: 6rem;
    			}
    
    			.table-actions {
    				position: absolute; 
    				left: 0;
    				top: 50%;
    				transform: translateY(-50%);
    
    				width: 100%;
    				height: 100%;
    			}
    
    			.cell-status {
    				position: relative;
    
    				width: 2rem;
    				height: 2rem;
    
    				border-radius: 50%;
    				background: $color-irma-gray;
    
    				&:hover, &:focus {
    					&::after {
    						opacity: 1;
    						visibility: visible;
    					}
    				}
    
    				&::after {
    					content: 'Status: ' attr(data-submitted);
    
    					position: absolute;
    					bottom: 150%;
    					left: 50%;
    
    					display: block;
    					padding: 0 3rem;
    
    					background: $color-irma-navy;
    					border-radius: 2px;
    					color: white;
    					opacity: 0;
    					visibility: hidden;
    
    					@include font-size;
    					line-height: 6rem;
    					text-transform: capitalize;
    					white-space: nowrap;
    
    					transition: all $transition;
    				}
    
    				&[data-submitted="submitted"] {
    					background: $color-irma-success;
    				}
    			}
    		}
    
    		&.checkbox-group {
    			width: 10rem;
    
    			input {
    				margin-top: 2.5rem;
    			}
    		}
    	}
    
    	.table-cell {
    		position: relative;
    
    		overflow-x: hidden;
    		padding-right: 6rem;
    
    		color: rgba($color-irma-slate, 0.8);
    
    		line-height: 1.2em;
    
    		&.-em {
    			color: $color-irma-slate;
    
    			@include font-primary-medium;
    			@include font-size-other(14px);
    		}
    
    		&.-with-input {
    			color: $color-irma-slate;
    		}
    
    		&.-with-icon {
    			.icon {
    				margin-left: 1rem;
    
    				.fa {
    					padding: 0 1rem;
    
    					opacity: 0.33;
    				}
    			}
    		}
    
    		&.-with-actions {
    			.btn-action {
    				flex: 0 0 auto;
    				
    				&:not(:first-child) {
    					margin-left: 3rem;
    				}
    
    				& + * {
    					margin-left: 3rem;
    				}
    			}
    		}
    
    		&.-dragging {
    			opacity: 0.1;
    		}
    
    		&.table-actions {
    			position: relative;
    
    			flex: 1 1 auto;
    			overflow: visible;
    			padding-right: 2rem;
    
    			.actions-list {
    				position: absolute;
    				top: 50%;
    				left: 0;
    				transform: translateY(-50%);
    
    				width: 100%;
    			}
    
    			.action-item {
    				display: inline-block;
    
    				&:not(:first-child) {
    					margin-left: 1rem;
    				}
    			}
    		}
    
    		&.cell-actions {
    			display: flex;
    			justify-content: space-between;
    			align-items: center;
    			padding-right: 0;
    
    			.action-item {
    				flex: 0 0 auto;
    			}
    		}
    	
    		&.-hidden {
    			display: none;
    		}
    
    		&[data-unit] {
    			&::before {
    				content: attr(data-unit);
    			}
    
    			&.-with-input {
    				&::before {
    					position: absolute;
    					top: 50%;
    					left: 1px;
    					transform: translateY(-50%);
    
    					display: flex;
    					justify-content: center;
    					align-items: center;
    					width: calc(8rem - 2px);
    					height: calc(8rem - 2px);
    
    					background: $color-irma-white;
    					border-right: 1px solid #EAEAEA;
    					border: {
    						top-right-radius: 0;
    						bottom-right-radius: 0;
    					}
    
    					@include font-primary-bold;
    				}
    			}
    
    			input {
    				padding-left: 10rem;
    			}
    		}
    
    		.table-sort {
    			position: absolute;
    			top: 0;
    			left: 0;
    
    			width: calc(100% - 6.3rem);
    			height: 100%;
    			padding-right: 0;
    
    			opacity: 0;
    			color: currentColor;
    
    			font-family: $font-icon;
    			text-align: right;
    			line-height: 10.6rem;
    
    			transition: opacity $transition;
    
    			&::after {
    				content: '';
    						
    				transform: rotate(180deg) translateZ(0);
    
    				display: inline-block;
    				width: 3rem;
    				height: 3rem;
    
    				background: {
    					image: url('../img/svg/icon-arrow-down-slate.svg');
    					size: 100%;
    					position: center;
    				}
    			}
    		}
    
    		.table-handle {
    			position: absolute;
    			top: 50%;
    			right: 2rem;
    			transform: translateY(-50%);
    
    			height: calc(100% - 3rem - 2px);
    			padding: 0 1.5rem;
    
    			&.js-table-handle {
    				&:hover {
    					cursor: col-resize;
    				}
    			}
    
    			&::after {
    				content: '';
    
    				display: block;
    				margin: 0 auto;
    				width: 1px;
    				height: 100%;
    
    				background: $color-irma-navy;
    				opacity: 0.1;
    			}
    		}
    
    		.status {
    			color: $color-irma-slate;
    		}
    
    		a {
    			@include font-primary-bold;
    			@include font-size-other(14px);
    
    			text-decoration: none;
    
    			cursor: pointer;
    
    			&:hover, &:focus {
    				text-decoration: underline;
    			}
    		}
    	}
    
    	.column-drag {
    		position: fixed;
    
    		background: white;
    
    		box-shadow: 0 5px 20px 0 rgba(black, 0.1);
    
    		.table-cell {
    			padding: 4rem 6rem;
    			min-height: 16rem;
    
    			border-bottom: 1px solid $color-irma-silver;
    
    			&:first-child {
    				min-height: 10rem;
    				padding: 0 6rem 0 3rem;
    
    				background: rgba($color-irma-fog, (1 / 3));
    				color: $color-irma-navy;
    
    				@include font-primary-bold;
    				text-transform: uppercase;
    				line-height: 10rem;
    			}
    
    			.table-handle {
    				display: none;
    			}
    		}
    	}
    
    	// table forms 
    
    	.table-cell {
    		&.-with-input {
    			overflow: visible !important;
    		}
    
    		.input-group {
    			input[type='checkbox'] {
    				margin: 2px 0;
    
    				&:focus {
    					+ .label {
    						&::before {
    							box-shadow: 0 0 0 1px $color-irma-focus;
    						}
    					}
    				}
    
    				&:hover {
    					+ .label {
    						&::before {
    							box-shadow: 0 0 0 1px $color-irma-focus;
    						}
    					}
    				}
    
    				+ .label {
    					&::before {
    						box-shadow: 0 0 0 1px #ACB2BC;
    
    						transition: all $transition;
    					}
    				}
    			}
    		}
    
    		input, select {
    			max-width: 100%;
    			width: auto;
    
    			&.-disabled {
    				box-shadow: none;
    			}
    
    			&:not([type='checkbox']):not([type='radio']) {
    				height: 8rem;
    				width: 100%;
    
    				line-height: 8rem;
    
    				box-shadow: 0 0 0 1px $color-irma-silver inset;
    
    				&:focus {
    					box-shadow: 0 0 0 1px $color-irma-focus inset; 
    				}
    			}
    
    			&[type='checkbox'] {
    				width: 5rem;
    			}
    		}
    
    		select {
    			width: 100%;
    			padding-right: 8rem;
    
    			background-position: calc(100% - 2rem) center;
    		}
    
    		input {
    			&[disabled] {
    				+ .search-advanced-cell {
    					border-left: 1px solid rgba(black, 0.1);
    				}
    			}
    		}
    
    		.search-box {
    			input {
    				padding-right: 10rem;
    
    				text-overflow: ellipsis;
    			}
    		}
    
    		.dropdown {
    			height: 8rem;
    
    			&:focus {
    				.dropdown-label {
    					box-shadow: 0 0 0 1px $color-irma-focus inset;
    				}
    			}
    
    			.dropdown-label {
    				box-shadow: 0 0 0 1px $color-irma-silver inset;
    
    				line-height: 8.5rem;
    				@include font-size;
    			}
    
    			.dropdown-options {
    				transform: translateY(-1px) translateZ(0);
    				
    				padding: 0;
    
    				box-shadow: 0 5px 14px 0 rgba(0, 0, 0, 0.075),
    					0 0 0 1px $color-irma-silver inset;
    
    				.dropdown-item {
    					padding: 2rem 4rem;
    				}
    			}
    		}
    
    		.date-field {
    			input {
    				padding-right: 12rem;
    			}
    		}
    
    		.btn-date-picker {
    			width: 8rem;
    			height: calc(8rem - 2px);
    			margin-top: 1px;
    
    			&::after {
    				line-height: 8rem;
    			}
    		}
    
    		.form-field {
    			width: 100%;
    
    			input:not([type='checkbox']) {
    				width: 100%;
    			}
    		}
    
    		.search-advanced-cell {
    			position: absolute;
    			top: 50%;
    			transform: translateY(-50%);
    			right: 0;
    			
    			height: calc(8rem - 2px);
    
    			border-left: 1px solid $color-irma-silver;
    
    			.btn {
    				width: 8rem;
    				height: 100%;
    
    				color: $color-irma-navy;
    				border: {
    					bottom-right-radius: 0.5rem;
    					top-right-radius: 0.5rem;
    				}
    
    				text-align: center;
    
    				* {
    					margin: 0;
    
    					color: inherit;
    				}
    
    				&:hover, &:focus {
    					background: $color-irma-navy;
    					color: white;
    				}
    			}
    		}
    
    		.search-tags {
    			left: 0;
    			padding-left: 2rem;
    			padding-right: 10rem;
    			width: 100%;
    			height: 6rem;
    
    			pointer-events: none;
    
    			.tag-item {
    				max-width: 100%;
    				width: auto;
    				overflow: hidden;
    				
    				text-overflow: ellipsis;
    				white-space: nowrap;
    
    				pointer-events: auto;
    			}
    		}
    	}
    }
  • URL: /components/raw/table/_table.scss
  • Filesystem Path: components/01-components/table/_table.scss
  • Size: 11.8 KB
  • Content:
    /* 
     *	_table-actions.js
     */
    
    irma.tableActions = (function () {
    	'use strict';
    
    	var $body = $('body');
    
    	var doAction = function (name, data, $btn) {
    		// console.log('Doing \"' + name + '\"', data);
    
    		switch(name) {
    			case "details":
    				var id = data.return ? data.return : data.value;
    				var searchValue = data.customModalSearchValue ? data.customModalSearchValue : $btn.data().customModalSearchValue;
    				actionDetails(id, searchValue, $btn);
    				break;
    
    			case "search-delete":
    				actionDeleteSearch(data.id, data.title, $btn);
    				break;
    
    			case "record-delete":
    				actionDeleteRecord(data.id, $btn.closest('.table').data().module);
    				break;
    
    			case "record-edit":
    				actionGetRecord(data.id, $btn.closest('.table').data().module);
    				break;
    
    			case "record-clone":
    				actionCloneRecord(data.id, $btn.closest('.table').data().module);
    				break;
    
    			case "gui-new":
    				irma.searchPanel.newGUI($('.modal-gui-new'));
    				break;
    
    			case "gui-select":
    				irma.searchPanel.loadGUIList();
    				break;
    
    			case "gui-update":
    				irma.searchPanel.newGUI($('.modal-gui-update'), irma.storage.get('userSettings').customGUI);
    				break;
    
    			case "gui-delete":
    				irma.searchPanel.deleteGUI(data.title, data.id);
    				break;
    
    			case "new-row":
    				actionGetRecord("New", data.module);
    				break;
    
    			case "view-document":
    				actionViewDocument(data, $btn);
    				break;
    
    			case "clear-code":
    				clearCode($btn);
    				break;
    
    			default:
    				break;
    		}
    	};
    
    	var documentWindow;
    
    	var clearCode = function ($btn) {
    		$btn.closest('.table-row').find('input').val('');
    	};
    
    	var actionViewDocument = function (data, $target) {
    		documentWindow = window.open('');
    
    		var url = irma.baseURL + "getMyDocument.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + irma.userId + "&moduleName=" + data.moduleName + "&moduleRecordID=" + data.documentId;
    
    		$.ajax({
    			url: url,
    			success: function (res) {
    				if (res.status == "success") {
    					if (res.data[0].irmaDocumentStatus == "success") {
    						displayDocument(res.data[0]);
    					}
    					else {
    						irma.alert.createAlert({
    							title: "Error loading document",
    							info: (res.data[0].irmaDocumentMessage)
    						}, $target.closest('.card-section'));
    						documentWindow.close();
    					}
    				}
    				else {
    					irma.alert.createAlert({
    						title: "Error loading document",
    						info: (res.reason)
    					}, $target.closest('.card-section'));
    					documentWindow.close();
    				}
    			},
    			error: function (jqXHR, textStatus) {
    
    			},
    			complete: function () {
    
    			}
    		});
    	};
    
    	var displayDocument = function (data) {
    		documentWindow.location = data.irmaDocumentURL;
    	};
    
    	var actionDetails = function (id, searchValue, $btn) {
    		var active = $btn.is('.-active');
    
    		$('.btn-action').removeClass('-active');
    
    		irma.tooltip.removeAll();
    
    		var url = irma.baseURL + "createMyModal.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + id + "&searchValue=" + searchValue;
    
    		if (active || $btn.is('.-active')) {
    		}
    		else {
    			$btn.addClass('-active');
    
    			$.ajax({
    				url: url
    			}).done(function (results) {
    				if (results.data && results.data.length > 0 && results.data[0].lineType) {
    					sortDetails(results.data, $btn);
    				}
    				else {
    					console.log("Please check createMyModal response data.");
    				}
    
    			}).fail(function (jqXHR, textStatus) {
    				irma.logger.postLog(textStatus, url);
    			});
    		}
    	};
    
    	var sortDetails = function (res, $btn) {
    		var lines = _.filter(res, function (r) {
    			return r.lineType.toLowerCase() != 'header';
    		});
    
    		// var externalLinks = irma.hasOwnProperty("debug") && irma.debug.hasOwnProperty("tooltip") && irma.debug.tooltip.hasOwnProperty("newWindow") ? irma.debug.tooltip.newWindow : true;
    
    		var rows = _.map(lines, function (row) {
    			var data = [];
    			for (var j = 1; j <= 2; j++) {
    				var link = row['lineLinkType' + j].toLowerCase(),
    					value = row['lineData' + j],
    					href = value,
    					display = row['lineDataDisplay' + j] && row['lineLinkType' + j].length > 0 ? row['lineDataDisplay' + j] : value;
    
    				switch (link) {
    					case 'hyperlink':
    						if (href.indexOf('http') < 0) {
    							href = "http://" + href;
    						}
    						break;
    					case 'email':
    						href = "mailto:" + href;
    						break;
    					case 'telephone':
    						href = "tel:" + href;
    						break;
    					default: 
    						break;
    				}
    
    				if (row['lineData' + j].length > 0) {
    					data.push({
    						value: value,
    						link: link.length > 0,
    						href: href,
    						external: link == 'hyperlink',
    						display: display
    					});
    				}
    			}
    
    			var rowClass = '';
    
    			switch (row.lineType.toLowerCase()) {
    				case 'heading':
    					rowClass = 'subheadline';
    					break;
    				case 'line':
    					rowClass = 'divider';
    					break;
    				default: 
    					rowClass = 'row';
    					break;
    			}
    
    			var r = {
    				class: rowClass,
    				label: row.lineLabel,
    				columns: 1 + data.length,
    				align: row.lineDataJustify.toLowerCase(),
    				data: data
    			};
    			if (r.align == 'left' && data.length > 0) {
    				r.columns = 3;
    			}
    
    			return r;
    		});
    
    		var context = {
    			rows: rows,
    			title: _.find(res, { lineType: 'Header' }).lineLabel
    		};
    
    		showDetails(context, $btn);
    	};
    
    	var showDetails = function (context, $btn) {
    		$.get(irma.assetPath + '/templates/tooltip/tooltip--custom.hbs?v=' + irma.templateVersion, function (template) {
    			var templateScript = Handlebars.compile(template);
    
    			var html = templateScript(context);
    
    			var $tooltip, position, yMin, yMax, 
    				translate = 0;
    
    			if ($('.modal.-active').length) {
    				$tooltip = $btn.closest('.modal-inner').append(html).find('.tooltip');
    			
    				position = {
    						x: $btn.offset().left,
    						y: $btn.offset().top + $btn.height() / 2 - $body.scrollTop()
    					};
    
    				yMax = window.innerHeight - $tooltip.height() / 2 - 20;
    				yMin = $tooltip.height() / 2 + 20;
    			}
    			else {
    				$tooltip = $btn.closest('.content').append(html).find('.tooltip');
    			
    				position = {
    						x: $btn.offset().left,
    						y: $btn.offset().top + $btn.height() / 2 - $(window).scrollTop()
    					};
    
    				yMax = window.innerHeight - $tooltip.height() / 2 - 20;
    
    				yMin = $tooltip.height() / 2 + 20 + $('.site-header').height();
    			}
    
    			if (position.y > yMax) {
    				translate = yMax - position.y;
    			}
    			else if (position.y < yMin) {
    				translate = yMin - position.y;
    			}
    
    			$tooltip.addClass('-active').css({
    				'left': '' + position.x + 'px',
    				'top': '' + position.y + 'px'
    			}).find('.tooltip-inner').css({
    				'transform': 'translateY(' + translate + 'px)' 
    			});
    
    			irma.units.init();
    		});
    	};
    
    	var actionGetRecord = function (id, module) {
    		// pass id = 'New' for new record;
    
    		var url = irma.baseURL + "getMyRecord.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + irma.userId + "&moduleRecordID=" + id + "&moduleName=" + module;
    
    		$.ajax({
    			url: url
    		}).done(function (results) {
    			var data = results.data[0];
    		
    			if (data && data.irmaURLredirect && data.irmaURLredirect.length) {
    				window.location = data.irmaURLredirect;
    			}
    
    		}).fail(function (jqXHR, textStatus) {
    			irma.logger.postLog(textStatus, url);
    		});
    	};
    
    	var actionCreateRecord = function (id, parent, module) {
    		// pass id = 'New' for new record;
    
    		var url = irma.baseURL + "createMyRecord.asp?" + irma.urlParams + "&moduleRecordID=" + id + "&moduleParentRecordID=" + parent + "&moduleName=" + module;
    
    		$.ajax({
    			url: url
    		}).done(function (results) {
    			var data = results.data[0];
    		
    			if (data && data.irmaURLredirect && data.irmaURLredirect.length) {
    				window.location = data.irmaURLredirect;
    			}
    
    		}).fail(function (jqXHR, textStatus) {
    			irma.logger.postLog(textStatus, url);
    		});
    	};
    
    	var actionDeleteRecord = function (id, module) {
    		var url = irma.baseURL + "deleteMyRecord.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + irma.userId + "&moduleRecordID=" + id + "&moduleName=" + module;
    
    		$.ajax({
    			url: url
    		}).done(function (results) {
    			var data = results.data[0];
    		
    			if (data && data.irmaURLredirect && data.irmaURLredirect.length) {
    				window.location = data.irmaURLredirect;
    			}
    
    		}).fail(function (jqXHR, textStatus) {
    			irma.logger.postLog(textStatus, url);
    		});
    	};
    
    	var actionCloneRecord = function (id, module) {
    		var url = irma.baseURL + "cloneMyRecord.asp?" + irma.urlParams + "&irmaWebServiceLookupID=" + irma.userId + "&moduleRecordID=" + id + "&moduleName=" + module;
    
    		$.ajax({
    			url: url
    		}).done(function (results) {
    			var data = results.data[0];
    		
    			if (data && data.irmaURLredirect && data.irmaURLredirect.length) {
    				window.location = data.irmaURLredirect;
    			}
    
    		}).fail(function (jqXHR, textStatus) {
    			irma.logger.postLog(textStatus, url);
    		});
    	};
    
    	var actionDeleteSearch = function (id, title, $btn) {
    		var url = irma.baseURL + "saveMySearchState.asp?" + irma.urlParams + "&SearchModule=" + irma.searchModule + "&SearchTitle=" + title + "&SearchID=" + id + "&SearchType=delete";
    
    		$.ajax({
    			url: url
    		}).done(function (results) {
    			irma.searchPanel.loadSavedSearches($btn.closest('.modal'));
    
    		}).fail(function (jqXHR, textStatus) {
    			irma.logger.postLog(textStatus, url);
    		});
    	};
    
    	var init = function () {
    		$(document).on('click', '.js-table-action', function (e) {
    			e.stopPropagation();
    
    			doAction($(this).data().action, $(this).closest('.table-row').data(), $(this));
    
    		}).on('click', '.js-page-action', function (e) {
    			e.stopPropagation();
    
    			var action = $(this).data().action;
    
    			irma.modal.openModal(action);
    
    			doAction(action, $(this).data());
    
    		}).on('click', '.js-cell-action', function (e) {
    			e.stopPropagation();
    
    			doAction($(this).data().action, $(this).data(), $(this));
    
    		}).on('click', '.js-edit-record', function (e) {
    			e.stopPropagation();
    
    			actionGetRecord($(this).data().id, $(this).closest('.table').data().module);
    
    		}).on('click', '.js-create-record', function (e) {
    			e.stopPropagation();
    
    			var data = $(this).closest('.search-results').data();
    
    			actionCreateRecord($(this).closest('.table-row').data().return, data.parent, data.module);
    
    		}).on('click', '.js-parent-create-record', function (e) {
    			e.stopPropagation();
    
    			var data = $(this).data();
    
    			actionCreateRecord(data.create, data.parent, data.module);
    
    		}).on('mouseover click', '.table-actions, .cell-actions .action-item', function (e) {
    			$(this).blur();
    			e.stopPropagation();
    
    		}).on('mouseover', '.js-table-action, .js-cell-action', function (e) {
    			e.stopPropagation();
    
    		}).on('click', '.js-table-link', function (e) {
    			if (!$(e.target).is('.btn')) {
    				window.location = $(this).data().href;
    			}
    
    		}).on('click', '.js-open-document', function (e) {
    			e.preventDefault();
    
    			actionViewDocument($(this).data(), $(this));
    		});
    	};
    
    	return {
    		init: init
    	};
    
    }());
  • URL: /components/raw/table/table-actions.js
  • Filesystem Path: components/01-components/table/table-actions.js
  • Size: 10.7 KB
  • Content:
    /* 
     *	_table.js
     */
    
    irma.table = (function () {
    	'use strict';
    
    	var ct = {},
    		resizing = false,
    		dragging = false,
    		minWidth = 10,
    		$body = $('body'),
    		dragStart,
    		$searchForm;
    
    	var resizeTable = function (e) {
    		var t = ct,
    			deltaX = t.mouse.x - e.pageX,
    			width = [];
    
    		if (t.width[0] - deltaX > t.min && t.width[1] + deltaX > t.min) {
    			for (var i = 0; i < 2; i++) {
    				width[i] = t.width[i] + (2 * i - 1) * deltaX;
    
    				t.$column[i].css({
    					width: "" + width[i] + "px"
    				});
    			}
    		}
    	};
    
    	var isDragging = function () {
    		return resizing || dragging;
    	};
    
    	var saveTable = function () {
    		var t = ct,
    			pct = [];
    
    		for (var i = 0; i < 2; i++) {
    			pct[i] = 100 * t.$column[i].outerWidth() / t.$column[i].closest('.table-group').width();
    			t.$column[i].css('width', '' + pct[i] + '%');
    		}
    
    		var customGUI = irma.storage.get('userSettings').customGUI || { columns: [] };
    
    		_.forEach(customGUI.columns, function (column, i) {
    			for (var j = 0; j < 2; j++) {
    				if (t.$column[j].data().name == column.name) {
    					customGUI.columns[i].width = '' + pct[j] + '';
    				}
    			}
    		});
    
    		irma.settings.saveGUI(customGUI, ($searchForm.length > 0));
    	};
    
    	var dragColumn = function (e) {
    		var position = {
    			x: ct.position.x - (ct.mouse.x - e.pageX), 
    			y: ct.position.y - (ct.mouse.y - e.pageY) 
    		};
    
    		ct.$drag.css({
    			left: '' + position.x + 'px',
    			top: '' + position.y + 'px'
    		});
    
    		if (Math.abs(ct.mouse.x - e.pageX) > 20) {
    			_.forEach(ct.grid, function (line, i) {
    				if ((i === 0 && position.x < line) || (position.x < line && position.x >= ct.grid[i - 1] - 40)) {
    					ct.$column.css('order', i * 10 + 5);
    					ct.newOrder = i;
    				}
    				else if (position.x >= line - 40) {
    					ct.$column.css('order', i * 10 + 15);
    					ct.newOrder = i + 1;
    				}
    			});
    		}
    		else {
    			ct.$column.css('order', ct.column * 10);
    			ct.newOrder = ct.column;
    		}
    	};
    
    	var setColumn = function () {
    		$('.column-drag').animate({
    			opacity: 0
    		}, 300, function () {
    			$(this).remove();
    		});
    
    		ct.$column.removeClass('-dragging');
    
    		if (ct.column != ct.newOrder) {
    			var settings = irma.storage.get('userSettings'),
    				customGUI = settings.customGUI,
    				columns = customGUI.columns,
    				order = ct.column - 1,
    				mover = columns[order],
    				prev;
    
    			ct.newOrder += ct.newOrder > order ? -1 : 0;
    
    			_.forEach(columns, function (column, i) {
    				if (ct.newOrder > order) {
    					if (i > order && i <= ct.newOrder) {
    						columns[i - 1] = column;
    					}
    				}
    				else if (ct.newOrder < order) {
    					if (i >= ct.newOrder && i < order) {
    						if (i == ct.newOrder) {
    							prev = column;
    						}
    
    						var c = columns[i + 1];
    						columns[i + 1] = prev;
    						prev = c;
    					}
    				}
    			});
    
    			columns[ct.newOrder] = mover;
    			customGUI.columns = columns;
    
    			irma.settings.saveGUI(customGUI, ($searchForm.length > 0));
    
    			var searchResults = irma.storage.get('searchResults');
    
    			irma.searchPanel.sortRecords(searchResults.results, searchResults.data);
    		}
    	};
    
    	var init = function () {
    		$searchForm = $('.search-form');
    
    		$(document).on('mousedown', '.js-table-handle', function (e) {
    			e.stopPropagation();
    
    			ct = {
    				$table: $(this).closest('.table'),
    				$group: $(this).closest('.table-group'),
    				column: $(this).closest('.table-cell').index(),
    				$handle: $(this),
    				mouse: {
    					x: e.pageX,
    					y: e.pageY
    				}
    			};
    
    			ct.min = ct.$group.width() * minWidth / 100;
    			ct.$column = [];
    			ct.width = [];
    			ct.pct = [];
    			for (var i = 0; i < 2; i++) {
    				ct.$column[i] = ct.$table.find('.table-cell:not(.table-actions)').filter(":nth-child(" + (ct.column + i + 1).toString() + ")");
    				ct.width[i] = ct.$column[i].outerWidth();
    				ct.pct[i] = 100 * ct.width[i] / ct.$group.outerWidth();
    			}
    
    			resizing = true;
    
    			$('body, .table-row').css({
    				'cursor': 'col-resize',
    				'user-select': 'none'
    			});
    
    		}).on('mousemove', function (e) {
    			if (resizing) {
    				resizeTable(e);
    			}
    
    		}).on('mouseup', function () {
    			if (resizing) {
    				resizing = false;
    
    				$('body').css({
    					'cursor': 'auto',
    					'user-select': 'auto'
    				});
    				$('.table-row').css({
    					'cursor': 'pointer',
    					'user-select': 'auto'
    				});
    
    				saveTable();
    			}
    		});
    
    		$(document).on('mousedown', '.js-table-drag', function (e) {
    			ct = {
    				$table: $(this).closest('.table'),
    				column: $(this).closest('.table-cell').index() + 1,
    				mouse: {
    					x: e.pageX,
    					y: e.pageY
    				},
    				width: $(this).closest('.table-cell').outerWidth(),
    				grid: []
    			};
    
    			ct.newOrder = ct.column;
    
    			ct.position = {
    				x: $(this).offset().left,
    				y: $(this).offset().top - $(window).scrollTop()
    			};
    
    			ct.$table.find('.table-row .table-group:not(.actions-group)').eq(0).find('.table-cell').each(function (i) {
    				ct.grid[i] = $(this).offset().left + 20;
    			});
    
    			ct.$column = ct.$table.find('.table-group:not(.actions-group) .table-cell:nth-child(' + ct.column +')');
    
    			var $html = $('<div></div>').addClass('column-drag').css({
    				left: '' + ct.position.x + 'px',
    				top: '' + ct.position.y + 'px',
    				width: '' + ct.width + 'px'
    			});
    
    			ct.$column.each(function () {
    				$html.append($(this).clone().removeAttr('style'));
    			});
    
    			$('body').css('user-select', 'none');
    
    			dragStart = setTimeout(function () {
    				dragging = true;
    
    				ct.$table.append($html);
    
    				ct.$drag = ct.$table.find('.column-drag');
    
    				ct.$column.addClass('-dragging');
    			}, 200);
    		}).on('mousemove', function (e) {
    			if (dragging) {
    				dragColumn(e);
    			}
    
    		}).on('mouseup', function (e) {
    			clearInterval(dragStart);
    
    			if (dragging) {
    				dragging = false;
    
    				setColumn();
    			}
    
    			$('body').css('user-select', 'auto');
    		});
    
    		$(document).on('mouseover', '.table-link', function (e) {
    			$(this).addClass('-hover');
    		}).on('mouseout', '.table-link', function (e) {
    			$(this).removeClass('-hover');
    		});
    
    		$(document).on('click', '.js-table-checkbox', function () {
    			$(this).find('*').blur();
    			
    		}).on('click', '.js-table-select', function () {
    			var $table = $(this).closest('.table'),
    				$form = $(this).closest('form'),
    				message = $(this).data().message;
    
    			$table.find('input:checked').not($(this).find('input')).prop('checked', false);
    
    			if ($table.find('input:checked').length) {
    				message = message && message.length ? message : "No message provided";
    
    				$form.find('.approval-message .body').html(message);
    
    				$form.find('.hidden-group').removeClass('-hidden');
    			}
    			else {
    				$form.find('.hidden-group').addClass('-hidden');
    			}
    
    		}).on('click', '.js-table-link', function () {
    			window.location = $(this).data().href;
    
    		}).on('click', '.table-cell input', function (e) {
    
    			e.stopPropagation();
    
    			var $row = $(this).closest('.js-table-checkbox'),
    				$checkbox = $row.find("input[type='checkbox']");
    
    			if ($row.length && !$checkbox.is(':checked')) {
    				$checkbox.prop('checked', true);
    			}
    		}).on('mouseover', '.table-row.-with-input', function () {
    			$(this).addClass('-hover');
    
    		}).on('mouseout', '.table-row.-with-input', function () {
    			$(this).removeClass('-hover');
    
    		});
    
    		// table addition 
    
    		$(document).on('keyup change', '.js-table-addend', function () {
    			var $row = $(this).closest('.table-row'),
    				$addends = $row.find('.js-table-addend input'),
    				$sum = $row.find('.js-table-sum');
    
    			var sum = function ($array) {
    				var addend = $array.eq(0).val();
    
    				return ($array.length === 0) ? 0 : (addend.length ? parseInt(addend) : 0) + sum($array.slice(1));
    			};
    
    			$sum.find('.text').text(sum($addends));
    			$sum.find('input').val(sum($addends));
    		});
    	};
    
    	return {
    		init: init,
    		isDragging: isDragging
    	};
    
    }());
  • URL: /components/raw/table/table.js
  • Filesystem Path: components/01-components/table/table.js
  • Size: 7.7 KB

There are no notes for this item.