feat(ui/search-specref): reimagine specref search

.gitignore

@@ -50,6 +50,7 @@ js/core/worker.js
 js/templates.js
 js/ui/about-respec.js
 js/ui/dfn-list.js
+js/ui/search-specref.js
 js/w3c/abstract.js
 js/w3c/aria.js
 js/w3c/conformance.js

js/ui/ui.css

@@ -287,4 +287,97 @@
 
 p + .respec-button-copy-paste {
   margin: 1px 127px;
-}
+}
+
+#specref-ui {
+  margin: 0 2%;
+  margin-bottom: .5cm;
+}
+
+#specref-ui header {
+  font-size: .7em;
+  background-color: #eee;
+  text-align: center;
+  padding: .2cm;
+  margin-bottom: .5cm;
+  border-radius: 0 0 .2cm .2cm;
+}
+
+#specref-ui header h1 {
+  padding: 0;
+  margin: 0;
+  color: black;
+}
+
+#specref-ui p {
+  padding: 0;
+  margin: 0;
+  font-size: .8em;
+  text-align: center;
+}
+
+#specref-ui p.state {
+  margin: 1cm;
+}
+
+#specref-ui .searchcomponent {
+  display: grid;
+  grid-template-columns: auto 1.6cm;
+  margin: 0 .5cm;
+}
+#specref-ui .searchcomponent:focus {
+
+}
+
+#specref-ui input,
+#specref-ui button {
+  border: 0;
+  padding: 6px 12px;
+}
+
+#specref-ui label {
+  font-size: 0.6em;
+  grid-column-end: 3;
+  text-align: right;
+  grid-column-start: 1;
+}
+
+#specref-ui input[type=search] {
+  border-radius: .1cm  0 0 .1cm;
+  border: 1px solid rgb(204,204,204);
+}
+
+#specref-ui button[type=submit]{
+  color: white;
+  border-radius: 0 .1cm .1cm 0;
+  background-color: rgb(51,122,183);
+}
+
+#specref-ui button[type=submit]:hover {
+  background-color: #286090;
+  border-color: #204d74;
+}
+
+#specref-ui .result-stats {
+  margin: 0;
+  padding: 0;
+  color: rgb(128,128,128);
+  font-size: .7em;
+  font-weight: bold;
+}
+
+#specref-ui .specref-results {
+  font-size: .8em;
+}
+
+#specref-ui .specref-results dd + dt {
+  margin-top: .51cm;
+}
+
+#specref-ui .specref-results a {
+  text-transform: capitalize;
+}
+#specref-ui .specref-results .authors {
+  display: block;
+  color: #006621;
+}

src/core/biblio.js

@@ -5,7 +5,6 @@
 
 /*jshint jquery: true*/
 /*globals console*/
-
 import "deps/regenerator";
 import { biblioDB } from "core/biblio-db";
 import { createResourceHint } from "core/utils";
@@ -46,6 +45,57 @@ const REF_STATUSES = new Map([
   ["WG-NOTE", "W3C Working Group Note"],
 ]);
 
+
+const defaultsReference = Object.freeze({
+  authors: [],
+  date: "",
+  href: "",
+  publisher: "",
+  status: "",
+  title: "",
+  etAl: false,
+});
+
+const endNormalizer = function(endStr){
+  return str => {
+    const trimmed = str.trim();
+    const result = !trimmed || trimmed.endsWith(endStr) ? trimmed : trimmed + endStr;
+    return result;
+  }
+}
+
+const endWithDot = endNormalizer(".");
+
+export function wireReference(rawRef, target="_blank") {
+  if(typeof rawRef !== "object"){
+    throw new TypeError("Only modern object refereces are allowed");
+  }
+  const ref = Object.assign({}, defaultsReference, rawRef);
+  const authors = ref.authors.join("; ") + (ref.etAl ? " et al" : "");
+  const status = REF_STATUSES.get(ref.status) || ref.status
+  return hyperHTML.wire(ref)`
+    <cite>
+      <a
+        href="${ref.href}"
+        target="${target}"
+        rel="noopener noreferrer">
+        ${ref.title.trim()}</a>.
+    </cite>
+    <span class="authors">
+      ${endWithDot(authors)}
+    </span>
+    <span class="publisher">
+      ${endWithDot(ref.publisher)}
+    </span>
+    <span class="pubDate">
+      ${endWithDot(ref.date)}
+    </span>
+    <span class="pubStatus">
+      ${endWithDot(status)}
+    </span>
+  `;
+}
+
 export function stringifyReference(ref) {
   if (typeof ref === "string") return ref;
   let output = `<cite>${ref.title}</cite>`;