showmore_dyn/showmore_dyn.js

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