diff --git a/showmore_dyn/showmore_dyn.css b/showmore_dyn/showmore_dyn.css new file mode 100644 index 00000000..6f9d59bc --- /dev/null +++ b/showmore_dyn/showmore_dyn.css @@ -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; +} + + diff --git a/showmore_dyn/showmore_dyn.js b/showmore_dyn/showmore_dyn.js new file mode 100644 index 00000000..29368e7d --- /dev/null +++ b/showmore_dyn/showmore_dyn.js @@ -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('
'); + $(wrapperIdSel).append('
Show more ...
'); + + $(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; + } +} + + diff --git a/showmore_dyn/showmore_dyn.php b/showmore_dyn/showmore_dyn.php new file mode 100644 index 00000000..9b0ec24e --- /dev/null +++ b/showmore_dyn/showmore_dyn.php @@ -0,0 +1,34 @@ +registerStylesheet(__DIR__ . '/showmore_dyn.css'); +} + +function showmore_dyn_footer(App $a, &$b) +{ + DI::page()->registerFooterScript(__DIR__ . '/showmore_dyn.js'); +} +