Skip to content
Snippets Groups Projects
Commit 98aaaf0a authored by Thorge Petersen's avatar Thorge Petersen
Browse files

Refined adjust ellipsis functionality and created seperate webasset

parent 8660e42c
No related branches found
No related tags found
1 merge request!51Display contact information on dataset page and use text-ellipsis for long description texts
...@@ -18,71 +18,4 @@ $(document).ready(function () { ...@@ -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();
});
});
$(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();
});
});
...@@ -5,6 +5,7 @@ odsh_base_script: ...@@ -5,6 +5,7 @@ odsh_base_script:
- vendor/jquery-ui-autocomplete/jquery-ui.js - vendor/jquery-ui-autocomplete/jquery-ui.js
- autocomplete.js - autocomplete.js
- odsh.js - odsh.js
- odsh_adjust_ellipsis.js
odsh_base_style: odsh_base_style:
output: ckanext-odsh/odsh_base.css output: ckanext-odsh/odsh_base.css
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment