ThemePatternGuide/pattern.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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
{# accepts: name, scenarios block, usage block #}

{% if not su.request.query.filter or su.request.query.filter|lower in name|lower %}
	{% set componentId = "component_#{random()}" %}
	{% set basePath = su.request.path|split( "?" )|first %}

	<div id="{{ componentId }}" class="component panel panel-default">
		<div class="panel-heading">
			<div class="panel-nav">
				<h3 class="panel-title"><a href="{{ basePath }}?filter={{ name|url_encode }}">{{ name }}</a></h3>
				<ul class="nav nav-pills" role="tablist"></ul>
			</div>

			<ul class="background-colors">
				<li><a href="#" style="background-color:white;" class="active"></a></li>
				<li><a href="#" style="background-color:grey;"></a></li>
				<li><a href="#" style="background-color:black;"></a></li>
			</ul>

			{% if isRefreshable %}<button class="refresh btn btn-default btn-sm">Refresh</button>{% endif %}

			<button class="reset btn btn-default btn-sm">Reset</button>
		</div>

		<div class="panel-body">
			<div class="tab-content">
				{% block scenarios %}{% endblock %}
			</div>
		</div>

		{% if block( "usage" ) %}
			<div class="panel-footer">
				<pre><code>{% block usage %}{% endblock %}</code></pre>
			</div>
		{% endif %}

		<script>
			var updateBackgroundColor = function( component ) {
				var color = component.find( ".background-colors .active" ).css( "background-color" );
				component.find( 'iframe' ).each(function() {
					jQuery( this ).contents().find( "html, body" ).css( "background-color", color );
				});
			};

			jQuery( "#{{ componentId }} .tab-pane" ).first().addClass( "active" );
			jQuery( "#{{ componentId }} .nav-pills li" ).first().addClass( "active" );
			jQuery( "#{{ componentId }} .refresh" ).click(function() {
				jQuery( '#{{ componentId }} iframe' ).each(function() {
					jQuery( this ).closest( ".component-iframe" ).addClass( "loading" );
					this.contentWindow.location.reload( true );
				});
			});
			jQuery( "#{{ componentId }} .background-colors a" ).click( function( e ) {
				e.preventDefault();
				jQuery( "#{{ componentId }} .background-colors a" ).removeClass( "active" );
				jQuery( this ).addClass( "active" );
				updateBackgroundColor( jQuery( "#{{ componentId }}" ) );
			});
		</script>
	</div>
{% endif %}