Add read less btn to dataset desc truncate, plus code clean up [ref #…

…6685]
IQSS · Mar 8, 2021 · 810e917 · 810e917
1 parent 8093d2f
commit 810e917
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 12 deletions.
diff --git a/src/main/java/propertyFiles/Bundle.properties b/src/main/java/propertyFiles/Bundle.properties
@@ -61,6 +61,8 @@ delete=Delete
 copyClipboard=Copy to Clipboard
 truncateMoreBtn=Read full {0} [+]
 truncateMoreTip=Click to read the full {0}.
+truncateLessBtn=Collapse {0} [+]
+truncateLessTip=Click to collapse the {0}.
 yes=Yes
 no=No
 previous=Previous

diff --git a/src/main/webapp/dataset.xhtml b/src/main/webapp/dataset.xhtml
@@ -1663,15 +1663,17 @@
                     });
                     function summaryDescTruncation() {
                         // truncate summary description, contentTruncate function in dv_rebind_bootstrap_ui.js
-                        // add summary desc row id to pass as function selector
+                        // add summary desc row id to pass as selector param
                         var descId = 'dsDescription';
-                        // add metadata dynamic label text to button and tooltip text from bundle
+                        // add metadata dynamic label text, tooltip text from bundle as param
                         var truncMoreBtn = '#{of:format1(bundle.truncateMoreBtn, DatasetPage.datasetVersionUI.description.datasetFieldType.localeTitle)}';
                         var truncMoreTip = '#{of:format1(bundle.truncateMoreTip, DatasetPage.datasetVersionUI.description.datasetFieldType.localeTitle)}';
+                        var truncLessBtn = '#{of:format1(bundle.truncateLessBtn, DatasetPage.datasetVersionUI.description.datasetFieldType.localeTitle)}';
+                        var truncLessTip = '#{of:format1(bundle.truncateLessTip, DatasetPage.datasetVersionUI.description.datasetFieldType.localeTitle)}';
 
                         if (!truncactionHappened) {
-                            // pass text params to function
-                            contentTruncate(descId, truncMoreBtn, truncMoreTip);
+                            // pass bundle text variabls as params to function
+                            contentTruncate(descId, truncMoreBtn, truncMoreTip, truncLessBtn, truncLessTip);
 
                             truncactionHappened = true;
                         }

diff --git a/src/main/webapp/resources/css/structure.css b/src/main/webapp/resources/css/structure.css
@@ -653,8 +653,9 @@ div.edit-field div.ui-message {margin:6px 0;}
     white-space: pre-wrap !important;
 }
 /* TRUNCATION */
-div.more-fade-block {text-align:center; padding-top:250px; width:100%; position:absolute; bottom:0; background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff 80%);}
+div.more-block {text-align:center; padding-top:250px; width:100%; position:absolute; bottom:0; background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff 80%);}
 button.desc-more-link {margin:0; padding:0;}
+div.less-block {text-align:center;};
 
 /* Primefaces vs Bootstrap selectOneMenu fix */
 div.ui-selectonemenu.form-control {padding:0px;}

diff --git a/src/main/webapp/resources/js/dv_rebind_bootstrap_ui.js b/src/main/webapp/resources/js/dv_rebind_bootstrap_ui.js
@@ -161,7 +161,7 @@ function sharrre(){
 /*
  * Truncate dataset description content
  */
-function contentTruncate(truncSelector, truncMoreBtn, truncMoreTip){
+function contentTruncate(truncSelector, truncMoreBtn, truncMoreTip, truncLessBtn, truncLessTip){
     // SELECTOR ID FROM PARAMETERS
     $('#' + truncSelector + ' td > div:first-child').each(function () {
 
@@ -175,17 +175,27 @@ function contentTruncate(truncSelector, truncMoreBtn, truncMoreTip){
             // ADD A MAX-HEIGHT TO CONTAINER
             $(this).css({'max-height':'250px','overflow-y':'hidden','position':'relative'});
 
-            // BTN LABEL TEXT, DYNAMIC ARIA ATTR'S, FROM BUNDLE VIA PARAMETERS
+            // BTN LABEL TEXT, ARIA ATTR'S, FROM BUNDLE VIA PARAMETERS
             var readMoreBtn = '<button class="btn btn-link desc-more-link" type="button" data-toggle="tooltip" data-original-title="' + truncMoreTip + '" aria-expanded="false" aria-controls="#' + truncSelector + '">' + truncMoreBtn + '</button>';
-            var moreFade = '<div class="more-fade-block">' + readMoreBtn + '</div>';
+            var moreBlock = '<div class="more-block">' + readMoreBtn + '</div>';
+            var readLessBtn = '<button class="btn btn-link desc-less-link" type="button" data-toggle="tooltip" data-original-title="' + truncLessTip + '" aria-expanded="true" aria-controls="#' + truncSelector + '">' + truncLessBtn + '</button>';
+            var lessBlock = '<div class="less-block">' + readLessBtn + '</div>';
 
-            // add Read More + button background fade
-            $(this).append(moreFade);
+            // add "Read full desc [+]" btn, background fade
+            $(this).append(moreBlock);
 
-            // ... add full description to summary block on Read More link click ++ add responsive img class
+            // show full description in summary block on "Read full desc [+]" btn click
             $(document).on('click', 'button.desc-more-link', function() {
                 $(this).tooltip('hide').parent('div').parent('div').css({'max-height':'none','overflow-y':'visible','position':'relative'});
-                $(this).parent('div.more-fade-block').remove();
+                $(this).parent('div.more-block').replaceWith(lessBlock);
+                $('.less-block button').tooltip();
+            });
+
+            // trucnate description in summary block on "Collapse desc [-]" btn click
+            $(document).on('click', 'button.desc-less-link', function() {
+                $(this).tooltip('hide').parent('div').parent('div').css({'max-height':'250px','overflow-y':'hidden','position':'relative'});
+                $(this).parent('div.less-block').replaceWith(moreBlock);
+                $('.more-block button').tooltip();
             });
         }
     });