showmore_dyn/showmore_dyn.js

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