Skip to content
Permalink
Browse files

Implementing a JS function to stop event propagation for nested oncli…

…cks/hrefs, found in tables. This function forces the event in the element clicked to be the one that is executed, rather than working up the DOM to the highest level one. For some reason Safari 11.1 changed the previous behaviour of following the href link and not executing the onclick that's at a higher level in the DOM so this code was necessary. An added benefit is that now the short variants results table implements variant information links per row rather than per cell, this is a MASSIVE reduction in code to transfer and render so should speed up loading this page when many variants are returned!
  • Loading branch information...
VelNZ committed Apr 4, 2018
1 parent 533a86b commit ef964c93a9ac4fd9872df261f0ae76f447463c8b
Showing with 25 additions and 10 deletions.
  1. +5 −5 functions/table_functions.php
  2. +14 −0 html_footer.php
  3. +6 −5 results.php
@@ -20,10 +20,10 @@ function print_table_cell($content, $new_tab_link, $same_tab_link, $color) {
// If a link to open in a new tab has been supplied (takes priority over a same tab link)
if ($new_tab_link != "") {
echo "onclick=\"window.open('".$new_tab_link."');\" ";
echo "onclick=\"window.open('".$new_tab_link."'); disabledEventPropagation(event);\" ";
// If a link to open in the same tab has been supplied
} elseif ($same_tab_link != "") {
echo "onclick=\"window.location.href='".$same_tab_link."';\" ";
echo "onclick=\"window.location.href='".$same_tab_link."'; disabledEventPropagation(event);\" ";
}
// If a color has been supplied for the cell text
@@ -146,7 +146,7 @@ function database_table($db_information) {
// If the user is logged in, add the modification of pedigree action
if (is_user_logged_in()) {
$db_information[$group][$file]["Actions"] .= "<a href=\"modify_pedigree?group=".$group."&query_db=".$file."\" style=\"border-bottom: 0px; margin:auto;\">";
$db_information[$group][$file]["Actions"] .= "<a href=\"modify_pedigree?group=".$group."&query_db=".$file."\" onclick=\"disabledEventPropagation(event);\" style=\"border-bottom: 0px; margin:auto;\">";
// If no pedigree has been defined yet, print a red icon to edit it
if ($db_information[$group][$file]["Pedigree"] == "No") {
@@ -161,7 +161,7 @@ function database_table($db_information) {
// If the database summary reports exist, print a link to view them
if (file_exists($GLOBALS["configuration_file"]["gemini"]["db_dir"]."/".$group."/".$file.".all_variants.summary") && file_exists($GLOBALS["configuration_file"]["gemini"]["db_dir"]."/".$group."/".$file.".rare_variants.summary")) {
$db_information[$group][$file]["Actions"] .= " <a href=\"database_summary?group=".$group."&query_db=".$file."\" style=\"border-bottom: 0px;\"><img src=\"images/clipboard_icon.png\" style=\"width: 15px; vertical-align: middle;\" alt=\"View variant report\"></a>";
$db_information[$group][$file]["Actions"] .= " <a href=\"database_summary?group=".$group."&query_db=".$file."\" onclick=\"disabledEventPropagation(event);\" style=\"border-bottom: 0px;\"><img src=\"images/clipboard_icon.png\" style=\"width: 15px; vertical-align: middle;\" alt=\"View variant report\"></a>";
}
// Flag to print the GBS icon for the current DB
@@ -171,7 +171,7 @@ function database_table($db_information) {
foreach (explode(";", $db_information[$group][$file]["Sample Names"]) as $sample) {
// If at least one sample in the DB is in the GBS and the GBS icon has not been printed yet, print it
if (isset($GBS_presence[$sample]) && $GBS_icon_printed == 0) {
$db_information[$group][$file]["Actions"] .= " <a href=\"gbs_query?group=".$group."&query_db=".$file."&hasped=".$db_information[$group][$file]["Pedigree"]."\" style=\"border-bottom: 0px;\"><img src=\"images/GBS-Icon.png\" style=\"width: 20px; vertical-align: middle;\" alt=\"Query GBS\"></a>";
$db_information[$group][$file]["Actions"] .= " <a href=\"gbs_query?group=".$group."&query_db=".$file."&hasped=".$db_information[$group][$file]["Pedigree"]."\" onclick=\"disabledEventPropagation(event);\" style=\"border-bottom: 0px;\"><img src=\"images/GBS-Icon.png\" style=\"width: 20px; vertical-align: middle;\" alt=\"Query GBS\"></a>";
$GBS_icon_printed = 1;
}
@@ -245,6 +245,20 @@ function restrict_width(id) {
document.getElementById(id).style.width = '92%';
}
}
//############################################
// DISABLE EVENT PROPAGATION (e.g. onclick within element that itself has an onclick)
//############################################
function disabledEventPropagation(event) {
// Good browsers
if (event.stopPropagation){
event.stopPropagation();
// Old IE
} else if (window.event) {
window.event.cancelBubble=true;
}
}
//############################################
// GOOGLE ANALYTICS
@@ -182,8 +182,9 @@
continue;
}
echo "<tr>";
// Go through each column value for the current variant
// Link to the page with all columns for the variant clicked
echo "<tr onclick=\"window.location.href='variant_info?variant=".$columns[$column_index["Chr"]].":".$columns[$column_index["Start"]]."-".$columns[$column_index["End"]]."&output_filename=".$result_file."';\">";
// Go through each column value for the current variant
for ($i = 0; $i < count($columns); $i++) {
// Print each database cell and link out to external websites for specific columns
if (isset($column_index{"Gene"}) && $column_index{"Gene"} == $i) { # Check whether the current cell is in the "Gene" column and add an external link if so
@@ -219,7 +220,7 @@
print_table_cell($columns[$i], "http://www.omim.org/entry/".$omim_numbers[0], "", "");
// Populate the IGV column using the variant coordinate
} elseif (isset($column_index["IGV"]) && $column_index["IGV"] == $i) {
$igv_link = "<a href=\"igv_link.php?locus=".$columns[$column_index["Chr"]].":".($columns[$column_index["Start"]] + 1)."\" style=\"padding: 0.4em 0.5em 0.4em 0.5em; font-size: 90%; line-height: 100%;\" class=\"button\" target=\"_blank\" title=\"Navigate to the variant position in a currently open IGV session\">IGV</a>";
$igv_link = "<a href=\"igv_link.php?locus=".$columns[$column_index["Chr"]].":".($columns[$column_index["Start"]] + 1)."\" onclick=\"disabledEventPropagation(event);\" style=\"padding: 0.4em 0.5em 0.4em 0.5em; font-size: 90%; line-height: 100%;\" class=\"button\" target=\"_blank\" title=\"Navigate to the variant position in a currently open IGV session\">IGV</a>";
print_table_cell($igv_link, "", "", "");
// Populate the Impact Summary column using several other columns if they are present
} elseif (isset($column_index["Impact Summary"]) && $column_index["Impact Summary"] == $i) {
@@ -407,9 +408,9 @@
######################
print_table_cell($columns[$i], "", "variant_info?variant=".$columns[$column_index["Chr"]].":".$columns[$column_index["Start"]]."-".$columns[$column_index["End"]]."&output_filename=".$result_file, "");
print_table_cell($columns[$i], "", "", "");
} else {
print_table_cell($columns[$i], "", "variant_info?variant=".$columns[$column_index["Chr"]].":".$columns[$column_index["Start"]]."-".$columns[$column_index["End"]]."&output_filename=".$result_file, "");
print_table_cell($columns[$i], "", "", "");
}
}
echo "</tr>";

0 comments on commit ef964c9

Please sign in to comment.
You can’t perform that action at this time.