#8374: Initial implementation as addon
This commit is contained in:
Christian Wiwie
parent
b11e418f35
commit
8ff88b2eee
3 changed files with 151 additions and 0 deletions
39
showmore_dyn/showmore_dyn.css
Normal file
39
showmore_dyn/showmore_dyn.css
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
.limit-height {
|
||||
max-height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.wall-item-body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.wall-item-body-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
78
showmore_dyn/showmore_dyn.js
Normal file
78
showmore_dyn/showmore_dyn.js
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
$(document).ready(function(){
|
||||
handleNewWallItemBodies();
|
||||
|
||||
var mutationObserver = new MutationObserver(function(mutations) {
|
||||
handleNewWallItemBodies();
|
||||
});
|
||||
mutationObserver.observe($("#content")[0], { attributes: false, characterData: false, childList: true, subtree: true, attributeOldValue: false, characterDataOldValue: false });
|
||||
});
|
||||
|
||||
function handleNewWallItemBodies() {
|
||||
$('.wall-item-body:not(.showmore-done)').each(function(i, el) {
|
||||
$(el).addClass('showmore-done');
|
||||
if ($(el).has('button.content-filter-button').length > 0) {
|
||||
$(el).removeClass('limitable');
|
||||
return;
|
||||
}
|
||||
|
||||
var itemId = $(el).attr('id');
|
||||
addHeightToggleHandler(itemId);
|
||||
var limited = processHeightLimit(itemId);
|
||||
|
||||
if (!limited) {
|
||||
var mutationObserver = new MutationObserver(function(mutations) {
|
||||
var limited = processHeightLimit(itemId);
|
||||
if (limited) {
|
||||
mutationObserver.disconnect()
|
||||
}
|
||||
});
|
||||
mutationObserver.observe(el, { attributes: true, characterData: true, childList: true, subtree: true, attributeOldValue: true, characterDataOldValue: true });
|
||||
|
||||
$(el).imagesLoaded().then(function(){
|
||||
processHeightLimit(itemId);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function addHeightToggleHandler(id) {
|
||||
var itemIdSel = "#" + id;
|
||||
var itemId = parseInt(id.replace("wall-item-body-", ""));
|
||||
$(itemIdSel).data("item-id", itemId);
|
||||
var wrapperId = "wall-item-body-wrapper-" + itemId;
|
||||
var wrapperIdSel = "#" + wrapperId;
|
||||
var toggleId = "wall-item-body-toggle-" + itemId;
|
||||
var toggleIdSel = "#" + toggleId;
|
||||
|
||||
$(itemIdSel).wrap('<div id="' + wrapperId + '" class="wall-item-body-wrapper"></div>');
|
||||
$(wrapperIdSel).append('<div class="wall-item-body-toggle" data-item-id="' + itemId + '" id="' + toggleId + '" ><a href="javascript:void(0)" class="wall-item-body-toggle-text">Show more ...</a></div>');
|
||||
|
||||
$(toggleIdSel).show();
|
||||
$(toggleIdSel).click(function(el) {
|
||||
$(itemIdSel).toggleClass("limit-height");
|
||||
$(this).hide();
|
||||
$(itemIdSel).removeClass("limitable");
|
||||
});
|
||||
}
|
||||
|
||||
function processHeightLimit(id) {
|
||||
var idSel = "#" + id;
|
||||
|
||||
if (!$(idSel).hasClass("limitable")) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var itemId = $(idSel).data("item-id");
|
||||
var toggleSelector = "#wall-item-body-toggle-" + itemId;
|
||||
if ($(idSel).height() < 250) {
|
||||
$(idSel).removeClass("limit-height");
|
||||
$(toggleSelector).hide();
|
||||
return false;
|
||||
} else {
|
||||
$(idSel).addClass("limit-height");
|
||||
$(toggleSelector).show();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
34
showmore_dyn/showmore_dyn.php
Normal file
34
showmore_dyn/showmore_dyn.php
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<?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\DI;
|
||||
|
||||
function showmore_dyn_install() {
|
||||
Hook::register('head' , __FILE__, 'showmore_dyn_head');
|
||||
Hook::register('footer', __FILE__, 'showmore_dyn_footer');
|
||||
}
|
||||
|
||||
function showmore_dyn_uninstall()
|
||||
{
|
||||
Hook::unregister('head' , __FILE__, 'showmore_dyn_head');
|
||||
Hook::unregister('footer', __FILE__, 'showmore_dyn_footer');
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue