Bookmark submission: Automatically fetch title after URI input.
Change-Id: Ieea258e076d1dbaeba2520e583b590822dfdcab8
diff --git a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
index eab07f5..11c4b10 100644
--- a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
+++ b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
@@ -1,5 +1,30 @@
document.addEventListener('DOMContentLoaded', () => {
let bookmarkSubmissionPane = document.getElementById('bookmark-submission-pane');
+ let titleInput = document.getElementById('title-input');
let uriInput = document.getElementById('uri-input');
+ let uriSpinner = document.getElementById('uri-spinner');
+
bookmarkSubmissionPane.addEventListener('opened', () => uriInput.focus());
-});
\ No newline at end of file
+
+ uriInput.addEventListener('blur', async () => {
+ uriSpinner.hidden = false;
+ uriSpinner.playing = true;
+ let r = await fetch(uriInput.value);
+ uriSpinner.hidden = true;
+ uriSpinner.playing = false;
+
+ if (!r.ok) {
+ return;
+ }
+
+ let html = await r.text();
+ let parser = new DOMParser();
+ let doc = parser.parseFromString(html, "text/html");
+ let titles = doc.getElementsByTagName('title');
+ if (titles.length <= 0) {
+ return;
+ }
+ titleInput.value = titles[0].innerText;
+ });
+});
+
diff --git a/src/main/resources/templates/benki/bookmarks/bookmarkList.html b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
index 9f7b402..2c35249 100644
--- a/src/main/resources/templates/benki/bookmarks/bookmarkList.html
+++ b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
@@ -13,7 +13,10 @@
{! #if authenticated !}
<script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
+ <script type="module" src="/web_modules/elix/define/ProgressSpinner.js"></script>
+
<script type="module" src="/bookmarks/bookmarkList.js" defer></script>
+
<elix-expandable-section id="bookmark-submission-pane">
<h2 slot="header" class="small-title"><button class="pure-button">Create New Bookmark</button></h2>
<section id="bookmark-submission">
@@ -24,6 +27,7 @@
<div class="pure-control-group">
<label for="uri-input">URI:</label>
<input name="uri" id="uri-input" type="text" placeholder="URI" required/>
+ <elix-progress-spinner id="uri-spinner" hidden></elix-progress-spinner>
</div>
<div class="pure-control-group">