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