refactor (translator): enable remote themes and straight theme refere…

src/adonisjs/public/infra/dcc-common-server-proxy.js

@@ -117,10 +117,12 @@ class DCCCommonServer {
     const themeFamily = themeCompleteName.substring(0, separator)
     const themeName = themeCompleteName.substring(separator + 1)
     let caseObj
-    if (HarenaConfig.local) {
+    if (HarenaConfig.local || (message != null && message.url != null)) {
       this._themeScript = document.createElement('script')
-      this._themeScript.src = Basic.service.rootPath + 'themes/' +
-                                 themeFamily + '/local/' + themeName + '.js'
+      this._themeScript.src = (HarenaConfig.local)
+        ? Basic.service.rootPath + 'themes/' +
+          themeFamily + '/local/' + themeName + '.js'
+        : message.url + themeName + '.js'
       document.head.appendChild(this._themeScript)
       // <TODO> adjust topic
       const themeM = await MessageBus.i.waitMessage('control/theme/' +
@@ -137,8 +139,8 @@ class DCCCommonServer {
         }
       }
       const response = await fetch(Basic.service.rootPath + 'themes/' +
-                                      themeFamily + '/' + themeName +
-                                      '.html', header)
+                                   themeFamily + '/' + themeName +
+                                   '.html', header)
       themeObj = await response.text()
     }
     MessageBus.i.publish(MessageBus.buildResponseTopic(topic, message),

src/adonisjs/public/translator/item-templates.js

@@ -33,11 +33,11 @@
     option:
 '<dcc-button id=\'dcc[seq]\'[author] topic=\'[target]\' label=\'[display]\'[divert][message][image][connect][show]></dcc-button>[compute]',
     divert:
-'<dcc-button id=\'dcc[seq]\'[author] topic=\'[target]\' label=\'[display]\' divert=\'[divert]\' location=\'#in\' inline></dcc-button>',
+'<dcc-button id=\'dcc[seq]\'[author] topic=\'[target]\' label=\'[display]\' divert=\'[divert]\' location=\'[location]\' inline></dcc-button>',
     'divert-script':
 '-&gt; [target][parameter]<br>',
     entity:
-'<dcc-entity id=\'dcc[seq]\'[author] entity=\'[entity]\'[image][alternative][title]>[text]</dcc-entity>',
+'<dcc-entity id=\'dcc[seq]\'[author] entity=\'[entity]\'[location][image][alternative][title]>[text]</dcc-entity>',
     mention:
 '<b>[entity]: </b>',
     input:

src/adonisjs/public/translator/playground/index.html

@@ -108,11 +108,13 @@
     <div class="d-flex flex-column vh-100 hidden-overflow">
       <div class="container-fluid">
         <nav class="navbar navbar-light d-flex">
-          <div class="d-flex col">
+          <div class="d-flex col-2">
              <dcc-button topic="control/translate/example" label="TRANSLATE" xstyle="in">
              </dcc-button>
+             <dcc-button topic="control/clear/console" label="CLEAR" xstyle="in">
+             </dcc-button>
           </div>
-          <div class="d-flex col-10">
+          <div class="d-flex col-6">
              <dcc-input-choice variable="output" exclusive>
                 <b>Versum:</b>
                 <dcc-input-option value="versum-object" checked></dcc-input-option>Object&nbsp;
@@ -123,6 +125,16 @@
                 <dcc-input-option value="object-rendered"></dcc-input-option>Rendered
              </dcc-input-choice>
           </div>
+          <div class="d-flex col-4">
+            <div id="drop-zone" style="border: 5px solid; width: 25%"
+                ondragover="AuthorVersumManager.s.dragOver(event)" ondrop="AuthorVersumManager.s.drop(event)">
+              Upload Theme
+            </div>
+            <div id="drop-status" style="width: 25%"></div>
+            <input type="text" id="theme-name" class="hidden-overflow" style="width: 25%">
+            <dcc-button topic="control/theme/convert" label="CONVERT" xstyle="in">
+             </dcc-button>
+          </div>
         </nav>
       </div>
 

src/adonisjs/public/translator/playground/js/author-versum.js

@@ -11,15 +11,20 @@ class AuthorVersumManager {
     new PlayState()
     new Tracker()
     DCCCommonServer.instance.local = true
+    this._theme = null
   }
 
   start () {
     this.translate = this.translate.bind(this)
     this.updateVisibility = this.updateVisibility.bind(this)
+    this.clearConsole = this.clearConsole.bind(this)
     this.showJson = this.showJson.bind(this)
+    this.convertTheme = this.convertTheme.bind(this)
 
     MessageBus.i.subscribe('control/translate/example', this.translate)
+    MessageBus.i.subscribe('control/clear/console', this.clearConsole)
     MessageBus.i.subscribe('input/changed/output', this.updateVisibility)
+    MessageBus.i.subscribe('control/theme/convert', this.convertTheme)
 
     document.querySelector('#json-message').value = ''
     MessageBus.i.subscribe('#', this.showJson)
@@ -40,6 +45,8 @@ class AuthorVersumManager {
       const mkHTML = await Translator.instance.generateHTML(compiled.knots[knot])
       html += mkHTML
     }
+    if (this._theme != null)
+      html = this._theme.replace('{knot}', html)
     document.querySelector('#html-panel').value = html
     document.querySelector('#render-panel').innerHTML = html
   }
@@ -61,6 +68,49 @@ class AuthorVersumManager {
            'topic: ' + topic + '\n' +
            'message: ' + JSON.stringify(message) + '\n\n'
   }
+
+  clearConsole(topic, message) {
+    document.querySelector('#json-message').value = ''
+  }
+
+  dragOver(event) {
+    event.preventDefault()
+    event.target.innerHTML = 'Upload Here'
+  }
+
+  async drop(event) {
+    event.preventDefault()
+
+    let file = null
+    if (event.dataTransfer.items) {
+      for (const item of event.dataTransfer.items) {
+        if (item.kind === 'file')
+          file = item.getAsFile()
+      }
+    } else
+      file = event.dataTransfer.files[0]
+    this._theme = await file.text()
+
+    document.querySelector('#drop-status').innerHTML = 'Uploaded'
+    event.target.innerHTML = 'Replace'
+  }
+
+  convertTheme(topic, message) {
+    const a = document.createElement('a')
+    a.style.display = 'none'
+    document.body.appendChild(a)
+    const themeName = document.querySelector('#theme-name').value
+    const content = '(function () { const localTheme = `\n' +
+                    this._theme + '\n`' +
+                    '\nMessageBus.i.publish("control/theme/' + themeName + '/load/ready", localTheme)' +
+                    '\n})()'
+    a.href = window.URL.createObjectURL(
+      new Blob([content], {type: 'text/plain'}))
+    a.setAttribute('download', themeName + '.js')
+    a.click()
+    window.URL.revokeObjectURL(a.href)
+    document.body.removeChild(a)
+  }
 }
 
 (function () {

src/adonisjs/public/translator/translator.js

@@ -9,6 +9,8 @@ class Translator {
 
     this._markdownTranslator = new showdown.Converter()
     this._markdownTranslator.setFlavor('github')
+
+    this._themeURL = null
   }
 
   /*
@@ -129,6 +131,16 @@ class Translator {
     if (compiledCase.layers.Flow || compiledCase.slayers.Flow)
       compiledCase.flow = (compiledCase.layers.Flow) ?
         compiledCase.layers.Flow.content : compiledCase.slayers.Flow.content
+
+    if (compiledCase.slayers.Template != null &&
+        compiledCase.slayers.Template.content != null) {
+      for (const c in compiledCase.slayers.Template.content) {
+        if (compiledCase.slayers.Template.content[c].type == 'field') {
+          if (compiledCase.slayers.Template.content[c].field == 'theme')
+            this._themeURL = { url: compiledCase.slayers.Template.content[c].value }
+        }
+      }
+    }
   }
 
   /*
@@ -732,6 +744,11 @@ class Translator {
           compiled[pr].mergeLine =
                   Translator.element[compiled[c].type] &&
                   Translator.isLine.includes(compiled[c].type)
+
+          // temporary to fix a problem
+          if (compiled[pr].type == 'entity' && compiled[c].type == 'image')
+            delete compiled[pr].mergeLine
+
           const shift = c - pr
           compiled.splice(c - shift + 1, shift)
           c -= shift
@@ -1220,7 +1237,8 @@ class Translator {
   async loadTheme (themeName) {
     const themeObj = await MessageBus.i.request(
       'data/theme/' + Basic.service.currentThemeFamily.toLowerCase() +
-            '.' + themeName.toLowerCase() + '/get', null, null, true)
+            '.' + themeName.toLowerCase() + '/get',
+            this._themeURL, null, true)
     return themeObj.message
   }
 
@@ -2128,13 +2146,15 @@ class Translator {
     */
   _divertMdToObj (matchArray) {
     const label = (matchArray[1]) ? matchArray[1].trim() : matchArray[2].trim()
-    const target = (matchArray[4]) ? matchArray[4].trim() : matchArray[5].trim()
-    return {
+    const divert = {
       type: 'divert',
       label: label,
       divert: matchArray[3].trim(),
-      target: target
+      target: (matchArray[4]) ? matchArray[4].trim() : matchArray[5].trim()
     }
+    if (label.startsWith('@') && label.endsWith('_'))
+      divert.location = label.substring(1, label.length - 1).toLowerCase()
+    return divert
   }
 
   /*
@@ -2148,18 +2168,23 @@ class Translator {
       .replace('[target]',
         this._transformNavigationMessage(obj.contextTarget))
       .replace('[display]', obj.label)
+      .replace('[location]', (obj.location) ? obj.location : '#in')
   }
 
   /*
     * Entity Md to Obj
     */
   _entityMdToObj (matchArray) {
+    const label = (matchArray[1] != null) ? matchArray[1].trim()
+        : matchArray[2].trim()
     const entity = {
       type: (this.authoringRender && this._categorySettings &&
                 this._categorySettings.entity == 'flat')
         ? 'mention' : 'entity',
-      entity: (matchArray[1] != null) ? matchArray[1].trim()
-        : matchArray[2].trim()
+      entity: label
+    }
+    if (label.endsWith('_')) {
+      entity.location = label.substring(0, label.length - 1).toLowerCase()
     }
     /*
       if (matchArray[3] != null)
@@ -2200,6 +2225,7 @@ class Translator {
       .replace('[seq]', obj.seq)
       .replace('[author]', this.authorAttr)
       .replace('[entity]', obj.entity)
+      .replace('[location]', (obj.location) ? " location='" + obj.location + "'" : '')
       .replace('[text]', text)
       .replace('[image]', path)
       .replace('[alternative]', alternative)
@@ -2211,6 +2237,10 @@ class Translator {
       .replace('{entity}', obj.entity)
     if (obj.text) { entity += '\n  ' + obj.text }
     if (obj.image) { entity += '\n  ' + this._imageObjToMd(obj.image) }
+    entity += '\n'
+
+    console.log('===== entity')
+    console.log(entity)
 
     return entity
   }