diff --git a/showmore_dyn/lang/C/messages.po b/showmore_dyn/lang/C/messages.po new file mode 100644 index 000000000..0dc4d11cc --- /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 \n" +"Language-Team: LANGUAGE \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 index 000000000..93cc87a53 --- /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 index 000000000..4b32b2d31 --- /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(''); + 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('
'); + $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 index 000000000..32aedb080 --- /dev/null +++ b/showmore_dyn/showmore_dyn.php @@ -0,0 +1,79 @@ +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'] .= << + var postLimitHeight = $limitHeight; + var showmore_dyn_showmore_linktext = "$showmore_dyn_showmore_linktext"; + +EOT; +} diff --git a/showmore_dyn/templates/settings.tpl b/showmore_dyn/templates/settings.tpl new file mode 100644 index 000000000..5e8bc3f1e --- /dev/null +++ b/showmore_dyn/templates/settings.tpl @@ -0,0 +1,8 @@ +
+

{{$title}}

+ {{include file="field_input.tpl" field=$limitHeight}} + +
+ +
+