editor for json references

src/cli/cms/data/index.js

@@ -8,6 +8,7 @@ import * as source from './source'
 import * as revision from './revision'
 import * as metas from './metas'
 import * as file from './file'
+import * as reference from './reference'
 
 export {
 	values,
@@ -19,5 +20,6 @@ export {
   revision,
   regex,
   metas,
-  file
+  file,
+  reference
 }

src/cli/cms/data/reference.js

@@ -0,0 +1,31 @@
+import path from 'path'
+import mkdirp from 'mkdirp'
+import fse from 'fs-extra'
+
+import {
+  abeExtend,
+  coreUtils,
+  cmsData,
+  config
+} from '../../'
+
+export function getFiles() {
+  var arr = []
+  var res = []
+  arr = cmsData.file.read(
+    path.join(config.root, config.reference.url),
+    path.join(config.root, config.reference.url),
+    'files',
+    true,
+    /(.json*?)/
+  )
+
+  arr.forEach(function (el) {
+    res.push({
+      name: el.name,
+      data: cmsData.file.get(el.path)
+    })
+  })
+
+  return res
+}

src/cli/core/manager/Manager.js

@@ -124,6 +124,17 @@ class Manager {
     this._structureAndTemplates = cmsTemplates.template.getStructureAndTemplates()
   }
 
+  getReferences() {
+    if(typeof this._references === 'undefined' || this._references === null) this.updateReferences()
+    return this._references
+  }
+
+  updateReferences() {
+    this._references = cmsData.reference.getFiles()
+
+    return this
+  }
+
   getList() {
 
     return this._list

src/server/controllers/index.js

@@ -18,6 +18,7 @@ import {
   ,getDelete
   ,postUpload
   ,postSqlRequest
+  ,writeJson
 } from '../routes'
 
 import {
@@ -43,6 +44,7 @@ router.get('/abe/save-config', getSaveConfig)
 router.get('/abe/unpublish*', getUnpublish)
 router.get('/abe/delete*', getDelete)
 router.post('/abe/upload/*', postUpload)
+router.post('/abe/write-json/*', writeJson)
 router.get('/abe/list-url*', function (req, res, next) {
   getListUrl(router, req, res, next) 
 })

src/server/public/scripts/modules/EditorReferences.js

@@ -0,0 +1,84 @@
+/*global document, FormData, CONFIG, XMLHttpRequest */
+
+import Nanoajax from 'nanoajax'
+import EditorUtils from '../modules/EditorUtils'
+import {IframeNode} from '../utils/iframe'
+import on from 'on'
+import qs from 'qs'
+
+export default class EditorFiles {
+  constructor() {
+    this._ajax = Nanoajax.ajax
+    this.referenceLinks = document.querySelectorAll('[data-ref-json]')
+    this.textArea = document.querySelector('.display-json')
+    this.jsonError = document.querySelector('.json-error')
+    if(this.referenceLinks) this.rebind()
+  }
+
+  rebind() {
+    Array.prototype.forEach.call(this.referenceLinks, (referenceLink) => {
+      referenceLink.addEventListener('click', (e) => {
+        e.preventDefault()
+        this.textArea.style.opacity = 1;
+        Array.prototype.forEach.call(this.referenceLinks, (referenceLink) => {
+          this.textArea.classList.remove('error')
+          this.jsonError.style.opacity = 0
+          referenceLink.classList.remove('active')
+        });
+        e.target.classList.add('active')
+        if(parseInt(e.target.getAttribute('data-error')) === 1) {
+          this.textArea.classList.add('error')
+          this.jsonError.style.opacity = 1
+        }
+        this.displayReference(e.target)
+      })
+    })
+
+    this.textArea.addEventListener('blur', () => {
+      this.save()
+    })
+  }
+
+  save(){
+    var selectedElement = document.querySelector('.references-files-wrapper .list-group-item.active')
+    var isValidJson = true
+    this.textArea.classList.remove('error')
+    this.jsonError.style.opacity = 0
+    try{
+      (typeof JSON.parse(this.textArea.value)) // validate json
+      var data = qs.stringify({json: this.textArea.value, url: this.textArea.getAttribute('data-file')})
+      selectedElement.setAttribute('data-ref-json', this.textArea.value)
+      selectedElement.setAttribute('data-error', 0)
+    }
+    catch(e){
+      this.jsonError.textContent = e
+      isValidJson = false
+      selectedElement.setAttribute('data-error', 1)
+    }
+    if(isValidJson){
+      this._ajax(
+      {
+        url: `/abe/write-json/`,
+        body: data,
+        cors: true,
+        method: 'post'
+      },
+      (code, responseText) => {
+        this.textArea.classList.add('saved')
+        setTimeout(() => {
+          this.textArea.classList.remove('saved')
+        }, 400)
+      })
+    }
+    else {
+      this.textArea.classList.add('error')
+      this.jsonError.style.opacity = 1
+    }
+  }
+
+  displayReference(element) {
+    this.textArea.value = JSON.stringify(JSON.parse(element.getAttribute('data-ref-json')), null, '\t')
+    this.textArea.setAttribute('data-file', element.getAttribute('data-href'))
+  }
+
+}

src/server/public/scripts/template-engine.js

@@ -10,6 +10,7 @@ import EditorJson from './modules/EditorJson'
 import EditorManager from './modules/EditorManager'
 import EditorAutocomplete from './modules/EditorAutocomplete'
 import EditorReload from './modules/EditorReload'
+import EditorReferences from './modules/EditorReferences'
 
 var htmlTag = document.querySelector('html')
 window.CONFIG = JSON.parse(htmlTag.getAttribute('data-config'))
@@ -31,6 +32,7 @@ class Engine {
     this._manager = new EditorManager()
     this._autocomplete = new EditorAutocomplete()
     this._dev = new Devtool()
+    this.reference = new EditorReferences()
 
     this.json = EditorJson.instance
 

src/server/routes/get-main.js

@@ -85,7 +85,8 @@ var route = function(req, res, next) {
     var manager = {}
 
     manager.home = {
-      files: Manager.instance.getList()
+      files: Manager.instance.getList(),
+      references: Manager.instance.getReferences()
     }
 
     manager.list = Manager.instance.getStructureAndTemplates()

src/server/routes/index.js

@@ -15,6 +15,7 @@ import getUnpublish from './get-unpublish'
 import getDelete from './get-delete'
 import postUpload from './post-upload'
 import postSqlRequest from './post-sql-request'
+import writeJson from './write-json'
 
 export {
 	getMain
@@ -33,5 +34,6 @@ export {
 	,getUnpublish
 	,getDelete
 	,postUpload
-	,postSqlRequest
+	,postSqlRequest,
+	writeJson
 }

src/server/routes/write-json.js

@@ -0,0 +1,21 @@
+import path from 'path'
+import fse from 'fs-extra'
+import mkdirp from 'mkdirp'
+
+import {
+  config,
+  abeExtend,
+  Manager
+} from '../../cli'
+
+var route = function(req, res, next){
+  if(typeof res._header !== 'undefined' && res._header !== null) return
+  fse.writeJson(path.join(config.root, req.body.url), JSON.parse(req.body.json), function (err) {
+    if(err) console.log("write-json reference error: ", err)
+    Manager.instance.updateReferences()
+    res.set('Content-Type', 'application/json')
+    res.send(JSON.stringify({success: 1}))
+  })
+}
+
+export default route

src/server/sass/modules/_editor-inputs.scss

@@ -118,4 +118,74 @@ select[multiple], select[size] {
   -webkit-appearance: textarea;
   overflow: auto;
   resize: both;
-}
+}
+
+.references-files{
+  height: calc(100% - 40px);
+}
+
+.references-files-wrapper{
+  display: table;
+  height: calc(100% - 90px);
+  width: 100%;
+  .list-group{
+    display: table-cell;
+    vertical-align: top;
+    padding-bottom: 10px;
+    padding-right: 20px;
+    width: 100px;
+  }
+  .list-group-item{
+    &:hover{
+      cursor: pointer;
+    }
+  }
+}
+
+.display-json-wrapper{
+  display: table-cell;
+  position: relative;
+  vertical-align: top;
+  .form-control{
+    height: 100%
+  }
+}
+
+.json-error{
+  color: #ff2323;
+  padding: 5px;
+  opacity: 0;
+  transition: all 250ms ease-in;
+}
+
+.text-saved{
+  transition: all 400ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
+  position: absolute;
+  right: 15px;
+  top: 10px;
+  opacity: 0;
+  color: #26e826;
+  text-shadow: 0px 1px 1px rgb(255, 255, 255);
+  transform: scale(0.9);
+}
+
+.display-json{
+  background: rgba(181, 181, 181, 0.03);
+  border: none !important;
+  overflow: auto !important;
+  outline: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  transition: all 250ms ease-in;
+  opacity: 0;
+  &.error{
+    background: rgba(255, 0, 0, 0.03);
+  }
+  &.saved{
+    ~ .text-saved{
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}

src/server/views/partials/engine.html

@@ -1,4 +1,4 @@
-
+{{#if form}}
 <div class="no-gutter half-view form-wrapper status-{{@root.json.abe_meta.status}}" data-width="33%">
   <!-- *************** btn toolbar *************** -->
   <div class="toolbar">  
@@ -24,7 +24,7 @@
   </div><!-- *************** /end btn toolbar *************** -->
 
   <!-- *************** form edit *************** -->
-  {{#if form}}
+
     <div class="abeform-wrapper">
       <form class="text-i18n status-{{@root.json.abe_meta.status}}" id="abeForm">
         <div class="display-status">
@@ -57,8 +57,9 @@
         {{abeImport 'engine-more' manager.config this}}
       </form><!-- *************** /end form edit *************** -->
     </div>
-  {{/if}}
+
   <div class="close-engine">
     <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
   </div>
 </div>
+{{/if}}

src/server/views/partials/manager.html

@@ -22,6 +22,8 @@
   <div class="right">
     {{abeImport 'right-file-list' manager.config this}}
 
+    {{abeImport 'right-references-list' manager.config this}}
+
     {{abeImport 'right-config' manager.config this}}        
 
     {{abeImport 'right-revisions' manager.config this}}    

src/server/views/partials/menu-left.html

@@ -12,6 +12,9 @@ <h1><small>{{@root.text.site}}</small></h1>
   <li class="list-group-item pointer" data-config="true" data-manager-show="manager-files">
     {{@root.text.navigation}}
   </li>
+  <li class="list-group-item pointer" data-config="true" data-manager-show="references-files">
+    edit references
+  </li>
   {{abeImport 'menu-left-addons' manager.config this}}
 </ul>
 {{/if}}

src/server/views/partials/right-references-list.html

@@ -0,0 +1,26 @@
+{{#if manager.home}}
+<div class="manager-tab references-files visible">
+    <div class="page-header">
+      <div class="text-uppercase">
+        edit references
+      </div>
+    </div>
+    <div class="references-files-wrapper">
+      <ul class="list-group">
+        {{#each manager.home.references}}
+        <li class="list-group-item" data-error="0" data-href="{{@root.config.reference.url}}/{{name}}" data-ref-json='{{printJson data}}'>
+          {{name}}
+        </li>
+        {{/each}}
+        </ul>
+        <div class="display-json-wrapper">
+          <textarea class="form-control display-json"></textarea>
+          <div class="text-saved">✔ saved</div>
+          <div class="json-error">
+            &nbsp;
+          </div>
+        </div>
+    </div>
+  <br />
+</div>
+{{/if}}