Merge pull request #12 from datasci4health/development

first version of the /artifacts resource

Dockerfile

@@ -1,14 +1,12 @@
 FROM node:8
 
-WORKDIR . /app/jacinto/casemanager
+WORKDIR . /app
 
 RUN npm i npm
 RUN npm i -g @adonisjs/cli
 
 COPY ./src/adonisjs .
 
-#RUN cp .env.example .env
 RUN npm install
 
-
-CMD [ "adonis", "serve", "--dev" ]
+CMD [ "adonis", "serve"]

dccs/README.md

@@ -0,0 +1,5 @@
+# Digital Content Components
+
+## Properties
+Getter and setter approach based on:
+> [Attributes and Properties in Custom Elements, Alligator.io, September 13, 2017](https://alligator.io/web-components/attributes-properties/)

dccs/components/dcc-base.js

@@ -0,0 +1,6 @@
+/**
+ * DCC which is the basis of all components
+ */
+
+class DCCBase extends HTMLElement {
+}

dccs/components/dcc-block.js

@@ -0,0 +1,173 @@
+/* Block DCC
+ * 
+ * xstyle - controls the behavior of the style
+ *   * "in" or not defined -> uses the internal trigger-button style
+ *   * "none" ->  apply a minimal styling (just changes cursor to pointer)
+ *   * "out"  -> apply an style externally defined with the name "trigger-button-template"
+**************************************************************************/
+
+class DCCBlock extends DCCBase {
+   constructor() {
+     super();
+
+     this._pendingRequests = 0;
+
+     this.defineXstyle = this.defineXstyle.bind(this);
+     this.defineLocation = this.defineLocation.bind(this);
+     this._renderInterface = this._renderInterface.bind(this);
+   }
+
+   connectedCallback() {
+      if (!this.hasAttribute("xstyle") && window.messageBus.page.hasSubscriber("dcc/request/xstyle")) {
+         window.messageBus.page.subscribe("dcc/xstyle/" + this.id, this.defineXstyle);
+         window.messageBus.page.publish("dcc/request/xstyle", this.id);
+         this._pendingRequests++;
+      }
+      if (!this.hasAttribute("location") &&
+          window.messageBus.page.hasSubscriber("dcc/request/location")) {
+         window.messageBus.page.subscribe("dcc/location/" + this.id, this.defineLocation);
+         window.messageBus.page.publish("dcc/request/location", this.id);
+         this._pendingRequests++;
+      }
+      this._checkRender();
+   }
+
+   defineXstyle(topic, message) {
+      window.messageBus.page.unsubscribe("dcc/xstyle/" + this.id, this.defineXstyle);
+      this.xstyle = message;
+      this._pendingRequests--;
+      this._checkRender();
+   }
+
+   defineLocation(topic, message) {
+      window.messageBus.page.unsubscribe("dcc/location/" + this.id, this.defineLocation);
+      this.location = message;
+      this._pendingRequests--;
+      this._checkRender();
+   }
+
+   _checkRender() {
+      if (this._pendingRequests == 0) {
+         if (document.readyState === "complete")
+            this._renderInterface();
+         else
+            window.addEventListener("load", this._renderInterface);
+      }
+   }
+
+   /* Attribute Handling */
+
+   static get observedAttributes() {
+     return ["id", "label", "image", "location", "xstyle"];
+   }
+
+   get id() {
+      return this.getAttribute("id");
+   }
+
+   set id(newValue) {
+      this.setAttribute("id", newValue);
+   }
+
+   get label() {
+      return this.getAttribute("label");
+   }
+
+   set label(newValue) {
+      this.setAttribute("label", newValue);
+   }
+
+   get image() {
+      return this.getAttribute("image");
+   }
+
+   set image(newValue) {
+     this.setAttribute("image", newValue);
+   }
+
+   get location() {
+      return this.getAttribute("location");
+   }
+
+   set location(newValue) {
+     this.setAttribute("location", newValue);
+   }
+
+   get xstyle() {
+      return this.getAttribute("xstyle");
+   }
+
+   set xstyle(newValue) {
+      this.setAttribute("xstyle", newValue);
+   }
+
+   /* Rendering */
+
+   elementTag() {
+      return DCCBlock.elementTag;
+   }
+
+   _renderInterface() {
+      let presentation = null;
+      if (!this.hasAttribute("xstyle"))
+         this.xstyle = "in";
+
+      let render;
+      switch (this.xstyle) {
+         case "in"  : if (this.hasAttribute("image"))
+                         render = "image-style"
+                      else
+                         render = "regular-style"
+                      break;
+         case "none": render = "";
+                      break;
+         case "out-image":
+         case "out":  render = this.elementTag() + "-template";
+                      break;
+         default:     render = this.xstyle;
+      }
+
+      // console.log("* id: " + this.id);
+      // console.log("* location: " + this.location);
+      // console.log("* xstyle: " + this.xstyle);
+      if (this.xstyle.startsWith("out") &&
+          this.hasAttribute("location") && this.location != "#in") {
+         presentation = document.querySelector("#" + this.location);
+         this._injectDCC(presentation, render);
+         let wrapper = document.querySelector("#" + this.location + "-wrapper");
+         if (wrapper != null) {
+            if (wrapper.style.display)  // html
+               delete wrapper.style.display;
+            if (wrapper.getAttribute("visibility"))  // svg
+               delete wrapper.removeAttribute("visibility");
+         }
+      } else {
+         let template = document.createElement("template");
+         template.innerHTML = this._generateTemplate(render);
+
+         let host = this;
+         if (this.xstyle == "in" || this.xstyle == "none")
+            host = this.attachShadow({mode: "open"});
+         host.appendChild(template.content.cloneNode(true));
+         presentation = host.querySelector("#presentation-dcc");
+      }
+      return presentation;
+   }
+
+   /*
+   _computeTrigger() {
+      if (this.hasAttribute("label") || this.hasAttribute("action")) {
+         let eventLabel = (this.hasAttribute("action")) ? this.action : "navigate/trigger";
+         let message = (this.hasAttribute("link")) ? this.link : this.label;
+         window.messageBus.ext.publish(eventLabel, message);
+      }
+   }
+   */
+}
+
+(function() {
+   DCCBlock.elementTag = "dcc-block";
+
+   customElements.define(DCCBlock.elementTag, DCCBlock);
+
+})();

dccs/components/dcc-character.js

@@ -0,0 +1,178 @@
+/* Character DCC
+  **************/
+class DCCCharacter extends DCCBase {
+   connectedCallback() {
+      let templateHTML = 
+         `<style>
+            .dsty-border {
+               border: 1px solid gray;
+               border-radius: 5px;
+               padding: 5px;
+            }
+            .dsty-record {
+               width: 100%;
+               overflow: hidden;
+               display: flex;
+            }
+            @media (orientation: landscape) {
+               .dsty-record {
+                  flex-direction: row;
+               }
+            }
+            @media (orientation: portrait) {
+               .dsty-record {
+                  flex-direction: column;
+               }
+            }
+            .dsty-images-container {
+               display: flex;
+               flex: 294px;
+               min-width: 294px;
+            }
+            @media (orientation: landscape) {
+               .dsty-images {
+                  flex-direction: row;
+               }
+            }
+            @media (orientation: portrait) {
+               .dsty-images {
+                  flex-direction: column;
+               }
+            }
+            .dsty-image-box {
+               flex: 210px;
+               min-width: 210px;
+            }
+            .dsty-image {
+               object-fit: contain;
+               max-width: 200px;
+               max-height: 100%;
+            }
+            .dsty-icon-box {
+               flex: 64px;
+               max-width: 74px;
+            }            
+            .dsty-icon {
+               object-fit: contain;
+               max-width: 64px;
+               max-height: 100%;
+            }            
+            .dsty-details {
+               display: flex;
+               flex-direction: column;
+               width: 100%;
+               padding: 10px;
+            }
+            .dsty-details-row {
+               display: flex;
+               flex-direction: row;
+            }
+            .dsty-field-label {
+               font-weight: bold;
+               background-color: lightgray;
+               flex: 25%;
+            }
+            .dsty-field-value {
+               flex: 75%;
+            }
+       </style>
+       <div id="presentation-dcc" class="dsty-record dsty-border">
+          <div id="record-images" class="dsty-images-container">
+             [images]           
+          </div>
+          <div class="dsty-details" class="dsty-border">
+             <div class="dsty-details-row">
+                <div class="dsty-field-label dsty-border">Name:</div>
+                <div id="record-name" class="dsty-field-value dsty-border">[character]</div>
+             </div>
+             <div class="dsty-details-row">
+                <div class="dsty-field-label dsty-border">Role:</div>
+                <div id="record-role" class="dsty-field-value dsty-border">[role]</div>
+             </div>
+             <div class="dsty-details-row">
+                <div class="dsty-field-label dsty-border">Description:</div>
+                <div id="record-description" class="dsty-field-value dsty-border">[description]</div>
+             </div>
+          </div>
+       </div>`;
+
+      templateHTML = templateHTML.replace("[images]", this._imageElements())
+                                 .replace("[character]", this.character)
+                                 .replace("[role]", this.role)
+                                 .replace("[description]", this.description);
+
+      // building the template
+      const template = document.createElement("template");
+      template.innerHTML = templateHTML;
+      let shadow = this.attachShadow({mode: "open"});
+      shadow.appendChild(template.content.cloneNode(true));
+
+      this._presentation = shadow.querySelector("#presentation-dcc");
+      this._recordImages = shadow.querySelector("#record-images");
+   }
+
+   /* Properties
+      **********/
+
+   static get observedAttributes() {
+      return ["image", "character", "role", "description"];
+   }
+
+   get image() {
+      return this.getAttribute("image");
+   }
+
+   set image(newValue) {
+      this.setAttribute("image", newValue);
+   }
+
+   get character() {
+      return this.getAttribute("character");
+   }
+
+   set character(newValue) {
+      this.setAttribute("character", newValue);
+   }
+
+   get role() {
+      return this.getAttribute("role");
+   }
+
+   set role(newValue) {
+      this.setAttribute("role", newValue);
+   }
+
+   get description() {
+      return this.getAttribute("description");
+   }
+
+   set description(newValue) {
+      this.setAttribute("description", newValue);
+   }
+
+   _imageElements() {
+      let extension = this.image.lastIndexOf(".");
+      let icon = this.image.substring(0, extension) + "-icon" + this.image.substring(extension);
+
+      return "<div class='dsty-image-box dsty-border'><img id='char-image' class='dsty-image' src='" + this.image + "'></div>" +
+             "<div class='dsty-icon-box dsty-border'><img id='char-icon'class='dsty-icon' src='" + icon + "'></div>";
+   }
+
+   /* Editable Component */
+   editDCC() {
+      if (!DCCCharacter.editableCode) {
+        editableDCCCharacter();
+        DCCCharacter.editableCode = true;
+      }
+      this._editDCC();
+   }
+
+   editImage() {
+      this._editImage();
+   }
+}
+
+(function() {
+   DCCCharacter.editableCode = false;
+   customElements.define("dcc-character", DCCCharacter);
+})();