Merge pull request #968 from wiwie/develop

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

diff --git a/showmore_dyn/lang/C/messages.po b/showmore_dyn/lang/C/messages.po
new file mode 100644 (file)
index 0000000..0dc4d11
--- /dev/null
+++ b/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 ""

diff --git a/showmore_dyn/showmore_dyn.css b/showmore_dyn/showmore_dyn.css
new file mode 100644 (file)
index 0000000..93cc87a
--- /dev/null
+++ b/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%;
+}

diff --git a/showmore_dyn/showmore_dyn.js b/showmore_dyn/showmore_dyn.js
new file mode 100644 (file)
index 0000000..4b32b2d
--- /dev/null
+++ b/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;
+       }
+}

diff --git a/showmore_dyn/showmore_dyn.php b/showmore_dyn/showmore_dyn.php
new file mode 100644 (file)
index 0000000..32aedb0
--- /dev/null
+++ b/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;
+}

diff --git a/showmore_dyn/templates/settings.tpl b/showmore_dyn/templates/settings.tpl
new file mode 100644 (file)
index 0000000..5e8bc3f
--- /dev/null
+++ b/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>