1
0
mirror of https://github.com/typemill/typemill.git synced 2025-03-14 17:19:39 +01:00

test i18n vue

This commit is contained in:
trendschau 2020-01-20 19:35:03 +01:00
parent 53f17927fd
commit 1d29b2c216
7 changed files with 56 additions and 39 deletions

View File

@ -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>

View File

@ -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"

View File

@ -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, */

6
system/author/js/vue-i18n.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -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>

View File

@ -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>

View File

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