forked from godofredoninja/simply
-
Notifications
You must be signed in to change notification settings - Fork 0
/
godo-template-portfolio.hbs
69 lines (54 loc) · 2.06 KB
/
godo-template-portfolio.hbs
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
{{!-- Layout --}}
{{!< default}}
{{!-- Class for <body> --}}
{{#contentFor "special_body_class"}}is-portfolio{{/contentFor}}
{{#page}}
<header class="topic-header">
<div class="px-4 py-10 lg:py-vw6 lg:pb-8 mx-auto max-w-3xl text-center">
<h1 class="capitalize text-5xl text-title md:text-6xl">{{title}}</h1>
{{#if excerpt}} <div class="max-w-lg mt-2 mx-auto text-xl text-gray-500">{{excerpt}}</div>{{/if}}
</div>
</header>
{{#if tags}}
<ul class="list-inline text-center px-4 mt-4">
<li class="js-filter-btn inline-block border-b-2 border-transparent border-primary hover:border-primary cursor-pointer mb-2" data-filter="all">{{t "All"}}</li>
{{#foreach tags}}<li class="js-filter-btn inline-block border-b-2 border-transparent hover:border-primary cursor-pointer mb-2 ml-4" data-filter="{{slug}}">{{name}}</li>{{/foreach}}
</ul>
{{/if}}
{{/page}}
<div class="site-post py-vmin8 px-4">
<div class="mx-auto max-w-1100 feed-entry-wrap grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{{#foreach posts}}
{{> "story/story-portfolio"}}
{{/foreach}}
</div>
</div>
{{#contentFor "scripts"}}
<script>
(function () {
var filterBtn = document.querySelectorAll('.js-filter-btn');
if (!filterBtn.length) return;
function filterSelection(str) {
var allCard = document.querySelectorAll('.js-filter-items');
if (!allCard.length) return;
for (var i = 0; i < allCard.length; i++) {
var portfolioCard = allCard[i];
portfolioCard.classList.add('hidden');
if (portfolioCard.getAttribute('data-id') === str || str === 'all') {
portfolioCard.classList.remove('hidden');
}
}
}
filterBtn.forEach(function (btn) {
return btn.addEventListener('click', function (e) {
e.preventDefault();
var current = document.querySelector('.js-filter-btn.border-primary');
current.classList.remove('border-primary');
this.classList.add('border-primary');
var dataFilter = btn.getAttribute('data-filter');
filterSelection(dataFilter);
});
});
})();
</script>
{{/contentFor}}