Commit 54b78532 authored by git's avatar git Committed by Mark Fullmer

Issue #2919397 by Jules_PDX: Support Other TableSaw Options

parent a801ca47
This diff is collapsed.
/*! Tablesaw - v3.0.0-beta.1 - 2016-09-19
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2016 Filament Group; Licensed MIT */
table.tablesaw {
empty-cells: show;
max-width: 100%;
width: 100%;
}
.tablesaw {
border-collapse: collapse;
width: 100%;
}
/* Structure */
.tablesaw {
border: 0;
padding: 0;
}
.tablesaw th,
.tablesaw td {
box-sizing: border-box;
padding: .5em .7em;
}
.tablesaw thead tr:first-child th {
padding-top: .9em;
padding-bottom: .7em;
}
/* Table rows have a gray bottom stroke by default */
.tablesaw-stack tbody tr {
border-bottom: 1px solid #dfdfdf;
}
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: none;
}
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
@media only all {
/* Show the table cells as a block level element */
.tablesaw-stack td,
.tablesaw-stack th {
text-align: left;
display: block;
}
.tablesaw-stack tr {
clear: both;
display: table-row;
}
/* Make the label elements a percentage width */
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: block;
padding: 0 .6em 0 0;
width: 30%;
display: inline-block;
}
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
.tablesaw-stack th .tablesaw-cell-label-top,
.tablesaw-stack td .tablesaw-cell-label-top {
display: block;
padding: .4em 0;
margin: .4em 0;
}
.tablesaw-cell-label {
display: block;
}
/* Avoid double strokes when stacked */
.tablesaw-stack tbody th.group {
margin-top: -1px;
}
/* Avoid double strokes when stacked */
.tablesaw-stack th.group b.tablesaw-cell-label {
display: none !important;
}
}
@media (max-width: 39.9375em) {
.tablesaw-stack thead td,
.tablesaw-stack thead th {
display: none;
}
.tablesaw-stack tbody td,
.tablesaw-stack tbody th {
clear: left;
float: left;
width: 100%;
}
.tablesaw-cell-label {
vertical-align: top;
}
.tablesaw-cell-content {
max-width: 67%;
display: inline-block;
}
.tablesaw-stack td:empty,
.tablesaw-stack th:empty {
display: none;
}
}
/* Media query to show as a standard table at 560px (35em x 16px) or wider */
@media (min-width: 40em) {
.tablesaw-stack tr {
display: table-row;
}
/* Show the table header rows */
.tablesaw-stack td,
.tablesaw-stack th,
.tablesaw-stack thead td,
.tablesaw-stack thead th {
display: table-cell;
margin: 0;
}
/* Hide the labels in each cell */
.tablesaw-stack td .tablesaw-cell-label,
.tablesaw-stack th .tablesaw-cell-label {
display: none !important;
}
}
\ No newline at end of file
......@@ -8,7 +8,17 @@
* https://github.com/filamentgroup/tablesaw
* Copyright (c) 2016 Filament Group; Licensed MIT
*/
$('.tablesaw thead tr th').attr('data-tablesaw-priority', '1');
$('.tablesaw thead tr th').first().attr('data-tablesaw-priority', 'persist');
$('.tablesaw thead tr th').addClass('tablesaw-priority-1');
$('.tablesaw thead tr th').first().removeClass('tablesaw-priority-1');
$( document ).trigger( "enhance.tablesaw" );
if ($(window).width() < 500) {
$('.tablesaw thead tr').nth-child(1).addClass('tablesaw-toggle-cellvisible');
$('.tablesaw thead tr th').toggleClass('tablesaw-toggle-cellvisible');
}
});
}
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -2,9 +2,9 @@ tablesaw-filter:
version: 1.x
css:
theme:
css/tablesaw.stackonly.css: {}
css/tablesaw.css: {}
js:
js/tablesaw.stackonly.js: {}
js/tablesaw.js: {}
js/tablesaw-init.js: {}
dependencies:
- core/jquery
......@@ -4,6 +4,7 @@ namespace Drupal\responsive_tables_filter\Plugin\Filter;
use Drupal\filter\FilterProcessResult;
use Drupal\filter\Plugin\FilterBase;
use Drupal\Core\Form\FormStateInterface;
/**
* Responsive Tables Filter class. Implements process() method only.
......@@ -12,6 +13,9 @@ use Drupal\filter\Plugin\FilterBase;
* id = "filter_responsive_tables_filter",
* title = @Translation("Apply responsive behavior to HTML tables."),
* type = Drupal\filter\Plugin\FilterInterface::TYPE_MARKUP_LANGUAGE,
* settings = {
* "tablesaw_type" = "stack"
* }
* )
*/
class FilterResponsiveTablesFilter extends FilterBase {
......@@ -34,6 +38,25 @@ class FilterResponsiveTablesFilter extends FilterBase {
return $result;
}
/**
* {@inheritdoc}
*/
public function settingsForm(array $form, FormStateInterface $form_state) {
$form['tablesaw_type'] = [
'#type' => 'select',
'#title' => $this->t('Tablesaw Types'),
'#default_value' => $this->settings['tablesaw_type'],
'#description' => $this->t('Tablesaw styles availabe on mobile. Documentation: https://github.com/filamentgroup/tablesaw'),
'#options' => [
'stack' => $this->t('Stack Mode'),
'columntoggle' => $this->t('Column Toggle Mode'),
'swipe' => $this->t('Swipe Mode'),
'mode_switcher' => $this->t('Mode Switcher'),
],
];
return $form;
}
/**
* Business logic for adding classes & attributes to <table> tags.
*/
......@@ -66,11 +89,13 @@ class FilterResponsiveTablesFilter extends FilterBase {
// Find existing class attributes, if any, and append tablesaw class.
$existing_classes = $table->getAttribute('class');
if (strpos($existing_classes, 'no-tablesaw') === FALSE) {
$new_classes = !empty($existing_classes) ? $existing_classes . ' tablesaw tablesaw-stack' : 'tablesaw tablesaw-stack';
$new_classes = !empty($existing_classes) ? $existing_classes . ' tablesaw tablesaw-' . $this->settings['tablesaw_type'] : 'tablesaw tablesaw-' . $this->settings['tablesaw_type'];
$table->setAttribute('class', $new_classes);
// Force data-tablesaw-mode attribute to be "stack".
$table->setAttribute('data-tablesaw-mode', 'stack');
$table->setAttribute('data-tablesaw-mode', $this->settings['tablesaw_type']);
$table->setAttribute('data-tablesaw-minimap', NULL);
}
}
// Get innerHTML of root node.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment