feat!: use indieweb-glue

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