#8374: Initial implementation as addon

showmore_dyn/showmore_dyn.css

@@ -0,0 +1,39 @@
+.limit-height {
+       max-height: 250px;
+       overflow: hidden;
+}
+
+.wall-item-body-toggle {
+    width: 100%;
+    text-align: center;
+    background-image: linear-gradient(rgba(0,0,0,0), #f6f6f6);
+    cursor: pointer;
+    height: 50px;
+    position: absolute;
+    top: auto;
+    bottom: 0;
+    z-index: 11;
+    left: 0;
+    display: none;
+}
+.wall-item-body-toggle-text {
+    width: 100%;
+    position: absolute;
+    top: auto;
+    bottom: 0;
+    z-index: 12;
+    left: 0;
+    text-shadow: 0 0 5px #f6f6f6;
+    font-weight: bold;
+}
+.wall-item-body {
+    position: relative;
+    width: 100%;
+}
+.wall-item-body-wrapper {
+    position: relative;
+    width: 100%;
+    display: inline-block;
+}
+
+

showmore_dyn/showmore_dyn.js

@@ -0,0 +1,78 @@
+$(document).ready(function(){
+        handleNewWallItemBodies();
+
+        var mutationObserver = new MutationObserver(function(mutations) {
+                handleNewWallItemBodies();
+        });
+        mutationObserver.observe($("#content")[0], { attributes: false, characterData: false, childList: true, subtree: true, attributeOldValue: false, characterDataOldValue: false });
+});
+
+function handleNewWallItemBodies() {
+        $('.wall-item-body:not(.showmore-done)').each(function(i, el) {
+                $(el).addClass('showmore-done');
+                if ($(el).has('button.content-filter-button').length > 0) {
+                        $(el).removeClass('limitable');
+                        return;
+                }
+
+                var itemId = $(el).attr('id');
+                addHeightToggleHandler(itemId);
+                var limited = processHeightLimit(itemId);
+
+                if (!limited) {
+                        var mutationObserver = new MutationObserver(function(mutations) {
+                                var limited = processHeightLimit(itemId);
+                                if (limited) {
+                                        mutationObserver.disconnect()
+                                }
+                        });
+                        mutationObserver.observe(el, { attributes: true, characterData: true, childList: true, subtree: true, attributeOldValue: true, characterDataOldValue: true });
+
+                        $(el).imagesLoaded().then(function(){
+                                processHeightLimit(itemId);
+                        });
+                }
+        });
+}
+
+function addHeightToggleHandler(id) {
+        var itemIdSel = "#" + id;
+        var itemId = parseInt(id.replace("wall-item-body-", ""));
+        $(itemIdSel).data("item-id", itemId);
+        var wrapperId = "wall-item-body-wrapper-" + itemId;
+        var wrapperIdSel = "#" + wrapperId;
+        var toggleId = "wall-item-body-toggle-" + itemId;
+        var toggleIdSel = "#" + toggleId;
+
+        $(itemIdSel).wrap('<div id="' + wrapperId + '" class="wall-item-body-wrapper"></div>');
+        $(wrapperIdSel).append('<div class="wall-item-body-toggle" data-item-id="' + itemId + '" id="' + toggleId + '" ><a href="javascript:void(0)" class="wall-item-body-toggle-text">Show more ...</a></div>');
+
+        $(toggleIdSel).show();
+        $(toggleIdSel).click(function(el) {
+                $(itemIdSel).toggleClass("limit-height");
+                $(this).hide();
+                $(itemIdSel).removeClass("limitable");
+        });
+}
+
+function processHeightLimit(id) {
+        var idSel = "#" + id;
+
+        if (!$(idSel).hasClass("limitable")) {
+                return false;
+        }
+
+        var itemId = $(idSel).data("item-id");
+        var toggleSelector = "#wall-item-body-toggle-" + itemId;
+        if ($(idSel).height() < 250) {
+                $(idSel).removeClass("limit-height");
+                $(toggleSelector).hide();
+                return false;
+        } else {
+                $(idSel).addClass("limit-height");
+                $(toggleSelector).show();
+                return true;
+        }
+}
+
+

showmore_dyn/showmore_dyn.php

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Name: Showmore Dynamic
+ * Description: Dynamically limits height of posts
+ * Version: 1.0
+ * Author: Christian Wiwie
+ *
+ */
+
+use Friendica\App;
+use Friendica\Core\Hook;
+use Friendica\DI;
+
+function showmore_dyn_install() {
+	Hook::register('head'  , __FILE__, 'showmore_dyn_head');
+        Hook::register('footer', __FILE__, 'showmore_dyn_footer');
+}
+
+function showmore_dyn_uninstall()
+{
+	Hook::unregister('head'  , __FILE__, 'showmore_dyn_head');
+        Hook::unregister('footer', __FILE__, 'showmore_dyn_footer');
+}
+
+function showmore_dyn_head(App $a, &$b)
+{
+        DI::page()->registerStylesheet(__DIR__ . '/showmore_dyn.css');
+}
+
+function showmore_dyn_footer(App $a, &$b)
+{
+        DI::page()->registerFooterScript(__DIR__ . '/showmore_dyn.js');
+}
+