Merge branch 'iusvar-i18n-vuejs-and-more'

system/Settings.php

@@ -17,9 +17,10 @@ class Settings
 		}
 
 	    # i18n
-    	# load the strings of the set language
-    	$language = $settings['language'];
-    	$settings['labels'] = self::getLanguageLabels($language);
+	    # load the strings of the set language
+	    $language = $settings['language'];
+	    $settings['labels'] = self::getLanguageLabels($language);
+	    $settings['vuejsLabels'] = self::getVuejsLabels($language);
 
 		# We know the used theme now so create the theme path 
 		$settings['themePath'] = $settings['rootPath'] . $settings['themeFolder'] . DIRECTORY_SEPARATOR . $settings['theme'];
@@ -92,6 +93,19 @@ class Settings
 		return $labels;
 	}
 
+  public static function getVuejsLabels($language)
+	{
+    if( empty($language) ){
+      $language = 'en';
+    }
+    
+    // load the strings of the set language
+		$yaml = new Models\WriteYaml();
+    $labels = $yaml->getYaml('settings/languages', 'vuejs-'.$language.'.yaml');
+		
+		return $labels;
+	}
+
 
 	public static function getObjectSettings($objectType, $objectName)
 	{
@@ -156,4 +170,4 @@ class Settings
 			$yaml->updateYaml('settings', 'settings.yaml', $settings);					
 		}
 	}
-}
+}

system/author/editor/editor-blox.twig

@@ -12,7 +12,7 @@
 		    v-bind:key="tab"
 		    v-bind:class="['tab-button', { active: currentTab === tab }]"
 		    v-on:click="currentTab = tab"
-		  >${tab}</button>
+		  >${ $t(tab) }</button>
 
 		  <component 
 		  	class="tab" 
@@ -65,7 +65,7 @@
 
 					<content-block :body="false">
 
-						<button v-for="button in formats" class="format-item"  @click.prevent="setData( $event, button.component )" data-id="99999" id="blox-99999" :title="button.title" v-html="button.label"></button>
+						<button v-for="button in formats" class="format-item"  @click.prevent="setData( $event, button.component )" data-id="99999" id="blox-99999" :title="$t(button.title)" v-html="button.label"></button>
 					
 					</content-block>
 

system/author/editor/editor-raw.twig

@@ -12,7 +12,7 @@
 		    v-bind:key="tab"
 		    v-bind:class="['tab-button', { active: currentTab === tab }]"
 		    v-on:click="currentTab = tab"
-		  >${tab}</button>
+		  >${ $t(tab) }</button>
 
 		  <component 
 		  	class="tab" 

system/author/js/vue-blox.js

@@ -6,8 +6,8 @@ const contentComponent = Vue.component('content-block', {
 				'<div v-if="newblock" class="newblock-info">Choose a content-type <button class="newblock-close" @click.prevent="closeNewBlock($event)">close</button></div>' +	
 				'<div class="blox-wrapper" :class="{ editactive: edit }">' +
 				 '<div class="sideaction" v-if="body">' + 
-				  '<button class="add" :disabled="disabled" title="add content-block" @click.prevent="addNewBlock($event)"><svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg></button>' +
-				  '<button class="delete" :disabled="disabled" title="delete content-block" @click.prevent="deleteBlock($event)"><svg class="icon icon-close"><use xlink:href="#icon-close"></use></svg></button>' +
+				  '<button class="add" :disabled="disabled" :title="$t(\'add content-block\')" @click.prevent="addNewBlock($event)"><svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg></button>' +
+				  '<button class="delete" :disabled="disabled" :title="$t(\'delete content-block\')" @click.prevent="deleteBlock($event)"><svg class="icon icon-close"><use xlink:href="#icon-close"></use></svg></button>' +
 				 '</div>' + 
 				 '<div class="background-helper" @keyup.enter="submitBlock" @click="getData">' +
 				  '<div class="component" ref="component">' +
@@ -15,8 +15,8 @@ const contentComponent = Vue.component('content-block', {
 				    '<component :disabled="disabled" :compmarkdown="compmarkdown" @updatedMarkdown="updateMarkdown" :is="componentType"></component>' +
 				   '</transition>' +
 				   '<div class="blox-buttons" v-if="edit">' + 
-				    '<button class="edit" :disabled="disabled" @click.prevent="saveBlock">save</button>' +
-				    '<button class="cancel" :disabled="disabled" @click.prevent="switchToPreviewMode">cancel</button>' +
+				    '<button class="edit" :disabled="disabled" @click.prevent="saveBlock">{{ $t(\'save\') }}</button>' +
+				    '<button class="cancel" :disabled="disabled" @click.prevent="switchToPreviewMode">{{ $t(\'cancel\') }}</button>' +
 				   '</div>' +
 				  '</div>' +
 				  '<div :class="preview" ref="preview"><slot><format-component></format-component></slot></div>' +
@@ -895,25 +895,25 @@ const tableComponent = Vue.component('table-component', {
 						'<tr v-for="(row, rowindex) in table">' +
 							'<td v-if="rowindex === 0" v-for="(value,colindex) in row" contenteditable="false" class="noteditable" @click="switchcolumnbar(value)">{{value}} ' +
 							  '<div v-if="columnbar === value" class="columnaction">' + 
-							     '<div class="actionline" @click="addrightcolumn(value)">add right column</div>' +
-								 '<div class="actionline" @click="addleftcolumn(value)">add left column</div>' +
-								 '<div class="actionline" @click="deletecolumn(value)">delete column</div>' +
+							     '<div class="actionline" @click="addrightcolumn(value)">{{ $t(\'add right column\') }}</div>' +
+								 '<div class="actionline" @click="addleftcolumn(value)">{{ $t(\'add left column\') }}</div>' +
+								 '<div class="actionline" @click="deletecolumn(value)">{{ $t(\'delete column\') }}</div>' +
 							  '</div>' +
 							'</td>' +
 							'<th v-if="rowindex === 1" v-for="(value,colindex) in row" :contenteditable="colindex !== 0 ? true : false" @click="switchrowbar(value)" @blur="updatedata($event,colindex,rowindex)" :class="colindex !== 0 ? editable : noteditable">' + 
 							 '<div v-if="colindex === 0 && rowbar === value" class="rowaction">' + 
-							     '<div class="actionline" @click="addaboverow(value)">add row above</div>' +
-								 '<div class="actionline" @click="addbelowrow(value)">add row below</div>' +
-								 '<div class="actionline" @click="deleterow(value)">delete row</div>' +
+							     '<div class="actionline" @click="addaboverow(value)">{{ $t(\'add row above\') }}</div>' +
+								 '<div class="actionline" @click="addbelowrow(value)">{{ $t(\'add row below\') }}</div>' +
+								 '<div class="actionline" @click="deleterow(value)">{{ $t(\'delete row\') }}</div>' +
 							  '</div>' + 
-							'{{value}}</th>' +
+							'{{ $t(value) }}</th>' +
 							'<td v-if="rowindex > 1" v-for="(value,colindex) in row" :contenteditable="colindex !== 0 ? true : false" @click="switchrowbar(value)" @blur="updatedata($event,colindex,rowindex)" :class="colindex !== 0 ? editable : noteditable">' + 
 							 '<div v-if="colindex === 0 && rowbar === value" class="rowaction">' + 
-							     '<div class="actionline" @click="addaboverow(value)">add row above</div>' +
-								 '<div class="actionline" @click="addbelowrow(value)">add row below</div>' +
-								 '<div class="actionline" @click="deleterow(value)">delete row</div>' +
+							     '<div class="actionline" @click="addaboverow(value)">{{ $t(\'add row above\') }}</div>' +
+								 '<div class="actionline" @click="addbelowrow(value)">{{ $t(\'add row below\') }}</div>' +
+								 '<div class="actionline" @click="deleterow(value)">{{ $t(\'delete row\') }}</div>' +
 							  '</div>' +
-							'{{ value }}</td>' +
+							'{{ $t(value) }}</td>' +
 						'</tr>' +
 					'</tbody>' +
 				'</table>' +
@@ -1092,13 +1092,13 @@ const definitionComponent = Vue.component('definition-component', {
 				'<draggable v-model="definitionList" :animation="150" @end="moveDefinition">' +
   			    '<div class="definitionRow" v-for="(definition, dindex) in definitionList" :key="definition.id">' +
 						'<svg class="icon icon-arrows-v"><use xlink:href="#icon-arrows-v"></use></svg>' +
-						'<input type="text" class="definitionTerm" placeholder="term" :value="definition.term" :disabled="disabled" @input="updateterm($event,dindex)" @blur="updateMarkdown">' +
+						'<input type="text" class="definitionTerm" v-bind:placeholder="$t(\'term\')" :value="definition.term" :disabled="disabled" @input="updateterm($event,dindex)" @blur="updateMarkdown">' +
 		  		  '<svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg>' + 
-	  			  '<textarea class="definitionDescription" placeholder="description" v-html="definition.description" :disabled="disabled" @input="updatedescription($event, dindex)" @blur="updateMarkdown"></textarea>' +
+	  			  '<textarea class="definitionDescription" v-bind:placeholder="$t(\'description\')" v-html="definition.description" :disabled="disabled" @input="updatedescription($event, dindex)" @blur="updateMarkdown"></textarea>' +
 					  '<button class="delDL" @click.prevent="deleteDefinition(dindex)"><svg class="icon icon-minus"><use xlink:href="#icon-minus"></use></svg></button>' +
 				  '</div>' +
 				'</draggable>' +
-				'<button class="addDL" @click.prevent="addDefinition()"><svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg> add definition</button>' +
+				'<button class="addDL" @click.prevent="addDefinition()"><svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg> {{ $t(\'add definition\') }}</button>' +
 				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
 				'</div>',
 	mounted: function(){
@@ -1169,7 +1169,7 @@ const videoComponent = Vue.component('video-component', {
 	props: ['compmarkdown', 'disabled', 'load'],
 	template: '<div class="video dropbox">' +
 				'<div class="contenttype"><svg class="icon icon-play"><use xlink:href="#icon-play"></use></svg></div>' +
-				'<label for="video">Link to video: </label><input type="url" ref="markdown" placeholder="https://www.youtube.com/watch?v=" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
+				'<label for="video">{{ $t(\'Link to video\') }}: </label><input type="url" ref="markdown" placeholder="https://www.youtube.com/watch?v=" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
 				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
 				'</div>',
 	methods: {
@@ -1185,16 +1185,16 @@ const imageComponent = Vue.component('image-component', {
 	template: '<div class="dropbox">' +
 				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +
 				'<input type="file" name="image" accept="image/*" class="input-file" @change="onFileChange( $event )" /> ' +
-				'<p>drag a picture or click to select</p>' +
+				'<p>{{ $t(\'drag a picture or click to select\') }}</p>' +
 				'<div class="contenttype"><svg class="icon icon-image"><use xlink:href="#icon-image"></use></svg></div>' +	
 				'<img class="uploadPreview" :src="imgpreview" />' +
 				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
 				'<div class="imgmeta" v-if="imgmeta">' +
-				'<label for="imgalt">Alt-Text: </label><input name="imgalt" type="text" placeholder="alt" @input="createmarkdown" v-model="imgalt" max="100" />' +
-				'<label for="imgtitle">Title: </label><input name="imgtitle" type="text" placeholder="title" v-model="imgtitle" @input="createmarkdown" max="64" />' +
-				'<label for="imgcaption">Caption: </label><input title="imgcaption" type="text" placeholder="caption" v-model="imgcaption" @input="createmarkdown" max="140" />' +
-				'<label for="imgurl">Link: </label><input title="imgurl" type="url" placeholder="url" v-model="imglink" @input="createmarkdown" />' +
-				'<label for="imgclass">Class: </label><select title="imgclass" v-model="imgclass" @change="createmarkdown"><option value="center">Center</option><option value="left">Left</option><option value="right">Right</option><option value="youtube">Youtube</option><option value="vimeo">Vimeo</option></select>' +
+				'<label for="imgalt">{{ $t(\'Alt-Text\') }}: </label><input name="imgalt" type="text" placeholder="alt" @input="createmarkdown" v-model="imgalt" max="100" />' +
+				'<label for="imgtitle">{{ $t(\'Title\') }}: </label><input name="imgtitle" type="text" placeholder="title" v-model="imgtitle" @input="createmarkdown" max="64" />' +
+				'<label for="imgcaption">{{ $t(\'Caption\') }}: </label><input title="imgcaption" type="text" placeholder="caption" v-model="imgcaption" @input="createmarkdown" max="140" />' +
+				'<label for="imgurl">{{ $t(\'Link\') }}: </label><input title="imgurl" type="url" placeholder="url" v-model="imglink" @input="createmarkdown" />' +
+				'<label for="imgclass">{{ $t(\'Class\') }}: </label><select title="imgclass" v-model="imgclass" @change="createmarkdown"><option value="center">{{ $t(\'Center\') }}</option><option value="left">{{ $t(\'Left\') }}</option><option value="right">{{ $t(\'Right\') }}</option><option value="youtube">Youtube</option><option value="vimeo">Vimeo</option></select>' +
 				'<input title="imgid" type="hidden" placeholder="id" v-model="imgid" @input="createmarkdown" max="140" />' +
 				'</div></div>',
 	data: function(){
@@ -1467,6 +1467,11 @@ for(var i = 0; i < formatConfig.length; i++)
 }
 
 let editor = new Vue({
+  i18n: new VueI18n({
+    locale: language,
+    messages: vuejsLabels
+  }),
+  
     delimiters: ['${', '}'],
 	el: '#blox',
 /*	components: componentList, */

system/author/js/vue-meta.js

@@ -3,7 +3,7 @@ const FormBus = new Vue();
 Vue.component('component-text', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<input type="text"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -15,7 +15,7 @@ Vue.component('component-text', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -28,7 +28,7 @@ Vue.component('component-text', {
 Vue.component('component-textarea', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<textarea ' +
 					' :id="id"' +
 					' :readonly="readonly"' +
@@ -39,7 +39,7 @@ Vue.component('component-textarea', {
 					' :value="value"' +
 					' @input="update($event, name)"></textarea>' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -52,7 +52,7 @@ Vue.component('component-textarea', {
 Vue.component('component-url', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<input type="url"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -64,7 +64,7 @@ Vue.component('component-url', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +			  	
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +			  	
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -77,7 +77,7 @@ Vue.component('component-url', {
 Vue.component('component-number', {
 	props: ['class', 'id', 'description', 'min', 'max', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<input type="number"' + 
 					' :id="id"' +
 					' :min="min"' +
@@ -91,7 +91,7 @@ Vue.component('component-number', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -104,7 +104,7 @@ Vue.component('component-number', {
 Vue.component('component-email', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<input type="email"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -116,7 +116,7 @@ Vue.component('component-email', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -129,7 +129,7 @@ Vue.component('component-email', {
 Vue.component('component-tel', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<input type="tel"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -141,7 +141,7 @@ Vue.component('component-tel', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -154,7 +154,7 @@ Vue.component('component-tel', {
 Vue.component('component-password', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<input type="password"' + 
 					' :id="id"' +
 					' :maxlength="maxlength"' +
@@ -166,7 +166,7 @@ Vue.component('component-password', {
 					' :value="value"' +
 					'@input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -179,7 +179,7 @@ Vue.component('component-password', {
 Vue.component('component-date', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<input type="date" ' +
 					' :id="id"' +
 					' :readonly="readonly"' +
@@ -190,7 +190,7 @@ Vue.component('component-date', {
 					' :value="value"' +
 					' @input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -203,7 +203,7 @@ Vue.component('component-date', {
 Vue.component('component-color', {
 	props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<input type="color" ' +
 					' :id="id"' +
 					' :readonly="readonly"' +
@@ -214,7 +214,7 @@ Vue.component('component-color', {
 					' :value="value"' +
 					' @input="update($event, name)">' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -227,7 +227,7 @@ Vue.component('component-color', {
 Vue.component('component-select', {
 	props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'label', 'name', 'type', 'options', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{label}}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 			    '<select' + 
 					' :id="id"' +
 					' :name="name"' +
@@ -238,7 +238,7 @@ Vue.component('component-select', {
 			      	'<option v-for="option,optionkey in options" v-bind:value="optionkey">{{option}}</option>' +
 			    '</select>' +
 			  	'<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	'<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	'<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, name)
@@ -251,7 +251,7 @@ Vue.component('component-select', {
 Vue.component('component-checkbox', {
 	props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'label', 'checkboxlabel', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<label class="control-group">{{ checkboxlabel }}' +
 				  '<input type="checkbox"' + 
 					' :id="id"' +
@@ -263,7 +263,7 @@ Vue.component('component-checkbox', {
 				    ' @change="update($event, value, name)">' +				
 			  	  '<span class="checkmark"></span>' +
 			  	  '<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-				  '<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+				  '<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  	'</label>' +  
 			  '</div>',
 	methods: {
@@ -277,7 +277,7 @@ Vue.component('component-checkbox', {
 Vue.component('component-checkboxlist', {
 	props: ['class', 'description', 'readonly', 'required', 'disabled', 'label', 'checkboxlabel', 'options', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<label v-for="option, optionvalue in options" class="control-group">{{ option }}' +
 				  '<input type="checkbox"' + 
 					' :id="optionvalue"' +
@@ -286,7 +286,7 @@ Vue.component('component-checkboxlist', {
 				  	' @change="update($event, value, optionvalue, name)">' +
 			  	  '<span class="checkmark"></span>' +
 			  	  '<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-			  	  '<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+			  	  '<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  '</div>',
 	methods: {
 		update: function($event, value, optionvalue, name)
@@ -304,7 +304,7 @@ Vue.component('component-checkboxlist', {
 Vue.component('component-radio', {
 	props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'options', 'label', 'name', 'type', 'value', 'errors'],
 	template: '<div class="large">' +
-				'<label>{{ label }}</label>' +
+				'<label>{{ $t(label) }}</label>' +
 				'<label v-for="option,optionvalue in options" class="control-group">{{ option }}' +
 				  '<input type="radio"' + 
 					' :id="id"' +
@@ -317,7 +317,7 @@ Vue.component('component-radio', {
 				  	' @change="update($event, value, name)">' +				
 			  	  '<span class="radiomark"></span>' +
 			  	  '<span v-if="errors[name]" class="error">{{ errors[name] }}</span>' +
-				  '<span v-else class="fielddescription"><small>{{ description }}</small></span>' +
+				  '<span v-else class="fielddescription"><small>{{ $t(description) }}</small></span>' +
 			  	'</label>' +  
 			  '</div>',
 	methods: {
@@ -339,9 +339,9 @@ Vue.component('tab-meta', {
                 	'v-model="formdata[index]"' +
                 	'v-bind="field">' +
 				'</component>' + 
-				'<div v-if="saved" class="metaLarge"><div class="metaSuccess">Saved successfully</div></div>' +
-				'<div v-if="errors" class="metaLarge"><div class="metaErrors">Please correct the errors above</div></div>' +
-				'<div class="large"><input type="submit" @click.prevent="saveInput" value="save"></input></div>' +
+				'<div v-if="saved" class="metaLarge"><div class="metaSuccess">{{ $t(\'Saved successfully\') }}</div></div>' +
+				'<div v-if="errors" class="metaLarge"><div class="metaErrors">{{ $t(\'Please correct the errors above\') }}</div></div>' +
+				'<div class="large"><input type="submit" @click.prevent="saveInput" :value="$t(\'save\')"></input></div>' +
 			  '</form></section>',
 	methods: {
 		selectComponent: function(field)
@@ -356,6 +356,12 @@ Vue.component('tab-meta', {
 })
 
 let meta = new Vue({
+
+  i18n: new VueI18n({
+    locale: language,
+    messages: vuejsLabels
+  }),
+  
     delimiters: ['${', '}'],
 	el: '#metanav',	
 	data: function () {

system/author/layouts/layoutBlox.twig

@@ -28,118 +28,118 @@
 			<defs>
 
 				<symbol id="icon-external-link" viewBox="0 0 28 28">
-					<title>external-link</title>
+					<title>{{ __('EXTERNAL_LINK') }}</title>
 					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
 				</symbol>
 				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
-					<title>text-file</title>
+					<title>{{ __('TEXT_FILE') }}</title>
 					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
 				</symbol>
 				<symbol id="icon-cog" viewBox="0 0 24 28">
-					<title>cog</title>
+					<title>{{ __('COG') }}</title>
 					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
 				</symbol>
 				<symbol id="icon-power-off" viewBox="0 0 24 28">
-					<title>power-off</title>
+					<title>{{ __('POWER_OFF') }}</title>
 					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
 				</symbol>
 				
 				<symbol id="icon-minus" viewBox="0 0 22 28">
-					<title>delete</title>
+					<title>{{ __('DELETE') }}</title>
 					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-19c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h19c0.828 0 1.5 0.672 1.5 1.5z"></path>
 				</symbol>
 				<symbol id="icon-plus" viewBox="0 0 22 28">
-					<title>add</title>
+					<title>{{ __('ADD') }}</title>
 					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-6.5v6.5c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h6.5v-6.5c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5v6.5h6.5c0.828 0 1.5 0.672 1.5 1.5z"></path>
 				</symbol>
 				<symbol id="icon-close" viewBox="0 0 22 28">
-					<title>delete/close</title>
+					<title>{{ __('DELETE_CLOSE') }}</title>
 					<path d="M20.281 20.656c0 0.391-0.156 0.781-0.438 1.062l-2.125 2.125c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-4.594-4.594-4.594 4.594c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-2.125-2.125c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l4.594-4.594-4.594-4.594c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l2.125-2.125c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l4.594 4.594 4.594-4.594c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l2.125 2.125c0.281 0.281 0.438 0.672 0.438 1.062s-0.156 0.781-0.438 1.062l-4.594 4.594 4.594 4.594c0.281 0.281 0.438 0.672 0.438 1.062z"></path>
 				</symbol>
 				<symbol id="icon-home" viewBox="0 0 26 28">
-					<title>home</title>
+					<title>{{ __('HOME') }}</title>
 					<path d="M22 15.5v7.5c0 0.547-0.453 1-1 1h-6v-6h-4v6h-6c-0.547 0-1-0.453-1-1v-7.5c0-0.031 0.016-0.063 0.016-0.094l8.984-7.406 8.984 7.406c0.016 0.031 0.016 0.063 0.016 0.094zM25.484 14.422l-0.969 1.156c-0.078 0.094-0.203 0.156-0.328 0.172h-0.047c-0.125 0-0.234-0.031-0.328-0.109l-10.813-9.016-10.813 9.016c-0.109 0.078-0.234 0.125-0.375 0.109-0.125-0.016-0.25-0.078-0.328-0.172l-0.969-1.156c-0.172-0.203-0.141-0.531 0.063-0.703l11.234-9.359c0.656-0.547 1.719-0.547 2.375 0l3.813 3.187v-3.047c0-0.281 0.219-0.5 0.5-0.5h3c0.281 0 0.5 0.219 0.5 0.5v6.375l3.422 2.844c0.203 0.172 0.234 0.5 0.063 0.703z"></path>
 				</symbol>
 				<symbol id="icon-arrows-v" viewBox="0 0 12 28">
-					<title>move vertical</title>
+					<title>{{ __('MOVE_VERTICAL') }}</title>
 					<path d="M11 5c0 0.547-0.453 1-1 1h-2v16h2c0.547 0 1 0.453 1 1 0 0.266-0.109 0.516-0.297 0.703l-4 4c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-4-4c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h2v-16h-2c-0.547 0-1-0.453-1-1 0-0.266 0.109-0.516 0.297-0.703l4-4c0.187-0.187 0.438-0.297 0.703-0.297s0.516 0.109 0.703 0.297l4 4c0.187 0.187 0.297 0.438 0.297 0.703z"></path>
 				</symbol>
 				<symbol id="icon-folder-o" viewBox="0 0 26 28">
-					<title>folder</title>
+					<title>{{ __('FOLDER') }}</title>
 					<path d="M24 20.5v-11c0-0.828-0.672-1.5-1.5-1.5h-11c-0.828 0-1.5-0.672-1.5-1.5v-1c0-0.828-0.672-1.5-1.5-1.5h-5c-0.828 0-1.5 0.672-1.5 1.5v15c0 0.828 0.672 1.5 1.5 1.5h19c0.828 0 1.5-0.672 1.5-1.5zM26 9.5v11c0 1.922-1.578 3.5-3.5 3.5h-19c-1.922 0-3.5-1.578-3.5-3.5v-15c0-1.922 1.578-3.5 3.5-3.5h5c1.922 0 3.5 1.578 3.5 3.5v0.5h10.5c1.922 0 3.5 1.578 3.5 3.5z"></path>
 				</symbol>
 
 				
 				<symbol id="icon-image" viewBox="0 0 32 32">
-					<title>image</title>
+					<title>{{ __('IMAGE') }}</title>
 					<path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path>
 					<path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
 					<path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path>
 				</symbol>
 				<symbol id="icon-play" viewBox="0 0 32 32">
-					<title>video</title>
+					<title>{{ __('VIDEO') }}</title>
 					<path d="M30.662 5.003c-4.488-0.645-9.448-1.003-14.662-1.003s-10.174 0.358-14.662 1.003c-0.86 3.366-1.338 7.086-1.338 10.997s0.477 7.63 1.338 10.997c4.489 0.645 9.448 1.003 14.662 1.003s10.174-0.358 14.662-1.003c0.86-3.366 1.338-7.086 1.338-10.997s-0.477-7.63-1.338-10.997zM12 22v-12l10 6-10 6z"></path>
 				</symbol>
 				<symbol id="icon-quotes-left" viewBox="0 0 32 32">
-					<title>quotes</title>
+					<title>{{ __('QUOTES') }}</title>
 					<path d="M7.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.357-0.056 0.724-0.086 1.097-0.086zM25.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.358-0.056 0.724-0.086 1.097-0.086z"></path>
 				</symbol>
 				<symbol id="icon-list-numbered" viewBox="0 0 32 32">
-					<title>numbered list</title>
+					<title>{{ __('NUMBERED_LIST') }}</title>
 					<path d="M12 26h20v4h-20zM12 14h20v4h-20zM12 2h20v4h-20zM6 0v8h-2v-6h-2v-2zM4 16.438v1.563h4v2h-6v-4.563l4-1.875v-1.563h-4v-2h6v4.563zM8 22v10h-6v-2h4v-2h-4v-2h4v-2h-4v-2z"></path>
 				</symbol>
 				<symbol id="icon-list2" viewBox="0 0 32 32">
-					<title>bullet list</title>
+					<title>{{ __('BULLET_LIST') }}</title>
 					<path d="M12 2h20v4h-20v-4zM12 14h20v4h-20v-4zM12 26h20v4h-20v-4zM0 4c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 16c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 28c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4z"></path>
 				</symbol>
 				<symbol id="icon-link" viewBox="0 0 32 32">
-					<title>link</title>
+					<title>{{ ('LINK') }}</title>
 					<path d="M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z"></path>
 					<path d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z"></path>
 				</symbol>
 				<symbol id="icon-bold" viewBox="0 0 32 32">
-					<title>bold</title>
+					<title>{{ __('BOLD') }}</title>
 					<path d="M22.121 15.145c1.172-1.392 1.879-3.188 1.879-5.145 0-4.411-3.589-8-8-8h-10v28h12c4.411 0 8-3.589 8-8 0-2.905-1.556-5.453-3.879-6.855zM12 6h3.172c1.749 0 3.172 1.794 3.172 4s-1.423 4-3.172 4h-3.172v-8zM16.969 26h-4.969v-8h4.969c1.827 0 3.313 1.794 3.313 4s-1.486 4-3.313 4z"></path>
 				</symbol>
 				<symbol id="icon-italic" viewBox="0 0 32 32">
-					<title>italic</title>
+					<title>{{ __('ITALIC') }}</title>
 					<path d="M28 2v2h-4l-10 24h4v2h-14v-2h4l10-24h-4v-2z"></path>
 				</symbol>
 				<symbol id="icon-pagebreak" viewBox="0 0 32 32">
-					<title>horizontal line</title>
+					<title>{{ __('HORIZONTAL_LINE') }}</title>
 					<path d="M8 12v-12h24v12h-2v-10h-20v10zM32 18v14h-24v-14h2v12h20v-12zM16 14h4v2h-4zM10 14h4v2h-4zM22 14h4v2h-4zM28 14h4v2h-4zM0 9l6 6-6 6z"></path>
 				</symbol>
 				<symbol id="icon-table2" viewBox="0 0 32 32">
-					<title>table</title>
+					<title>{{ __('TABLE') }}</title>
 					<path d="M0 2v28h32v-28h-32zM12 20v-6h8v6h-8zM20 22v6h-8v-6h8zM20 6v6h-8v-6h8zM10 6v6h-8v-6h8zM2 14h8v6h-8v-6zM22 14h8v6h-8v-6zM22 12v-6h8v6h-8zM2 22h8v6h-8v-6zM22 28v-6h8v6h-8z"></path>
 				</symbol>
 				<symbol id="icon-pilcrow" viewBox="0 0 32 32">
-					<title>paragraph</title>
+					<title>{{ __('PARAGRAPH') }}</title>
 					<path d="M12 0h16v4h-4v28h-4v-28h-4v28h-4v-16c-4.418 0-8-3.582-8-8s3.582-8 8-8z"></path>
 				</symbol>
 				<symbol id="icon-embed" viewBox="0 0 32 32">
-					<title>code</title>
+					<title>{{ __('CODE') }}</title>
 					<path d="M18 23l3 3 10-10-10-10-3 3 7 7z"></path>
 					<path d="M14 9l-3-3-10 10 10 10 3-3-7-7z"></path>
 				</symbol>
 				<symbol id="icon-header" viewBox="0 0 28 28">
-					<title>headline</title>
+					<title>{{ __('HEADLINE') }}</title>
 					<path d="M26.281 26c-1.375 0-2.766-0.109-4.156-0.109-1.375 0-2.75 0.109-4.125 0.109-0.531 0-0.781-0.578-0.781-1.031 0-1.391 1.563-0.797 2.375-1.328 0.516-0.328 0.516-1.641 0.516-2.188l-0.016-6.109c0-0.172 0-0.328-0.016-0.484-0.25-0.078-0.531-0.063-0.781-0.063h-10.547c-0.266 0-0.547-0.016-0.797 0.063-0.016 0.156-0.016 0.313-0.016 0.484l-0.016 5.797c0 0.594 0 2.219 0.578 2.562 0.812 0.5 2.656-0.203 2.656 1.203 0 0.469-0.219 1.094-0.766 1.094-1.453 0-2.906-0.109-4.344-0.109-1.328 0-2.656 0.109-3.984 0.109-0.516 0-0.75-0.594-0.75-1.031 0-1.359 1.437-0.797 2.203-1.328 0.5-0.344 0.516-1.687 0.516-2.234l-0.016-0.891v-12.703c0-0.75 0.109-3.156-0.594-3.578-0.781-0.484-2.453 0.266-2.453-1.141 0-0.453 0.203-1.094 0.75-1.094 1.437 0 2.891 0.109 4.328 0.109 1.313 0 2.641-0.109 3.953-0.109 0.562 0 0.781 0.625 0.781 1.094 0 1.344-1.547 0.688-2.312 1.172-0.547 0.328-0.547 1.937-0.547 2.5l0.016 5c0 0.172 0 0.328 0.016 0.5 0.203 0.047 0.406 0.047 0.609 0.047h10.922c0.187 0 0.391 0 0.594-0.047 0.016-0.172 0.016-0.328 0.016-0.5l0.016-5c0-0.578 0-2.172-0.547-2.5-0.781-0.469-2.344 0.156-2.344-1.172 0-0.469 0.219-1.094 0.781-1.094 1.375 0 2.75 0.109 4.125 0.109 1.344 0 2.688-0.109 4.031-0.109 0.562 0 0.781 0.625 0.781 1.094 0 1.359-1.609 0.672-2.391 1.156-0.531 0.344-0.547 1.953-0.547 2.516l0.016 14.734c0 0.516 0.031 1.875 0.531 2.188 0.797 0.5 2.484-0.141 2.484 1.219 0 0.453-0.203 1.094-0.75 1.094z"></path>
 				</symbol>
 				<symbol id="icon-list-alt" viewBox="0 0 28 28">
-					<title>table of contents</title>
+					<title>{{ __('TABLE_OF_CONTENTS') }}</title>
 					<path d="M6 18.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM6 14.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM6 10.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM24 18.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM24 14.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM24 10.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM26 21.5v-13c0-0.266-0.234-0.5-0.5-0.5h-23c-0.266 0-0.5 0.234-0.5 0.5v13c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM28 4.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"></path>
 				</symbol>
 				<symbol id="icon-dots-two-vertical" viewBox="0 0 20 20">
-					<title>definition</title>
+					<title>{{ __('DEFINITION') }}</title>
 					<path d="M10.001 8.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2zM10.001 11.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z"></path>
 				</symbol>
 				<symbol id="icon-check" viewBox="0 0 20 20">
-					<title>check</title>
+					<title>{{ __('CHECK') }}</title>
 					<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
 				</symbol>
 				<symbol id="icon-cross" viewBox="0 0 20 20">
-					<title>cross</title>
+					<title>{{ __('CROSS') }}</title>
 					<path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
 				</symbol>
 				<symbol id="icon-eye-blocked" viewBox="0 0 32 32">
@@ -171,6 +171,7 @@
 			myaxios.defaults.baseURL =  "{{ base_url }}";
 		</script>
 		<script src="{{ base_url }}/system/author/js/vue.min.js?20200109"></script>
+    <script src="{{ base_url }}/system/author/js/vue-i18n.min.js?20200115"></script>
 		<script src="{{ base_url }}/system/author/js/autosize.min.js?20200109"></script>
 		<script src="{{ base_url }}/system/author/js/sortable.min.js?20200109"></script>
 		<script src="{{ base_url }}/system/author/js/vuedraggable.umd.min.js?20200109"></script>
@@ -179,6 +180,8 @@
 		<script src="{{ base_url }}/system/author/js/vue-blox-config.js?20200109"></script>
 		<script>
 			let formatConfig = {{ settings.formats|json_encode() }};
+      let language = {{ settings.language|json_encode() }};
+      let vuejsLabels = {{ settings.vuejsLabels|json_encode() }};
 		</script>
 
 		{{ assets.renderEditorJS() }}

system/author/layouts/layoutEditor.twig

@@ -28,19 +28,19 @@
 		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 			<defs>
 				<symbol id="icon-external-link" viewBox="0 0 28 28">
-					<title>external-link</title>
+					<title>{{ __('EXTERNAL_LINK') }}</title>
 					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
 				</symbol>
 				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
-					<title>text-file</title>
+					<title>{{ __('TEXT_FILE') }}</title>
 					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
 				</symbol>
 				<symbol id="icon-cog" viewBox="0 0 24 28">
-					<title>cog</title>
+					<title>{{ __('COG') }}</title>
 					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
 				</symbol>
 				<symbol id="icon-power-off" viewBox="0 0 24 28">
-					<title>power-off</title>
+					<title>{{ __('POWER_OFF') }}</title>
 					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
 				</symbol>
 			</defs>
@@ -65,11 +65,17 @@
 			myaxios.defaults.baseURL =  "{{ base_url }}";
 		</script>		
 		<script src="{{ base_url }}/system/author/js/vue.min.js?20200109"></script>
+    <script src="{{ base_url }}/system/author/js/vue-i18n.min.js?20200115"></script>
 		<script src="{{ base_url }}/system/author/js/autosize.min.js?20200109"></script>
 		<script src="{{ base_url }}/system/author/js/sortable.min.js?20200109"></script>
 		<script src="{{ base_url }}/system/author/js/vuedraggable.umd.min.js?20200109"></script>
 		<script src="{{ base_url }}/system/author/js/author.js?20200109"></script>
 
+    <script>
+      let language = {{ settings.language|json_encode() }};
+      let vuejsLabels = {{ settings.vuejsLabels|json_encode() }};
+		</script>
+    
 		{{ assets.renderEditorJS() }}		
 		
 		<script src="{{ base_url }}/system/author/js/vue-publishcontroller.js?20200109"></script>		

system/author/partials/fields.twig

@@ -1,7 +1,7 @@
 <div class="cardField{{ errors[itemName][field.name] ? ' error' : '' }}">
 				
-	<label for="{{ itemName }}[{{ field.name }}]">{{ field.getLabel() }}
-		{% if field.getAttribute('required') %}<strong><abbr title="required">*</abbr></strong>{% endif %}
+	<label for="{{ itemName }}[{{ field.name }}]">{{ __( field.getLabel() ) }}
+		{% if field.getAttribute('required') %}<strong><abbr title="{{ __('required') }}">*</abbr></strong>{% endif %}
 		{% if field.help %}<div class="help">?<span class="tooltip">{{field.help|slice(0,100)}}</span></div>{% endif %}
 	</label>
 
@@ -15,7 +15,7 @@
 
 	{% elseif field.type == 'checkbox' %}
 			
-		<label class="control-group">{{ field.getCheckboxLabel() }}
+		<label class="control-group">{{ __( field.getCheckboxLabel() ) }}
 			<input type="checkbox" name="{{ itemName}}[{{ field.name }}]"{{ field.getAttributeValues() }}{{ field.getAttributes() }}>
 			<span class="checkmark"></span>
 		</label>
@@ -26,7 +26,7 @@
 
 		{% for value,label in options %}
 			
-			<label class="control-group">{{ label }}
+			<label class="control-group">{{ __( label ) }}
 				<input type="checkbox" name="{{ itemName }}[{{ field.name }}][{{value}}]" {{ settings[object][itemName][field.name][value] ? ' checked' : '' }}>
 				<span class="checkmark"></span>
 			</label>

system/author/settings/themes.twig

@@ -32,11 +32,11 @@
 									
 									<div class="cardDescription">
 										<h2>{{ themeName }}</h2>
-										<p>{{ theme.description }}</p>
+										<p>{{ __('TYPEMILL_DESCRIPTION') }}</p>
 										<ul class="cardInfo">
 											<li>{{ theme.version ? theme.version : __('Unknown') }}</li><li>
 											{{ theme.licence ? theme.licence : __('Unkown') }}</li><li>
-											by {{ theme.author ? theme.author : __('Unknown') }}</li>{% if theme.homepage %}<li>
+											{{ __('by') }} {{ theme.author ? theme.author : __('Unknown') }}</li>{% if theme.homepage %}<li>
 											<a href="{{ theme.homepage}}" target="blank">{{ __('Web') }}</a></li>{% endif %}
 										</ul>
 									</div>
@@ -49,7 +49,7 @@
 										{% if field.type == 'fieldset' %}
 											
 											<fieldset class="subfield">
-												<legend>{{ field.legend }}</legend>
+												<legend>{{ __( field.legend ) }}</legend>
 												{% for field in field.fields %}
 													{% include '/partials/fields.twig' with {'itemName' : themeName, 'object' : 'themes' } %}
 												{% endfor %}