Merge pull request #25 from datasci4health/development

Styling the DCC State Selector
harena-lab · May 21, 2019 · 1fd7740 · 1fd7740
2 parents c5a63a1 + 3db5999
commit 1fd7740
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/src/adonisjs/public/dccs/components/dcc-state-selector.js b/src/adonisjs/public/dccs/components/dcc-state-selector.js
@@ -18,16 +18,6 @@ class DCCStateSelector extends DCCBase {
      this._presentationState = this.querySelector("#presentation-state");
      */
 
-     let template = document.createElement("template");
-     template.innerHTML = DCCStateSelector.templateElements;
-
-     this._shadow = this.attachShadow({mode: "open"});
-     this._shadow.appendChild(template.content.cloneNode(true));
-
-     this._presentation = this._shadow.querySelector("#presentation-dcc");
-     this._presentationState = this._shadow.querySelector("#presentation-state");
-
-
      this._showState = this._showState.bind(this);
      this._hideState = this._hideState.bind(this);
      this._changeState = this._changeState.bind(this);
@@ -43,6 +33,28 @@ class DCCStateSelector extends DCCBase {
    }
 
    async connectedCallback() {
+      const theme = await MessageBus.ext.request("control/_current_theme_name/get");
+
+      DCCStateSelector.templateElements =
+      "<style> @import '" +
+         Basic.service.themeStyleResolver(theme.message, "dcc-state-selector.css") +
+      "' </style>" +
+      `<span id="presentation-dcc">
+         <span id="presentation-text"><slot></slot></span>
+         <span id="presentation-state"></span>
+      </span>`;
+
+      let template = document.createElement("template");
+      template.innerHTML = DCCStateSelector.templateElements;
+
+      // Basic.service.replaceStyle(template, null, newValue, "dcc-state-selector.css");
+
+      this._shadow = this.attachShadow({mode: "open"});
+      this._shadow.appendChild(template.content.cloneNode(true));
+
+      this._presentation = this._shadow.querySelector("#presentation-dcc");
+      this._presentationState = this._shadow.querySelector("#presentation-state");
+
       // <TODO> limited: considers only one group per page
       this.completeId = this.id;  
       if (!this.hasAttribute("states") && MessageBus.page.hasSubscriber("dcc/request/selector-states")) {
@@ -247,8 +259,9 @@ class DCCGroupSelector extends DCCBase {
    }
 }
 
-(function() {
+(async function() {
 
+/*
 DCCStateSelector.templateElements = 
 `<style>
    @import "css/dcc-state-selector.css"
@@ -257,6 +270,7 @@ DCCStateSelector.templateElements =
    <span id="presentation-text"><slot></slot></span>
    <span id="presentation-state"></span>
 </span>`;
+*/
 
 DCCStateSelector.elementTag = "dcc-state-selector";
 customElements.define(DCCStateSelector.elementTag, DCCStateSelector);

diff --git a/src/adonisjs/public/infra/basic.js b/src/adonisjs/public/infra/basic.js
@@ -69,18 +69,20 @@ class Basic {
       return result;
    }
 
-   themeStyleResolver(theme) {
-      return "../themes/" + theme + "/css/theme.css";
+   themeStyleResolver(theme, cssFile) {
+      return "../themes/" + theme + "/css/" + cssFile;
    }
 
-   replaceStyle(targetDocument, oldCSS, newTheme) {
+   replaceStyle(targetDocument, oldCSS, newTheme, cssFile) {
       if (oldCSS)
          targetDocument.head.removeChild(oldCSS);
 
+      const cssF = (cssFile) ? cssFile : "theme.css";
+
       let newCSS = document.createElement("link");
       newCSS.setAttribute("rel", "stylesheet");
       newCSS.setAttribute("type", "text/css");
-      newCSS.setAttribute("href", this.themeStyleResolver(newTheme));
+      newCSS.setAttribute("href", this.themeStyleResolver(newTheme, cssF));
       targetDocument.head.appendChild(newCSS);
 
       return newCSS;

diff --git a/src/adonisjs/public/infra/bus.js b/src/adonisjs/public/infra/bus.js
@@ -49,8 +49,8 @@ class MessageBus {
    }
 
    async publish(topic, message) {
-      console.log(topic);
-      console.log(message);
+      // console.log(topic);
+      // console.log(message);
       for (let l in this._listeners)
          if (this.matchTopic(l, topic))
             this._listeners[l].callback(topic, message);

diff --git a/src/adonisjs/public/player/js/player.js b/src/adonisjs/public/player/js/player.js
@@ -43,6 +43,10 @@ class PlayerManager {
       this._nextKnot = 1;
    }
 
+   /* <TODO>
+      A commom code for shared functionalities between player and author
+      ******/
+
    get currentThemeFamily() {
       return this._currentThemeFamily;
    }
@@ -55,6 +59,11 @@ class PlayerManager {
          Basic.service.replaceStyle(document, this._currentThemeCSS, newValue);
    }
 
+   requestCurrentThemeFamily(topic, message) {
+      MessageBus.ext.publish(MessageBus.buildResponseTopic(topic, message),
+                             this.currentThemeFamily);
+   }
+
    /*
     * Event handlers
     * **************
@@ -64,6 +73,9 @@ class PlayerManager {
       switch (topic) {
          case "control/register": this.register(); break;
          case "control/signin":   this.signIn(); break;
+         case "control/_current_theme_name/get" :
+             this.requestCurrentThemeFamily(topic, message);
+             break;
       }
    }