showmore_dyn/showmore_dyn.js

   1 var nextBodyIdx = 0;
   2
   3 $(document).ready(function() {
   4         loc = window.location.pathname;
   5         if (loc.startsWith('/display')) {
   6                 return;
   7         }
   8
   9         $("head").append('<style type="text/css"></style>');
  10         var newStyleElement = $("head").children(':last');
  11         newStyleElement.html('.limit-height{max-height: ' + postLimitHeight + 'px; overflow: hidden; }');
  12
  13         handleNewWallItemBodies();
  14
  15         document.addEventListener("postprocess_liveupdate", function() {
  16                 handleNewWallItemBodies();
  17         });
  18 });
  19
  20 function handleNewWallItemBodies() {
  21         $('.wall-item-body:not(.showmore-done)').each(function() {
  22                 var $el = $(this);
  23                 $el.addClass('showmore-done');
  24                 if ($el.has('button.content-filter-button').length > 0) {
  25                         $el.removeClass('limitable');
  26                         return;
  27                 }
  28
  29                 if (!$el.attr("id")) {
  30                         $el.attr("id", nextBodyIdx++);
  31                 }
  32                 addHeightToggleHandler($el);
  33                 var limited = processHeightLimit($el);
  34
  35                 if (!limited) {
  36                         var mutationObserver = new MutationObserver(function() {
  37                                 var limited = processHeightLimit($el);
  38                                 if (limited) {
  39                                         mutationObserver.disconnect()
  40                                 }
  41                         });
  42                         mutationObserver.observe($el[0], {
  43                                 attributes: true,
  44                                 characterData: true,
  45                                 childList: true,
  46                                 subtree: true,
  47                                 attributeOldValue: true,
  48                                 characterDataOldValue: true
  49                         });
  50
  51                         $el.imagesLoaded().then(function() {
  52                                 processHeightLimit($el);
  53                         });
  54                 }
  55         });
  56 }
  57
  58 function addHeightToggleHandler($item) {
  59         var itemId = parseInt($item.attr("id").replace("wall-item-body-", ""));
  60         $item.data("item-id", itemId);
  61         var toggleId = "wall-item-body-toggle-" + itemId;
  62
  63         $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>');
  64         $item.addClass("limitable limit-height");
  65
  66         var $toggle = $("#" + toggleId);
  67         $toggle.show();
  68         $toggle.click(function(el) {
  69                 $item.toggleClass("limit-height");
  70                 $(this).hide();
  71                 $item.removeClass("limitable");
  72         });
  73 }
  74
  75 function processHeightLimit($item) {
  76         if (!$item.hasClass("limitable")) {
  77                 return false;
  78         }
  79
  80         var itemId = $item.data("item-id");
  81         var $toggle = $("#wall-item-body-toggle-" + itemId);
  82         if ($item.height() < postLimitHeight) {
  83                 $item.removeClass("limit-height");
  84                 $toggle.hide();
  85                 return false;
  86         } else {
  87                 $item.addClass("limit-height");
  88                 $toggle.show();
  89                 return true;
  90         }
  91 }