fix: bug using each into slug tab

src/cli/cms/editor/handlebars/printBlock.js

@@ -9,7 +9,7 @@ export default function printBlock (ctx, root) {
   }
 
   if(ctx[0].block != null && ctx[0].block !== '') {
-    res += `<div class="form-group">
+    res += `<div class="form-group" data-precontrib-templates="${ctx[0].precontribTemplate}">
               <label class="title">${ctx[0].block}</label>
               <div class='single-block well well-sm'>`
     Array.prototype.forEach.call(ctx, (item) => {
@@ -19,7 +19,7 @@ export default function printBlock (ctx, root) {
     res += '</div></div>'
   }else if(ctx[0].key.indexOf('[') > -1) {
     var ctxBlock = ctx[0].key.split('[')[0]
-    res += `<div class="form-group">
+    res += `<div class="form-group" data-precontrib-templates="${ctx[0].precontribTemplate}">
               <div class="list-group" data-block="${ctxBlock}" >
                 <label>
                   ${ctxBlock}

src/cli/cms/templates/template.js

@@ -319,24 +319,19 @@ export function setAbePrecontribDefaultValueIfDoesntExist(templateText) {
 export function getAbePrecontribFromTemplates(templatesList) {
   var fields = []
   var precontributionTemplate = ''
+
+  // loop over template file
   Array.prototype.forEach.call(templatesList, (file) => {
     var slugMatch = cmsData.regex.getTagAbeWithType(file.template, 'slug')
     var templateText = file.template
     if(slugMatch == null || slugMatch[0] == null) {
       templateText = cmsTemplates.template.setAbePrecontribDefaultValueIfDoesntExist(file.template)
     }
 
-    var matchesTabSlug = cmsData.regex.getTagAbeWithTab(templateText, 'slug')
-    Array.prototype.forEach.call(matchesTabSlug, (match) => {
-      fields.push(cmsData.attributes.getAll(match, {}))
-      var tag = match.replace(/\}\}$/, ' precontribTemplate="' + file.name + '"}}')
-      tag = tag.replace(/(key=[\'|\"])(.*?)([\'|\"])/, '$1/' + file.name + '/$2$3')
-      precontributionTemplate += `${tag}\n`
-    })
+    templateText = templateText.replace(/(?!.*?tab=['|"]slug)(\{\{abe.+.*)/g, ``)
+    precontributionTemplate += templateText.replace(/(\{\{abe.+)(\}\})/g, `$1 precontribTemplate="${file.name}"$2`)
   })
 
-  precontributionTemplate = cmsTemplates.template.addOrder(precontributionTemplate)
-
   return {
     fields: fields,
     template: precontributionTemplate

src/server/public/abecms/scripts/devtool/Devtool.js

@@ -4,8 +4,7 @@ export class Devtool {
 
   constructor() {
     this.body = $('body')
-    this.form = $('.form-wrapper')
-    this.form = $('.form-wrapper')
+    this.form = $('.abeform-wrapper.form-wrapper')
     this.ruler = $('.iframe-wrapper')
     this.initDevtool()
     this.updateBrowserSize()

src/server/public/abecms/scripts/modules/FormCreate.js

@@ -2,6 +2,7 @@
 
 import limax from 'limax'
 import Nanoajax from 'nanoajax'
+import Handlebars from 'handlebars'
 import qs from 'qs'
 import FolderSelect from './FolderSelect'
 import {setObjByString} from '../utils/jsonObject'
@@ -41,6 +42,14 @@ export default class FormCreate {
 
       this._setSlug(false)
     }
+
+    window.abe.blocks.onNewBlock(() => {
+      this._formInputs = [].slice.call(this._form.querySelectorAll('input, select'))
+      Array.prototype.forEach.call(this._formInputs, function(input) {
+        input.removeEventListener('blur', this._handleBlurEvent)
+        input.addEventListener('blur', this._handleBlurEvent)
+      }.bind(this))
+    })
   }
 
   _bindEvents() {
@@ -119,6 +128,20 @@ export default class FormCreate {
             var value = input.value
             var maxlength = input.getAttribute('data-maxlength')
 
+            var singleValues = values
+            if(id.indexOf('[') > -1) {
+              var regexBlock = /(.*?)\[(\d*?)\]\.(.+)/
+              var match = regexBlock.exec(id)
+              if (values[match[1]] == null) {
+                values[match[1]] = []
+              }
+              if (values[match[1]][match[2]] == null) {
+                values[match[1]][match[2]] = {}
+              }
+              addTo = values[match[1]][match[2]]
+              id = id.replace(/.+\[.+\]\./, '')
+            }
+            //else
             if (input.nodeName === 'SELECT' && maxlength != '1') {
               var checked = input.querySelectorAll('option:checked')
               value = []
@@ -131,10 +154,10 @@ export default class FormCreate {
                   }
                 }
               })
-              setObjByString(values, id, value)
+              setObjByString(addTo, id, value)
             } else if (autocomplete) {
               var results = input.parentNode.querySelectorAll('.autocomplete-result')
-              values[id] = []
+              addTo[id] = []
               var mergedValues = []
               Array.prototype.forEach.call(results, function(result) {
                 var resultValue = result.getAttribute('value')
@@ -147,27 +170,27 @@ export default class FormCreate {
                   }
                 }
               }.bind(this))
-              setObjByString(values, id, mergedValues)
-              if (required && values[id].length == 0) {
+              setObjByString(addTo, id, mergedValues)
+              if (required && addTo[id].length == 0) {
                 isValid = false
                 if(showErrors) parentNode.classList.add('has-error')
               }
             } else {
               if (value.indexOf('{') > -1) {
                 try {
                   var jsonValue = JSON.parse(value)
-                  setObjByString(values, id, jsonValue)
+                  setObjByString(addTo, id, jsonValue)
 
-                  if (required && values[id].length == 0) {
+                  if (required && addTo[id].length == 0) {
                     isValid = false
                     if(showErrors) parentNode.classList.add('has-error')
                   }
                 }catch(e) {
                   // values[id].push(value)
                 }
               } else {
-                setObjByString(values, id, value)
-                if (required && values[id] == '') {
+                setObjByString(addTo, id, value)
+                if (required && addTo[id] == '') {
                   isValid = false
                   if(showErrors) parentNode.classList.add('has-error')
                 }
@@ -176,21 +199,13 @@ export default class FormCreate {
           }
         }
       }.bind(this))
+
       var slug = slugs[this._selectedTemplate]
-      var slugMatches = slug.match(/{{.*?}}/g)
-      if (slugMatches !== null) {
-        Array.prototype.forEach.call(slugMatches, function(slugMatch) {
-          var cleanSlugMatch = slugMatch.replace('{{', '').replace('}}', '')
-          try {
-            var valueSlug = eval('values.' + cleanSlugMatch) + ''
-            valueSlug = limax(valueSlug, {separateNumbers: false})
-            slug = slug.replace(slugMatch, valueSlug)
-          }catch(e) {
-            slug = slug.replace(slugMatch, '')
-            isValid = false
-          }
-        }.bind(this))
-      }
+      var template = Handlebars.compile(slug)
+      slug = template(values)
+      slug = slug.replace(/\/g/, '__abe_escape_slash__')
+      slug = limax(slug, {separateNumbers: false})
+      slug = slug.replace(/__abe_escape_slash__/g, '/')
 
       var slugPaths = this._form.querySelectorAll('[data-slug-type=path]')
       Array.prototype.forEach.call(slugPaths, function(slugPath) {
@@ -199,7 +214,7 @@ export default class FormCreate {
           postPath += slugPath.value + '/'
         }
       })
-      postPath +=  slug.replace(/^\//, '')
+      postPath +=  slug.replace(/^\//, '').replace(/\/\//, '/')
     } else {
       isValid = false
     }

src/server/views/partials/engine.html

@@ -1,5 +1,5 @@
 {{#if form}}
-<div class="no-gutter half-view form-wrapper status-{{@root.json.abe_meta.status}}" data-width="{{editorWidth}}" style="width:{{editorWidth}}">
+<div class="no-gutter half-view abeform-wrapper form-wrapper status-{{@root.json.abe_meta.status}}" data-width="{{editorWidth}}" style="width:{{editorWidth}}">
   <!-- *************** btn toolbar *************** -->
   <div class="toolbar">  
     <div class="btns">

src/server/views/partials/manager.html

@@ -2,7 +2,7 @@
 <div class="no-gutter manager-wrapper {{#if form}}{{else}}visible{{/if}}">
 
   <!-- *************** left admin manager *************** -->
-  <div class="left">
+  <div class="left form-wrapper">
     {{#if isHome}}
     {{else}}
     <div class="clearfix">