test i18n vue

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/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 %}