Merge pull request #968 from wiwie/develop

[WIP] #8374: Limit post content by rendered height instead of number of characters

showmore_dyn/lang/C/messages.po

@@ -0,0 +1,30 @@
+# ADDON showmore_dyn
+# Copyright (C) 
+# This file is distributed under the same license as the Friendica showmore_dyn addon package.
+# 
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2020-03-15 21:20+0100\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: showmore_dyn.php:62
+msgid "Save Settings"
+msgstr ""
+
+#: showmore_dyn.php:64 showmore_dyn.php:65
+msgid "Limit Height"
+msgstr ""
+
+#: showmore_dyn.php:73
+msgid "Show more ..."
+msgstr ""

showmore_dyn/showmore_dyn.css

@@ -0,0 +1,37 @@
+.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;
+	background: none !important;
+	border: none;
+	padding: 0 !important;
+	cursor: pointer;
+}
+
+.wall-item-body-toggle-text:hover {
+	text-decoration: underline;
+}
+
+.wall-item-body {
+	position: relative;
+	width: 100%;
+}

showmore_dyn/showmore_dyn.js

@@ -0,0 +1,91 @@
+var nextBodyIdx = 0;
+
+$(document).ready(function() {
+	loc = window.location.pathname;
+	if (loc.startsWith('/display')) {
+		return;
+	}
+
+	$("head").append('<style type="text/css"></style>');
+	var newStyleElement = $("head").children(':last');
+	newStyleElement.html('.limit-height{max-height: ' + postLimitHeight + 'px; overflow: hidden; }');
+
+	handleNewWallItemBodies();
+
+	document.addEventListener("postprocess_liveupdate", function() {
+		handleNewWallItemBodies();
+	});
+});
+
+function handleNewWallItemBodies() {
+	$('.wall-item-body:not(.showmore-done)').each(function() {
+		var $el = $(this);
+		$el.addClass('showmore-done');
+		if ($el.has('button.content-filter-button').length > 0) {
+			$el.removeClass('limitable');
+			return;
+		}
+
+		if (!$el.attr("id")) {
+			$el.attr("id", nextBodyIdx++);
+		}
+		addHeightToggleHandler($el);
+		var limited = processHeightLimit($el);
+
+		if (!limited) {
+			var mutationObserver = new MutationObserver(function() {
+				var limited = processHeightLimit($el);
+				if (limited) {
+					mutationObserver.disconnect()
+				}
+			});
+			mutationObserver.observe($el[0], {
+				attributes: true,
+				characterData: true,
+				childList: true,
+				subtree: true,
+				attributeOldValue: true,
+				characterDataOldValue: true
+			});
+
+			$el.imagesLoaded().then(function() {
+				processHeightLimit($el);
+			});
+		}
+	});
+}
+
+function addHeightToggleHandler($item) {
+	var itemId = parseInt($item.attr("id").replace("wall-item-body-", ""));
+	$item.data("item-id", itemId);
+	var toggleId = "wall-item-body-toggle-" + itemId;
+
+	$item.append('<div class="wall-item-body-toggle" data-item-id="' + itemId + '" id="' + toggleId + '" ><button type="button" class="wall-item-body-toggle-text">' + showmore_dyn_showmore_linktext + '</button></div>');
+	$item.addClass("limitable limit-height");
+
+	var $toggle = $("#" + toggleId);
+	$toggle.show();
+	$toggle.click(function(el) {
+		$item.toggleClass("limit-height");
+		$(this).hide();
+		$item.removeClass("limitable");
+	});
+}
+
+function processHeightLimit($item) {
+	if (!$item.hasClass("limitable")) {
+		return false;
+	}
+
+	var itemId = $item.data("item-id");
+	var $toggle = $("#wall-item-body-toggle-" + itemId);
+	if ($item.height() < postLimitHeight) {
+		$item.removeClass("limit-height");
+		$toggle.hide();
+		return false;
+	} else {
+		$item.addClass("limit-height");
+		$toggle.show();
+		return true;
+	}
+}

showmore_dyn/showmore_dyn.php

@@ -0,0 +1,79 @@
+<?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\Core\L10n;
+use Friendica\Core\Logger;
+use Friendica\Core\Renderer;
+use Friendica\Database\DBA;
+use Friendica\DI;
+
+function showmore_dyn_install()
+{
+	Hook::register('page_end',  __FILE__, 'showmore_dyn_script');
+	Hook::register('head', __FILE__, 'showmore_dyn_head');
+	Hook::register('footer', __FILE__, 'showmore_dyn_footer');
+	Hook::register('addon_settings',  __FILE__, 'showmore_dyn_settings');
+	Hook::register('addon_settings_post',  __FILE__, 'showmore_dyn_settings_post');
+}
+
+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');
+}
+
+function showmore_dyn_settings_post()
+{
+	if(!local_user()) {
+		return;
+	}
+
+	if (isset($_POST['showmore_dyn-submit'])) {
+		$limitHeight = $_POST['limitHeight'];
+		if ($limitHeight && is_numeric($limitHeight)) {
+			DI::pConfig()->set(local_user(), 'showmore_dyn', 'limitHeight', $limitHeight);
+		}
+	}
+}
+
+function showmore_dyn_settings(App &$a, &$o)
+{
+	if(!local_user()) {
+		return;
+	}
+
+	$limitHeight = DI::pConfig()->get(local_user(), 'showmore_dyn', 'limitHeight', 250);
+	DI::pConfig()->set(local_user(), 'showmore_dyn', 'limitHeight', $limitHeight);
+
+	$t = Renderer::getMarkupTemplate('settings.tpl', 'addon/showmore_dyn/');
+	$o .= Renderer::replaceMacros($t, [
+		'$submit' => DI::l10n()->t('Save Settings'),
+		'$title' => 'Showmore Dynamic',
+		'$limitHeight' => ['limitHeight', DI::l10n()->t('Limit Height'), $limitHeight, 'The maximal height of posts when collapsed', '', '', 'number'],
+	]);
+
+}
+
+function showmore_dyn_script()
+{
+	$limitHeight = DI::pConfig()->get(local_user(), 'showmore_dyn', 'limitHeight', 250);
+	$showmore_dyn_showmore_linktext = DI::l10n()->t('Show more ...');
+	DI::page()['htmlhead'] .= <<<EOT
+<script>
+	var postLimitHeight = $limitHeight;
+	var showmore_dyn_showmore_linktext = "$showmore_dyn_showmore_linktext";
+</script>
+EOT;
+}

showmore_dyn/templates/settings.tpl

@@ -0,0 +1,8 @@
+<div class="settings-block">
+	<h3 class="settings-heading">{{$title}}</h3>
+	{{include file="field_input.tpl" field=$limitHeight}}
+
+	<div class="settings-submit-wrapper">
+		<input type="submit" value="{{$submit}}" class="settings-submit" name="showmore_dyn-submit" />
+	</div>
+</div>