Skip to content

Commit 577472d

Browse files
matt-bernhardtmatt-bernhardt
authored
Merge pull request #30 from MITLibraries/post-115
Add filterable UI feature to theme for platform landing page
2 parents 46e44f9 + af8ff79 commit 577472d

7 files changed

Lines changed: 223 additions & 6 deletions

File tree

‎asset/css/sites-filter.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎asset/js/sites-filter.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const pluck = property => element => element[property];
2+
3+
var filter_values = new Array();
4+
5+
function ApplyFilter( value ) {
6+
const grid = document.getElementById("site-grid").getElementsByClassName("site-wrapper");
7+
$(grid).each(function() {
8+
let subjects = $(this).data("subject").split(" ");
9+
if ( subjects.includes(value) ) {
10+
$(this).removeClass('hidden');
11+
} else {
12+
$(this).addClass('hidden');
13+
}
14+
})
15+
}
16+
17+
function BuildFilter( value ) {
18+
if ( ! filter_values.includes( value["@value"] ) ) {
19+
filter_values.push( value["@value"] );
20+
}
21+
}
22+
23+
function Hyphenate( string ) {
24+
return string.replace(/\s+/g, '-');
25+
}
26+
27+
function RenderFilter() {
28+
const filter = document.getElementById("site-filter");
29+
filter_values.sort();
30+
$(filter_values).each(function(index, value) {
31+
let markup = `<input id="${Hyphenate(value)}" type="radio" name="site-filter-value" value="${Hyphenate(value)}"><label for="${Hyphenate(value)}" class="btn button-secondary">${value}</label>`
32+
filter.innerHTML += markup;
33+
});
34+
}
35+
36+
function RenderSite( site ) {
37+
// This approach cribbed from https://gomakethings.com/html-templates-with-vanilla-javascript/
38+
const grid = document.getElementById("site-grid");
39+
site["dcterms:subject"].map(BuildFilter);
40+
let subjectlist = `All ${site["dcterms:subject"].map(pluck('@value')).map(Hyphenate).join(" ")}`;
41+
let img = ``;
42+
if ( site["thumbnail_display_urls"]["large"] ) {
43+
img = `<img src="${site["thumbnail_display_urls"]["large"]}" alt="${site["dcterms:description"][0]["@value"]}">`
44+
}
45+
let markup =
46+
`<div class="site-wrapper" data-subject="${subjectlist}">
47+
<a href="${site["bibo:uri"][0]["@id"]}" class="site">
48+
${img}
49+
<span class="site-title">${site["o:title"]}</span>
50+
</a>
51+
</div>`;
52+
grid.innerHTML += markup;
53+
};
54+
55+
function LoadItemSet( id ) {
56+
let url = `/api/items?item_set_id=${id}`;
57+
document.getElementById("site-grid").innerHTML = "";
58+
$.get( url, function( data ) {
59+
data.map(RenderSite);
60+
}).done(function() {
61+
RenderFilter();
62+
});
63+
}

‎asset/scss/sites-filter.scss‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
@import 'colors';
2+
3+
.site-filter-outer {
4+
border: none;
5+
margin: 0;
6+
margin-bottom: 2rem;
7+
padding: 0;
8+
9+
h3 {
10+
display: inline-block;
11+
margin-right: 2rem;
12+
}
13+
14+
#site-filter {
15+
input {
16+
display: none;
17+
}
18+
19+
label {
20+
margin-right: 1rem;
21+
margin-top: 2rem;
22+
23+
&:first-of-type {
24+
margin-left: 1rem;
25+
}
26+
}
27+
28+
input:checked + label {
29+
background-color: $gray-l3;
30+
}
31+
}
32+
}
33+
34+
#site-grid {
35+
display: flex;
36+
flex-flow: row wrap;
37+
38+
.site-wrapper {
39+
display: inline-block;
40+
overflow: hidden;
41+
width: 30%;
42+
43+
a.site {
44+
border: 1px solid $gray-l3;
45+
box-shadow: 0 0 5px $gray-l3;
46+
color: $black;
47+
display: flex;
48+
flex-flow: column;
49+
font-weight: bold;
50+
margin: 1rem;
51+
padding: 1rem;
52+
text-align: center;
53+
text-decoration: none;
54+
55+
img {
56+
padding-bottom: 1rem;
57+
}
58+
59+
&:focus,
60+
&:hover {
61+
background: $gray-l3;
62+
color: $black;
63+
}
64+
}
65+
66+
&.hidden {
67+
display: none;
68+
}
69+
}
70+
}
71+
72+
// Two across on tablet-sized screens
73+
@media (width <= 800px) {
74+
#site-grid {
75+
.site-wrapper {
76+
width: 50%;
77+
}
78+
}
79+
}
80+
81+
// Single column on phones
82+
@media (width <= 400px) {
83+
#site-grid {
84+
flex-flow: column;
85+
86+
.site-wrapper {
87+
width: 100%;
88+
}
89+
}
90+
}

‎config/theme.ini‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,54 @@
11
[info]
22
name = "Tesseract"
3-
version = "0.7"
3+
version = "0.8"
44
author = "MIT Libraries"
55
description = "An Omeka S theme to implement the MIT Libraries' branding materials"
66
theme_link = "https://github.com/MITLibraries/mitlibraries-theme-omeka"
77
author_link = "https://libraries.mit.edu"
88
omeka_version_constraint = "^4.0.0"
99

1010
[config]
11+
element_groups.branding = "Site branding settings"
12+
element_groups.homepage = "Platform homepage settings"
13+
1114
elements.banner.name = "banner"
1215
elements.banner.type = "Omeka\Form\Element\Asset"
16+
elements.banner.options.element_group = "branding"
1317
elements.banner.options.label = "Site banner"
1418
elements.banner.options.info = "Optional. A large image at the top of all pages in this exhibit - it should measure at least 1140 pixels wide by 200 pixels tall"
1519

1620
elements.banner_text.name = "banner_text"
1721
elements.banner_text.type = "Text"
22+
elements.banner_text.options.element_group = "branding"
1823
elements.banner_text.options.label = "Site banner text"
1924
elements.banner_text.options.info = "Optional. A phrase to display under the site title as part of the site banner"
2025

2126
elements.nav_style.name = "nav_style"
2227
elements.nav_style.attributes.id = "nav_style"
2328
elements.nav_style.type = "Zend\Form\Element\Select"
29+
elements.nav_style.options.element_group = "branding"
2430
elements.nav_style.options.label = "Nav menu location"
2531
elements.nav_style.options.value_options.default = "Horizontal (above content)"
2632
elements.nav_style.options.value_options.vertical = "Vertical (alongside content)"
33+
elements.nav_style.options.value_options.none = "None"
34+
35+
elements.no_search.name = "no_search"
36+
elements.no_search.type = "Zend\Form\Element\Checkbox"
37+
elements.no_search.options.element_group = "homepage"
38+
elements.no_search.options.label = "Suppress search form"
39+
elements.no_search.options.info = "Optional. If checked, the search form will not be displayed"
40+
41+
elements.sites_set.name = "sites_set"
42+
elements.sites_set.type = "Text"
43+
elements.sites_set.options.element_group = "homepage"
44+
elements.sites_set.options.label = "Sites item set"
45+
elements.sites_set.options.info = "Optional. If provided, this is the ID of the Item set that contains all the records of sites on the network."
46+
47+
elements.sites_page.name = "sites_page"
48+
elements.sites_page.type = "Text"
49+
elements.sites_page.options.element_group = "homepage"
50+
elements.sites_page.options.label = "Page slug that displays filterable site list"
51+
elements.sites_page.options.info = "Optional. If provided, this is where the filterable list of sites across the network should be displayed."
2752

2853
elements.stylesheet.name = "stylesheet"
2954
elements.stylesheet.attributes.id = "stylesheet"

‎view/common/sites-filter.phtml‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<?php
2+
$sites_set = $this->themeSetting('sites_set');
3+
$sites_page = $this->themeSetting('sites_page');
4+
5+
if (isset($sites_set) && isset($sites_page) && $sites_page == $page->slug()) {
6+
$this->headScript()->appendFile($this->assetUrl('js/sites-filter.js'));
7+
$this->headLink()->appendStylesheet($this->assetUrl('css/sites-filter.css'));
8+
9+
?>
10+
<fieldset class="site-filter-outer">
11+
<span><strong>Filter exhibits by:</strong></span>
12+
<span id="site-filter">
13+
<input id="All" type="radio" name="site-filter-value" value="All">
14+
<label class="btn button-secondary" for="All">All</label>
15+
</span>
16+
</fieldset>
17+
<div id="site-grid"></div>
18+
<script>
19+
$(document).ready(function() {
20+
const filter = document.getElementById("site-filter");
21+
22+
LoadItemSet( <?php echo $sites_set; ?> );
23+
24+
filter.addEventListener(
25+
"change",
26+
(event) => {
27+
ApplyFilter( event.target.defaultValue );
28+
},
29+
false,
30+
);
31+
});
32+
</script>
33+
<?php
34+
}

‎view/layout/layout.phtml‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $translate = $this->plugin('translate');
33
$banner_url = $this->themeSettingAssetUrl('banner');
44
$banner_text = $this->themeSetting('banner_text');
55
$stylesheet = $this->themeSetting('stylesheet');
6+
$no_search = $this->themeSetting('no_search');
67

78
$nav_style = $this->themeSetting('nav_style');
89
$body_classes = 'nav-horizontal';
@@ -83,13 +84,15 @@ $userBar = $this->userBar();
8384
</div>
8485
</div>
8586
</div>
86-
<div class="wrap-outer-search layout-band">
87-
<div class="wrap-content">
88-
<div class="search">
89-
<?php echo $this->partial('common/search-form'); ?>
87+
<?php if (!isset($no_search) || 0 == $no_search) { ?>
88+
<div class="wrap-outer-search layout-band">
89+
<div class="wrap-content">
90+
<div class="search">
91+
<?php echo $this->partial('common/search-form'); ?>
92+
</div>
9093
</div>
9194
</div>
92-
</div>
95+
<?php } ?>
9396
<div class="wrap-outer-content layout-band">
9497
<div class="<?php echo $wrap_classes; ?>">
9598
<?php if ('vertical' == $nav_style) { ?>

‎view/omeka/site/page/show.phtml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ if ($activePage) :
1919
<?php $this->trigger('view.show.before'); ?>
2020
<div class="blocks">
2121
<?php echo $this->content; ?>
22+
<?php echo $this->partial('common/sites-filter'); ?>
2223
</div>
2324
<?php $this->trigger('view.show.after'); ?>
2425
<?php if ($showPagePagination) : ?>

0 commit comments

Comments
 (0)