<div class="table table--store-hours collapsible-table" data-collapsible="1" data-week-start-day="1">
<table>
<caption>
<button class="table__toggle-control js-table-toggle-control">
Store Hours
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
<svg class="icon icon--arrow-up">
<use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>
</button>
</caption>
<colgroup>
<col class="colgroup colgroup--day">
<col class="colgroup colgroup--hours">
</colgroup>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<th>Monday</th>
<td>09:00am - 05:00pm</td>
</tr>
<tr>
<th>Tuesday</th>
<td>09:00am - 05:00pm</td>
</tr>
<tr>
<th>Wednesday</th>
<td>09:00am - 05:00pm</td>
</tr>
<tr>
<th>Thursday</th>
<td>09:00am - 05:00pm</td>
</tr>
<tr>
<th>Friday</th>
<td>09:00am - 05:00pm</td>
</tr>
<tr>
<th>Saturday</th>
<td>09:00am - 05:00pm</td>
</tr>
<tr>
<th>Sunday</th>
<td>Closed</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<div class="table table--{{_self.name}}{{#each tableClasses}} {{this}}{{/each}}"{{#if collapsible}} data-collapsible="1"{{/if}}{{#each tableAttributes}} {{this.name}}="{{this.value}}"{{/each}}>
<table>
{{#if caption}}
<caption{{#each captionAttributes}} {{this.name}}="{{this.value}}"{{/each}}>
{{#if collapsible}}<button class="table__toggle-control js-table-toggle-control">{{/if}}
{{caption}}
{{#if collapsible}}
{{render '@icons--arrow-down'}}
{{render '@icons--arrow-up'}}
</button>{{/if}}
</caption>
{{/if}}
{{#if colgroup}}
<colgroup>
{{#each colgroup}}
<col{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
{{/each}}
</colgroup>
{{/if}}
{{#if thead}}
<thead{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
<tr>
{{#each thead.cells}}
<{{../thead.cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{../thead.cellType}}>
{{/each}}
</tr>
</thead>
{{/if}}
<tbody>
{{#each tbody.rows}}
<tr>
{{#each cells}}
<{{cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{cellType}}>
{{/each}}
</tr>
{{/each}}
</tbody>
{{#if tfoot}}
<tfoot{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>
{{#each tfoot.cells}}
<{{../tfoot.cellType}}{{#each attributes}} {{this.name}}="{{this.value}}"{{/each}}>{{value}}</{{../tfoot.cellType}}>
{{/each}}
</tfoot>
{{/if}}
</table>
</div>
{
"collapsible": true,
"tableClasses": [
"collapsible-table"
],
"tableAttributes": [
{
"name": "data-week-start-day",
"value": "1"
}
],
"caption": "Store Hours",
"captionAttributes": [],
"colgroup": [
{
"attributes": [
{
"name": "class",
"value": "colgroup colgroup--day"
}
]
},
{
"attributes": [
{
"name": "class",
"value": "colgroup colgroup--hours"
}
]
}
],
"thead": {},
"tbody": {
"rows": [
{
"attributes": [],
"cells": [
{
"value": "Monday",
"cellType": "th"
},
{
"value": "09:00am - 05:00pm",
"cellType": "td"
}
]
},
{
"cells": [
{
"value": "Tuesday",
"cellType": "th"
},
{
"value": "09:00am - 05:00pm",
"cellType": "td"
}
]
},
{
"cells": [
{
"value": "Wednesday",
"cellType": "th"
},
{
"value": "09:00am - 05:00pm",
"cellType": "td"
}
]
},
{
"cells": [
{
"value": "Thursday",
"cellType": "th"
},
{
"value": "09:00am - 05:00pm",
"cellType": "td"
}
]
},
{
"cells": [
{
"value": "Friday",
"cellType": "th"
},
{
"value": "09:00am - 05:00pm",
"cellType": "td"
}
]
},
{
"cells": [
{
"value": "Saturday",
"cellType": "th"
},
{
"value": "09:00am - 05:00pm",
"cellType": "td"
}
]
},
{
"cells": [
{
"value": "Sunday",
"cellType": "th"
},
{
"value": "Closed",
"cellType": "td"
}
]
}
]
},
"tfoot": {}
}
(function (window) {
'use strict';
const tableSelector = '.table';
const tables = document.querySelectorAll(tableSelector);
const collapsibleTableClass = 'collapsible-table';
const collapsibleTableActiveClass = 'js-collapsible-table--active';
const collapsibleTableToggleSelector = '.js-table-toggle-control';
const storeHoursTableClass = 'table--store-hours';
const storeHoursTodayClass = 'js-store-hours-table--today';
const today = new Date;
const weekday = today.getDay();
function toggleCollapsibleTable(e) {
e.target.closest(tableSelector).classList.toggle(collapsibleTableActiveClass);
e.preventDefault();
}
function init() {
if (tables) {
for (let i = 0; i < tables.length; i++) {
const table = tables[i];
// Handle collapsible tables.
if (table.classList.contains(collapsibleTableClass)) {
const toggleControl = table.querySelector(collapsibleTableToggleSelector);
toggleControl.addEventListener('click', toggleCollapsibleTable);
}
// Handle store hours tables.
if (table.classList.contains(storeHoursTableClass)) {
const weekStartDay = table.getAttribute('data-week-start-day');
// Javascript considers weeks to start on Sunday, so Sunday == 0. Our
// tables may NOT start on Sunday, so we need to account for that (but
// we assume that if they don't start on Sunday, they start on Monday!)
//
// Note that we're also compensating here for the fact that the weekday
// value is zero-based while the nth-child selector we use to mark the
// current day's row is one-based.
const todaysHoursRowIndex = (weekStartDay > 0) ? weekday : weekday + 1;
const todaysHoursRow = table.querySelector('tr:nth-child(' + todaysHoursRowIndex + ')');
todaysHoursRow.classList.add(storeHoursTodayClass);
}
}
}
}
init();
})(this);
.table {
max-width: 300px;
font-size: 1.4rem;
line-height: 2.0rem;
text-align: left;
border-collapse: collapse;
caption {
width: 100%;
margin-bottom: $gutter-width / 2;
font-weight: bold;
text-align: left;
}
th,
td {
padding: 0;
font-weight: $font-weight-normal;
text-align: left;
}
th {
padding: 0;
}
}
.table[data-collapsible='1'] {
thead,
tfoot,
tr {
display: none;
}
&.table--store-hours {
tr.js-store-hours-table--today {
display: table-row;
}
}
}
.js-collapsible-table--active[data-collapsible] {
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
tr {
display: table-row;
}
.icon--arrow-up {
display: block;
}
.icon--arrow-down {
display: none;
}
}
.table__toggle-control {
width: 100%;
margin: 0;
padding: 0;
border-style: none;
background: transparent;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-align: inherit;
cursor: pointer;
.icon {
width: 6px;
padding: 8px 0 7px;
float: right;
}
.icon--arrow-up {
display: none;
}
}
.table--store-hours {
th {
padding-right: 5px;
}
}
There are no notes for this item.