Port pages: clamp long description

app/port/templates/port/includes/full-description-collapsible.html

@@ -1,6 +1,38 @@
-<button class="btn btn-link py-0 my-0" data-toggle="collapse" href="#fullDescription" role="button" aria-expanded="false" aria-controls="fullDescription">
-    More...
-</button>
-<div class="collapse" id="fullDescription">
-    {{ fd }}
-</div>
+{% if d == ld %}
+    <br>
+{% else %}
+    <p class="my-0 pt-0" id="long_description">{{ ld }}</p>
+    <p class="my-0 pt-0" id="long_description_full" style="display: none">{{ ld }}</p>
+    <p class="mb-0 py-0 text-right" style="display: none" id="expand-ld">
+        <button class="btn-link btn p-1 btn-sm" onclick="expandLD();" id="expand-ld-button">+ Show more</button>
+    </p>
+
+    <script type="text/javascript">
+        function expandLD() {
+            const BTN = $("#expand-ld-button");
+            $("#long_description").hide();
+            $("#long_description_full").show();
+            BTN.html("- Show less");
+            BTN.attr("onclick", "hideLD()");
+        }
+
+        function hideLD() {
+            const BTN = $("#expand-ld-button");
+            $("#long_description_full").hide();
+            $("#long_description").show();
+            BTN.html("+ Show less");
+            BTN.attr("onclick", "expandLD()");
+        }
+
+        $(document).ready(function () {
+            if (document.getElementById('long_description')) {
+                $clamp(document.getElementById('long_description'), {
+                    clamp: 4,
+                    useNativeClamp: false,
+                });
+            }
+        });
+
+    </script>
+
+{% endif %}

app/port/templates/port/includes/port-header.html

@@ -30,7 +30,8 @@
         <button class="btn btn-sm btn-light" disabled>{{ port.subscribers.count }}</button>
     </span>
 </h2>
-<span class="lead mb-0 mt-0">{{ port.description }} {% include 'port/includes/full-description-collapsible.html' with fd=port.long_description %}</span><br>
+<span class="lead mb-0 mt-0">{{ port.description }}</span>
+{% include 'port/includes/full-description-collapsible.html' with ld=port.long_description d=port.description %}
 <span class="f15 mr-md-4 mr-3"><strong>Version: </strong>{{ port.version }}
     {% if port.livecheck.has_updates %}
         <button type="button" class="btn p-0" data-toggle="tooltip" data-placement="top"
@@ -65,4 +66,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

app/port/templates/port/port_basic.html

@@ -14,8 +14,8 @@
             {% endif %}
         </p>
 
-        <p class="text-center lead" style="font-size: 1.5rem">{{ port.description }} {% include 'port/includes/full-description-collapsible.html' with fd=port.long_description %}</p>
-
+        <p class="text-center lead" style="font-size: 1.5rem">{{ port.description }}</p>
+        {% include 'port/includes/full-description-collapsible.html' with ld=port.long_description d=port.description %}
         <p class="text-center"><a href="{{ port.homepage }}">{{ port.homepage }}</a></p>
 
         {% if port.active == True and port.replaced_by == None %}

app/static/js/clamp.js

@@ -0,0 +1,89 @@
+/*!
+* Clamp.js 0.5.1
+*
+* Copyright 2011-2013, Joseph Schmitt http://joe.sh
+* Released under the WTFPL license
+* http://sam.zoy.org/wtfpl/
+*/
+(function () {
+    window.$clamp = function (c, d) {
+        function s(a, b) {
+            n.getComputedStyle || (n.getComputedStyle = function (a, b) {
+                this.el = a;
+                this.getPropertyValue = function (b) {
+                    var c = /(\-([a-z]){1})/g;
+                    "float" == b && (b = "styleFloat");
+                    c.test(b) && (b = b.replace(c, function (a, b, c) {
+                        return c.toUpperCase()
+                    }));
+                    return a.currentStyle && a.currentStyle[b] ? a.currentStyle[b] : null
+                };
+                return this
+            });
+            return n.getComputedStyle(a, null).getPropertyValue(b)
+        }
+
+        function t(a) {
+            a = a || c.clientHeight;
+            var b = u(c);
+            return Math.max(Math.floor(a / b), 0)
+        }
+
+        function x(a) {
+            return u(c) *
+                a
+        }
+
+        function u(a) {
+            var b = s(a, "line-height");
+            "normal" == b && (b = 1.2 * parseInt(s(a, "font-size")));
+            return parseInt(b)
+        }
+
+        function l(a) {
+            if (a.lastChild.children && 0 < a.lastChild.children.length) return l(Array.prototype.slice.call(a.children).pop());
+            if (a.lastChild && a.lastChild.nodeValue && "" != a.lastChild.nodeValue && a.lastChild.nodeValue != b.truncationChar) return a.lastChild;
+            a.lastChild.parentNode.removeChild(a.lastChild);
+            return l(c)
+        }
+
+        function p(a, d) {
+            if (d) {
+                var e = a.nodeValue.replace(b.truncationChar, "");
+                f || (h = 0 < k.length ?
+                    k.shift() : "", f = e.split(h));
+                1 < f.length ? (q = f.pop(), r(a, f.join(h))) : f = null;
+                m && (a.nodeValue = a.nodeValue.replace(b.truncationChar, ""), c.innerHTML = a.nodeValue + " " + m.innerHTML + b.truncationChar);
+                if (f) {
+                    if (c.clientHeight <= d) if (0 <= k.length && "" != h) r(a, f.join(h) + h + q), f = null; else return c.innerHTML
+                } else "" == h && (r(a, ""), a = l(c), k = b.splitOnChars.slice(0), h = k[0], q = f = null);
+                if (b.animate) setTimeout(function () {
+                    p(a, d)
+                }, !0 === b.animate ? 10 : b.animate); else return p(a, d)
+            }
+        }
+
+        function r(a, c) {
+            a.nodeValue = c + b.truncationChar;
+            $("#expand-ld").show();
+        }
+
+        d = d || {};
+        var n = window, b = {
+                clamp: d.clamp || 2,
+                useNativeClamp: "undefined" != typeof d.useNativeClamp ? d.useNativeClamp : !0,
+                splitOnChars: d.splitOnChars || [".", "-", "\u2013", "\u2014", " "],
+                animate: d.animate || !1,
+                truncationChar: d.truncationChar || "\u2026",
+                truncationHTML: d.truncationHTML
+            }, e = c.style, y = c.innerHTML, z = "undefined" != typeof c.style.webkitLineClamp, g = b.clamp,
+            v = g.indexOf && (-1 < g.indexOf("px") || -1 < g.indexOf("em")), m;
+        b.truncationHTML && (m = document.createElement("span"), m.innerHTML = b.truncationHTML);
+        var k = b.splitOnChars.slice(0),
+            h = k[0], f, q;
+        "auto" == g ? g = t() : v && (g = t(parseInt(g)));
+        var w;
+        z && b.useNativeClamp ? (e.overflow = "hidden", e.textOverflow = "ellipsis", e.webkitBoxOrient = "vertical", e.display = "-webkit-box", e.webkitLineClamp = g, v && (e.height = b.clamp + "px")) : (e = x(g), e <= c.clientHeight && (w = p(l(c), e)));
+        return {original: y, clamped: w}
+    }
+})();

app/templates/layout.html

@@ -21,6 +21,7 @@
     <script src="{% static 'js/main.js' %}"></script>
     <script src="{% static 'js/handlebars.min-v4.7.6.js' %}"></script>
     <script src="{% static 'js/theme.js' %}"></script>
+    <script src="{% static 'js/clamp.js' %}"></script>
     {% block head_scripts %}
     {% endblock %}