ThemePatternGuide/scenario.html at master · JasonStrack/ThemePatternGuide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
{% set scenarioId = "scenario_#{random()}" %}
{% set iframeId = "iframe_#{random()}" %}

<div role="tabpanel" class="tab-pane component-iframe" id="{{ scenarioId }}" data-iframe-id="{{ iframeId }}">
	<div class="output-head" style="display:none;">
		{% block scenarioHead %}{% endblock %}
	</div>

	<div class="output disable-logo-js" style="display:none;">
		<div class="{% block wrapperClasses %}{% endblock %}">
			{% block scenario %}{% endblock %}
		</div>
	</div>

	<iframe name="{{ iframeId }}" id="{{ iframeId }}"></iframe>

	<script>
		var tabs = jQuery( "#{{ componentId }} .nav-pills" );

		jQuery( tabs ).append(
			'<li role="presentation"><a href="#{{ scenarioId }}" role="tab" data-toggle="tab">{{ name }}</a></li>'
		);

		function postToIframe( data, url, target ){
			jQuery( 'body' ).append( '<form action="'+url+'" method="post" target="'+target+'" id="postToIframe"></form>' );
			jQuery.each( data, function( n, v ) {
				var input = jQuery( '<input type="hidden" name="'+n+'" />' ).attr( 'value', v );
				jQuery( '#postToIframe' ).append( input );
			});
			jQuery( '#postToIframe' ).submit().remove();
		}

		jQuery( document ).ready(function() {
			var component = jQuery( "[data-iframe-id='{{ iframeId }}']" ),
				head = component.find( '.output-head' ).html(),
				body = component.find( '.output' ).html(),
				iframeSrc = '/admin/theme/view/{{ styleguideThemePath }}/view.html?myid={{ iframeId }}';

			postToIframe( {head:head,body:body}, iframeSrc, '{{ iframeId }}' );
		});
	</script>
</div>