Permalink
Browse files

Adjust the way selectable table renders checkboxes

This change ensures the checkbox will show immediatelly during pageload
if the user has javascript enabled.
  • Loading branch information...
r04r committed Sep 4, 2016
1 parent 4462e03 commit 154d4d0afc6e067fa2bb75a8751601339fbd22ce
Showing with 47 additions and 22 deletions.
  1. +22 −8 includes/functions.php
  2. +24 −13 javascript/main.js
  3. +1 −1 watchlist.php
@@ -1239,7 +1239,17 @@ function indent($num_tabs = 1)
return "\n".str_repeat("\t", $num_tabs);
}
// Print a <table>. 100 rows takes ~0.0035 seconds on my computer.
class SelectableTable extends table {
public function __construct($classes='') {
parent::__construct($classes . ' selectable');
}
protected function render_column($key, $column, $primary_column) {
if($key == 0) $column = "<script>renderSelectAllCheckbox();</script>".$column;
parent::render_column($key, $column, $primary_column);
}
}
class table
{
public $num_rows_fetched = 0;
@@ -1265,17 +1275,21 @@ public function define_columns($all_columns, $primary_column)
.indent().'<thead>'.indent(2).'<tr>';
foreach ($all_columns as $key => $column) {
$this->output .= indent(3).' <th class="';
if ($column != $primary_column) {
$this->output .= 'minimal ';
} else {
$this->primary_key = $key;
}
$this->output .= string_to_stylesheet_class($column).'">'.$column.'</th>';
$this->render_column($key, $column, $primary_column);
}
$this->output .= indent(2).'</tr>'.indent().'</thead>'.indent().'<tbody>';
}
protected function render_column($key, $column, $primary_column) {
$this->output .= indent(3).' <th class="';
if ($column != $primary_column) {
$this->output .= 'minimal ';
} else {
$this->primary_key = $key;
}
$this->output .= string_to_stylesheet_class($column).'">'.$column.'</th>';
}
public function add_table_class($class)
{
$this->table_classes = $class;
@@ -341,26 +341,37 @@ function quickCite(id){
return false;
}

/*
* Renders a checkbox to be later used by initialiseSelectableTables. This is done
* so that the checkbox will show immediatelly during pageload, without later flickering
* in.
*/
window.renderSelectAllCheckbox = renderSelectAllCheckbox;
function renderSelectAllCheckbox() {
let input = document.createElement("input");
input.type = 'checkbox';
input.title = "Check / Uncheck all";
input.style.display = 'inline';
input.className = 'select-all-checkbox';
document.write(input.outerHTML);
}

/*
* When a table has the "selectable" class, a select box is added to the heading
* which all the select boxes (assumed to be in the first column) shall be bound to.
*/
function initialiseSelectableTables() {
let selectableTables = document.querySelectorAll('table.selectable');
for (let table of Array.from(selectableTables)) {
let heading = table.querySelector('thead tr th');
let input = document.createElement("input");
input.type = 'checkbox';
input.title = "Check / Uncheck all";
input.style.display = 'inline';
heading.insertBefore(input, heading.firstChild);
input.addEventListener('change', e => {
let value = e.target.checked;
let checkboxes = table.querySelectorAll('tbody tr td:first-child input[type="checkbox"]');
for (let cb of checkboxes) {
cb.checked = value;
}
});
let heading = table.querySelector('thead tr th');
let input = table.querySelector(".select-all-checkbox");
input.addEventListener('change', e => {
let value = e.target.checked;
let checkboxes = table.querySelectorAll('tbody tr td:first-child input[type="checkbox"]');
for (let cb of checkboxes) {
cb.checked = value;
}
});
}
}

@@ -16,7 +16,7 @@
$stmt = $link->db_exec('SELECT watchlists.topic_id, topics.headline, topics.replies, topics.visits, topics.time FROM watchlists INNER JOIN topics ON watchlists.topic_id = topics.id WHERE watchlists.uid = %1 ORDER BY last_post DESC', $_SESSION['UID']);
$topics = new table('selectable');
$topics = new SelectableTable();
$topic_column = 'Topic';
$columns = array(
$topic_column,

0 comments on commit 154d4d0

Please sign in to comment.