Sha256: 05b8c77b93f7789894cbf204322e9a7cf664bdab95d4b1ff75162845bba123bd
Contents?: true
Size: 1.64 KB
Versions: 12
Compression:
Stored size: 1.64 KB
Contents
const $ = window.$
import { Controller } from "stimulus"
// Used when a table has toggleable rows (initially hidden rows that can be toggled open
// to see e.g. notes or extended details) and each master row and its toggleable sibling are
// nested in a tbody (this is valid HTML) - ie there are probably two trs per tbody, and the last
// one is toggleable. If you need anyting more complex you'll need to clone or adapt this
// controller
export default class extends Controller {
// This handler toggles the last tr in the current tbody. We use multiple tbodys in each table
// to make toggling like this simpler, and to group the related (visible and toggleable) rows
// together.
row(event) {
event.preventDefault
const tbody = event.target.closest("tbody")
tbody.classList.toggle("toggleable--open")
// Update masonry - TODO: move to a module
$(".grid > .row").masonry("layout")
}
// Toggle the last tr in each tbody in the current table.
// The link that triggers this event will most likelt be a double chevron icon
// sitting in a thead.
table(event) {
event.preventDefault
const table = event.target.closest("table")
const thead = event.target.closest("thead")
// Use an Array rather a NodeList here as IE does not support NodeList.forEach
const tbodies = Array.prototype.slice.call(table.querySelectorAll("tbody"))
const hide = thead.classList.contains("toggleable--open")
thead.classList.toggle("toggleable--open")
tbodies.forEach(function(tbody) { tbody.classList.toggle("toggleable--open", !hide) })
// Update masonry - TODO: move to a module
$(".grid > .row").masonry("layout")
}
}
Version data entries
12 entries across 12 versions & 1 rubygems