tpl.il_xqsp_condition.html

<div>
	<div id="ilConditionFormContainer">{FORM}</div>
	<div id="ilQuestionSetPoolConditionAddOnPreviewContainer">
		<div id="ilQuestionSetPoolConditionAddOnContainer">
			<div class="ilFloatLeft ilForm ilQuestionSetPoolConditionLegend">{INFO}</div>
			<div class="ilForm ilFloatRight ilQuestionSetPoolConditionQuestionTable">
				<table class="fullwidth">
					<tbody>
					<tr class="tblheader">
						<th class="std">{TXT_QUESTION}</th>
						<th class="std" colspan="2">{TXT_ACTIONS}</th>
					</tr>
					<!-- BEGIN question_row -->
					<tr class="{CSS_ROW}">
						<td class="std">{QUESTION_INDEX} {QUESTION_TITLE}</td>
						<td class="std"><a class="il_ContainerItemCommand preview" id="preview_{QUESTION_ID}" href="#">{PREVIEW}</a></td>
						<td class="std"><a class="il_ContainerItemCommand" id="edit_{QUESTION_ID}" href="{EDIT_LINK}" onclick="return !window.open(this.href, '', 'width=1024,height=800,location=no,scrollbars=yes,menubar=no,dependent=yes,status=no,toolbar=no')" target="_blank">{EDIT}</a></td>
					</tr>
					<!-- END question_row -->
					</tbody>
				</table>
			</div>
		</div>
		<div class="ilQuestionSetPoolConditionInputQuestionPreviewContainer">
			<a class="ilClose" href="#">{CLOSE_IMG_ALT} {CLOSE_IMG_SRC}</a>
		</div>
	</div>
</div>
<div class="ilClearFloat"></div>

<script>
	(function($, d, w) {
		w.afterQuestionChangedTrigger = function() {
			// Check whether or not the question has changed: Maybe cou can compare the value of field "tstamp" with
			// the unix timestamp created when the user clicked the the "edit" link 
			//$("#ilQuestionSetPoolConditionInputContainer form input[type=submit]").first().click();
		};

		var $fbd_toggle = $('#il_center_col a.toggle_feedback');
		
		$(function() {
			var $metabar                            = $(".il-layout-page header");
			var $breadcrumbs                        = $(".il-layout-page .breadcrumbs");
			var $condition_container                = $("#ilConditionFormContainer");
			var $condition_add_on_container         = $("#ilQuestionSetPoolConditionAddOnContainer");
			var $panelcontainer                     = $(".ilQuestionSetPoolConditionInputQuestionPreviewContainer");
			var $table                              = $(".ilQuestionSetPoolConditionQuestionTable");

			var showFeedback = function() {
				$fbd_toggle.removeClass('ilFormATestFeedbackHidden');
				$('form[name="condition_form"] textarea[name*="feedback"]').closest("div.form-group").show();
				$fbd_toggle.text("{TXT_HIDE_FEEDBACK} ");
			};
			
			var hideFeedback = function() {
				$('form[name="condition_form"] textarea[name*="feedback"]').closest("div.form-group").hide();
				$fbd_toggle.addClass('ilFormATestFeedbackHidden');
				$fbd_toggle.text("{TXT_SHOW_FEEDBACK}");
			};

			if ($fbd_toggle.length === 1) {
				$fbd_toggle.on("click", function(e) {
					e.preventDefault();
					e.stopPropagation();

					if ($fbd_toggle.hasClass('ilFormATestFeedbackHidden')) {
						showFeedback();
					} else {
						hideFeedback();
					}
				});
			}

			var onScrollHandler = function() {
				if ($panelcontainer.hasClass('ilPartialContainer')) {
					var static_height    = parseFloat($metabar.height()) + parseFloat($breadcrumbs.height());
					var threshold_height = parseFloat($(document).scrollTop()) + static_height; 

					var stcc            = $condition_container.offset().top;
					var stcaoc          = $condition_add_on_container.offset().top;

					if (threshold_height >= stcc && !$condition_container.hasClass('ilFixedMode')) {
						$condition_container.css('width', $condition_container.width());
						$condition_container.css('top', static_height);
						$condition_container.addClass('ilFixedMode');

						$condition_add_on_container.css('marginTop', $condition_container.height());
						$condition_add_on_container.addClass('ilFixedMode');

						$panelcontainer.css('marginTop', $condition_container.height());
						$panelcontainer.addClass('ilFixedMode');
					} else if ($condition_container.hasClass('ilFixedMode') && stcaoc >= threshold_height + parseFloat($condition_add_on_container.css("marginTop"))) {
						$condition_container.removeAttr('style');
						$condition_container.removeClass('ilFixedMode');

						$condition_add_on_container.removeAttr('style');
						$condition_add_on_container.removeClass('ilFixedMode');

						$panelcontainer.removeAttr('style');
						$panelcontainer.removeClass('ilFixedMode');
					}
				}
			}

			var $closeBtn = $panelcontainer.find(".ilClose");
			$closeBtn.click(function(e) {
				$condition_add_on_container.removeClass("ilPartialContainer");
				$panelcontainer.removeClass("ilPartialContainer");
				$table.removeClass("ilPartialContainer");

				$condition_container.removeAttr('style');
				$condition_container.removeClass('ilFixedMode');

				$condition_add_on_container.removeAttr('style');
				$condition_add_on_container.removeClass('ilFixedMode');
	
				$panelcontainer.removeAttr('style');
				$panelcontainer.removeClass('ilFixedMode');

				showFeedback();
				$fbd_toggle.show();

				e.preventDefault();
			});

			$(".preview").click(function(e) {
				var $this = $(this);
				var $panel;

				hideFeedback();
				$fbd_toggle.hide();

				$condition_add_on_container.addClass("ilPartialContainer");
				$panelcontainer.addClass("ilPartialContainer");
				$table.addClass("ilPartialContainer");

				$panelcontainer.find(".ilPreviewPanel").remove();

				$panel = $('<div class="ilPreviewPanel" id="preview_container_' + $this.attr('id') + '"></div>');
				$.ajax({
					url: '{PREVIEW_LINK}&question_id=' + $this.attr('id').replace("preview_", ""),
					dataType: 'html',
					success: function(data) {
						try {
							$panel.html(data);
							$panel.appendTo($panelcontainer);
						} catch(e) {
							console.log(e);
						}

						if(typeof MathJax !=  "undefined") {
							MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
						}

						onScrollHandler();
					}
				});

				e.preventDefault();
			});

			$(document).on('scroll', onScrollHandler);
		});
	}(jQuery, document, window));
</script>