ThemePatternGuide/styleguide-boilerplate.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
{% set styleguideThemePath = "module/ThemePatternGuide" %}

{% macro patternInclude( paramsObject ) %}
	{% set styleguideThemePath = "module/ThemePatternGuide" %}
	{% include "#{styleguideThemePath}/pattern-include.html" with paramsObject %}
{% endmacro %}

<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		{{ su.theme.less( "../#{styleguideThemePath}/styleguide-backend.less" ) }}
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	</head>
	<body class="styleguide su_bootstrap_safe">

	<div class="styleguide">
		<nav class="navbar navbar-default navbar-fixed-top">
			<form class="navbar-form navbar-left" role="search" method="GET">
				<div class="form-group">
					<input class="form-control" placeholder="Filter" name="filter"
							value="{{ su.request.query.filter }}" autofocus>
				</div>
				<button class="btn btn-default">Submit</button>
			</form>
			<div class="navbar-form navbar-right">
				<a class="btn btn-default" href="{{ su.request.path }}">Refresh</a>
				<a class="btn btn-default" href="{{ su.request.path|split( "?" )|first }}">Clear Filter</a>
			</div>
		</nav>

		<div class="components">
			{% include "#{styleguideThemePath}/global-patterns.html" %}
			{% block content endblock %}
		</div>
	</div>

	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="{{ su.theme.asset( "../#{styleguideThemePath}/highlight/styles/agate.css" ) }}">

	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
			integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
			crossorigin="anonymous"></script>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="{{ su.theme.asset( "../#{styleguideThemePath}/highlight/highlight.pack.js" ) }}"></script>
	<script>
		function resizeIframe( iframe ) {
			var height = $( iframe ).contents().find( "body" ).height()
			$( iframe ).css( "min-height", height );
		}

		function resizeComponentIframes( component ) {
			$( component ).find( "iframe" ).each( function() {
				resizeIframe( this );
			} );
		}

		function resizeAllIframes() {
			$( ".component iframe" ).each( function() {
				resizeIframe( this );
			} );
		}

		jQuery( ".component" ).resizable( {
			resize: function ( event, ui ) {
				ui.element.addClass( "resized" );
			},
			start: function ( event, ui ) {
				$( '<div class="ui-resizable-iframe-fix"></div>' )
					.css({
						width: "100vw", height: "100vh",
						position: "absolute", zIndex: 1000
					})
					.css( $( this ).offset() )
					.appendTo( "body" );
			},
			stop: function ( event, ui ) {
				$( "div.ui-resizable-iframe-fix" ).remove();
			}
		});

		jQuery( ".component .reset" ).click(function () {
			var component = $( this ).closest( ".component" );
			component.removeAttr( "style" ).removeClass( "resized" );
		});

		hljs.initHighlightingOnLoad();

		jQuery( ".component-iframe" ).addClass( "loading" );

		jQuery( "iframe" ).on( "load", function() {
			jQuery( this ).closest( ".component-iframe" ).removeClass( "loading" );
			resizeIframe( this );
		});

		jQuery( ".nav-pills a" ).on("click", function() {
			var component = $( this ).closest( ".component" );
			setTimeout( function() {
				resizeComponentIframes( component );
			}, 300 );
		});

		$( window ).resize( function() {
			resizeAllIframes();
		});
	</script>
	</body>
</html>