forked from SimpleUpdates/ThemePatternGuide
- Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpattern.html
More file actions
Latest commit
executable file
·61 lines (52 loc) · 2.21 KB
/
Copy pathpattern.html
File metadata and controls
executable file
·61 lines (52 loc) · 2.21 KB
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 %}
<divid="{{ componentId }}" class="component panel panel-default">
<divclass="panel-heading">
<divclass="panel-nav">
<h3class="panel-title"><ahref="{{ basePath }}?filter={{ name|url_encode }}">{{ name }}</a></h3>
<ulclass="nav nav-pills" role="tablist"></ul>
</div>
<ulclass="background-colors">
<li><ahref="#" style="background-color:white;" class="active"></a></li>
<li><ahref="#" style="background-color:grey;"></a></li>
<li><ahref="#" style="background-color:black;"></a></li>
</ul>
{% if isRefreshable %}<buttonclass="refresh btn btn-default btn-sm">Refresh</button>{% endif %}
<buttonclass="reset btn btn-default btn-sm">Reset</button>
</div>
<divclass="panel-body">
<divclass="tab-content">
{% block scenarios %}{% endblock %}
</div>
</div>
{% if block( "usage" ) %}
<divclass="panel-footer">
<pre><code>{% block usage %}{% endblock %}</code></pre>
</div>
{% endif %}
<script>
varupdateBackgroundColor=function(component){
varcolor=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 %}