Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update query cap results page & css/js #287

Merged
merged 1 commit into from
Jan 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@ endif)
<maven.compiler.target>[javaVersion(mavenProjectConfiguration.lyoVersion)/]</maven.compiler.target>
<maven.compiler.release>[javaVersion(mavenProjectConfiguration.lyoVersion)/]</maven.compiler.release>
<version.lyo>[mavenProjectConfiguration.lyoVersion/]</version.lyo>
<jersey.version>3.1.5</jersey.version>
<jersey.version>3.1.10</jersey.version>
[if (swaggerDocumentationEnabled)]
<swagger.version>2.2.20</swagger.version>
<swagger-ui.version>3.52.5</swagger-ui.version>
<swagger.version>2.2.28</swagger.version>
<swagger-ui.version>5.18.2</swagger-ui.version>
[/if]
[if (serverImplementation)]
<servlet.port>[mavenServerConfiguration.jettyPort/]</servlet.port>
Expand Down Expand Up @@ -139,7 +139,7 @@ endif)
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-simple</artifactId>
<version>1.7.36</version>
<version>2.0.16</version>
<scope>runtime</scope>
</dependency>
[/template]
Expand Down Expand Up @@ -386,7 +386,7 @@ If multiple DSs share the same maven dependency, we group them into 1.
<plugin>
<groupId>org.codehaus.cargo</groupId>
<artifactId>cargo-maven3-plugin</artifactId>
<version>1.10.12</version>
<version>1.10.16</version>
<configuration>
<!--This plugins supports the following containers-->
<container>
Expand Down Expand Up @@ -421,7 +421,7 @@ If multiple DSs share the same maven dependency, we group them into 1.
<!-- Download Swagger UI webjar. -->
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<version>3.1.2</version>
<version>3.8.1</version>
<executions>
<execution>
<phase>prepare-package</phase>
Expand All @@ -445,7 +445,7 @@ If multiple DSs share the same maven dependency, we group them into 1.
<!-- Add Swagger UI resources to the war file. -->
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.3</version>
<version>3.4.0</version>
<configuration>
<webResources combine.children="append">
<resource>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,14 +95,17 @@
<div class="page-header">
<h1>Query Capability &quot;[aQueryCapability.title/]&quot; results</h1>
<div class="alert alert-secondary" role="alert">
Number of elements:&nbsp;
<%= resources.size()%>
Showing&nbsp;${resources.size()} resources on this page
<% if (nextPageUri != null) { %><p><a href="<%= nextPageUri %>">Next Page</a></p><% } %>
</div>
</div>
<% for ([queryMethodResourceType(aQueryCapability)/] aResource : resources) { %>
<p><a href="<%= aResource.getAbout() %>" class="oslc-resource-link"><%=aResource.toString()%></a><br /></p>
<% } %>
<c:forEach items="${resources}" var="res">
<div class="card mb-3">
<div class="card-body">
<a href="${fn:escapeXml(res.getAbout())}" class="oslc-resource-link">${fn:escapeXml(res.toString())}</a>
</div>
</div>
</c:forEach>
</div>
<footer class="footer">
<div class="container">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -79,10 +79,15 @@ code {
font-size: 80%;
}

/* 45/11em are the dialog sizes plus bootstrap margins */
.popover {
max-width: calc(45em + 30px);
max-height: calc(11em + 50px);
max-width: 520px;
max-height: 270px;
}

.popover .popover-body {
max-width: 515px;
max-height: 215px;
overflow: hidden;
}

#delegatedUI {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,118 +40,166 @@

//Setup a popover on each of the oslcLinkElements, where the popover content is an iframe presenting the OSLC UI-Preview.
function setupUiPreviewOnPopover(oslcLinkElements) {
oslcLinkElements.popover({
container: "body",
content: "Loading...",
delay: {"show": 120, "hide": 60},
html: true,
placement: "auto",
trigger: "hover"
});

oslcLinkElements.on("show.bs.popover", function () {
var uiElem = $(this);
var popoverElem = uiElem.data('bs.popover');
getUiPreviewIframes(this.getAttribute("href"), attachIframeToHyperlinkElement, uiElem);
})
// Destroy any existing popovers first
oslcLinkElements.popover('dispose');

// Initialize popovers with improved settings
oslcLinkElements.popover({
container: "body",
content: "Loading...",
delay: {
"show": 120,
"hide": 200 // Increased hide delay to reduce flickering
},
html: true,
placement: "auto",
trigger: "hover",
boundary: 'window', // Ensures proper positioning relative to viewport
popperConfig: {
modifiers: {
preventOverflow: {
boundariesElement: 'viewport'
}
}
}
});

// Add CSS to prevent pointer events on popover
$("<style>")
.prop("type", "text/css")
.html(`
.popover {
pointer-events: none;
}
.popover-body {
pointer-events: auto;
}
`)
.appendTo("head");

// Modified event handler with debouncing
let loadingTimeout;
oslcLinkElements.on("show.bs.popover", function (e) {
const uiElem = $(this);
const popoverElem = uiElem.data('bs.popover');

// Clear any pending loading timeout
clearTimeout(loadingTimeout);

// Set new timeout for loading
loadingTimeout = setTimeout(() => {
getUiPreviewIframes(
this.getAttribute("href"),
attachIframeToHyperlinkElement,
uiElem
);
}, 50); // Small delay to prevent multiple rapid loads
});

// Clean up on hide
oslcLinkElements.on("hide.bs.popover", function () {
clearTimeout(loadingTimeout);
});
}

function attachIframeToHyperlinkElement(compactStructure, uiElem) {
uiElem.attr('data-original-title', compactStructure.title);
var preview = compactStructure.small;
var w = preview.width ? preview.width : "450em";
var h = preview.height ? preview.height : "100em";
var iframeHtml = "<iframe src='" + preview.uri + "' ";
iframeHtml += " style='border:0px; height:" + h + "; width:" + w + "'";
iframeHtml += "></iframe>";
uiElem.attr('data-content', iframeHtml);
uiElem.data('bs.popover').setContent();
uiElem.attr('data-original-title', compactStructure.title);
var preview = compactStructure.small;
var w = preview.width ? preview.width : "450em";
var h = preview.height ? preview.height : "100em";
var w = '100%';
var h = '100%';
var iframeHtml = "<iframe src='" + preview.uri + "' ";
iframeHtml += " style='border:0px; height:" + h + "; width:" + w + "; overflow: hidden'";
iframeHtml += "></iframe>";
uiElem.attr('data-content', iframeHtml);
uiElem.data('bs.popover').setContent();
}

//Perform an asynch GET request to obtain the resource's UI-Preview information (an OSLC Compact resource).
//callbackFunction is then called once the request response is obtained.
//The caller should supply this callbackFunction, with any desired paramters under "callbackParamter"
//The caller should supply this callbackFunction, with any desired paramters under "callbackParamter"
//callbackFunction will be called with the following parameters (a) compactStructure, (d) callbackParamter
//where compactStructure represents more detailed about the OSLC Compact resource.
function getUiPreviewIframes(resourceUrl, callbackFunction, callbackParamter) {
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function () {
if (this.status==200) {
data = this.responseText;
try {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(data,"text/xml");
var compactStructure = oslcCompactJsonStructure(xmlDoc);
callbackFunction(compactStructure, callbackParamter);
} catch (e) {
iframeHtml = "<b>Error parsing preview dialog info</b>";
callbackFunction("Error", callbackParamter);
}
}
else {
iframeHtml = "<b>Error loading the preview dialog</b> status:" + this.status;
callbackFunction("Error", callbackParamter);
}
};
xmlhttp.open("GET", resourceUrl, true);
xmlhttp.setRequestHeader("Accept", "application/x-oslc-compact+xml");
xmlhttp.send();
xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function () {
if (this.status == 200) {
data = this.responseText;
try {
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(data, "text/xml");
var compactStructure = oslcCompactJsonStructure(xmlDoc);
callbackFunction(compactStructure, callbackParamter);
} catch (e) {
iframeHtml = "<b>Error parsing preview dialog info</b>";
callbackFunction("Error", callbackParamter);
}
}
else {
iframeHtml = "<b>Error loading the preview dialog</b> status:" + this.status;
callbackFunction("Error", callbackParamter);
}
};
xmlhttp.open("GET", resourceUrl, true);
xmlhttp.setRequestHeader("Accept", "application/x-oslc-compact+xml");
xmlhttp.send();
}

//returns a JSON struct representing a large and small UI-Preview info (uri, title, height and width) based on an OSLC Compact RDF resource.
function oslcCompactJsonStructure(oslcCompactXmlDocument) {
var compactStructure = {};
var compact = findFirstChildNode(findFirstChildNode(oslcCompactXmlDocument));

var titleChild = findFirstChildNodeNamed(compact, 'dcterms:title');
compactStructure.title = titleChild.textContent;

var smallPrev = findFirstChildNodeNamed(compact, 'oslc:smallPreview');
if (smallPrev !== null) {
var preview = findFirstChildNode(smallPrev);
if (preview) {
compactStructure.small = {};
var document = findFirstChildNodeNamed(preview, 'oslc:document');
if (document)
compactStructure.small.uri = document.getAttribute('rdf:resource');
var height = findFirstChildNodeNamed(preview, 'oslc:hintHeight');
compactStructure.small.height = height.textContent;
var width = findFirstChildNodeNamed(preview, 'oslc:hintWidth');
compactStructure.small.width = width.textContent;
}
var compactStructure = {};
var compact = findFirstChildNode(findFirstChildNode(oslcCompactXmlDocument));

var titleChild = findFirstChildNodeNamed(compact, 'dcterms:title');
compactStructure.title = titleChild.textContent;

var smallPrev = findFirstChildNodeNamed(compact, 'oslc:smallPreview');
if (smallPrev !== null) {
var preview = findFirstChildNode(smallPrev);
if (preview) {
compactStructure.small = {};
var document = findFirstChildNodeNamed(preview, 'oslc:document');
if (document)
compactStructure.small.uri = document.getAttribute('rdf:resource');
var height = findFirstChildNodeNamed(preview, 'oslc:hintHeight');
compactStructure.small.height = height.textContent;
var width = findFirstChildNodeNamed(preview, 'oslc:hintWidth');
compactStructure.small.width = width.textContent;
}
var largePrev = findFirstChildNodeNamed(compact, 'oslc:largePreview');
if (largePrev !== null) {
var preview = findFirstChildNode(largePrev);
if (preview) {
compactStructure.large = {};
var document = findFirstChildNodeNamed(preview, 'oslc:document');
if (document)
compactStructure.large.uri = document.getAttribute('rdf:resource');
var height = findFirstChildNodeNamed(preview, 'oslc:hintHeight');
compactStructure.large.height = height.textContent;
var width = findFirstChildNodeNamed(preview, 'oslc:hintWidth');
compactStructure.large.width = width.textContent;
}
}
var largePrev = findFirstChildNodeNamed(compact, 'oslc:largePreview');
if (largePrev !== null) {
var preview = findFirstChildNode(largePrev);
if (preview) {
compactStructure.large = {};
var document = findFirstChildNodeNamed(preview, 'oslc:document');
if (document)
compactStructure.large.uri = document.getAttribute('rdf:resource');
var height = findFirstChildNodeNamed(preview, 'oslc:hintHeight');
compactStructure.large.height = height.textContent;
var width = findFirstChildNodeNamed(preview, 'oslc:hintWidth');
compactStructure.large.width = width.textContent;
}
return compactStructure;
}
return compactStructure;
}

function findFirstChildNode(e) {
for (i = 0; i < e.childNodes.length; i++) {
if (e.childNodes['[i]'/].nodeType === Node.ELEMENT_NODE) {
return e.childNodes['[i]'/];
}
for (i = 0; i < e.childNodes.length; i++) {
if (e.childNodes['[i]'/].nodeType === Node.ELEMENT_NODE) {
return e.childNodes['[i]'/];
}
}
}

function findFirstChildNodeNamed(e, nodeName) {
for (i = 0; i < e.childNodes.length; i++) {
if (e.childNodes['[i]'/].nodeType === Node.ELEMENT_NODE
&& e.childNodes['[i]'/].nodeName === nodeName) {
return e.childNodes['[i]'/];
}
for (i = 0; i < e.childNodes.length; i++) {
if (e.childNodes['[i]'/].nodeType === Node.ELEMENT_NODE
&& e.childNodes['[i]'/].nodeName === nodeName) {
return e.childNodes['[i]'/];
}
}
}
[/file]
[/template]
Loading