Merge pull request #908 from masterkoppa/fix-888

Make item detail overview expandable (Fix #888)

src/assets/css/librarybrowser.css

@@ -1144,3 +1144,21 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     margin-top: 0;
     font-size: 1.4em;
 }
+
+.overview-controls {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.detail-clamp-text {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 12;
+    -webkit-box-orient: vertical;
+}
+
+@media all and (min-width: 40em) {
+    .detail-clamp-text {
+        -webkit-line-clamp: 6;
+    }
+}

src/controllers/itemDetails.js

@@ -972,6 +972,19 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         }
     }
 
+    function toggleLineClamp(clampTarget, e) {
+        var expandButton = e.target;
+        var clampClassName = 'detail-clamp-text';
+
+        if (clampTarget.classList.contains(clampClassName)) {
+            clampTarget.classList.remove(clampClassName);
+            expandButton.innerHTML = globalize.translate('ShowLess');
+        } else {
+            clampTarget.classList.add(clampClassName);
+            expandButton.innerHTML = globalize.translate('ShowMore');
+        }
+    }
+
     function renderOverview(elems, item) {
         for (var i = 0, length = elems.length; i < length; i++) {
             var elem = elems[i];
@@ -980,6 +993,21 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             if (overview) {
                 elem.innerHTML = overview;
                 elem.classList.remove('hide');
+                elem.classList.add('detail-clamp-text');
+
+                // 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');
 
                 for (var j = 0, length2 = anchors.length; j < length2; j++) {

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" href="#">${ShowMore}</a>
+                            </div>
                             <p id="itemBirthday"></p>
                             <p id="itemBirthLocation"></p>
                             <p id="itemDeathDate"></p>

src/strings/en-us.json

@@ -1373,6 +1373,8 @@
     "Share": "Share",
     "ShowAdvancedSettings": "Show advanced settings",
     "ShowIndicatorsFor": "Show indicators for:",
+    "ShowLess": "Show less",
+    "ShowMore": "Show more",
     "ShowTitle": "Show title",
     "ShowYear": "Show year",
     "Shows": "Shows",