From 7f50e2900eb4a7b81b7715bd699d78d7a348f3d9 Mon Sep 17 00:00:00 2001
From: dcore94 <m.lettere@gmail.com>
Date: Tue, 13 Sep 2022 15:40:17 +0200
Subject: [PATCH] render context list

---
 ccp/js/methodeditorcontroller.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/ccp/js/methodeditorcontroller.js b/ccp/js/methodeditorcontroller.js
index aacdad6..2f99d5d 100644
--- a/ccp/js/methodeditorcontroller.js
+++ b/ccp/js/methodeditorcontroller.js
@@ -94,7 +94,7 @@ class CCPMethodEditorController extends HTMLElement{
         z-index: 10;
       }
       
-      ul.author_list{
+      ul.author_list, ul.context_list{
         list-style: none;
         display: flex;
         flex-direction: row;
@@ -115,6 +115,18 @@ class CCPMethodEditorController extends HTMLElement{
         color: #9900CC;
         border: solid 1px #9900CC;
       }
+      li.context_list_item{
+        display: inline-block;
+        padding: 0.25em 0.4em;
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+        border-radius: 0.25rem;
+        background-color: #eeffff;
+        color: #0099CC;
+        border: solid 1px #0099CC;
+      }
     </style>
   `
   #erase_icon = `
@@ -372,6 +384,9 @@ class CCPMethodEditorController extends HTMLElement{
               <div class="mb-3 row">
                 ${this.renderAuthors()}
               </div>
+              <div class="mb-3 row">
+                ${this.renderContexts()}
+              </div>
               <div class="mb-3 row">
                 <div class="col">
                   <label class="form-label">Title</label>
@@ -725,7 +740,17 @@ class CCPMethodEditorController extends HTMLElement{
       <ul class="author_list">
       ${ this.#current.metadata.
           filter(md=>md.role === "author").
-          map(a=>`<li class="author_list_item">${a.title}</li>`) }
+          map(a=>`<li class="author_list_item" title="${a.title}">${a.title}</li>`).join() }
+      </ul>
+    `
+  }
+  
+  renderContexts(){
+    return `
+      <ul class="context_list">
+      ${ this.#current.metadata.
+          filter(md=>md.role === "context").
+          map(c=>`<li class="context_list_item" title="${c.title}">${c.title}</li>`).join("") }
       </ul>
     `
   }