Adds date format and modal view of documents.

Daniel Bruce · Daniel Bruce · commit 6a47cf093b09 · 2019-03-12T10:13:43.000-04:00
diff --git a/spider/assets/css/styles.css b/spider/assets/css/styles.css
@@ -102,3 +102,13 @@ footer {
   vertical-align: middle;
 }
 
+#results-container .modal iframe {
+  width: 100%;
+}
+
+@media (min-width: 1200px) {
+  #results-container .modal .modal-dialog {
+    min-width: 1000px;
+  }
+}
+
diff --git a/spider/assets/js/search.js b/spider/assets/js/search.js
@@ -27,12 +27,13 @@ if (document.getElementById('q')) {
       })
     );
 
+    var iFrameHeight = Math.max(200, Math.round(window.innerHeight * 0.6));
     var hitTemplate = `
       <div class="media">
         <div class="media-body">
           <h5 class="mb-0">
             {{__hitIndex}}.
-            <a href="files/{{file_name}}#{{id}}">
+            <a data-toggle="modal" href="#document-{{id}}">
               {{document_title}} - {{title}}
             </a>
           </h5>
@@ -45,7 +46,22 @@ if (document.getElementById('q')) {
             {{/effdate}}
           </ol>
         </div>
-    </div>
+      </div>
+      <div class="modal fade" tabindex="-1" role="dialog" id="document-{{id}}" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content">
+            <div class="modal-header">
+              <h5 class="modal-title">{{document_title}}</h5>
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
+            <div class="modal-body">
+              <iframe src="/files/{{file_name}}#{{id}}" frameborder="0" height="${iFrameHeight}">
+            </div>
+          </div>
+        </div>
+      </div>
     `;
 
     var noResultsTemplate = `
@@ -54,6 +70,12 @@ if (document.getElementById('q')) {
       </div>
     `;
 
+    var dateFormatOptions = {
+      month: 'long',
+      day: '2-digit',
+      year: 'numeric',
+    };
+
     search.addWidget(
       instantsearch.widgets.hits({
         container: '#hits',
@@ -65,12 +87,18 @@ if (document.getElementById('q')) {
         transformData: {
             item: function(item) {
                 item.__hitIndex++;
-                if (item.pubdate === 'N/A') {
-                    item.pubdate = null;
-                }
-                if (item.effdate === 'N/A') {
-                    item.effdate = null;
-                }
+                ['pubdate', 'effdate'].forEach(function(date) {
+                   if (item[date] === 'N/A') {
+                     item[date] = null;
+                   } else if (!!item[date]) {
+                     try {
+                       var dateObj = new Date(item[date]);
+                       item[date] = dateObj.toLocaleDateString('en-US', dateFormatOptions);
+                     } catch (err) {
+                       item[date] = null;
+                     }
+                   }
+                });
                 return item;
             },
         },
