Skip to content
Snippets Groups Projects
odsh_adjust_ellipsis.js 2.33 KiB
Newer Older
  • Learn to ignore specific revisions
  • $(document).ready(function () {
    
      function adjustEllipsis() {
        $('.ellipsis-action').each(function () {
          var ellipsisAction = $(this);
          var targetId = ellipsisAction.data('target');
          var targetContent = $(targetId);
          var maxContentHeight = ellipsisAction.data('max-height') || 150;
          var overlay = $('.ellipsis-overlay', ellipsisAction);
          var readMoreLink = $('.readmore', ellipsisAction);
          var readLessLink = $('.readless', ellipsisAction);
      
          // Reset styles to calculate content height
          targetContent.css({
            'max-height': 'none',
            'overflow-y': 'visible'
          });
          
          var contentHeight = targetContent.height();
      
          // Apply ellipsis functionality if necessary
          if (contentHeight > maxContentHeight) {
            ellipsisAction.show();
            if (targetContent.hasClass("full-text")) {
              toggleEllipsisActions(false);
            } else {
              targetContent.css({
                'max-height': maxContentHeight + 'px',
                'overflow-y': 'hidden'
              });
              toggleEllipsisActions(true);
              if (overlay) overlay.show();
            }
          } else {
            ellipsisAction.hide();
          }
      
          function toggleEllipsisActions(showReadMore) {
            readMoreLink.toggle(showReadMore);
            readLessLink.toggle(!showReadMore);
          }
      
          readMoreLink.off('click').on('click', function (event) {
            event.preventDefault();
            targetContent.css({
              'max-height': 'none',
              'overflow-y': 'visible'
            });
            targetContent.addClass("full-text");
            if (overlay) overlay.hide();
            toggleEllipsisActions(false);
          });
      
          readLessLink.off('click').on('click', function (event) {
            event.preventDefault();
            targetContent.css({
              'max-height': maxContentHeight + 'px',
              'overflow-y': 'hidden'
            });
            targetContent.removeClass("full-text");
            if (overlay) overlay.show();
            toggleEllipsisActions(true);
            $('html, body').animate({
              scrollTop: targetContent.offset().top
            }, 50);
          });
        });
      }
      
      // Call the function on page load
      adjustEllipsis();
      
      // Add an event listener for window resize
      $(window).on('resize', function () {
        // Call the adjustEllipsis function when window is resized
        adjustEllipsis();
      });  
    
    });