aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md17
-rw-r--r--hovercard.js42
2 files changed, 39 insertions, 20 deletions
diff --git a/README.md b/README.md
index 439dc2b..fbc10d6 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
A script to load cards when you hover over a link in an article.
+This is a fork of the [original project](https://github.com/capjamesg/hovercard.js) intended for use with [indieweb-glue](https://indieweb-glue.evgenykuznetsov.org/).
+
## Example
![Text in an article with an active hovercard that contains an image, a title, and a description](screenshot.png)
@@ -20,17 +22,9 @@ To use the hovercard script, first download a copy and upload it to your site. T
Substitute the path of the script in the example above with the location of the script on your site.
-You should add a JSON object to every page that contains a hovercard. This JSON object should use the following structure:
-
- {
- "https://example.com": {
- "title": "Example Domain",
- "description": "This domain is used for examples."
- "photo": "https://example.com/example.png"
- }
- }
+## Roadmap
-Keys in the JSON object represent links on the page to look up. The only required key value is `title`. If a description and/or photo are provided, these will be included in the hovercard.
+[ ] Customized hovercards for H-Cards.
## License
@@ -38,4 +32,5 @@ This code for this project is placed in the public domain.
## Contributors
-- capjamesg \ No newline at end of file
+- capjamesg
+- evgenykuznetsov.org \ No newline at end of file
diff --git a/hovercard.js b/hovercard.js
index 9b8a92e..c8bd491 100644
--- a/hovercard.js
+++ b/hovercard.js
@@ -1,9 +1,13 @@
-// comment out this variable to add your own hovercards
-// var hovercards = {
-// "https://www.w3.org/community/sustyweb/": {"title": "Sustainable Web Design Community Group", "A community group dedicated to creating sustainable websites. This group will not publish specifications." }
-// };
-
- var article = document.getElementsByTagName("article");
+var curURL = document.URL
+var baseURL = document.domain
+
+// these will not attempt to get fetched, so can be used to override things
+var hovercards = {
+ curURL : {},
+ baseURL: {}
+};
+
+var article = document.getElementsByTagName("article");
if (article) {
article = article[0];
@@ -14,7 +18,14 @@
if (hovercard_data) {
var new_box = document.createElement("div");
new_box.classList.add("hovercard");
- new_box.innerHTML = "<strong>" + hovercard_data["title"] + "</strong><p>" + hovercard_data["description"] + "</p>";
+ new_box.innerHTML = "<strong>" + hovercard_data["title"] + "</strong>"
+ if (hovercard_data["description"]) {
+ new_box.innerHTML = new_box.innerHTML + "<p>" + hovercard_data["description"] + "</p>";
+ }
+ // if image available, add it
+ if (hovercard_data["image"]) {
+ new_box.innerHTML = "<img src='" + hovercard_data["image"] + "' alt='" + hovercard_data["title"] + "' /><br>" + new_box.innerHTML;
+ }
new_box.style.top = window.scrollY + target_link.getBoundingClientRect().top + "px";
new_box.style.left = window.scrollX + target_link.getBoundingClientRect().left + "px";
new_box.id = "tooltip";
@@ -47,5 +58,18 @@
links[i].addEventListener("onfocusout", function() {
unhover(this);
});
- }
-
+ let url = links[i].href.replace(/\/+$/, "");
+ if (!hovercards[url]) {
+ let req = 'https://indieweb-glue.evgenykuznetsov.org/api/opengraph?url=';
+ req += url;
+ const r = encodeURI(req);
+ var xmlhttp = new XMLHttpRequest();
+ xmlhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ hovercards[url] = JSON.parse(this.responseText);
+ }
+ };
+ xmlhttp.open("GET", r, true);
+ xmlhttp.send();
+ }
+ } \ No newline at end of file