Merge pull request #84 from AdFabConnect/feature_52

Feature 52
AdFabConnect · Dec 15, 2016 · 5ede884 · 5ede884
2 parents 9c2a15c + 0a7d9fb
commit 5ede884
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 35 deletions.
diff --git a/src/cli/cms/data/regex.js b/src/cli/cms/data/regex.js
@@ -1,4 +1,4 @@
-export let abeTag = /({{abe.*?[\s\S].*?}})/g;
+export let abeTag = /({{abe.*?[\s\S].*?}})/g
 // 
 export let abePattern = /[^"']({{abe.*?type=[\'|\"][text|rich|textarea]+[\'|\"][\s\S].*?}})/g
 // This pattern finds all abe tags enclosed in a HTML tag attribute

diff --git a/src/server/public/abejs/scripts/modules/EditorReferences.js b/src/server/public/abejs/scripts/modules/EditorReferences.js
@@ -9,31 +9,92 @@ export default class EditorReferences {
     this.referenceLinks = document.querySelectorAll('[data-ref-json]')
     this.textArea = document.querySelector('.display-json')
     this.jsonError = document.querySelector('.json-error')
+    this.addReference = document.querySelector('.btn-add-reference')
+    this.addReferenceInput = document.querySelector('.btn-add-reference input')
+    this.nameError = this.addReference.querySelector('.error-display')
     if(!this.referenceLinks || this.referenceLinks.length < 1) return
     this.rebind()
   }
 
+  bindReference(referenceLink){
+    referenceLink.setAttribute('data-init', 1)
+    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)
+    })
+  }
+
+  nameAlreadyExist(name){
+    var res = false
+    Array.prototype.forEach.call(this.referenceLinks, (referenceLink) => {
+      if(referenceLink.getAttribute('data-href') == name) res = true
+    })
+    return res
+  }
+
+  addError(val, fullTest = true){
+    var message = ''
+    if(val.trim() === '') {
+      message = 'filename is empty'
+    }
+    else if(!(/^[A-Za-z0-9-\.]+(?:-[A-Za-z0-9-\.]+)*$/.test(val))) {
+      message = 'filename must not contains special characteres'
+    }
+    else if(val.indexOf('.json') < 0 && fullTest) {
+      message = 'missing .json extension'
+    }
+    else if(this.nameAlreadyExist(val)) {
+      message = 'json reference with this name already exist'
+    }
+    this.nameError.textContent = message
+  }
+
   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)
-      })
+      if(parseInt(referenceLink.getAttribute('data-init')) !== 0) return
+      this.bindReference(referenceLink)
     })
     this.textArea.addEventListener('blur', () => {
       this.save()
     })
+    this.addReference.querySelector('span').addEventListener('click', () => {
+      this.add()
+    })
+    this.addReferenceInput.addEventListener('keyup', () => {
+      var val = this.addReferenceInput.value
+      if(!(/^[A-Za-z0-9-\.]+(?:-[A-Za-z0-9-\.]+)*$/.test(val)) || this.nameAlreadyExist(val)) this.addReference.classList.add('error')
+      else this.addReference.classList.remove('error')
+      this.addError(val, false)
+    })
+  }
+
+  add(){
+    var val = this.addReferenceInput.value
+    if(val.trim() !== '' && /^[A-Za-z0-9-\.]+(?:-[A-Za-z0-9-\.]+)*$/.test(val) && val.indexOf('.json') > -1 && !this.nameAlreadyExist(val)){
+      this.addReference.classList.remove('error')
+      var li = document.createElement('li')
+      li.classList.add('list-group-item')
+      li.setAttribute('data-error', '0')
+      li.setAttribute('data-href', val)
+      li.setAttribute('data-ref-json', '[]')
+      li.textContent = val
+      this.addReference.parentNode.insertBefore(li, this.addReference)
+      this.referenceLinks = document.querySelectorAll('[data-ref-json]')
+      this.bindReference(li)
+    }
+    else this.addReference.classList.remove('error')
+    this.addError(val)
   }
 
   save(){

diff --git a/src/server/sass/modules/_editor-inputs.scss b/src/server/sass/modules/_editor-inputs.scss
@@ -215,6 +215,36 @@ select[multiple], select[size] {
       cursor: pointer;
     }
   }
+  .filename-input{
+    min-width: 200px;
+  }
+  .error-display{
+    color: #ff2323;
+    font-size: 11px;
+    padding: 0 7px 3px;
+  }
+}
+
+.btn-add-reference{
+  padding: 0;
+  .input-group-addon,
+  input{
+    transition: all 250ms ease-in-out;
+  }
+  .input-group{
+    padding: 6px;
+  }
+  &.error{
+    .input-group-addon{
+      background: rgba(255, 35, 35, 0.57);
+      color: #FFF;
+      cursor: no-drop;
+    }
+    .input-group-addon,
+    input{
+      border-color: #ff2323;
+    }
+  }
 }
 
 .display-json-wrapper{

diff --git a/src/server/views/list-references.html b/src/server/views/list-references.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <title></title>
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/css/styles.css">
+    <link rel="stylesheet" href="/abejs/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/abejs/css/styles.css">
 </head>
   <body>
 
@@ -17,10 +17,21 @@
         <div class="references-files-wrapper">
           <ul class="list-group">
             {{#each reference}}
-            <li class="list-group-item" data-error="0" data-href='{{@key}}' data-ref-json='{{printJson this}}'>
+            <li class="list-group-item" data-error="0" data-href='{{@key}}' data-ref-json='{{printJson this}}' data-init='0'>
               {{@key}}
             </li>
             {{/each}}
+            <li class="list-group-item last btn-add-reference">
+              <div class="input-group">
+                <div class="input-group-addon">
+                  <span class="">
+                    Add +
+                  </span>
+                </div>
+                <input class="form-control filename-input" type="text" placeholder="filename.json">
+              </div>
+              <div class="error-display"></div>
+            </li>
             </ul>
             <div class="display-json-wrapper">
               <textarea class="form-control display-json"></textarea>
@@ -32,8 +43,8 @@
         </div>
       </div>
     </div>
-    <script type="text/javascript" src="/libs/jquery-2.1.0.min.js"></script>
-    <script type="text/javascript" src="/scripts/template-engine-compiled.js"></script>
-    <script type="text/javascript" src="/scripts/admin-compiled.js"></script>
+    <script type="text/javascript" src="/abejs/libs/jquery-2.1.0.min.js"></script>
+    <script type="text/javascript" src="/abejs/scripts/template-engine-compiled.js"></script>
+    <script type="text/javascript" src="/abejs/scripts/admin-compiled.js"></script>
   </body>
 </html>
diff --git a/src/server/views/list-structure.html b/src/server/views/list-structure.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <title></title>
-    <link rel="stylesheet" href="/css/bootstrap.min.css">
-    <link rel="stylesheet" href="/css/styles.css">
+    <link rel="stylesheet" href="/abejs/css/bootstrap.min.css">
+    <link rel="stylesheet" href="/abejs/css/styles.css">
 </head>
   <body>
 
@@ -26,8 +26,8 @@
         </div>
       </div>
     </div>
-    <script type="text/javascript" src="/libs/jquery-2.1.0.min.js"></script>
-    <script type="text/javascript" src="/scripts/template-engine-compiled.js"></script>
-    <script type="text/javascript" src="/scripts/admin-compiled.js"></script>
+    <script type="text/javascript" src="/abejs/libs/jquery-2.1.0.min.js"></script>
+    <script type="text/javascript" src="/abejs/scripts/template-engine-compiled.js"></script>
+    <script type="text/javascript" src="/abejs/scripts/admin-compiled.js"></script>
   </body>
 </html>
diff --git a/src/server/views/partials/menu-left.html b/src/server/views/partials/menu-left.html
@@ -12,20 +12,16 @@ <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>
-  {{#if @root.config.users.enable}}
-    {{#isAuthorized '/abe/references' @root.user.role.workflow}}
+  {{#isAuthorized '/abe/references' @root.user.role.workflow}}
   <li class="list-group-item pointer" >
     <a href="/abe/reference">edit references</a>
   </li>
-    {{/isAuthorized}}
-  {{/if}}
-  {{#if @root.config.users.enable}}
-    {{#isAuthorized '/abe/structure' @root.user.role.workflow}}
+  {{/isAuthorized}}
+  {{#isAuthorized '/abe/structure' @root.user.role.workflow}}
   <li class="list-group-item pointer" >
     <a href="/abe/structure">edit structure</a>
   </li>
-    {{/isAuthorized}}
-  {{/if}}
+  {{/isAuthorized}}
   {{#if @root.config.users.enable}}
     {{#isAuthorized '/abe/users/list' @root.user.role.workflow}}
       <li class="list-group-item pointer">