-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
/
header.html
91 lines (88 loc) · 5.18 KB
/
header.html
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
{% load i18n wagtailadmin_tags %}
{% comment "text/markdown" %}
Variables accepted by this template:
- `classname` - if present, adds classname to the header class list
- `title` - Displayed as `h1`
- `subtitle` - Within the `h1` tag but smaller
- `description` - if present, displayed as a small text below the `h1` tag title
- `search_url` - if present, display a search box. This is a URL route name (taking no parameters) to be used as the action for that search box
- `search_form` - form object for the search form. Required if search_url is passed
- `search_results_url` - URL to be used for async requests to search results, if not provided, the form's action URL will be used
- `search_target` - A selector string to be used as the target for the search results to be swapped into. Defaults to '#listing-results'
- `search_disable_async` - If True, the default header async search functionality will not be used
- `query_parameters` - a query string (without the '?') to be placed after the search URL
- `icon` - name of an icon to place against the title
- `avatar` - if present, display an 'avatar' in place of icon. This is the URL to be used as the img src for avatar
- `merged` - if true, add the classname 'w-header--merged'
- `action_url` - if present, display an 'action' button. This is the URL to be used as the link URL for the button
- `action_text` - text for the 'action' button
- `action_icon` - icon for the 'action' button, default is 'plus'
- `base_actions` - base actions to appear before the main action
- `extra_actions` - extra action buttons for the header. This is the HTML to be used for the extra buttons
- `heading` - Replaces the header `h1` completely with custom variable content
- `search` - An alternative search content variable displayed if provided and search_url url is not present
- `extra_rows` - Shown at the end of the header container
{% endcomment %}
<header class="{% classnames "w-header" classname merged|yesno:"w-header--merged," search_form|yesno:"w-header--hasform," %}">
<div class="row">
<div class="left">
<div class="col">
{% if heading %}
{{ heading }}
{% else %}
<h1 class="w-header__title" id="header-title">
{% if icon %}
{% icon classname="w-header__glyph" name=icon %}
{% elif avatar %}
<div class="w-header__glyph avatar large"><img src="{{ avatar }}" alt="" /></div>
{% endif %}
{{ title }}{% if subtitle %} <span class="w-header__subtitle">{{ subtitle }}</span>{% endif %}
</h1>
{% endif %}
{% if description %}<div class="w-header__description">{{ description }}</div>{% endif %}
</div>
{% if search_url %}
<form
class="col search-form"
action="{% url search_url %}{% if query_parameters %}?{{ query_parameters }}{% endif %}"
method="get"
novalidate
role="search"
{% if not search_disable_async %}
data-controller="w-swap"
data-action="change->w-swap#searchLazy input->w-swap#searchLazy"
{% if search_results_url %}data-w-swap-src-value="{{ search_results_url }}"{% endif %}
{% if search_target %}data-w-swap-target-value="{{ search_target }}"{% endif %}
{% endif %}
>
{% for field in search_form %}
{% formattedfield field=field classname="w-mb-0 -w-mt-2.5" sr_only_label=True icon="search" %}
{% endfor %}
{% comment %}Add an initial disabled & hidden submit button so that pressing 'enter' will not submit form. Reload not required as the content is dynamically loaded.{% endcomment %}
<div class="w-sr-only"><input disabled type="submit" aria-hidden="true"/></div>
<div class="submit w-sr-only"><input type="submit" value="Search" class="button" /></div>
</form>
{% elif search %}
{{ search }}
{% endif %}
</div>
<div class="{% block right_column_classname %}right{% endblock %}">
{% if base_actions %}
{{ base_actions }}
{% endif %}
{% block right_column %}
{% if action_url %}
<div class="actionbutton">
{% with action_icon|default:'plus' as action_icon_name %}
<a href="{{ action_url }}" class="button bicolor button--icon">{% icon name=action_icon_name wrapped=1 %}{{ action_text|capfirst }}</a>
{% endwith %}
</div>
{% endif %}
{% endblock %}
{% if extra_actions %}
{{ extra_actions }}
{% endif %}
</div>
</div>
{% block extra_rows %}{{ extra_rows }}{% endblock %}
</header>