toolbar.html

{% assign source = include.source %}
{% capture this_source_id %}{{ source.id | default: layout.application | slugify }}{% endcapture %}
<!-- <pat-toolbar> -->
	{% if source.inject %}
		<form
			class="
				pat-form
				pat-toolbar 
				pat-inject 
				pat-autosubmit 
				{{ source.type }}"
			id="{{ source.id }}"
			pat-inject="{{ source.inject }}">
	{% else %}
		<div
			class="
				pat-toolbar 
				{{ source.type }}"
			id="{{ this_source_id }}">
	{% endif %}

	<div 
		id="toolbar-navigation-area-{{ this_source_id }}"
		class="toolbar-area navigation">
		{% for section in source.sections %}
			{% if section.type == 'navigation' %}
				<div
					class="
						toolbar-section 
						navigation"
					id="{{ include.id }}-{{ section.type }}">
					<nav
						class="
							pat-navigation 
							pat-button-cluster 
							pat-tabs">
						{% for link in section.links %}
							{%- capture this_url -%}
								{%- if link.url -%}
									{{ link.url }}
								{%- else -%}
									{{ link.label | remove: 'label_' | slugify }}
								{%- endif -%}
							{%- endcapture -%}
							<a
								class="
									pat-inject
									{{ link.class }}
								    {% if link.icon %}
									    icon 
										icon-{{ link.icon }}
									{% endif %}
									{% if link.switch or section.switch %}
										pat-switch
									{% endif %}
									{% if 
										page.url contains link.url
									   or 
										page.title == link.label %}
										current
									{% endif %}"
								{% if link.switch %}
									data-pat-switch="{{ link.switch }}"
								{% elsif section.switch %}
									data-pat-switch="{{ section.switch }}"
								{% endif %}
								{% if link.inject %}
									data-pat-inject="{{ link.inject }}"
								{% else %}
									data-pat-inject="{{ section.inject }}"
								{% endif %}
									href="{{ this_url }}">
									{%- include patterns/i18n id=link.label -%}
								</a>
						{% endfor %}
					</nav>
				</div>	
			{% endif %}
		{% endfor %}
	</div>

	<div 
		id="toolbar-functions-area-{{ this_source_id }}"
		class="toolbar-area functions">
		{% for section in source.sections %}
			{% unless section.type == 'navigation' %}
				{% capture this_section_id %}{{ include.id }}-{{ section.type }}{% endcapture %}
				<div
					class="
						toolbar-section 
						{{ section.type }}"
					id="{{ this_section_id }}">
					{% if section.type == 'navigation stacks-control' %}
						<nav
							class="
								toolbar-subnav 
								pat-button-cluster 
								pat-tabs 
								pat-navigation">
							{% for link in section.links %}
								{% assign this_label = link.label  %}
								<a
									href="{{ link.url }}">{% include patterns/i18n id=this_label %}</a>
							{% endfor %}
						</nav>
					{% elsif section.type == 'view-options' %}
						{% for item in section.items %}
							{% if item.type == 'grouping' %}
								<label 
									class="
										pat-select">
									{% include patterns/i18n id="patterns.label_grouping" %}
									<select>
										{% for option in item.options %}
											<option>{{ option.label }}</option>
										{% endfor %}
									</select>
								</label>
							{% elsif item.type == 'select' %}
								<label 
									class="
										pat-select">
									{% include patterns/i18n id=item.label %}
									<select>
										{% for option in item.items %}
											<option>{% include patterns/i18n id=option.label %}</option>
										{% endfor %}
									</select>
								</label>
							{% elsif item.type == 'filters' %}
								{%- capture this_filters_id -%}{{ source.id }}-filters{%- endcapture -%}
								{% include patterns/filters-menu.html 
									items=item.form_fields
									id=this_filters_id %}
							{% endif %}
						{% endfor %}
					{% elsif section.type == 'quick-functions' %}
						{% for item in section.items %}
							{% if item.type == 'search' %}
								{% include patterns/toolbar-search-field.html placeholder=item.placeholder %}
							{% elsif item.type == 'more-menu' %}
								{% include patterns/more-menu.html 
									source=item.source %}
							{% elsif item.type == 'context-menu' %}
								{% include patterns/context-menu.html 
									icon=item.icon
									class=item.class
									source=item.source %}
							{% elsif item.type == 'open-modal' %}
								{% include patterns/open-modal.html
									label=item.label
									href=item.url
									title=item.title
									class=item.class %}
							{% elsif item.type == 'inject' %}
								<a
									href="{{ item.url }}"
									class="
										pat-button 
										{{ item.class }} 
										pat-inject"
									data-pat-inject="{{ item.inject }}">{{ item.label }}</a>
							{% elsif item.type == 'forward' %}
								<a
									href="{{ item.forward }}"
									data-pat-forward="selector: {{ item.forward }}"
									class="
										pat-button 
										pat-forward 
										{{ item.class }} 
										{% if item.switch %}pat-switch{% endif %}"
									{% if item.switch %}data-pat-switch="{{ item.switch }}"{% endif %}>
									{% include patterns/i18n id=item.label %}
								</a>
							{% elsif item.type == 'sidebar-size' %}
								<button 
									class="
										icon
										resize-full
										toggle-sidebar-size 
										pat-toggle" 
									data-pat-toggle="
										selector: #application-body-{{ layout.application | slugify }}; 
										value: sidebar-normal sidebar-large" 
									title="{% include patterns/i18n sentinel=false id='patterns.label_toggle_sidebar_size' %}">
									{%- include patterns/i18n id='patterns.label_toggle_sidebar_size_imp' -%}
								</button>
							{% elsif item.type == 'button' %}
								{% if item.kind == 'submit' %}
									<button
										type="submit"
										{% if item.url %}formaction="{{ item.url }}"{% endif %}
										class="
											pat-button 
											{{ item.class }} 
											 {% if item.switch %}pat-switch{% endif %}"
										{% if item.switch %}data-pat-switch="{{ item.switch }}"{% endif %}>
										{% include patterns/i18n id=item.label %}
									</button>
								{% elsif item.kind == 'forward' %}
									<a
										type="button"
										href="{{ item.forward }}"
										data-pat-forward="selector: {{ item.forward }}"
										class="
											pat-button 
											pat-forward 
											{{ item.class }} 
											 {% if item.switch %}pat-switch{% endif %}"
										{% if item.switch %}data-pat-switch="{{ item.switch }}"{% endif %}>
										{% include patterns/i18n id=item.label %}
									</a>
								{% elsif item.kind == 'link' %}
									<a
										href="{{ item.url }}"
										class="
											pat-button 
											{{ item.class }} 
											pat-inject"
										data-pat-inject="{{ item.inject }}">{% include patterns/i18n id=item.label %}</a>
								{% endif %}
							{% elsif item.type == 'modal' %}
								{% include patterns/open-modal.html
									href=item.url
									title=item.title
									class=item.class %}
							{% endif %}
						{% endfor %}
					{% endif %}
				</div>	
			{% endunless %}
		{% endfor %}
	</div>

	{% if source.inject %}
		</form>
	{% else %}
		</div>
	{% endif %}
<!-- </pat-toolbar> -->