forked from jitka/jekyll-theme-pirati
-
Notifications
You must be signed in to change notification settings - Fork 17
/
header.html
167 lines (157 loc) · 8.46 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<nav class="navbar __js-root">
<ui-app inline-template>
<ui-navbar inline-template>
<div>
<div class="container container--wide navbar__content" :class="{'navbar__content--initialized': true}">
<div class="navbar__brand my-4 flex items-center lg:block lg:pr-8 lg:my-0">
<a href="{{ '/' | absolute_url }}">
<img src="{{ site.styleguide_base_url }}/images/logo-round-white.svg" class="w-8 lg:w-full lg:border-r lg:border-grey-300 lg:pr-8" />
</a>
<span class="lg:hidden pl-4 font-bold text-xl">Pirátská strana</span>
</div>
<div class="navbar__menutoggle my-4 flex justify-end lg:hidden">
<a href="#" @click="show = !show" class="no-underline hover:no-underline">
<i class="ico--menu text-3xl"></i>
</a>
</div>
<div v-if="show || isLgScreenSize" class="navbar__external navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto lg:flex lg:space-x-8 lg:pb-2">
<div class="text-grey-200 text-sm lg:space-x-8 leading-loose lg:leading-normal">
{% for item in site.data.menu.top %}
{% include contact-line.html href=item.url icon=item.icon caption=item.link class="block lg:inline-block" target="_blank" %}
{% endfor %}
</div>
{% include social-icon-group.html class="space-x-2 text-grey-200 py-4 lg:py-0" %}
</div>
<div v-if="show || isLgScreenSize" class="navbar__main navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto">
{% if site.data.menu.main %}
<ul class="navbar-menu text-white">
{% for item in site.data.menu.main %}
<li class="navbar-menu__item">
{% if item.submenu %}
<ui-navbar-subitem label="{{ item.name }}">
<ul class="navbar-menu__submenu">
{% for subitem in item.submenu %}
<li><a href="{{ subitem.link }}" class="navbar-menu__link">{{ subitem.name }}</a></li>
{% endfor %}
</ul>
</ui-navbar-subtitem>
{% else %}
<a href="{{ item.link | relative_url }}" class="navbar-menu__link">{{ item.name }}</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div v-if="show || isLgScreenSize" class="navbar__actions navbar__section navbar__section--expandable container-padding--zero lg:container-padding--auto self-start flex flex-col sm:flex-row lg:flex-col sm:space-x-4 space-y-2 sm:space-y-0 lg:space-y-2 xl:flex-row xl:space-x-2 xl:space-y-0">
<a href="{{ site.organization.donateLink | default: 'https://dary.pirati.cz' }}" rel="noopener noreferrer" target="_blank" class="btn btn--icon btn--cyan-200 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base">
<div class="btn__body-wrap">
<div class="btn__body ">Přispěj</div>
<div class="btn__icon ">
<i class="ico--pig"></i>
</div>
</div>
</a>
<a href="{{ site.organization.onboardingLink | default: 'https://nalodeni.pirati.cz' }}" rel="noopener noreferrer" target="_blank" class="btn btn--icon btn--blue-300 btn--hoveractive btn--condensed btn--fullwidth md:btn--autowidth lg:text-sm xl:text-base">
<div class="btn__body-wrap">
<div class="btn__body ">Naloď se</div>
<div class="btn__icon ">
<i class="ico--anchor"></i>
</div>
</div>
</a>
</div>
</div>
</div>
</ui-navbar>
</ui-app>
</nav>
<div class="__js-root" @click="replaceHTMLEnts();">
<ui-app inline-template>
{% if site.env.GOOGLE_CALENDAR_APIKEY and site.calendar.id %}
<ui-calendar-google-provider v-slot="{ events, onShowMore, hasMore }" :calendar-id="'{{ site.calendar.id }}'" :api-key="'{{ site.env.GOOGLE_CALENDAR_APIKEY }}'">
{% assign calendarProvided = true %}
{% endif %}
<ui-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
<nav class="subnav">
<div class="container container--wide">
<div class="flex">
<button @click="toggleView('regions');" class="btn btn--condensed btn--grey-500 btn--hoveractive btn--to-white text-sm mr-2" :class="{'btn--activated': isCurrentView('regions')}">
<div class="btn__body">
<span>{{ site.organization.name }}</span>
<i class="ico--chevron-down ml-4"></i>
</div>
</button>
<button @click="toggleView('calendar');replaceHTMLEnts();" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-orange-300 text-sm" :class="{'btn--activated': isCurrentView('calendar')}">
<div class="btn__body">
<i class="btn__inline-icon ico--calendar mr-0 md:mr-2 text-orange-300"></i>
<span class="hidden md:block">{{ site.calendar.title }}</span>
</div>
</button>
{% if calendarProvided %}
<a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar');" v-if="events.length > 0" v-cloak>
<div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
<span class="pr-4">{{events[0].title}}</span>
<span class="pl-4">{{events[0].allDay ? 'Celý den' : events[0].startDateVerbose + ', ' + events[0].startTimeVerbose}}</span>
</div>
</a>
{% endif %}
{% if site.facebook.profilePage %}
<a href="{{ site.facebook.profilePage }}" target="_blank" rel="noopener noreferrer" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2">
<div class="btn__body">
<i class="btn__inline-icon ico--facebook mr-0 md:mr-2 text-brands-facebook"></i>
<span class="hidden md:block">{{ site.facebook.profilePageName }}</span>
</div>
</a>
{% endif %}
</div>
</div>
</nav>
<aside class="subnav-aside">
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
<a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
<ui-region-map class="container container--default" />
</div>
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
<a @click="toggleView('calendar');replaceHTMLEnts();" class="subnav-aside__close"><i class="ico--close"></i></a>
<div class="container container--default">
{% if calendarProvided %}
<ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'{{ site.calendar.title }}'"></ui-calendar-renderer>
{% elsif site.calendar.page %}
<iframe src="{{ site.calendar.page }}" style="border-width:0; width: 100%; height: 410px; border: 0; overflow: hidden;"></iframe>
<p class="mt-4">
<a class="btn btn--orange-200 btn--hoveractive" href="{{ site.calendar.page | relative_url }}">
<span class="btn__body">Zobrazit všechny akce</span>
</a>
</p>
{% endif %}
</div>
</div>
</aside>
</ui-view-provider>
{% if calendarProvided %}
</ui-calendar-google-provider>
{% endif %}
</ui-app>
</div>
<script>
function replaceHTMLEnts() {
// Get all <p> elements in the document
var x = document.querySelectorAll("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].innerHTML=htmlDecode(x[i].innerHTML);
}
x = document.querySelectorAll("a");
for (i = 0; i < x.length; i++) {
if (x[i].hasOwnProperty("font-bold") && x[i].hasOwnProperty("block")) {
x[i].innerHTML=htmlDecode(x[i].innerHTML);
}
}
}
function htmlDecode(input){
var e = document.createElement('div');
e.innerHTML = input;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
</script>