Skip to content

Commit

Permalink
Implementing a JS function to stop event propagation for nested oncli…
Browse files Browse the repository at this point in the history 
…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
VelNZ committed Apr 4, 2018
1 parent 533a86b commit ef964c9
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 10 deletions.
10 changes: 5 additions & 5 deletions functions/table_functions.php
View file
Expand Up @@ -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 a link to open in a new tab has been supplied (takes priority over a same tab link)
if ($new_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 // If a link to open in the same tab has been supplied
} elseif ($same_tab_link != "") { } 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 // If a color has been supplied for the cell text
Expand Down Expand Up @@ -146,7 +146,7 @@ function database_table($db_information) {


// If the user is logged in, add the modification of pedigree action // If the user is logged in, add the modification of pedigree action
if (is_user_logged_in()) { 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 no pedigree has been defined yet, print a red icon to edit it
if ($db_information[$group][$file]["Pedigree"] == "No") { if ($db_information[$group][$file]["Pedigree"] == "No") {
Expand All @@ -161,7 +161,7 @@ function database_table($db_information) {


// If the database summary reports exist, print a link to view them // 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")) { 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 // Flag to print the GBS icon for the current DB
Expand All @@ -171,7 +171,7 @@ function database_table($db_information) {
foreach (explode(";", $db_information[$group][$file]["Sample Names"]) as $sample) { 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 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) { 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; $GBS_icon_printed = 1;
} }
Expand Down
14 changes: 14 additions & 0 deletions html_footer.php
View file
Expand Up @@ -245,6 +245,20 @@ function restrict_width(id) {
document.getElementById(id).style.width = '92%'; 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 // GOOGLE ANALYTICS
Expand Down
11 changes: 6 additions & 5 deletions results.php
View file
Expand Up @@ -182,8 +182,9 @@
continue; continue;
} }


echo "<tr>"; // Link to the page with all columns for the variant clicked
// Go through each column value for the current variant 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++) { for ($i = 0; $i < count($columns); $i++) {
// Print each database cell and link out to external websites for specific columns // 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 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
Expand Down Expand Up @@ -219,7 +220,7 @@
print_table_cell($columns[$i], "http://www.omim.org/entry/".$omim_numbers[0], "", ""); print_table_cell($columns[$i], "http://www.omim.org/entry/".$omim_numbers[0], "", "");
// Populate the IGV column using the variant coordinate // Populate the IGV column using the variant coordinate
} elseif (isset($column_index["IGV"]) && $column_index["IGV"] == $i) { } 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, "", "", ""); print_table_cell($igv_link, "", "", "");
// Populate the Impact Summary column using several other columns if they are present // Populate the Impact Summary column using several other columns if they are present
} elseif (isset($column_index["Impact Summary"]) && $column_index["Impact Summary"] == $i) { } elseif (isset($column_index["Impact Summary"]) && $column_index["Impact Summary"] == $i) {
Expand Down Expand Up @@ -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 { } 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>"; echo "</tr>";
Expand Down

0 comments on commit ef964c9

Please sign in to comment.