Merge pull request #243 from datasci4health/bug/inplace-text-editor

fix (text editor): inplace text editor fixed
harena-lab · Sep 17, 2020 · 4a4a9a5 · 4a4a9a5
2 parents d383d8c + ef77411
commit 4a4a9a5
Show file tree

Hide file tree

Showing 15 changed files with 184 additions and 118 deletions.
diff --git a/src/adonisjs/app/Controllers/Http/QuestController.js b/src/adonisjs/app/Controllers/Http/QuestController.js
@@ -8,10 +8,11 @@ class QuestController {
   async getCasesByQuestAuthor ({ request, response }) {
     try {
       const params = request.all()
-      console.log('------------------------COR DA QUEST')
-      console.log(params.color)
+
+      // console.log('------------------------COR DA QUEST')
+      // console.log(params.color)
       var responseData = []
-      let endpoint_url = Env.get("HARENA_MANAGER_URL") + "/api/v1/author/quest/cases"
+      const endpoint_url = Env.get('HARENA_MANAGER_URL') + '/api/v1/author/quest/cases'
 
       var config = {
         method: 'get',
@@ -23,8 +24,7 @@ class QuestController {
           'Authorization': 'Bearer ' + request.cookie('token')
         }
       }
-
-
+
       await axios(config)
         .then(function (endpoint_response) {
           console.log('============ Retrieving cases for selected quests')
@@ -37,6 +37,7 @@ class QuestController {
 
             })
           }
+
           function sortAlphabetically (a, b) {
             if (a.title < b.title) {
               return -1
@@ -47,6 +48,7 @@ class QuestController {
             return 0
           }
           responseData[0] = busResponse.sort(sortAlphabetically)
+
         })
 
         .catch(function (error) {
@@ -63,17 +65,18 @@ class QuestController {
   async getQuestsAuthor ({ request, response }) {
     try {
       var responseData = []
+
       let endpoint_url = Env.get("HARENA_MANAGER_URL") + "/api/v1/author/quests"
 
       var config = {
         method: 'get',
         url: endpoint_url,
         headers: {
+
           'Authorization': 'Bearer ' + request.cookie('token')
         }
       }
 
-
       await axios(config)
         .then(function (endpoint_response) {
           console.log('============ Retrieving quests')
@@ -95,7 +98,9 @@ class QuestController {
         .catch(function (error) {
           console.log(error)
         })
-    } catch(e) {
+
+    } catch (e) {
+
       console.log(e)
     }
 

diff --git a/src/adonisjs/public/author/css/author.css b/src/adonisjs/public/author/css/author.css
@@ -1,5 +1,15 @@
 @charset "UTF-8";
 
+#inplace-editor-wrapper{
+
+	border-color: #004270;
+	border-radius: 9px;
+	border-style: solid;
+	border-width: 13px;
+  border-bottom-width: 30px;
+
+}
+
 .sty-main-panel {
    /* the main box (body) occupies all the visible area */
    position: absolute;
@@ -133,8 +143,8 @@
 }
 
 .sty-knot-panel {
-   flex: 55%;
-   min-width: 20%;
+   /* flex: 55%;
+   min-width: 20%; */
    overflow: scroll;
    height: 100%;
 }
@@ -175,6 +185,11 @@
    overflow: hidden;
    display: flex;
    flex-direction: column;
+
+
+	 z-index: 2;
+	 position: relative;
+
 }
 
 /*

diff --git a/src/adonisjs/public/author/js/author.js b/src/adonisjs/public/author/js/author.js
@@ -91,7 +91,7 @@ class AuthorManager {
       caseid = params.match(/id=([\w-]+)/i)
       caseid = (caseid == null) ? null : caseid[1]
     }
-    if (mode != null && mode.toLowerCase() == 'advanced') { document.querySelector('#advanced-mode').style.display = 'initial' }
+    if (mode != null && mode.toLowerCase() === 'advanced') { document.querySelector('#advanced-mode').style.display = 'initial' }
 
     // build singletons
     Panels.start()
@@ -223,7 +223,7 @@ class AuthorManager {
       'Select a case to load or start a new case.',
       'list', 'Select', 'New', cases.message)
 
-    if (caseId == 'New') { this.caseNew() } else { this._caseLoad(caseId) }
+    if (caseId === 'New') { this.caseNew() } else { this._caseLoad(caseId) }
 
     /*
       const sticky = document.querySelector("#sticky-top");
@@ -401,20 +401,20 @@ class AuthorManager {
   _checkKnotModification (nextState) {
     // (1) render slide; (2) edit knot; (3) edit case
     let modified = false
-    if (this._renderState == 2) {
+    if (this._renderState === 2) {
       if (this._editor != null) {
         const editorText = this._retrieveEditorText()
-        if (this._knots[this._knotSelected]._source != editorText) {
+        if (this._knots[this._knotSelected]._source !== editorText) {
           modified = true
           this._knots[this._knotSelected]._source = editorText
           Translator.instance.extractKnotAnnotations(this._knots[this._knotSelected])
           Translator.instance.compileKnotMarkdown(this._knots, this._knotSelected)
         }
       }
-    } else if (this._renderState == 3) {
+    } else if (this._renderState === 3) {
       if (this._editor != null) {
         const editorText = this._retrieveEditorText()
-        if (!this._originalMd || this._originalMd != editorText) {
+        if (!this._originalMd || this._originalMd !== editorText) {
           modified = true
           if (nextState != 3) { delete this._originalMd }
           this._compile(editorText)
@@ -461,7 +461,7 @@ class AuthorManager {
     // this._removeFloatingMenu();
     // let knotid = MessageBus.extractLevel(topic, 3);
     const knotid =
-         (message == null || message == '') ? this._knotSelected : message
+         (message == null || message === '') ? this._knotSelected : message
     if (knotid != null) {
       /*
          console.log("=== miniatureF");

diff --git a/src/adonisjs/public/author/js/draft.js b/src/adonisjs/public/author/js/draft.js
@@ -20,8 +20,8 @@ class DraftManager {
 
     this._boxesPanel = document.querySelector('#case-boxes')
     // this._draftSelect(authorState.userid, advanced);
-    document.getElementsByClassName('buttons-container').length > 0 ?
-      this._draftQuestCasesSelect(advanced) : this._draftSelect(advanced)
+    document.getElementsByClassName('buttons-container').length > 0
+      ? this._draftQuestCasesSelect(advanced) : this._draftSelect(advanced)
   }
 
   async _draftSelect (advanced) {

diff --git a/src/adonisjs/public/dccs/css/dccs.css b/src/adonisjs/public/dccs/css/dccs.css
@@ -1,5 +1,13 @@
 @charset "UTF-8";
 
+.editor-container{
+  position: absolute;
+  overflow: auto;
+  max-width: 95% !important;
+  max-height: 85% !important;
+  z-index: 1;
+}
+
 .ql-hl-select {
    width: 6.3rem;
 }
@@ -36,7 +44,10 @@
 }
 
 .inplace-editor-floating {
-   position: absolute;
+   position: sticky;
+	 top: 5px;
+	 z-index: 2;
+
    background-color: white;
    border-radius: 1px;
    box-shadow: 0px 0px 0px 5px rgba(0,0,0,0.5);
@@ -45,6 +56,9 @@
 
 .inplace-editor {
    background-color: white;
+   position: relative;
+   height: 100% !important;
+   weight: 100% !important;
    overflow: hidden;
 }
 
@@ -63,4 +77,4 @@
    flex-direction: row;
    justify-content: flex-end;
    cursor: pointer;
-}
+}
diff --git a/src/adonisjs/public/dccs/css/properties.css b/src/adonisjs/public/dccs/css/properties.css
@@ -4,7 +4,7 @@
    flex: 95%;
    width: auto;
    height: 95%;
-   overflow: scroll;
+   /* overflow: scroll; */
    display: flex;
    flex-direction: column;
    padding: 5px;
@@ -43,7 +43,8 @@
 }
 
 .styp-field-text {
-   width: 600px;
+   width: 550px;
+   margin: 3px;
 }
 
 .styp-field-highlight {

diff --git a/src/adonisjs/public/dccs/edit/inplace-editor.js b/src/adonisjs/public/dccs/edit/inplace-editor.js
@@ -9,6 +9,7 @@ class EditDCC {
     this._editElement = presentation
     this._editorExtended = null
     this._editorWrapper = this._fetchEditorWrapper()
+    this._editorContainer = this._fetchEditorContainer()
     this._containerRect = this._editorWrapper.getBoundingClientRect()
     this._elementWrapper = this._fetchElementWrapper()
     this._elementWrapperRect = this._elementWrapper.getBoundingClientRect()
@@ -27,7 +28,7 @@ class EditDCC {
   }
 
   async _handleEditorAction (action) {
-    if (action == 'confirm') { await MessageBus.ext.request('properties/apply/short') } else if (this._editDCC != null) { this._editDCC.reactivateAuthor() }
+    if (action === 'confirm') { await MessageBus.ext.request('properties/apply/short') } else if (this._editDCC != null) { this._editDCC.reactivateAuthor() }
     this.closeEditor()
   }
 
@@ -38,7 +39,7 @@ class EditDCC {
     }
   }
 
-  // fetches the editor wrapper
+  // fetches the editor container
   _fetchEditorWrapper () {
     let container = document
     if (window.parent && window.parent.document) {
@@ -49,6 +50,18 @@ class EditDCC {
     return container
   }
 
+  // fetches the editor container
+  _fetchEditorContainer () {
+    if (!document.querySelector('.editor-container')) {
+      this._editorContainer = document.createElement('div')
+      this._editorContainer.classList.add('editor-container')
+      this._editorWrapper.appendChild(this._editorContainer)
+    }else {
+      this._editorContainer = document.querySelector('.editor-container')
+    }
+    return this._editorContainer
+  }
+
   // fetches the element wrapper
   _fetchElementWrapper () {
     // looks for a knot-wrapper or equivalent
@@ -76,12 +89,12 @@ class EditDCC {
     this._editorToolbar.classList.add('inplace-editor-floating')
     this._editorToolbar.innerHTML = html
 
-    this._editorToolbar.style.left = this._transformRelativeX(
-      this._elementWrapperRect.left - this._containerRect.left)
-    this._editorToolbar.style.bottom = this._transformRelativeY(
-      this._containerRect.height -
-            (this._elementWrapperRect.top - this._containerRect.top))
-    this._editorWrapper.appendChild(this._editorToolbar)
+    // this._editorToolbar.style.left = this._transformRelativeX(
+    //   this._elementWrapperRect.left - this._containerRect.left)
+    // this._editorToolbar.style.bottom = this._transformRelativeY(
+    //   this._containerRect.height -
+    //         (this._elementWrapperRect.top - this._containerRect.top))
+    this._fetchEditorContainer().appendChild(this._editorToolbar)
   }
 
   _removeToolbarPanel () {
@@ -115,7 +128,9 @@ class EditDCC {
   async _extendedPanel (html, modality) {
     this._editorExtended =
          this._buildExtendedPanel(html, modality)
-    this._editorWrapper.appendChild(this._editorExtended)
+
+    this._fetchEditorContainer().appendChild(this._editorExtended)
+    this._editDCC.parentNode.insertBefore(this._fetchEditorContainer(), this._editDCC.nextSibling)
     this._editDCC._presentation.focus()
 
     const promise = new Promise((resolve, reject) => {
@@ -142,7 +157,7 @@ class EditDCC {
 
   _removeExtendedPanel () {
     if (this._editorExtended != null) {
-      this._editorWrapper.removeChild(this._editorExtended)
+      this._editorContainer.removeChild(this._editorExtended)
       this._editorExtended = null
     }
   }
@@ -152,35 +167,36 @@ class EditDCC {
     panelExtended.classList.add('inplace-editor-floating')
     panelExtended.innerHTML = html
 
-    panelExtended.style.left = this._transformRelativeX(
-      this._elementRect.left - this._containerRect.left)
+    // panelExtended.style.left = this._transformRelativeX(
+    //   this._elementRect.left - this._containerRect.left)
 
     // tests the middle of the element against the middle of the container
-    if (modality != 'properties' ||
-          (this._elementRect.top + (this._elementRect.height / 2) >
-           this._containerRect.top + (this._containerRect.height / 2))) {
-      panelExtended.style.bottom = this._transformRelativeY(
-        this._containerRect.height -
-            (this._elementRect.top - this._containerRect.top))
-    } else {
-      panelExtended.style.top =
-            this._transformRelativeY(this._elementRect.bottom - this._containerRect.top)
-    }
+    // if (modality != 'properties' ||
+    //       (this._elementRect.top + (this._elementRect.height / 2) >
+    //        this._containerRect.top + (this._containerRect.height / 2))) {
+    //   panelExtended.style.bottom = this._transformRelativeY(
+    //     this._containerRect.height -
+    //         (this._elementRect.top - this._containerRect.top))
+    // } else {
+    //   panelExtended.style.top =
+    //         this._transformRelativeY(this._elementRect.bottom - this._containerRect.top)
+    // }
 
     this._extendedSub = {
       cancel: panelExtended.querySelector('#ext-cancel'),
       content: panelExtended.querySelector('#ext-content')
     }
-    if (modality == 'image') { this._extendedSub.image = panelExtended.querySelector('#ext-content') } else { this._extendedSub.confirm = panelExtended.querySelector('#ext-confirm') }
-
+    if (modality === 'image') {
+      this._extendedSub.image = panelExtended.querySelector('#ext-content')
+    } else { this._extendedSub.confirm = panelExtended.querySelector('#ext-confirm') }
     return panelExtended
   }
 
   async _imageUploadPanel () {
     const ep = await this._extendedPanel(
       EditDCC.imageBrowseTemplate, 'image')
     let path = null
-    if (ep.clicked == 'confirm' && ep.content.files[0]) {
+    if (ep.clicked === 'confirm' && ep.content.files[0]) {
       const asset = await
       MessageBus.ext.request('data/asset//new',
         {