Added linking between QDN websites / apps.

The simplest way to link to another QDN website is to include a link with the format:
<a href="qortal://WEBSITE/QortalDemo">link text</a>

This can be expanded to link to a specific path, e.g:
<a href="qortal://WEBSITE/QortalDemo/minting-leveling/index.html">link text</a>

Or it can be initiated programatically, via qortalRequest():

let res = await qortalRequest({
    action: "LINK_TO_QDN_RESOURCE",
    service: "WEBSITE",
    name: "QortalDemo",
    path: "/minting-leveling/index.html" // Optional
});

Note that qortal:// links don't yet support identifiers, so the above format is not confirmed.
This commit is contained in:
CalDescent 2023-01-28 15:22:03 +00:00
parent 3b6e1ea27f
commit 46e8baac98
2 changed files with 70 additions and 0 deletions

View File

@ -77,6 +77,7 @@ Here is a list of currently supported actions:
- FETCH_BLOCK_RANGE - FETCH_BLOCK_RANGE
- SEARCH_TRANSACTIONS - SEARCH_TRANSACTIONS
- GET_PRICE - GET_PRICE
- LINK_TO_QDN_RESOURCE
More functionality will be added in the future. More functionality will be added in the future.
@ -403,6 +404,27 @@ let res = await qortalRequest({
}); });
``` ```
### Link/redirect to another QDN website
Note: an alternate method is to include `<a href="qortal://WEBSITE/QortalDemo">link text</a>` within your HTML code.
```
let res = await qortalRequest({
action: "LINK_TO_QDN_RESOURCE",
service: "WEBSITE",
name: "QortalDemo",
});
```
### Link/redirect to a specific path of another QDN website
Note: an alternate method is to include `<a href="qortal://WEBSITE/QortalDemo/minting-leveling/index.html">link text</a>` within your HTML code.
```
let res = await qortalRequest({
action: "LINK_TO_QDN_RESOURCE",
service: "WEBSITE",
name: "QortalDemo",
path: "/minting-leveling/index.html"
});
```
## Sample App ## Sample App

View File

@ -71,6 +71,20 @@ window.addEventListener("message", (event) => {
response = httpGet("/names/" + data.name); response = httpGet("/names/" + data.name);
break; break;
case "LINK_TO_QDN_RESOURCE":
if (data.service == null) data.service = "WEBSITE"; // Default to WEBSITE
if (qdnContext == "render") {
url = "/render/" + data.service + "/" + data.name;
}
else {
// gateway / domainMap only serve websites right now
url = "/" + data.name;
}
if (data.path != null) url = url.concat((data.path.startsWith("/") ? "" : "/") + data.path);
window.location = url;
response = true;
break;
case "SEARCH_QDN_RESOURCES": case "SEARCH_QDN_RESOURCES":
url = "/arbitrary/resources?"; url = "/arbitrary/resources?";
if (data.service != null) url = url.concat("&service=" + data.service); if (data.service != null) url = url.concat("&service=" + data.service);
@ -200,6 +214,40 @@ window.addEventListener("message", (event) => {
}, false); }, false);
/**
* Listen for and intercept all link click events
*/
function interceptClickEvent(e) {
var target = e.target || e.srcElement;
if (target.tagName === 'A') {
let href = target.getAttribute('href');
if (href.startsWith("qortal://")) {
href = href.replace(/^(qortal\:\/\/)/,"");
if (href.includes("/")) {
let parts = href.split("/");
const service = parts[0].toUpperCase(); parts.shift();
const name = parts[0]; parts.shift();
const path = parts.join("/");
qortalRequest({
action: "LINK_TO_QDN_RESOURCE",
service: service,
name: name,
path: path
});
}
e.preventDefault();
}
}
}
if (document.addEventListener) {
document.addEventListener('click', interceptClickEvent);
}
else if (document.attachEvent) {
document.attachEvent('onclick', interceptClickEvent);
}
const awaitTimeout = (timeout, reason) => const awaitTimeout = (timeout, reason) =>
new Promise((resolve, reject) => new Promise((resolve, reject) =>
setTimeout( setTimeout(