From 98aaaf0a9af7c29a17d21188cdde19467345a707 Mon Sep 17 00:00:00 2001 From: Thorge Petersen <petersen@rz.uni-kiel.de> Date: Mon, 6 Nov 2023 13:17:07 +0100 Subject: [PATCH] Refined adjust ellipsis functionality and created seperate webasset --- ckanext/odsh/assets/odsh.js | 67 ----------------- ckanext/odsh/assets/odsh_adjust_ellipsis.js | 79 +++++++++++++++++++++ ckanext/odsh/assets/webassets.yml | 1 + 3 files changed, 80 insertions(+), 67 deletions(-) create mode 100644 ckanext/odsh/assets/odsh_adjust_ellipsis.js diff --git a/ckanext/odsh/assets/odsh.js b/ckanext/odsh/assets/odsh.js index 5e0b8a03..ca7e7493 100644 --- a/ckanext/odsh/assets/odsh.js +++ b/ckanext/odsh/assets/odsh.js @@ -18,71 +18,4 @@ $(document).ready(function () { }); } - function adjustEllipsis() { - $('.ellipsis-action:not(.full-text)').each(function () { - var ellipsisAction = $(this); - var targetId = ellipsisAction.data('target'); - var targetContent = $(targetId); - var maxContentHeight = ellipsisAction.data('max-height') || 150; - var contentHeight = targetContent.height(); - - // Reset styles - targetContent.css({ - 'max-height': 'none', - 'overflow-y': 'visible' - }); - - // Apply ellipsis functionality if necessary - if (contentHeight > maxContentHeight) { - targetContent.css({ - 'max-height': maxContentHeight + 'px', - 'overflow-y': 'hidden' - }); - ellipsisAction.show(); - - var overlay = $('.ellipsis-overlay', ellipsisAction); - var readMoreLink = $('.readmore', ellipsisAction); - var readLessLink = $('.readless', ellipsisAction); - - readMoreLink.show(); - readLessLink.hide(); - if (overlay) overlay.show(); - - readMoreLink.click(function (event) { - event.preventDefault(); - targetContent.css('max-height', 'none'); - ellipsisAction.addClass("full-text"); - if (overlay) overlay.hide(); - readMoreLink.hide(); - readLessLink.show(); - }); - - readLessLink.click(function (event) { - event.preventDefault(); - targetContent.css('max-height', maxContentHeight + 'px'); - ellipsisAction.removeClass("full-text"); - if (overlay) overlay.show(); - readMoreLink.show(); - readLessLink.hide(); - $('html, body').animate({ - scrollTop: targetContent.offset().top - }, 50); - }); - } else { - ellipsisAction.hide(); - } - }); - } - - // 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(); - }); - }); - - diff --git a/ckanext/odsh/assets/odsh_adjust_ellipsis.js b/ckanext/odsh/assets/odsh_adjust_ellipsis.js new file mode 100644 index 00000000..f2d3adca --- /dev/null +++ b/ckanext/odsh/assets/odsh_adjust_ellipsis.js @@ -0,0 +1,79 @@ +$(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(); + }); + +}); diff --git a/ckanext/odsh/assets/webassets.yml b/ckanext/odsh/assets/webassets.yml index 37bb956c..3136df98 100644 --- a/ckanext/odsh/assets/webassets.yml +++ b/ckanext/odsh/assets/webassets.yml @@ -5,6 +5,7 @@ odsh_base_script: - vendor/jquery-ui-autocomplete/jquery-ui.js - autocomplete.js - odsh.js + - odsh_adjust_ellipsis.js odsh_base_style: output: ckanext-odsh/odsh_base.css -- GitLab