From a14b8b570e913c38178421749e35a243b780d0ab Mon Sep 17 00:00:00 2001
From: zsloan
Date: Wed, 20 Dec 2023 20:33:34 +0000
Subject: Add option to Show More/Less for trait page descriptions when the
 description is more than 100 characters

---
 wqflask/wqflask/static/new/javascript/show_trait.js | 11 ++++++++++-
 wqflask/wqflask/templates/show_trait.html           |  9 ++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

(limited to 'wqflask')

diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index d09fbee9..c5214947 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -83,7 +83,16 @@ statTableRows.push(
   }
 );
 
-var add, blockByAttributeValue, blockByIndex, blockOutliers, changeStatsValue, createValueDropdown, editDataChange, exportSampleTableData, getSampleTableData, hideNoValue, hideTabs, makeTable, onCorrMethodChange, openTraitSelection, populateSampleAttributesValuesDropdown, processId, updateBarChart, updateHistogram, updateProbPlot, resetSamplesTable, sampleGroupTypes, sampleLists, showHideOutliers, statsMdpChange, updateStatValues;
+toggleDescription = function() {
+  if ($('.truncDesc').is(':visible')) {
+    $('.truncDesc').hide();
+    $('.fullDesc').show();
+  } else {
+    $('.truncDesc').show();
+    $('.fullDesc').hide();
+  }
+}
+
 add = function() {
   var trait;
   trait = $("input[name=trait_hmac]").val();
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index aff12571..dd054ffc 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -24,7 +24,14 @@
     <div class="container">
       <h2>Trait Data and Analysis for <b>{{ this_trait.display_name }}</b></h2>
       {% if this_trait.dataset.type != 'Publish' %}
-	<h3>{{ this_trait.description_fmt[0]|upper }}{{ this_trait.description_fmt[1:]|safe }}</h3>
+	    <h3>
+        {% set trait_description = this_trait.description_fmt[0]|upper + this_trait.description_fmt[1:]|safe %}
+        {% if trait_description|length < 100 %}
+        {{ trait_description }}
+        {% else %}
+        <span class="truncDesc" style="display: block;">{{ trait_description[:99] }}... (<a onclick="toggleDescription()" href="#">Show More</a>)</span><span class="fullDesc" style="display: none;">{{ trait_description }} (<a onclick="toggleDescription()" href="#">Show Less</a>)</span>
+        {% endif %}
+      </h3>
       {% endif %}
 
       <form method="post" action="" target="_blank" name="trait_page" id="trait_data_form" class="form-horizontal">
-- 
cgit v1.2.3