Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DRAFT] Reporting dates tables wagtail template 2.0 #5711

Closed
wants to merge 2 commits into from
Closed

[DRAFT] Reporting dates tables wagtail template 2.0 #5711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac42033
teeemplates, js, ,css, migrations
Apr 20, 2023
2a4efa3
templates for page and block
Apr 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions fec/fec/static/css/customize-editor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,3 +80,36 @@ li.sequence-member .sequence-member-inner .sequence-type-list .sequence-containe
.richtext ol ol ol li {
list-style-type: lower-roman;
}



div[data-contentpath="reporting_dates_table"] div.widget-checkbox_input {
display: none !important;
}


div[data-contentpath="reporting_dates_table"] label[for*="-handsontable-col-caption"] {
display: none;
}

div[data-contentpath="reporting_dates_table"] label[for*="-handsontable-col-caption"] + div.field-content{
display: none;
}


div[data-contentpath="reporting_dates_table"] div[id*="-value-table-handsontable-container"] {
height:auto !important;
}

div[data-contentpath="reporting_dates_table"] div.wtHolder {
height:auto !important;
}

div[data-contentpath="reporting_dates_table"] .fieldname-table .help table td {
background: #357b7d;
color:#fff;
font-weight: bold;
border-width: 2px;

}

196 changes: 149 additions & 47 deletions fec/fec/static/js/pages/reporting-dates-tables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const states_dropdown_template = `
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
Expand Down Expand Up @@ -72,10 +72,10 @@ const header_notes_modal_partial = `<div tabindex="-1" class="modal__overlay" da
</div>
</div>`;

/* eslint-disable no-console */

function ReportingDates() {

//Declare globals (scoped to this function) to get past linter error/tests. For header_notes and footnotes objects declared in CMS field, CSS.escape, Set()
/* global header_notes, footnotes */
this.dates_table = document.getElementsByClassName('election-dates-table')[0];

/*
Expand All @@ -88,24 +88,42 @@ function ReportingDates() {
or in blocks.py. I think the former makes sense.
*/

//only run this logic if the page has an `.election-dates-table` onn it
if (this.dates_table) {
//get all acnhor links in TDs)
this.anchors = this.dates_table.querySelectorAll('td a[href^=\'#\']');
this.buildStaticElements();

//disable default jump behavior for anchor links(#) but keep links for accessibility
for (const anchor of this.anchors) {
anchor.addEventListener('click', e => {
e.preventDefault();
});
}
this.convertFootnotes(); //converts number or symbol following "+" to footnote html, in-place

this.buildStaticElements();
this.addStateClass();

this.addFootnotes();
this.addFootnotes(); //adds hidden Footnote rows

this.stripeByState();

///TODO REMEMER THAT PUTTING THIS BELOW `this.addFootnotes()` DISABLES THE `e.preventDefault();` ON FOOTNNOTES sups ALREADY ON PAGE ON THIS TEST VERSION

//it only runs this logic if the page has an `.election-dates-table` on it, TODO: might not e necessary for this trmplate
if (this.dates_table) {
//get all acnhor links in TDs)
this.anchors = this.dates_table.querySelectorAll('td a[href^=\'#\']');

//disable default jump behavior for anchor links(#) but keep links for accessibility
for (const anchor of this.anchors) {
anchor.addEventListener('click', e => {
e.preventDefault();
});
}

const header_sups = document.querySelectorAll(
'tr:first-child th a[href^="#"]'
);

//add data attribute to the header sups to open AY11 dialog and disable default jump behavior for anchor links(#) but keep links for accessibility
for (const header_sup of header_sups) {
header_sup.setAttribute('data-a11y-dialog-show', 'header_notes_modal');
header_sup.addEventListener('click', e => {
e.preventDefault();
});
}

//Define media query
const mql = window.matchMedia('screen and (max-width: 650px)');

Expand Down Expand Up @@ -167,31 +185,32 @@ ReportingDates.prototype.buildStaticElements = function() {
table_parent.insertBefore(dropdown_wrapper, this.dates_table);

//Create static footnote/header note list

let hdr_str = '';
//build static list from header notes object if it exists
if (typeof header_notes == 'object') {
let hdr_str = '';
const header_notes_json = JSON.parse(document.getElementById('header_notes').textContent);
// WORKS-- //build static list from footnotes object (`const footnotes`, which is added in teemplate riht now) --if it exists
if (typeof header_notes_json == 'object') {
hdr_str = `<h4>Header notes</h4><ul>`;
for (const key in header_notes) {
for (const note of header_notes_json.footnote) {
hdr_str += `<li>
<a name="hdr${key}" id="hdr${key}"></a>
<b>${key}</b>&nbsp;&nbsp;${header_notes[key]}
<a name="hdr${note.value.footnote_number}" id="hdr${note.value.footnote_number}"></a>
<b>${note.value.footnote_number}</b>&nbsp;&nbsp;${note.value.footnote_text}}
</l1>`;
}
hdr_str += `</ul>`;
}

hdr_str += `</ul>`;
}

let ftnt_str = '';
//build static list from footnotes object if it exists
if (typeof footnotes == 'object') {
// build static list from <script id="footnotes"> which is added in teemplate with json_script technique ) --if it exist
const footnotes_json = JSON.parse(document.getElementById('footnotes').textContent);
let ftnt_str = '';
if (typeof footnotes_json == 'object') {
ftnt_str = `<h4>Footnotes</h4><ul>`;
for (const key in footnotes) {
const dot = /^\d+$/.test(key) ? '.' : '';
for (const note of footnotes_json.footnote) {
console.log('Note:', note);
const dot = /^\d+$/.test(note.value.footnote_number) ? '.' : '';
ftnt_str += `<li>
<a name="footnote_${key}" id="footnote_${key}"></a>
<b>${key}</b>${dot}&nbsp;${footnotes[key]}
</l1>`;
<a name="footnote_${note.value.footnote_number}" id="footnote_${note.value.footnote_number}"></a>
<b>${note.value.footnote_number}</b>${dot}&nbsp;${note.value.footnote_text}
</l1>`;
}
ftnt_str += `</ul>`;
}
Expand All @@ -208,7 +227,7 @@ ReportingDates.prototype.buildStaticElements = function() {
table_parent.insertBefore(static_notes, this.dates_table.nextSibling);
}

if (typeof header_notes == 'object') {
if (typeof header_notes_json == 'object') {
//Create A11Y modal dialog for header_notes popup and add innerHTML
const dialog = document.createElement('div');
//Must add these three classes separately for IE :-(
Expand All @@ -223,24 +242,34 @@ ReportingDates.prototype.buildStaticElements = function() {
const dialog_p = document.querySelector('.modal p');
dialog_p.innerHTML = `${hdr_str}`;

const header_sups = document.querySelectorAll(
'tr:first-child th a[href^="#"]'
);
}
};

// Adds row state name classes
ReportingDates.prototype.addStateClass = function() {
const all_tr = document.querySelectorAll('tr');
Array.from(all_tr).forEach(row => {
let state_name = row.cells[0].textContent;
//state_name = state_name.split(' ')[0];//.toLowerCase()
console.log('STATE:', state_name);
const states_select = document.getElementById('states');
// console.log('SS',states_select);
Array.from(states_select.options).forEach(opt => {
//if (opt.textContent.includes(state_name)){
if (state_name.match(opt.textContent)) {

row.classList.add(opt.value.toLowerCase());
}
});

//add data attribute to the header sups to open AY11 dialog
for (const header_sup of header_sups) {
header_sup.setAttribute('data-a11y-dialog-show', 'header_notes_modal');
header_sup.addEventListener('click', e => {
e.preventDefault();
});
}
}
};

//Show chosen state rows, hide others
// Show chosen state rows, hide others
ReportingDates.prototype.handleStateChange = function() {
const state = this.states.value.toLowerCase();

//TODO: Should this be `this.dates_table.querySelectorAll` ?
const tr = document.querySelectorAll('tr');
const ftnt = document.querySelectorAll('tr.footnote_row');

Expand Down Expand Up @@ -274,21 +303,36 @@ ReportingDates.prototype.handleStateChange = function() {
}
};

// Add footnote rows based on existence of superscript number on page load
// Add footnote rows based on existence of superscript number created by convertFootnotes()
ReportingDates.prototype.addFootnotes = function() {
const footnotes_json = JSON.parse(document.getElementById('footnotes').textContent);
const footnotes_array = footnotes_json.footnote;
console.log('footnotes_array', footnotes_array);

//TODO: Should this be `this.dates_table.querySelectorAll` ?
const date_sups = document.querySelectorAll('td sup');

Array.from(date_sups)
.reverse()
.forEach(node => {
const indx = node.innerText; //should this be textContent?
console.log('indx', indx);
const state_class = node.closest('tr').className;
const ftnt_colspan = node.closest('tr').cells.length - 1;
let current_text;

for (let note of footnotes_array){
if(note.value.footnote_number == indx){

current_text = note.value.footnote_text;

}
}

const ftnt_row = `<tr class='${state_class} footnote_row footnote_${indx}'>
<td></td>
<td colspan=${ftnt_colspan}>
<b>${indx}.</b>&nbsp;${footnotes[indx]}</td>
<b>${indx}.</b>&nbsp;${current_text}</td>
</tr>`;
node.closest('tr').insertAdjacentHTML('afterend', ftnt_row);
});
Expand Down Expand Up @@ -495,4 +539,62 @@ ReportingDates.prototype.stripeByState = function() {
}
};

ReportingDates.prototype.convertFootnotes = function() {

const all_hdr = this.dates_table.getElementsByTagName('th');
Array.from(all_hdr).forEach(cell => {
//#WORKKS LEAVES A COMMA AFTER TEXT, BEFORE FOOTNOTE
const txt = cell.textContent;

if (/~/.test(txt)) {
cell.style.color='red';
let txt_array = txt.split('~');
let hdr_txt = txt_array.shift();
let appended_hdr_notes = txt_array;

let hdr_note_html_array = [];
for (let note of appended_hdr_notes) {
let hdr_note_html = `<a href="#hdr_${note}"><sup>${note}</sup></a>`;
hdr_note_html_array.push(hdr_note_html);

}

cell.innerHTML = hdr_txt+hdr_note_html_array;

}

});

//get all non-footnote/non-header row cells
const all_td = this.dates_table.querySelectorAll('tr:not(.footnote_row) td');

Array.from(all_td).forEach(cell => {

const txt = cell.textContent;
// console.log(txt);

if (/~/.test(txt)) {
cell.style.color='red';
//Create an array from the string split the tilda(s)
let txt_array = txt.split('~');
///The first item is the date text, return that as a var. Now txt_array only includes footnotes.
let date_txt = txt_array.shift();
//Creeate a new varialble or clarity
let appended_footnotes = txt_array;

let footnote_html_array = [];
for (let note of appended_footnotes) {
let footnote_html = `<a href="#footnote_${note}"><sup>${note}</sup></a>`;

footnote_html_array.push(footnote_html);
}

cell.innerHTML = date_txt+footnote_html_array;

}

});

}; // end conveertfootnotes()

new ReportingDates();
14 changes: 13 additions & 1 deletion fec/fec/static/scss/components/_table-styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Simple table
//
// <table class="simple-table simple-table--display">
// <table class="$">
// <thead class="simple-table__header">
// <tr>
// <th class="simple-table__header-cell">Dates covered</th>
Expand Down Expand Up @@ -403,6 +403,11 @@ h3 + .simple-table {
margin-left: u(-2rem);
}

#header_notes_modal p {
margin-left: u(2rem);
display: inline;
}

#static_notes {
margin-top: u(2rem);

Expand All @@ -418,6 +423,13 @@ h3 + .simple-table {
}
}

#static_notes p,
.footnote_row p {
display: inline
}



// Chart Table
// Table style used on breakdown charts
// Very similar to simple-table, but with slight differences
Expand Down
23 changes: 23 additions & 0 deletions fec/home/blocks.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,29 @@ class Meta:
template = 'blocks/custom_table.html'
icon = 'table'


class ReportingTableBlock(blocks.StructBlock):
"""A custom table
"""
reporting_table_options = {
'startRows': 1,
'startCols': 6,
'colHeaders': False,
'rowHeaders': False,
'height': 108,
'language': 'en',
'renderer': 'html'
}

table = TableBlock(table_options=reporting_table_options,
help_text='<table class="htcore handsontable" style="table-layout:fixed;width: calc(100% - 294px);position: fixed;top: 20%;"> \
<tr><td>State</td><td>Election date</td><td>Close of books+</td><td>Mailing deadline++</td> \
<td>Filing deadline++</td><td>48-Hour Notices**</td></tr</table>')

class Meta:
template = 'blocks/reporting-dates-table-block.html'
icon = 'table'


class ExampleImage(blocks.StructBlock):
"""Creates an example module with an image and a caption, side-by-side
Expand Down
Loading