Merge pull request #228 from datasci4health/development

Development

src/adonisjs/old_html/author/author.html

@@ -39,7 +39,7 @@
 <script src="../dccs/components/dcc-image.js"></script>
 <script src="../dccs/components/dcc-expression.js"></script>
 <script src="../dccs/components/dcc-block.js"></script>
-<script src="../dccs/components/dcc-trigger.js"></script>
+<script src="../dccs/components/dcc-button.js"></script>
 <script src="../dccs/components/dcc-character.js"></script>
 <script src="../dccs/components/dcc-lively-dialog.js"></script>
 <script src="../dccs/components/dcc-notice-input.js"></script>
@@ -141,8 +141,8 @@ <h3>Settings</h3>
             <li class="breadcrumb-item"><a href="home.html">Home</a></li>
             <li class="breadcrumb-item">
               <div style="height: 15px">
-                <dcc-trigger action="control/leave/drafts" label="Drafts" xstyle="out">
-                </dcc-trigger>
+                <dcc-button topic="control/leave/drafts" label="Drafts" xstyle="out">
+                </dcc-button>
               </div>
             </li>
             <li class="breadcrumb-item active" aria-current="page">Edit case</li>
@@ -163,14 +163,14 @@ <h1>Edit case</h1>
            style="position:relative">
         <nav class="navbar navbar-light">
           <div class="col-6">
-            <dcc-trigger action="control/case/save" label="SAVE" xstyle="in"></dcc-trigger>
-            <dcc-trigger action="control/case/settings" label="SETTINGS" xstyle="in"></dcc-trigger>
+            <dcc-button topic="control/case/save" label="SAVE" xstyle="in"></dcc-button>
+            <dcc-button topic="control/case/settings" label="SETTINGS" xstyle="in"></dcc-button>
 
             <!-- Settings button activates a modal -->
             <button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#settings-modal" id="btn-save-settings">New Settings</button>
 
             <div id="advanced-mode" style="display:none">
-              <dcc-trigger action="control/case/markdown" label="MARKDOWN" xstyle="in"></dcc-trigger>
+              <dcc-button topic="control/case/markdown" label="MARKDOWN" xstyle="in"></dcc-button>
             </div>
             <div class="sty-message-space" id="message-space"></div>
 
@@ -218,8 +218,8 @@ <h1>Edit case</h1>
           <div class="w-75 d-flex" id="knot-main">
             <div id="navigator-expansion" class="sty-navigation-expansion">
                 <div id="navigation-set" class="sty-navigation-set">
-                  <dcc-trigger id="button-expand-nav" action="control/navigator/expand" label="Expand" image="icons/icon-expansion-right.svg"></dcc-trigger>
-                  <dcc-trigger id="button-retract-nav" action="control/navigator/retract" label="Retract" image="icons/icon-expansion-left.svg"></dcc-trigger>
+                  <dcc-button id="button-expand-nav" topic="control/navigator/expand" label="Expand" image="icons/icon-expansion-right.svg"></dcc-button>
+                  <dcc-button id="button-retract-nav" topic="control/navigator/retract" label="Retract" image="icons/icon-expansion-left.svg"></dcc-button>
                 </div>
             </div>
             <div class="w-100">
@@ -228,28 +228,28 @@ <h1>Edit case</h1>
               </div>
             </div>
             <div id="properties-expansion" class="sty-navigation-expansion">
-                <dcc-trigger id="button-expand-prop" action="control/properties/expand" label="Expand" image="icons/icon-expansion-left.svg"></dcc-trigger>
-                <dcc-trigger id="button-retract-prop" action="control/properties/retract" label="Retract" image="icons/icon-expansion-right.svg" style="display:none"></dcc-trigger>
+                <dcc-button id="button-expand-prop" topic="control/properties/expand" label="Expand" image="icons/icon-expansion-left.svg"></dcc-button>
+                <dcc-button id="button-retract-prop" topic="control/properties/retract" label="Retract" image="icons/icon-expansion-right.svg" style="display:none"></dcc-button>
             </div>
           </div>
 
           <div id="elements-main" class="d-flex">
             <div id="elements-block" class="sty-elements-block" style="position:relative; display:none">
                <!--
                <div id="elements-panel" class="sty-control-panel std-border">
-                  <div class="control-button"><dcc-trigger action="control/element/text/new" label="Text" image="icons/icon-dcc-text.svg"></dcc-trigger></div>
-                  <div class="control-button"><dcc-trigger action="control/element/image/new" label="Text" image="icons/icon-dcc-image.svg"></dcc-trigger></div>
-                  <div class="control-button"><dcc-trigger action="control/element/option/new" label="Text" image="icons/icon-dcc-trigger.svg"></dcc-trigger></div>
+                  <div class="control-button"><dcc-button topic="control/element/text/new" label="Text" image="icons/icon-dcc-text.svg"></dcc-button></div>
+                  <div class="control-button"><dcc-button topic="control/element/image/new" label="Text" image="icons/icon-dcc-image.svg"></dcc-button></div>
+                  <div class="control-button"><dcc-button topic="control/element/option/new" label="Text" image="icons/icon-dcc-button.svg"></dcc-button></div>
                </div>
              -->
                <div id="properties-block" class="sty-properties-block std-border">
                   <div id="properties-panel" class="styp-properties-panel"></div>
                   <div id="properties-buttons">
-                     <dcc-trigger xstyle="in" action="properties/apply/details" label="APPLY"></dcc-trigger>
+                     <dcc-button xstyle="in" topic="properties/apply/details" label="APPLY"></dcc-button>
                      <!--
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/up" label="Element Up" image="icons/icon-move-up.svg"></dcc-trigger></div>
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/down" label="Element Down" image="icons/icon-move-down.svg"></dcc-trigger></div>
-                     <div class="control-button"><dcc-trigger xstyle="in" action="control/element/selected/delete" label="Delete Element" image="icons/icon-delete.svg"></dcc-trigger></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/up" label="Element Up" image="icons/icon-move-up.svg"></dcc-button></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/down" label="Element Down" image="icons/icon-move-down.svg"></dcc-button></div>
+                     <div class="control-button"><dcc-button xstyle="in" topic="control/element/selected/delete" label="Delete Element" image="icons/icon-delete.svg"></dcc-button></div>
                    -->
                   </div>
                </div>

src/adonisjs/old_html/player/index.html

@@ -19,7 +19,7 @@
    <script src="../dccs/components/dcc-annotation.js"></script>
    <script src="../dccs/components/dcc-expression.js"></script>
    <script src="../dccs/components/dcc-block.js"></script>
-   <script src="../dccs/components/dcc-trigger.js"></script>
+   <script src="../dccs/components/dcc-button.js"></script>
    <script src="../dccs/components/dcc-character.js"></script>
    <script src="../dccs/components/dcc-lively-dialog.js"></script>
    <script src="../dccs/components/dcc-notice-input.js"></script>

src/adonisjs/public/author/js/author.js

@@ -498,18 +498,18 @@ class AuthorManager {
             }
             const extra =
                ((this._templateNewKnot == null) ? "" :
-                  "<dcc-trigger action='control/knot/new' label='Add' xstyle='in'>" +
-                        "</dcc-trigger>") +
-               "<dcc-trigger action='control/knot/remove' label='Remove' xstyle='in'>" +
-                     "</dcc-trigger>";
+                  "<dcc-button topic='control/knot/new' label='Add' xstyle='in'>" +
+                        "</dcc-button>") +
+               "<dcc-button topic='control/knot/remove' label='Remove' xstyle='in'>" +
+                     "</dcc-button>";
 
             // Properties.s.editKnotProperties(this._knots[this._knotSelected],
             //                                 this._knotSelected, miniature, extra);
             if (this._templateNewKnot != null) {
                const miniBox = miniature.getBoundingClientRect();
                this._buildFloatingMenu(miniBox.left, miniBox.top,
-                  "<dcc-trigger action='control/knot/new' label='Add' xstyle='in'>" +
-                  "</dcc-trigger>");
+                  "<dcc-button topic='control/knot/new' label='Add' xstyle='in'>" +
+                  "</dcc-button>");
             }
          } else {
          */

src/adonisjs/public/author/js/navigator.js

@@ -304,8 +304,8 @@ async _presentTreeCase() {
 
    if (this._treeStack.length > 0)
       navTree =
-         "<dcc-trigger action='control/group/up' label='Up' " +
-           "image='icons/icon-back.svg' xstyle='sty-tree-button'></dcc-trigger>" +
+         "<dcc-button topic='control/group/up' label='Up' " +
+           "image='icons/icon-back.svg' xstyle='sty-tree-button'></dcc-button>" +
          navTree;
 
    this._navigationPanel.innerHTML = navTree;
@@ -546,7 +546,7 @@ async _createMiniature(knot, krender) {
               Navigator.miniKnot[this._retracted].height + "px'>" +
               knot.title + "</div>";
 
-   miniature.innerHTML = inner + "<dcc-trigger action='control/" +
+   miniature.innerHTML = inner + "<dcc-button topic='control/" +
                             ((knot.render) ? "knot/" : "group/") +
                             knot.knotid + "/selected' " +
                             "xstyle='sty-navigation-knot-cover' label = ''>";

src/adonisjs/public/dccs/components/dcc-trigger.js → src/adonisjs/public/dccs/components/dcc-button.js

@@ -1,12 +1,12 @@
-/* Trigger DCC
+/* Button 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 DCCTrigger extends DCCBlock {
+class DCCButton extends DCCBlock {
   constructor () {
     super()
     this._computeTrigger = this._computeTrigger.bind(this)
@@ -21,7 +21,7 @@ class DCCTrigger extends DCCBlock {
 
     super.connectedCallback()
 
-    if (this.hasAttribute('action') && this.action.endsWith('/navigate')) {
+    if (this.hasAttribute('topic') && this.topic.endsWith('/navigate')) {
       this.navigationBlocked = this.navigationBlocked.bind(this)
       MessageBus.ext.subscribe('+/+/navigate/blocked', this.navigationBlocked)
     }
@@ -31,7 +31,7 @@ class DCCTrigger extends DCCBlock {
 
   static get observedAttributes () {
     return DCCBlock.observedAttributes.concat(
-      ['type', 'link', 'action', 'value', 'variable'])
+      ['type', 'link', 'topic', 'message', 'variable'])
   }
 
   get type () {
@@ -50,20 +50,20 @@ class DCCTrigger extends DCCBlock {
     this.setAttribute('link', newValue)
   }
 
-  get action () {
-    return this.getAttribute('action')
+  get topic () {
+    return this.getAttribute('topic')
   }
 
-  set action (newValue) {
-    this.setAttribute('action', newValue)
+  set topic (newValue) {
+    this.setAttribute('topic', newValue)
   }
 
-  get value () {
-    return this.getAttribute('value')
+  get message () {
+    return this.getAttribute('message')
   }
 
-  set value (newValue) {
-    this.setAttribute('value', newValue)
+  set message (newValue) {
+    this.setAttribute('message', newValue)
   }
 
   get variable () {
@@ -80,14 +80,14 @@ class DCCTrigger extends DCCBlock {
     // === pre presentation setup
     let html
     if (this.xstyle.startsWith('out')) { html = this.label } else {
-      // html = DCCTrigger.templateStyle;
+      // html = DCCButton.templateStyle;
       if (this.hasAttribute('image')) {
-        html = DCCTrigger.templateElements.image
+        html = DCCButton.templateElements.image
           .replace('[render]', this._renderStyle())
           .replace('[label]', this.label)
           .replace('[image]', this.image)
       } else {
-        html = DCCTrigger.templateElements.regular
+        html = DCCButton.templateElements.regular
           .replace('[render]', this._renderStyle())
           .replace('[label]', this.label)
       }
@@ -124,7 +124,7 @@ class DCCTrigger extends DCCBlock {
   /* Rendering */
 
   elementTag () {
-    return DCCTrigger.elementTag
+    return DCCButton.elementTag
   }
 
   externalLocationType () {
@@ -133,25 +133,18 @@ class DCCTrigger extends DCCBlock {
 
   _computeTrigger () {
     if (this._active) {
+      let message = { sourceType: DCCButton.elementTag }
       if (this.hasAttribute('variable')) {
         const v = (this.variable.includes(':'))
           ? this.variable.substring(0, this.variable.indexOf(':')) : this.variable
-        console.log('=== trigger variable')
-        console.log('var/' + v + '/changed')
-        console.log((this.variable.endsWith(':label')) ? this.label : this.value)
-        MessageBus.ext.publish('var/' + v + '/changed',
-        {
-          sourceType: DCCTrigger.elementTag,
-          value: (this.variable.endsWith(':label')) ? this.label : this.value
-        })
+        message.value = (this.variable.endsWith(':label')) ? this.label : this.message
+        MessageBus.ext.publish('var/' + v + '/changed', message)
       }
-      if (this.hasAttribute('label') || this.hasAttribute('action')) {
-        if (this.hasAttribute('action') && this.action.endsWith('/navigate')) { this._active = false }
-        const topic = (this.hasAttribute('action'))
-          ? this.action : 'trigger/' + this.label + '/clicked'
-        const message = {}
-        if (this.hasAttribute('value')) { message.value = this.value }
-
+      if (this.hasAttribute('label') || this.hasAttribute('topic')) {
+        if (this.hasAttribute('topic') && this.topic.endsWith('/navigate')) { this._active = false }
+        const topic = (this.hasAttribute('topic'))
+          ? this.topic : 'button/' + this.label + '/clicked'
+        if (this.hasAttribute('message')) { message.value = this.message }
         MessageBus.ext.publish(topic, message)
       }
     }
@@ -163,7 +156,7 @@ class DCCTrigger extends DCCBlock {
 }
 
 (function () {
-  DCCTrigger.templateElements = {
+  DCCButton.templateElements = {
     regular:
    '<span id=\'presentation-dcc\' class=\'[render]\'>[label]</span>',
     image:
@@ -172,7 +165,7 @@ class DCCTrigger extends DCCBlock {
    </span>`
   }
 
-  DCCTrigger.elementTag = 'dcc-trigger'
+  DCCButton.elementTag = 'dcc-button'
 
-  customElements.define(DCCTrigger.elementTag, DCCTrigger)
+  customElements.define(DCCButton.elementTag, DCCButton)
 })()

src/adonisjs/public/dccs/components/dcc-input-choice.js

@@ -118,7 +118,7 @@ class DCCInputOption extends DCCInput {
               ? '' : this._statement
 
       const html = (this.target)
-        ? "<dcc-trigger id='[id]' xstyle='theme' action='[target]' label='[statement]' divert='round' value='[value]' variable='[variable]:label'></dcc-trigger>"
+        ? "<dcc-button id='[id]' xstyle='theme' topic='[target]' label='[statement]' divert='round' message='[value]' variable='[variable]:label'></dcc-button>"
           .replace('[id]', varid + nop)
           .replace('[target]', this.target)
           .replace('[statement]', child._statement)
@@ -249,7 +249,7 @@ class DCCInputChoice extends DCCInput {
              child.tagName.toLowerCase() == DCCInputOption.elementTag) {
         nop++
         const element = (this.target || child.target)
-          ? "<dcc-trigger id='presentation-dcc-[id]' xstyle='theme' action='[target]' label='[statement]' divert='round' value='[value]' variable='[variable]:label'></dcc-trigger>"
+          ? "<dcc-button id='presentation-dcc-[id]' xstyle='theme' topic='[target]' label='[statement]' divert='round' message='[value]' variable='[variable]:label'></dcc-button>"
             .replace('[id]', varid + '_' + nop)
             .replace('[target]', (child.target) ? child.target : this.target)
             .replace('[statement]', child._statement)

src/adonisjs/public/dccs/edit/properties.js

@@ -642,8 +642,8 @@ class Properties {
   /*
 Properties.buttonApply =
 `<div class="control-button">
-   <dcc-trigger xstyle="in" action="properties/apply" label="Apply" image="icons/icon-check.svg">
-   </dcc-trigger>
+   <dcc-button xstyle="in" topic="properties/apply" label="Apply" image="icons/icon-check.svg">
+   </dcc-button>
 </div>`;
 */
 

src/adonisjs/public/dccs/playground/gallery/cell/ecology-editor.js

@@ -78,47 +78,47 @@ _____h______________
 </rule-dcc-cell-pair>
 
 <div>
-   <dcc-trigger label="Próximo" action="state/next"></dcc-trigger>
-   <dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-   <dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
-   <dcc-trigger label="Gravar" action="state/save"></dcc-trigger>
-   <dcc-trigger label="Ler" action="state/load"></dcc-trigger>
-   <dcc-trigger label="Baixar" action="state/download"></dcc-trigger>
+   <dcc-button label="Próximo" topic="state/next"></dcc-button>
+   <dcc-button label="Play" topic="timer/start"></dcc-button>
+   <dcc-button label="Stop" topic="timer/stop"></dcc-button>
+   <dcc-button label="Gravar" topic="state/save"></dcc-button>
+   <dcc-button label="Ler" topic="state/load"></dcc-button>
+   <dcc-button label="Baixar" topic="state/download"></dcc-button>
 </div>
 </div>
 
 <div style="flex:50%">
 Selecione um dos ícones abaixo para editar o ambiente:
 <div style="flex:48px; max-height:48px; display:flex; flex-direction:row; border:2px">
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Água" action="type/water"
+      <dcc-button label="Água" topic="type/water"
                    image="images/cell/waves.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Rocha" action="type/rock"
+      <dcc-button label="Rocha" topic="type/rock"
                    image="images/cell/rock01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Planta" action="type/plant"
+      <dcc-button label="Planta" topic="type/plant"
                    image="images/cell/plant01.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Herbívoro" action="type/herbivore"
+      <dcc-button label="Herbívoro" topic="type/herbivore"
                    image="images/cell/brontosaurus.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Carnívoro" action="type/carnivore"
+      <dcc-button label="Carnívoro" topic="type/carnivore"
                    image="images/cell/carnivorous-dinosaur.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
    <div style="flex:10%; max-width:48px; max-height:48px; margin-right:10px">
-      <dcc-trigger label="Nada" action="type/empty"
+      <dcc-button label="Nada" topic="type/empty"
                    image="images/cell/cell-green.svg">
-      </dcc-trigger>
+      </dcc-button>
    </div>
 </div>
 

src/adonisjs/public/dccs/playground/gallery/cell/energy.js

@@ -26,9 +26,9 @@ swwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
 ***
 </rule-dcc-cell-flow>
 
-<dcc-trigger label="Next" action="state/next"></dcc-trigger>
-<dcc-trigger label="Play" action="timer/start"></dcc-trigger>
-<dcc-trigger label="Stop" action="timer/stop"></dcc-trigger>
+<dcc-button label="Next" topic="state/next"></dcc-button>
+<dcc-button label="Play" topic="timer/start"></dcc-button>
+<dcc-button label="Stop" topic="timer/stop"></dcc-button>
 
 <dcc-timer cycles="10000" interval="100" publish="state/next">
    <subscribe-dcc topic="timer/start" role="start"></subscribe-dcc>