replace in the browser descriptions js with a controller to show more

ontoportal-lirmm · Apr 19, 2023 · d481108 · d481108
1 parent 482f8f1
commit d481108
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 46 deletions.
diff --git a/app/assets/stylesheets/browse.scss b/app/assets/stylesheets/browse.scss
@@ -25,6 +25,20 @@
     margin-bottom: 20px;
 
 }
+
+.browse-desc-text{
+    font-size: 16px;
+    color: #666666;
+    font-weight: 400;
+    margin: 5px 0 !important;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--read-more-line-clamp, 2);
+}
+
+
+
 .browse-you-are-admin{
     display: flex;
     flex-direction: column;
@@ -61,16 +75,7 @@
     border: 1px solid var(--primary-color);
     border-radius: 40px;
 }
-.browse-desc-text{
-    font-size: 16px;
-    color: #666666;
-    font-weight: 400;
-    margin: 5px 0 !important;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 3; /* Change this value to control the number of lines shown */
-    -webkit-box-orient: vertical;
-}
+
 .browse-show-more-button {
     cursor: pointer;
     font-size: 14px;

diff --git a/app/views/ontologies/_ontologies.html.haml b/app/views/ontologies/_ontologies.html.haml
@@ -1,5 +1,3 @@
-
-
 = turbo_frame_tag "search-results" do
   %p.browse-desc-text{:style => "margin-bottom: 15px;"}
     = "Showing "+ @ontologies.length.to_s
@@ -16,11 +14,11 @@
           - if ontology[:viewOfOnt]
             .browse-ontology-view
               view
-        .browse-desc-container
-          %p.browse-desc-text
+        .browse-desc-container{data:{controller:"text-truncate", 'text-truncate-more-text-value': '+ Show more ...' , 'text-truncate-less-text-value': '- Show less ...'}}
+          %p.browse-desc-text{'data-text-truncate-target': 'content'}
             = ontology[:description]
-          .browse-show-more-button 
-            Show more ...
+          .browse-show-more-button{data:{'text-truncate-target': 'button', 'action':"click->text-truncate#toggle"}}
+            + Show more ...
 
 
         - unless ontology[:fairScore].nil? || ontology[:acronym] == 'AGROVOC'
@@ -60,33 +58,4 @@
             %p.browse-card-number
               = ontology[:note_count]
             %p.browse-card-text
-              notes
-  :javascript
-    const textContainers = document.querySelectorAll('.browse-desc-container');
-    textContainers.forEach(container => {
-    const text = container.querySelector('.browse-desc-text');
-    const button = container.querySelector('.browse-show-more-button ');
-
-    // Get the height of the text element
-    text.style.display = 'block';
-    const textHeight = text.clientHeight;
-    text.style.display = '-webkit-box';
-
-    // Check if text has less than 3 lines so we don't display show more
-    if (textHeight <= text.clientHeight) {
-        button.style.display = 'none';
-    }
-
-    button.addEventListener('click', function() {
-        if (text.getAttribute('data-state') === 'truncated') {
-            text.style.display = "-webkit-box";
-            text.setAttribute('data-state', 'expanded');
-            button.textContent = 'Show more ...';
-        } else {
-            text.style.maxHeight = text.scrollHeight + 'px';
-            text.style.display = "unset";
-            button.textContent = 'Show Less ...';
-            text.setAttribute('data-state', 'truncated');
-        }
-    });
-    });
+              notes