Merge pull request #968 from wiwie/develop

[WIP] #8374: Limit post content by rendered height instead of number of characters
This commit is contained in:
Hypolite Petovan 2020-03-17 20:48:18 -04:00 committed by GitHub
commit 5cd2f6c442
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 245 additions and 0 deletions

View file

@ -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 ""

View file

@ -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%;
}

View file

@ -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;
}
}

View file

@ -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;
}

View file

@ -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>