showmore_dyn/showmore_dyn.js

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