How To
HTML
Your HTML will need to have several key parts, including:
- A separate content area for the date. The date must be in format MM/DD/YYYY, and note that if the format is different, or if there is anything else in that content area, this will not work.
- A unique class on the date area
- A containing/wrapping div around all of the reorderable items (this can be a row for col-* items, or just a simple div), with its own unique class
- A unique class name on the reorderable items
If you have multiple tabs with separate sets of date items that need to be reordered (like the Credit Union West example included below), you can do that! You’ll just need to make sure of the following:
- In your script, make sure to specify to target within that tab.
- Make sure to include a tab-specific class on each date area so you can sort by that.
- Duplicate/rework the script for each tab.
<div role="tabpanel" class="tab-pane fade in active" id="tab1">
<div class="row reorderable-articles">
<div class="col-md-4 col-sm-6 hidden-content reorderable">
<div class="news-item hidden-content">
<div class="slide-inner">
<div class="slide-text">
<div data-content-block="bodyCopy19" data-content="content" data-editable="editable" class="news-title">
{{#page.bodyCopy19}}
{{& content}}
{{/page.bodyCopy19}}
<!-- @if NODE_ENV!='production' -->
News Title
<!-- @endif -->
</div>
<div data-content-block="bodyCopy20" data-content="content" data-editable="editable" class="news-date tab1">
{{#page.bodyCopy20}}
{{& content}}
{{/page.bodyCopy20}}
<!-- @if NODE_ENV!='production' -->
06/01/2019
<!-- @endif -->
</div>
<div data-content-block="bodyCopy21" data-content="content" data-editable="editable" class="news-text">
{{#page.bodyCopy21}}
{{& content}}
{{/page.bodyCopy21}}
<!-- @if NODE_ENV!='production' -->
Put a blurb for information about your news here!
<!-- @endif -->
</div>
</div>
</div>
</div>
</div>
<!-- more reorderable items can go here -->
</div>
</div>
</div>
Script
Place the script in the script.js file, updating as needed to match the HTML classes.
BS5
// Blog page - reorder news articles by most recent
function sortDescending(containerSelector) {
var reorderableContainer = document.querySelector(containerSelector);
var reorderableElements = Array.from(reorderableContainer.querySelectorAll('.reorderable-articles .reorderable'));
reorderableElements.sort(function(a, b) {
var date1 = a.querySelector(".news-date.tab1").textContent;
date1 = date1.split('/');
date1 = new Date(date1[2], date1[0], date1[1] -1);
var date2 = b.querySelector(".news-date.tab1").textContent;
date2 = date2.split('/');
date2 = new Date(date2[2], date2[0], date2[1] -1);
return date1 < date2 ? 1 : -1;
});
reorderableElements.forEach(function(reorderable) {
reorderableContainer.querySelector('.reorderable-articles').appendChild(reorderable);
});
}
document.addEventListener('DOMContentLoaded', function() {
sortDescending('#tab1');
});
BS4
// Blog page - reorder news articles by most recent
function sortDescendingTab1(a, b) {
var date1 = $(a).find(".news-date.tab1").text();
date1 = date1.split('/');
date1 = new Date(date1[2], date1[0], date1[1] -1);
var date2 = $(b).find(".news-date.tab1").text();
date2= date2.split('/');
date2= new Date(date2[2], date2[0], date2[1] -1);
return date1 < date2 ? 1 : -1;
};
$(document).ready(function() {
$('#tab1 .reorderable-articles .reorderable').sort(sortDescendingTab1).appendTo('#tab1 .reorderable-articles');
});
Example Sites
Tags: bs2, bs3, bs4, bs5