Bookmark submission: Rearrange fields, focus URI field on pane expansion.
Change-Id: I2c440905a39ea0126fa6b1024fa7b54e80a59b1a
diff --git a/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
new file mode 100644
index 0000000..eab07f5
--- /dev/null
+++ b/src/main/resources/META-INF/resources/bookmarks/bookmarkList.js
@@ -0,0 +1,5 @@
+document.addEventListener('DOMContentLoaded', () => {
+ let bookmarkSubmissionPane = document.getElementById('bookmark-submission-pane');
+ let uriInput = document.getElementById('uri-input');
+ bookmarkSubmissionPane.addEventListener('opened', () => uriInput.focus());
+});
\ No newline at end of file
diff --git a/src/main/resources/templates/benki/bookmarks/bookmarkList.html b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
index 8242cd8..9f7b402 100644
--- a/src/main/resources/templates/benki/bookmarks/bookmarkList.html
+++ b/src/main/resources/templates/benki/bookmarks/bookmarkList.html
@@ -13,7 +13,8 @@
{! #if authenticated !}
<script type="module" src="/web_modules/elix/define/ExpandableSection.js"></script>
- <elix-expandable-section>
+ <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">
<form class="pure-form pure-form-aligned" method="post">
@@ -21,13 +22,13 @@
<legend>New Bookmark</legend>
<div class="pure-control-group">
- <label for="title-input">Title:</label>
- <input name="title" id="title-input" type="text" placeholder="Title" required/>
+ <label for="uri-input">URI:</label>
+ <input name="uri" id="uri-input" type="text" placeholder="URI" required/>
</div>
<div class="pure-control-group">
- <label for="uri-input">URI:</label>
- <input name="uri" id="uri-input" type="text" placeholder="URI" required/>
+ <label for="title-input">Title:</label>
+ <input name="title" id="title-input" type="text" placeholder="Title" required/>
</div>
<div class="pure-control-group">