friendica/friendica-addons
7
2
Fork 14
Code Issues 3 Pull requests 3 Releases 16 Wiki Activity

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

Merged
wiwie merged 19 commits from develop into develop 2020-03-18 01:48:19 +01:00
Conversation 13 Commits 19 Files changed 5 +66 -56
4 changed files with 66 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit c12e1256e4 - Show all commits

14
showmore_dyn/showmore_dyn.css
View file

@ -1,7 +1,7 @@
.wall-item-body-toggle { .wall-item-body-toggle {
width: 100%; width: 100%;
text-align: center; text-align: center;
background-image: linear-gradient(rgba(0,0,0,0), #f6f6f6); background-image: linear-gradient(rgba(0, 0, 0, 0), #f6f6f6);
cursor: pointer; cursor: pointer;
height: 50px; height: 50px;
position: absolute; position: absolute;
@ -11,6 +11,7 @@
left: 0; left: 0;
display: none; display: none;
} }
.wall-item-body-toggle-text { .wall-item-body-toggle-text {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -20,22 +21,23 @@
left: 0; left: 0;
text-shadow: 0 0 5px #f6f6f6; text-shadow: 0 0 5px #f6f6f6;
font-weight: bold; font-weight: bold;
background: none!important; background: none !important;
border: none; border: none;
padding: 0!important; padding: 0 !important;
cursor: pointer; cursor: pointer;
} }
.wall-item-body-toggle-text:hover { .wall-item-body-toggle-text:hover {
text-decoration:underline; text-decoration: underline;
} }
.wall-item-body { .wall-item-body {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.wall-item-body-wrapper { .wall-item-body-wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
} }

17
showmore_dyn/showmore_dyn.js
View file

@ -1,6 +1,6 @@
var nextBodyIdx = 0; var nextBodyIdx = 0;
$(document).ready(function(){ $(document).ready(function() {
$("head").append('<style type="text/css"></style>'); $("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last'); var newStyleElement = $("head").children(':last');
newStyleElement.html('.limit-height{max-height: ' + postLimitHeight + 'px; overflow: hidden; display:inline-block;}'); newStyleElement.html('.limit-height{max-height: ' + postLimitHeight + 'px; overflow: hidden; display:inline-block;}');
@ -28,15 +28,22 @@ function handleNewWallItemBodies() {
var limited = processHeightLimit($el); var limited = processHeightLimit($el);
if (!limited) { if (!limited) {
var mutationObserver = new MutationObserver(function(mutations) { var mutationObserver = new MutationObserver(function() {
var limited = processHeightLimit($el); var limited = processHeightLimit($el);
if (limited) { if (limited) {
mutationObserver.disconnect() mutationObserver.disconnect()
} }
}); });
mutationObserver.observe($el[0], { attributes: true, characterData: true, childList: true, subtree: true, attributeOldValue: true, characterDataOldValue: true }); mutationObserver.observe($el[0], {
attributes: true,
characterData: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true
});
$el.imagesLoaded().then(function(){ $el.imagesLoaded().then(function() {
processHeightLimit($el); processHeightLimit($el);
}); });
} }
@ -79,5 +86,3 @@ function processHeightLimit($item) {
return true; return true;
} }
} }

76
showmore_dyn/showmore_dyn.php
View file

@ -15,21 +15,13 @@ use Friendica\Core\Renderer;
use Friendica\Database\DBA; use Friendica\Database\DBA;
use Friendica\DI; use Friendica\DI;
function showmore_dyn_install() { function showmore_dyn_install()
Hook::register('page_end', 'addon/showmore_dyn.php/showmore_dyn.php', 'showmore_dyn_script');
Hook::register('head' , __FILE__, 'showmore_dyn_head');
Hook::register('footer', __FILE__, 'showmore_dyn_footer');
Hook::register('addon_settings', 'addon/showmore_dyn/showmore_dyn.php', 'showmore_dyn_settings');
Hook::register('addon_settings_post', 'addon/showmore_dyn/showmore_dyn.php', 'showmore_dyn_settings_post');
}
function showmore_dyn_uninstall()
{ {
Hook::unregister('page_end', 'addon/jappixmini/jappixmini.php', 'jappixmini_script'); Hook::register('page_end', __FILE__, 'showmore_dyn_script');
Hook::unregister('head' , __FILE__, 'showmore_dyn_head'); Hook::register('head', __FILE__, 'showmore_dyn_head');
Hook::unregister('footer', __FILE__, 'showmore_dyn_footer'); Hook::register('footer', __FILE__, 'showmore_dyn_footer');
Hook::unregister('addon_settings', 'addon/showmore_dyn/showmore_dyn.php', 'showmore_dyn_settings'); Hook::register('addon_settings', __FILE__, 'showmore_dyn_settings');
Hook::unregister('addon_settings_post', 'addon/showmore_dyn/showmore_dyn.php', 'showmore_dyn_settings_post'); Hook::register('addon_settings_post', __FILE__, 'showmore_dyn_settings_post');
} }
function showmore_dyn_head(App $a, &$b) function showmore_dyn_head(App $a, &$b)
@ -42,35 +34,47 @@ function showmore_dyn_footer(App $a, &$b)
DI::page()->registerFooterScript(__DIR__ . '/showmore_dyn.js'); DI::page()->registerFooterScript(__DIR__ . '/showmore_dyn.js');
} }
function showmore_dyn_settings_post(){ function showmore_dyn_settings_post()
if(! local_user()) {
return; if(!local_user()) {
if (isset($_POST['showmore_dyn-submit'])){ return;
}
if (isset($_POST['showmore_dyn-submit'])) {
$limitHeight = $_POST['showmore_dyn_height']; $limitHeight = $_POST['showmore_dyn_height'];
DI::pConfig()->set(local_user(), 'showmore_dyn', 'limitHeight', $limitHeight); if ($limitHeight && is_numeric($limitHeight)) {
} DI::pConfig()->set(local_user(), 'showmore_dyn', 'limitHeight', $limitHeight);
}
}
} }
function showmore_dyn_settings(&$a,&$o) { function showmore_dyn_settings(&$a, &$o)
if(! local_user()) {
return; if(!local_user()) {
return;
}
$limitHeight = DI::pConfig()->get(local_user(), 'showmore_dyn', 'limitHeight', 250);
DI::pConfig()->set(local_user(), 'showmore_dyn', 'limitHeight', $limitHeight);
$limitHeight = DI::pConfig()->get(local_user(), 'showmore_dyn', 'limitHeight' ); $t = Renderer::getMarkupTemplate('settings.tpl', 'addon/showmore_dyn/');
if ($limitHeight=='') { $limitHeight = 250; DI::pConfig()->set(local_user(), 'showmore_dyn', 'limitHeight', $limitHeight); } $o .= Renderer::replaceMacros($t, [
'$submit' => DI::l10n()->t('Save Settings'),
$t = Renderer::getMarkupTemplate("settings.tpl", "addon/showmore_dyn/"); '$title' => 'Showmore Dynamic',
$o .= Renderer::replaceMacros($t, [ '$label' => DI::l10n()->t('Limit Height'),
'$submit' => DI::l10n()->t('Save Settings'), '$limitHeight' => $limitHeight,
'$title' => "Showmore Dynamic", ]);
'$label' => DI::l10n()->t('Limit Height'),
'$limitHeight' => $limitHeight,
]);
} }
function showmore_dyn_script() { function showmore_dyn_script()
$limitHeight = DI::pConfig()->get(local_user(), 'showmore_dyn', 'limitHeight' ); {
$limitHeight = DI::pConfig()->get(local_user(), 'showmore_dyn', 'limitHeight', 250);
$showmore_dyn_showmore_linktext = DI::l10n()->t('Show more ...'); $showmore_dyn_showmore_linktext = DI::l10n()->t('Show more ...');
DI::page()['htmlhead'] .= '<script>var postLimitHeight = ' . intval($limitHeight) . '; var showmore_dyn_showmore_linktext = "' . $showmore_dyn_showmore_linktext . '"</script>'; DI::page()['htmlhead'] .= <<<EOT
<script>
var postLimitHeight = $limitHeight;
var showmore_dyn_showmore_linktext = "$showmore_dyn_showmore_linktext";
</script>
EOT;
} }

15
showmore_dyn/templates/settings.tpl
View file

@ -1,12 +1,11 @@
<div class="settings-block"> <div class="settings-block">
<h3 class="settings-heading">{{$title}}</h3> <h3 class="settings-heading">{{$title}}</h3>
<div class='field noedit'> <div class='field noedit'>
<label>{{$label}}</label> <label>{{$label}}</label>
<input id="showmore_dyn_height" name="showmore_dyn_height" value="{{$limitHeight}}" /> <input id="showmore_dyn_height" name="showmore_dyn_height" value="{{$limitHeight}}" />
</div> </div>
<div class="settings-submit-wrapper"> <div class="settings-submit-wrapper">
<input type="submit" value="{{$submit}}" class="settings-submit" name="showmore_dyn-submit" /> <input type="submit" value="{{$submit}}" class="settings-submit" name="showmore_dyn-submit" />
</div> </div>
</div> </div>