diff --git a/script.js b/script.js
index b6bd59c..fd991ac 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,12 @@
const domParser = new DOMParser();
+// https://stackoverflow.com/a/4793630/10074924
+function insertAfter(referenceNode, newNode) {
+ referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+}
+
+const termActions = document.importNode(
+ document.getElementById("term-actions-tpl").content, true);
const app = document.querySelector(".app");
const appTitle = document.querySelector(".js-app-title");
const appProgressBar = document.querySelector(".app__progress-bar");
@@ -9,6 +16,7 @@ const appForwardButton = document.querySelector(".js-forward-button");
const appMainSearch = document.querySelector(".js-app-main-search");
const appSearchButton = document.querySelector(".js-search-button");
const dictContentHolder = document.querySelector(".js-dict-content");
+const dictContentSourceLink = () => document.querySelector(".js-source-link");
const dictError = document.querySelector(".js-dict-error")
function setLoadProgress (percent) {
@@ -21,13 +29,18 @@ function loadArticle (article) {
dictContentHolder.innerHTML = "";
dictError.style.display = "none";
setLoadProgress(50);
- fetch(`https://cors-anywhere.herokuapp.com/www.cnrtl.fr/definition/${article}`)
+ const termUrl = `https://www.cnrtl.fr/definition/${article}`;
+ fetch(`https://cors-anywhere.herokuapp.com/${termUrl}`)
.then(response => response.text())
.then(responseText => {
const responseDOM = domParser.parseFromString(responseText, "text/html")
- setLoadProgress(90);
const responseDictContent = responseDOM.getElementById("lexicontent").outerHTML;
dictContentHolder.innerHTML = responseDictContent;
+
+ const termTitle = dictContentHolder.querySelector(".tlf_cvedette");
+ insertAfter(termTitle, termActions);
+ dictContentSourceLink().href = termUrl;
+
setLoadProgress(100);
})
.catch(() => {
diff --git a/style.css b/style.css
index 6ae00fc..c1548d5 100644
--- a/style.css
+++ b/style.css
@@ -18,6 +18,11 @@ body {
Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
+a {
+ color: #c51162;
+ text-decoration-style: dotted;
+}
+
strong, b {
color: #212121;
}
@@ -27,15 +32,34 @@ svg {
fill: currentColor;
}
-.btn.btn--icon {
+.btn {
-webkit-appearance: none;
display: flex;
+ padding: 5px;
+ margin: 5px;
+ border: none;
+ border-radius: 4px;
+ font: inherit;
+ text-decoration: none;
+ color: inherit;
+ background-color: #eee;
+}
+
+.btn:hover, .btn:active {
+ color: #c51162;
+ background-color: #fce3ee;
+}
+
+.btn--flat {
+ color: #888;
+ background-color: transparent;
+}
+
+.btn--icon {
width: 40px;
height: 40px;
padding: 0;
margin: 0 5px;
- border: none;
- border-radius: 4px;
background-color: transparent;
}
@@ -44,6 +68,14 @@ svg {
background-color: #fce3ee;
}
+.btn.btn--icon-left svg {
+ margin-right: 5px;
+}
+
+.btn.btn--icon-right svg {
+ margin-left: 5px;
+}
+
.btn.btn--icon svg {
margin: auto;
}
@@ -191,6 +223,10 @@ svg {
padding: 5px 15px;
}
+.term-actions {
+ display: flex;
+}
+
.dict-error {
display: none;
flex-direction: column;