Bookmark submission: Automatically fetch title after URI input.

Change-Id: Ieea258e076d1dbaeba2520e583b590822dfdcab8

2 files changed, 30 insertions, 1 deletions

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">