diff options
| -rw-r--r-- | README.md | 17 | ||||
| -rw-r--r-- | hovercard.js | 42 |
2 files changed, 39 insertions, 20 deletions
@@ -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  @@ -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 |