Merge branch 'master' of https://github.com/abecms/abecms

docs/abe-attributes.md

@@ -48,6 +48,7 @@ are always required for all content type
 - [locale](#locale)
 - [prefill](#prefill)
 - [prefill-quantity](#prefill-quantity)
+- [value](#value)
 
 ## <a name="tab"></a>tab (String)
 
@@ -423,4 +424,15 @@ Default: null
 prefill-quantity="3"
 ```
 
-How many default values to prefill
+How many default values to prefill
+
+
+## <a name="value"></a>value (String)
+
+Default: none
+
+```html
+value="default text value"
+```
+
+Add a default value inside input, if the input value changes the default value won't be used anymore unless the value of the input become an empty string

docs/types/abe-each.md

@@ -0,0 +1,52 @@
+# Abe block each
+
+> group elements
+
+###Basic example
+
+```html
+{{#each myblock}}
+​	<div>
+		{{abe type='text' key='myblock.text' desc='text item of the block'}}
+	</div>
+​	<img src="{{abe type='image' key='myblock.image' desc='image item of the block'}}" />
+
+	<button>
+		{{abe type='text' key='button' desc='this button label is not part of this each statement'}}
+	</button>
+{{/each}}
+```
+
+*Result :*
+
+![Each](../assets/abe-each.png)
+
+We have now a block each myblock that can be repeated as many time as we want with the '+' icon
+
+Notice that since the <button> doesn't have ```key='myblock.button'``` but instead ```key='button'``` it won't be part of the each statement
+
+When the input button will have some content, any item each from myblock will have the same text for the element button
+
+Use case :
+
+Each statement are usefull for exemple for Carousel, list of element with un unknow number of item etc ...
+
+
+###Grouped element
+
+Sometime we want to have a group of element but not inside of each statement because this group won't be repeated.
+
+To do that, just use the same syntaxe as each block element but without wrapping them inside {{#each}} ... {{/each}} tag
+
+```html
+	<div>
+		{{abe type='text' key='myblock.text' groupdesc='description for my group' desc='text item of the block'}}
+	</div>
+​	<img src="{{abe type='image' key='myblock.image' groupdesc='description for my group' desc='image item of the block'}}" />
+```
+
+Notice groupdesc attribut that is use to write a description for our single grouped element 
+
+*Result :*
+
+![SIngleEach](../assets/single-group.png)

src/cli/cms/data/attributes.js

@@ -29,7 +29,7 @@ export function getAll(str, json) {
     source: null,
     tab: 'default',
     type: 'text',
-    value: '',
+    value: null,
     file: '',
     visible: true
   }

src/cli/cms/editor/form.js

@@ -54,7 +54,7 @@ export default class Form {
       source: null,
       tab: 'default',
       type: 'text',
-      value: '',
+      value: null,
       visible: true,
       precontribTemplate: ''
     }

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

@@ -33,7 +33,7 @@ export default function compileAbe(){
       value = ''
     }
     if(typeof value === 'function' || value == null) {
-      value = ''
+      value = (hash.value != null) ? hash.value : ''
     }
     if(hash.type != null && hash.type === 'rich'){
       testXSS = xss(value.replace(/"/g, '"'), {
@@ -52,16 +52,16 @@ export default function compileAbe(){
     try {
       value = eval('content.' + hash.key)
     }catch(e) {
-      value = hash.key
+      value = ''
     }
   }else {
     value = hash.key
   }
-  // value = ((content) ? content[hash.key.replace('.', '-')] : hash.key)
+
   if(typeof value === 'function' || value == null) {
-    value = ''
+    value = (hash.value != null) ? hash.value : ''
   }
-  
+
   if(hash.type != null && hash.type === 'rich'){
     testXSS = xss(value.replace(/"/g, '"'), {
       'whiteList': config.htmlWhiteList,

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

@@ -10,7 +10,9 @@ export default function printBlock (ctx, root) {
 
   if(ctx[0].block != null && ctx[0].block !== '') {
     res += `<div class="form-group" data-precontrib-templates="${ctx[0].precontribTemplate}">
-              <label class="title">${ctx[0].block}</label>
+              <label class="title">
+                ${(ctx[0].groupdesc != null) ? ctx[0].groupdesc : ctx[0].block}
+              </label>
               <div class='single-block well well-sm'>`
     Array.prototype.forEach.call(ctx, (item) => {
       if (precontrib) item.value = ''

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

@@ -274,11 +274,16 @@ export function createInputImage(attributes, inputClass, params) {
               <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
             </div>
             <input type="text" ${attributes} class="${inputClass} file-input" />
-            <div class="upload-wrapper">
-              <input class="form-control" ${attributes} name="${params.key}" type="file" title="upload an image"/>
-              <span class="percent">
-                <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
+            <div class="input-group-btn">
+              <span class="border">
+                <div class="upload-wrapper">
+                  <input class="form-control" ${attributes} name="${params.key}" type="file" title="upload an image"/>
+                  <span class="percent">
+                    <span class="glyphicon glyphicon-upload" aria-hidden="true"></span>
+                  </span>
+                </div>
               </span>
+              <span class="image-icon"></span>
             </div>
           </div>
           <div class="input-error">
@@ -311,6 +316,7 @@ export function printInput (params, root) {
   var inputClass = 'form-control form-abe'
   res += getLabel(params)
 
+  if(params.value === null && params.defaultvalue != null) params.value = params.defaultvalue
   params.placeholder = params.placeholder || ''
   params.value = params.value || ''
 

src/cli/cms/templates/handlebars/cleanTab.js

@@ -1,7 +1,7 @@
 import {coreUtils} from '../../../'
 
 export default function cleanTab(obj) {
-  obj = coreUtils.text.replaceUnwantedChar(obj.replace(/ |&/g, '_'))
+  obj = coreUtils.text.replaceUnwantedChar(obj.replace(/ |&/g, '_'), {'\\(': '', '\\)': '', '\\[': '', '\\]': ''})
 
   return obj
 }

src/cli/core/utils/text.js

@@ -1,8 +1,9 @@
 import xss from 'xss'
 
-export function replaceUnwantedChar(str) {
+export function replaceUnwantedChar(str, additionnalChar = null) {
   var chars = {'’': '', '\'': '', '"': '', 'Š': 'S', 'š': 's', 'Ž': 'Z', 'ž': 'z', 'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', 'Å': 'A', 'Æ': 'A', 'Ç': 'C', 'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ý': 'Y', 'Þ': 'B', 'ß': 'Ss', 'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'a', 'ç': 'c', 'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'œ': 'oe', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i', 'ð': 'o', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ý': 'y', 'þ': 'b', 'ÿ': 'y'}
   for(var prop in chars) str = str.replace(new RegExp(prop, 'g'), chars[prop])
+  if(additionnalChar != null) for(var prop in additionnalChar) str = str.replace(new RegExp(prop, 'g'), additionnalChar[prop])
   return str
 }
 

src/server/controllers/editor.js

@@ -93,7 +93,8 @@ function matchAttrAbe(text, json, util, arrayBlock) {
     match
   // While regexp match HandlebarsJS template item => keepgoing
   while (match = patt.exec(text)) {
-    addToForm(match[0], text, json, util, arrayBlock, null, null)
+    var matchText = match[0].replace(/value=([\'\"].*?[\'\"])/g, 'defaultvalue=$1')
+    addToForm(matchText, text, json, util, arrayBlock, null, null)
   }
 }
 

src/server/public/abecms/libs/slider-home.js

@@ -0,0 +1,35 @@
+var tweets = twitterFetcher.fetch({
+  // "profile": {"screenName": 'rihanna'},
+  "profile": {"screenName": 'abe_cms'},
+  "domId": 'tweets-slider',
+  "maxTweets": 10,
+  "enableLinks": true, 
+  "showUser": true,
+  "showTime": true,
+  "showImages": false,
+  "lang": 'en',
+  "showRetweet": false,
+  "customCallback": function (tweets) {
+  	var x = tweets.length;
+    var n = 0;
+    var element = document.getElementById('tweets-slider');
+    var html = '<div class="swiper-wrapper">';
+    while(n < x) {
+      html += '<div class="swiper-slide">' +
+			      		tweets[n]
+			      			.replace(/>Posted on /, '>')
+			      			.replace(/<p class=\"interact\">(.*)/, '') +
+			      	'</div>';
+      n++;
+    }
+    html += '</div><div class="swiper-pagination"></div>';
+    element.innerHTML = html;
+
+		var swiper = new Swiper('.swiper-container', {
+		  pagination: '.swiper-pagination',
+		  slidesPerView: 3,
+		  paginationClickable: true,
+		  spaceBetween: 30
+		});
+  }
+})

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

@@ -62,12 +62,20 @@ export class Devtool {
     })
 
     $('.close-engine').on('click', () => {
-      this.body.removeClass('engine-open')
-      this.form.width(0)
+      this.body.addClass('abeform-anim')
+      this.form.width('0%')
+      setTimeout(() => {
+        this.body.removeClass('engine-open')
+      }, 10)
     })
     $('.open-engine').on('click', () => {
       this.body.addClass('engine-open')
-      this.form.width(this.form.attr('data-width'))
+      setTimeout(() => {
+        this.form.width(this.form.attr('data-width'))
+      }, 10)
+      setTimeout(() => {
+        this.body.removeClass('abeform-anim')
+      }, 300)
     })
   }
 

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

@@ -34,7 +34,7 @@ export default class EditorFiles {
       return false
     }
     EditorUtils.scrollToInputElement(target)
-    var parentTarget = target.parentNode.parentNode
+    var parentTarget = target.parentNode.parentNode.parentNode.parentNode
     var percent = parentTarget.querySelector('.percent')
     var percentHtml = percent.innerHTML
     var file = target.files[0]

src/server/sass/modules/_common.scss

@@ -10,6 +10,10 @@ html,
 }
 
 .container-main{
+  height: 100%;
+}
+
+.engine-open .container-main{
   height: calc(100% - 55px);
 }
 

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

@@ -9,12 +9,12 @@
   border-radius: 0px;
 }
 .remove-block {
-position: absolute;
+	position: absolute;
   z-index: 5656;
-right: 10px;
-top: 10px;
+	right: 10px;
+	top: 10px;
 	height: 15px;
-width: 15px;
+	width: 15px;
 }
 
 .abeform-wrapper {
@@ -30,6 +30,12 @@ width: 15px;
 	}
 }
 
+.abeform-anim {
+	.form-wrapper{
+		transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+}
+
 .btn {
 	.glyphicon-chevron-down {
 	  transform: rotate(-180deg);