Add a linkbutton control to show/hide more

User a linkbutton element adjecent to the overview to control
the expanded / shrunken state.

The button will show dynamically based on the
detected content size.

src/assets/css/librarybrowser.css

@@ -1145,6 +1145,11 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     font-size: 1.4em;
 }
 
+.overview-controls {
+    display: flex;
+    justify-content: flex-end;
+}
+
 .detail-clamp-text {
     overflow: hidden;
     display: -webkit-box;

src/controllers/itemDetails.js

@@ -972,14 +972,16 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         }
     }
 
-    function toggleLineClamp(e) {
-        var target = e.target;
+    function toggleLineClamp(clampTarget, e) {
+        var expandButton = e.target;
         var clampClassName = 'detail-clamp-text';
 
-        if (target.classList.contains(clampClassName)) {
-            target.classList.remove(clampClassName);
+        if (clampTarget.classList.contains(clampClassName)) {
+            clampTarget.classList.remove(clampClassName);
+            expandButton.innerHTML = 'Show Less';
         } else {
-            target.classList.add(clampClassName);
+            clampTarget.classList.add(clampClassName);
+            expandButton.innerHTML = 'Show More';
         }
     }
 
@@ -991,9 +993,20 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             if (overview) {
                 elem.innerHTML = overview;
                 elem.classList.remove('hide');
-
                 elem.classList.add('detail-clamp-text');
-                elem.addEventListener('click', toggleLineClamp);
+
+                // Grab the sibling element to control the expand state
+                var expandButton = elem.parentElement.querySelector('.overview-expand');
+
+                // Detect if we have overflow of text. Based on this StackOverflow answer
+                // https://stackoverflow.com/a/35157976
+                if (Math.abs(elem.scrollHeight - elem.offsetHeight) > 2) {
+                    expandButton.classList.remove('hide');
+                } else {
+                    expandButton.classList.add('hide');
+                }
+
+                expandButton.addEventListener('click', toggleLineClamp.bind(null, elem));
 
                 var anchors = elem.querySelectorAll('a');
 

src/itemdetails.html

@@ -148,6 +148,9 @@
                             <p class="itemGenres"></p>
                             <h3 class="tagline"></h3>
                             <p class="overview"></p>
+                            <div class="overview-controls">
+                                <a class="overview-expand hide" is="emby-linkbutton">Show More</a>
+                            </div>
                             <p id="itemBirthday"></p>
                             <p id="itemBirthLocation"></p>
                             <p id="itemDeathDate"></p>