IRMA

Answers 

<form class="js-auto-save" action="action.php" method="POST">
    <div class="form-heading">
        <h3>Questionnaire</h3>
    </div>

    <div class="form-group">
        <div class="form-field question-field">
            <label for="question-1">
				<span class="label">Enter a detailed description of the materials being used</span>

				<button type="button" class="btn btn-link js-btn-modal js-answers" data-modal="answers" data-module="animalCoversheets" data-record-id="testing">
					<i class="fa fa-list" aria-hidden="true"></i>

					<span class="link link-strong">Previous answers</span>
				</button>
			</label>

            <textarea class="js-wysiwyg" name="question-1" id="question-1" rows="10"></textarea>
        </div>
    </div>

    <div class="modal modal-answers modal-advanced-search js-modal js-modal-exit -nav-padded -with-overlay" data-modal="answers">
        <div class="modal-inner inner">
            <div class="modal-panel">
                <div class="modal-header">
                    <button type="button" class="btn btn-default btn-modal-exit js-modal-exit svg-wrap" aria-label="Exit Modal">
						<span class="fa fa-times"></span>
					</button>
                    <h3 class="modal-title">
                        <span class="text">Previous Answers</span>
                    </h3>
                </div>

                <div class="modal-section modal-question">
                    <h4 class="question-label">Question</h4>

                    <h3 class="question"></h3>
                </div>

                <div class="modal-section modal-results advanced-search-results search-results-container">

                </div>
            </div>
        </div>
    </div>
</form>
 
<form class="js-auto-save" action="action.php" method="POST">
	<div class="form-heading">
		<h3>Questionnaire</h3>
	</div>

	<div class="form-group">
		<div class="form-field question-field">
			<label for="question-1">
				<span class="label">Enter a detailed description of the materials being used</span>

				<button type="button" class="btn btn-link js-btn-modal js-answers" data-modal="answers" data-module="animalCoversheets" data-record-id="testing">
					<i class="fa fa-list" aria-hidden="true"></i>

					<span class="link link-strong">Previous answers</span>
				</button>
			</label>
			
		    <textarea class="js-wysiwyg" name="question-1" id="question-1" rows="10"></textarea>
		</div>
	</div>

	{{> '@modal--answers' }}
</form>
 
/* No context defined for this component. */
  • Content: 
    &.modal-answers {
	.question-label {
		color: rgba($color-irma-slate, 0.7);
		
		text-transform: uppercase;

		+ * {
			margin-top: 3rem;
		}
	}

	.modal-question {
		background: white;
	}

	.modal-results {

	}
}

.answer-cell {
	padding: 14px 0;
	height: auto !important;
	display: block !important;

	.full-text {
		display: none !important;
	}

	.btn-answer-full {
		margin-top: 3rem;

		.link {
			font-size: inherit;
		}

		.fa {
			transform: translateZ(0);

			font-size: 3.5rem;

			transition: all $transition;
		}

		.less {
			display: none !important;
		}
	}

	&.-open {
		.text {
			display: none !important;
		}

		.full-text {
			display: block !important;
		}

		.btn-answer-full {
			.fa {
				transform: rotate(180deg) translateZ(0);
			}

			.more {
				display: none !important;
			}

			.less {
				display: inline-block !important;
			}
		}
	}
}

.question-field {
	label {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;

		.label {
			flex: 1 1 auto;
			padding-right: 10rem;
		}

		.btn {
			transform: translateY(-1rem);

			flex: 0 0 auto;
		}
	}
}
  • URL: /components/raw/answers/_answers.scss
  • Filesystem Path: components/01-components/answers/_answers.scss
  • Size: 1.1 KB
  • Content: 
    /* 
 *	_answers.js
 */

irma.answers = (function () {
	var previewLength = 288;

	var showAnswers = function (data) {
		var $modal = $('.modal-answers');
		var $results = $modal.find('.modal-results');

		$results.empty()
			.addClass('-loading');

		var results = _.map(data, function (item, i) {
			var long = item.Answer.length > previewLength;
			var answer = long ? item.Answer.slice(0, previewLength) : item.Answer;
			return {
				answer: answer,
				long: long,
				fullAnswer: item.Answer,
				section: item.Section,
				url: item.Redirect
			};
		});

		var options = {
			results: results,
			noResults: results.length === 0		};

		$.get(irma.assetPath + '/templates/search-results/search-results--answers.hbs?v=' + irma.templateVersion, function (template) {
			var templateScript = Handlebars.compile(template);

			var html = templateScript(options);

			$results.html(html)
				.removeClass('-loading');
			MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
		});
	};

	var init = function () {
		$(document).on('click', '.js-answers', function (e) {
			e.preventDefault();

			var data = $(this).data();

			var url = irma.baseURL + "getMyAnswers.asp?" + irma.urlParams + "&moduleName=" + data.module + "&moduleRecordID=" + data.recordId;

			$.ajax({
				url: url
			}).done(function (res) {
				if (res.status == 'success') {
					$('.modal-answers').find('.question').text(res.data[0].Question);

					showAnswers(res.data);
				}

			});

		}).on('click', '.js-use-answer', function () {
			var url = $(this).data().url;

			window.location = url;

		}).on('click', '.js-answer-full', function () {
			$(this).closest('.answer-cell').toggleClass('-open');

		});

	};

	return {
		init: init
	};

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

There are no notes for this item.