Merge pull request #66 from AdFabConnect/structure_editor

Structure editor

src/cli/cms/structure/index.js

@@ -0,0 +1,5 @@
+import * as structure from './structure'
+
+export {
+  structure
+}

src/cli/cms/structure/structure.js

@@ -0,0 +1,14 @@
+import path from 'path'
+
+import {
+  coreUtils,
+  cmsStructure,
+  cmsData,
+  config
+} from '../../'
+
+export function editStructure(type, folderPath) {
+  if(type === 'add') coreUtils.file.addFolder(folderPath)
+  else coreUtils.file.removeFolder(folderPath)
+  return folderPath
+}

src/cli/core/utils/file.js

@@ -1,5 +1,7 @@
 import Promise from 'bluebird'
 import path from 'path'
+import mkdirp from 'mkdirp'
+import execPromise from 'child-process-promise'
 var fse = Promise.promisifyAll(require('fs-extra'))
 
 import {
@@ -160,6 +162,20 @@ export function getFilesAsync(dirname, recursive = true, filterExt = '') {
   })
 }
 
+export function addFolder(folderPath) {
+  mkdirp(path.join(config.root, folderPath), function (err) {
+    if (err) console.error(err)
+  })
+  return folderPath
+}
+
+export function removeFolder(folderPath) {
+  fse.remove(path.join(config.root, folderPath), function (err) {
+    if (err) return console.error(err)
+  })
+  return folderPath
+}
+
 /**
  * Return the date of the revision
  * @param  {String}  revisionPath   url of the post revision

src/cli/index.js

@@ -45,6 +45,7 @@ import * as cmsEditor from './cms/editor'
 import * as cmsOperations from './cms/operations'
 import * as cmsTemplates from './cms/templates'
 import * as cmsReference from './cms/reference'
+import * as cmsStructure from './cms/structure'
 import * as cmsMedia from './cms/media'
 import * as coreUtils from './core/utils'
 import * as abeExtend from './extend'
@@ -55,6 +56,7 @@ export {
 	cmsOperations,
 	cmsTemplates,
 	cmsReference,
+	cmsStructure,
 	cmsMedia,
 	coreUtils,
 	cmsEditor,

src/server/controllers/index.js

@@ -18,6 +18,8 @@ import {
   ,postSqlRequest
   ,postReference
   ,getReference
+  ,postStructure
+  ,getStructure
   ,getPaginate
   ,getThumbs
   ,getImage
@@ -56,11 +58,13 @@ router.post('/abe/page/*', postPage)
 router.get('/abe/page/*', getPage)
 router.get('/abe/generate-posts', getGeneratePost)
 router.get('/abe/save-config', getSaveConfig)
-router.get('/abe/reference/*', getReference)
+router.get('/abe/reference', getReference)
+router.get('/abe/structure', getStructure)
 router.get('/abe/thumbs/*', getThumbs)
 router.get('/abe/image/*', getImage)
 router.post('/abe/upload/*', postUpload)
 router.post('/abe/reference/*', postReference)
+router.post('/abe/structure/*', postStructure)
 router.get('/abe/editor*', getMain)
 router.post('/abe/list-url/save*', postListUrlSave)
 

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

@@ -4,31 +4,14 @@ import Handlebars from 'handlebars'
 import Nanoajax from 'nanoajax'
 import qs from 'qs'
 
-export default class EditorFiles {
+export default class EditorReferences {
   constructor() {
     this._ajax = Nanoajax.ajax
-    this.referenceTabButton = document.querySelector('[data-manager-show="references-files"]')
-    if (this.referenceTabButton != null) {
-      this.referenceTabButton.addEventListener('click', () => {
-        this._ajax({
-          url: '/abe/reference/',
-          body: '',
-          cors: true,
-          method: 'get'
-        }, (code, responseText) => {
-          var resp = JSON.parse(responseText)
-          var referenceListHtml = document.querySelector('.references-files-wrapper')
-          var template = Handlebars.compile(referenceListHtml.innerHTML)
-          var compiled = template(resp)
-          referenceListHtml.innerHTML = compiled
-          this.referenceLinks = document.querySelectorAll('[data-ref-json]')
-          this.textArea = document.querySelector('.display-json')
-          this.jsonError = document.querySelector('.json-error')
-          if(!this.referenceLinks) return
-          this.rebind()
-        })
-      })
-    }
+    this.referenceLinks = document.querySelectorAll('[data-ref-json]')
+    this.textArea = document.querySelector('.display-json')
+    this.jsonError = document.querySelector('.json-error')
+    if(!this.referenceLinks || this.referenceLinks.length < 1) return
+    this.rebind()
   }
 
   rebind() {

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

@@ -0,0 +1,145 @@
+/*global document */
+
+import Nanoajax from 'nanoajax'
+import qs from 'qs'
+
+export default class EditorStructures {
+  constructor() {
+    var struc = document.querySelector('.structure-json')
+    if(!(struc != null)) return;
+    this._ajax = Nanoajax.ajax
+    this.datas = JSON.parse(struc.value)
+    this.structureWrapper = document.querySelector('.structure-wrapper')
+    this.folderName = document.querySelector('input.folder-name')
+
+    var lvl_0 = this.createFolder('structure/', 0, '', 'structure', '')
+
+    this.createStructure(lvl_0, this.datas)
+    this.structureWrapper.appendChild(lvl_0)
+    this.rebind()
+  }
+
+  createFolder(path, level, daddy, folderName, hidden = 'hidden') {
+    var folder = document.createElement('div')
+    if(hidden && hidden !== '') folder.classList.add(hidden)
+    folder.classList.add('structure-folder')
+    folder.setAttribute('data-path', path.replace(/\/+$/, '') + '/')
+    folder.setAttribute('data-level', level)
+    folder.setAttribute('data-daddy', daddy)
+
+    var span = document.createElement('span')
+    var html = `<span class="glyphicon glyphicon-chevron-right arrow" aria-hidden="true"></span>
+                ${folderName} 
+                <div class="structure-tool">
+                  <span class="glyphicon glyphicon-plus folder-action" data-init="0" data-action="add" aria-hidden="true"></span>`
+    if(level !== 0) html += '<span class="glyphicon glyphicon-minus folder-action" data-init="0" data-action="remove" aria-hidden="true"></span>'
+    html += '</div>'
+    span.innerHTML = html
+    folder.appendChild(span)
+
+    this.bindArrow(span.querySelector('.arrow'))
+
+    return folder
+  }
+
+  toggleFolder(daddy, forceState = ''){
+    var folders = daddy.querySelectorAll('[data-level="' + (parseInt(daddy.getAttribute('data-level')) + 1) + '"]')
+    if(folders) {
+      if(!daddy.classList.contains('open') || forceState === 'open'){
+        daddy.classList.add('open')
+        Array.prototype.forEach.call(folders, (folder) => {
+          folder.classList.remove('hidden')
+        })
+      }
+      else{
+        daddy.classList.remove('open')
+        Array.prototype.forEach.call(folders, (folder) => {
+          folder.classList.add('hidden')
+        })
+      }
+    }
+  }
+
+  bindArrow(arrow) {
+    arrow.addEventListener('click', () => {
+      this.toggleFolder(arrow.parentNode.parentNode)
+    })
+  }
+
+  createStructure(daddy, datas) {
+    Array.prototype.forEach.call(datas, (data) => {
+      var folderName = data['path'].split('/')
+      var folder = this.createFolder(
+        data['path'],
+        (parseInt(daddy.getAttribute('data-level')) + 1),
+        daddy.getAttribute('data-daddy'),
+        folderName[folderName.length - 1]
+      )
+      daddy.appendChild(folder)
+
+      if(data.folders && data.folders.length > 0) this.createStructure(folder, data.folders)
+    })
+  }
+
+  add(element){
+    this.toggleFolder(element, 'open')
+    this.folderName.removeAttribute('disabled')
+    this.folderName.focus()
+    this.folderName.setAttribute('data-folder', `[data-path="${element.getAttribute('data-path')}"]`)
+
+    var writeFolderName = (e) => {
+      var value = this.folderName.value
+      if(/^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/.test(value)) this.folderName.classList.remove('error')
+      else this.folderName.classList.add('error')
+      if(e.keyCode === 13) {
+        if(/^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/.test(value)){
+          this.folderName.removeEventListener('keyup', writeFolderName)
+          this.folderName.setAttribute('disabled', 1)
+          var newFolderDaddy = document.querySelector(this.folderName.getAttribute('data-folder'))
+          var path = newFolderDaddy.getAttribute('data-path').split('/')
+          path.pop()
+          path = path.concat(value).join('/')
+          var folder = this.createFolder(
+            newFolderDaddy.getAttribute('data-path') + value,
+            (parseInt(newFolderDaddy.getAttribute('data-level')) + 1),
+            newFolderDaddy.getAttribute('data-daddy'),
+            value,
+            ''
+          )
+          newFolderDaddy.appendChild(folder)
+          this.rebind()
+          this.save(qs.stringify({type: 'add', folderPath: (newFolderDaddy.getAttribute('data-path') + value)}))
+          this.folderName.value = ''
+        }
+      }
+    }
+
+    this.folderName.removeEventListener('keyup', writeFolderName)
+    this.folderName.addEventListener('keyup', writeFolderName)
+  }
+
+  remove(element){
+    this.save(qs.stringify({type: 'remove', folderPath: element.getAttribute('data-path')}))
+    element.parentNode.removeChild(element)
+  }
+
+  save(body){
+    this._ajax({url: '/abe/structure/', body: body, cors: true, method: 'post'}, () => {
+
+    })
+  }
+
+  rebind(){
+    var folderActions = document.querySelectorAll('.folder-action')
+    Array.prototype.forEach.call(folderActions, (folderAction) => {
+      if(parseInt(folderAction.getAttribute('data-init')) === 0){
+        folderAction.setAttribute('data-init', 1)
+        folderAction.addEventListener('click', (e) => {
+          var target = e.target
+          this[target.getAttribute('data-action')](target.parentNode.parentNode.parentNode)
+        })
+      }
+    })  
+  }
+
+}

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

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

src/server/routes/get-reference.js

@@ -1,10 +1,29 @@
+import fs from 'fs-extra'
+import path from 'path'
+
 import {
-  Manager
+	Manager,
+  coreUtils,
+  config,
+  Handlebars,
+  User
 } from '../../cli'
 
 var route = function(req, res){
-  res.set('Content-Type', 'application/json')
-  res.send(JSON.stringify({reference: Manager.instance.getReferences()}))
+  var resHtml = ''
+
+  var page = path.join(__dirname + '/../views/list-references.html')
+  if (coreUtils.file.exist(page)) {
+    resHtml = fs.readFileSync(page, 'utf8')
+  }
+
+  var template = Handlebars.compile(resHtml, {noEscape: true})
+  var tmp = template({
+    config: JSON.stringify(config),
+    reference: Manager.instance.getReferences()
+  })
+
+  return res.send(tmp)
 }
 
 export default route

src/server/routes/get-structure.js

@@ -0,0 +1,30 @@
+import fs from 'fs-extra'
+import path from 'path'
+
+import {
+	Manager,
+  coreUtils,
+  config,
+  Handlebars,
+  User
+} from '../../cli'
+
+var route = function(req, res){
+  var resHtml = ''
+
+  var page = path.join(__dirname + '/../views/list-structure.html')
+  if (coreUtils.file.exist(page)) {
+    resHtml = fs.readFileSync(page, 'utf8')
+  }
+
+  var structure = Manager.instance.getStructureAndTemplates().structure
+  structure = JSON.stringify(structure).replace(new RegExp(config.root, 'g'), '')
+  var template = Handlebars.compile(resHtml, {noEscape: true})
+  var tmp = template({
+    config: JSON.stringify(config),
+    structure: structure
+  })
+  return res.send(tmp)
+}
+
+export default route

src/server/routes/index.js

@@ -14,6 +14,8 @@ import postUpload from './post-upload'
 import postSqlRequest from './post-sql-request'
 import postReference from './post-reference'
 import getReference from './get-reference'
+import postStructure from './post-structure'
+import getStructure from './get-structure'
 import getPaginate from './get-paginate'
 import getThumbs from './get-thumbs'
 import getImage from './get-image'
@@ -37,6 +39,8 @@ export {
 	postSqlRequest,
 	postReference,
 	getReference,
+	postStructure,
+	getStructure,
 	getPaginate,
 	getThumbs,
 	getImage,

src/server/routes/post-structure.js

@@ -0,0 +1,12 @@
+import {
+  cmsStructure
+} from '../../cli'
+
+var route = function(req, res){
+  if(typeof res._header !== 'undefined' && res._header !== null) return
+  cmsStructure.structure.editStructure(req.body.type, req.body.folderPath)
+  res.set('Content-Type', 'application/json')
+  res.send(JSON.stringify({success: 1}))
+}
+
+export default route