6685 truncate methods - dataset pg summary block description

src/main/java/propertyFiles/Bundle.properties

@@ -59,6 +59,10 @@ apply=Apply
 add=Add
 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

src/main/webapp/dataset.xhtml

@@ -9,7 +9,8 @@
       xmlns:jsf="http://xmlns.jcp.org/jsf"
       xmlns:pt="http://java.sun.com/jsf/passthrough"
       xmlns:cc="http://java.sun.com/jsf/composite"
-      xmlns:o="http://omnifaces.org/ui">
+      xmlns:o="http://omnifaces.org/ui"
+      xmlns:of="http://omnifaces.org/functions">
     <h:head>
     </h:head>
     <h:body>
@@ -1652,10 +1653,24 @@
                     <!-- END: Publish/Submit for Review Dialogs -->
                 </h:form>
                 <script>
-                    //<![CDATA[                   
+                    //<![CDATA[
                     $(document).ready(function () {
                         popoverHTML('#{bundle.htmlAllowedTitle}', '#{bundle.htmlAllowedTags}');
+                        summaryDescTruncation();
                     });
+                    function summaryDescTruncation() {
+                        // truncate summary description, contentTruncate function in dv_rebind_bootstrap_ui.js
+                        // add summary desc row id to pass as selector param
+                        var descId = 'dsDescription';
+                        // 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)}';
+
+                        // pass bundle text variabls as params to function
+                        contentTruncate(descId, truncMoreBtn, truncMoreTip, truncLessBtn, truncLessTip);
+                    }
                     function openDialog() {
                         PF('details').show();
                     }
@@ -1670,16 +1685,14 @@
                             $('button[id$="compareVersions"]').trigger('click');
                         }
                     }
-
                     function testFilesSelected() {
                         var count = PF('filesTable').getSelectedRowsCount();
                         if (count == 0) {
                             PF('selectFiles').show();
                         } else {
                             return true;
-                        }                        
+                        }
                     }
-
                     function updateTemplate() {
                         $('button[id$="updateTemplate"]').trigger('click');
                     }

src/main/webapp/dataverse_template.xhtml

@@ -79,13 +79,13 @@
             </f:facet>
         </p:ajaxStatus>
         <ui:include src="contactFormFragment.xhtml"></ui:include>
+        <script src="#{resource['js/dv_rebind_bootstrap_ui.js']}?version=#{systemConfig.getVersion()}"></script>
         <script defer="defer" src="#{resource['bs/js/bootstrap.min.js']}?version=#{systemConfig.getVersion()}"></script>
         <script defer="defer" src="#{resource['js/ie-compat.js']}?version=#{systemConfig.getVersion()}"></script>
-        <script defer="defer" src="#{resource['js/dv_rebind_bootstrap_ui.js']}?version=#{systemConfig.getVersion()}"></script>
         <script defer="defer" src="#{resource['js/owl.carousel.js']}?version=#{systemConfig.getVersion()}"></script>
         <script defer="defer" src="#{resource['js/jquery.matchHeight.js']}?version=#{systemConfig.getVersion()}"></script>
-        <script defer="defer" src="#{resource['js/jquery.sharrre.js']}?version=#{systemConfig.getVersion()}"></script>  
-        <script defer="defer" src="#{resource['js/clipboard.min.js']}?version=#{systemConfig.getVersion()}"></script>          
+        <script defer="defer" src="#{resource['js/jquery.sharrre.js']}?version=#{systemConfig.getVersion()}"></script>
+        <script defer="defer" src="#{resource['js/clipboard.min.js']}?version=#{systemConfig.getVersion()}"></script>
         <ui:fragment rendered="#{systemConfig.isShibPassiveLoginEnabled()}">
             <script defer="defer" src="#{resource['js/shib/isPassive.js']}"></script>
         </ui:fragment>
@@ -104,7 +104,7 @@
                     }
                     ;
                 });
-
+                
                 // Rebind bootstrap UI components
                 bind_bsui_components();
             });

src/main/webapp/resources/css/structure.css

@@ -627,13 +627,35 @@ div.edit-field div.ui-message {margin:6px 0;}
 .metadata-container table.metadata {border-collapse:separate;margin:0 4px;width:100%;}
 .metadata-container table.metadata th {width:25%;vertical-align:top;padding:6px 12px;}
 .metadata-container table.metadata td {padding:6px 12px;vertical-align:top;}
+
+/* STACK METADATA TABLE LABELS + VALUES FOR SM, XS */
 @media(max-width:767px){
-    .metadata-container table.metadata th, .metadata-container table.metadata td {display:block;width:100%;}
-    .metadata-container table.metadata th {padding-bottom:0;}
-    .metadata-container table.metadata td {padding-left:30px;}
+    .metadata-container:not(#dataset-summary-metadata) table.metadata th, .metadata-container:not(#dataset-summary-metadata) table.metadata td {display:block;width:100%;}
+    .metadata-container:not(#dataset-summary-metadata) table.metadata th {padding-bottom:0;}
+    .metadata-container:not(#dataset-summary-metadata) table.metadata td {padding-left:30px;}
+}
+/* STACK METADATA TABLE LABELS + VALUES FOR MD, SM, XS ... DATASET-SUMMARY-BLOCK ONLY */
+@media(max-width:1199px){
+    #dataset-summary-metadata.metadata-container table.metadata th, #dataset-summary-metadata.metadata-container table.metadata td {display:block;width:100%;}
+    #dataset-summary-metadata.metadata-container table.metadata th {padding-bottom:0;}
+    #dataset-summary-metadata.metadata-container table.metadata td {padding-left:30px;}
 }
 .panel-body.metadata-container {padding:15px 0;}
 .metadata-logo {max-width:180px;max-height:40px;}
+.metadata-container .truncate-more-link, .metadata-container .collapse-less-link {color: #337AB7; cursor: pointer; cursor: hand;}
+
+/* METADATA LONG STRINGS */
+.metadata-container table.metadata td > div {
+    /* TO-DO #6685 #6578 #1634 #1249 */
+}
+/* METADATA HTML */
+.metadata-container pre {
+    white-space: pre-wrap !important;
+}
+/* TRUNCATION */
+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;}

src/main/webapp/resources/js/dv_rebind_bootstrap_ui.js

@@ -157,7 +157,51 @@ function sharrre(){
         }
     });
 }
-
+
+/*
+ * Truncate dataset description content
+ */
+function contentTruncate(truncSelector, truncMoreBtn, truncMoreTip, truncLessBtn, truncLessTip){
+    // SELECTOR ID FROM PARAMETERS
+    $('#' + truncSelector + ' td > div:first-child').each(function () {
+
+        // add responsive img class to limit width to that of container
+        $(this).find('img').attr('class', 'img-responsive');
+
+        // find container height
+        var containerHeight = $(this).outerHeight();
+
+        if (containerHeight > 250) {
+            // ADD A MAX-HEIGHT TO CONTAINER
+            $(this).css({'max-height':'250px','overflow-y':'hidden','position':'relative'});
+
+            // 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 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 full desc [+]" btn, background fade
+            $(this).append(moreBlock);
+
+            // 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-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);
+                $('html, body').animate({scrollTop: $('#' + truncSelector).offset().top - 60}, 500);
+                $('.more-block button').tooltip();
+            });
+        }
+    });
+}
+
 /*
  * Truncate file checksums
  */