' +
'
' +
'
' +
@@ -410,10 +410,12 @@ const inlineFormatsComponent = Vue.component('inline-formats', {
data: function(){
return {
formatBar: false,
+ formatElements: 0,
startX: 0,
startY: 0,
x: 0,
y: 0,
+ z: 150,
textComponent: '',
selectedText: '',
startPos: false,
@@ -500,6 +502,10 @@ const inlineFormatsComponent = Vue.component('inline-formats', {
this.y = event.offsetY - 15;
+ /* calculate the width of the format bar */
+ this.formatElements = document.getElementsByClassName('inlineFormatItem').length;
+ this.z = this.formatElements * 30;
+
this.showInlineFormat = true;
this.selectedText = selectedText;
},
@@ -508,30 +514,35 @@ const inlineFormatsComponent = Vue.component('inline-formats', {
content = this.textComponent.value;
content = content.substring(0, this.startPos) + '**' + this.selectedText + '**' + content.substring(this.endPos, content.length);
this.$parent.updatemarkdown(content);
+ this.showInlineFormat = false;
},
formatItalic()
{
content = this.textComponent.value;
content = content.substring(0, this.startPos) + '_' + this.selectedText + '_' + content.substring(this.endPos, content.length);
this.$parent.updatemarkdown(content);
+ this.showInlineFormat = false;
},
formatCode()
{
content = this.textComponent.value;
content = content.substring(0, this.startPos) + '`' + this.selectedText + '`' + content.substring(this.endPos, content.length);
- this.$parent.updatemarkdown(content);
+ this.$parent.updatemarkdown(content);
+ this.showInlineFormat = false;
},
formatMath()
{
content = this.textComponent.value;
content = content.substring(0, this.startPos) + '$' + this.selectedText + '$' + content.substring(this.endPos, content.length);
this.$parent.updatemarkdown(content);
+ this.showInlineFormat = false;
},
formatLink()
{
if(this.url == "")
{
- this.link = false;
+ this.link = false;
+ this.showInlineFormat = false;
return;
}
content = this.textComponent.value;
@@ -543,11 +554,15 @@ const inlineFormatsComponent = Vue.component('inline-formats', {
openLink()
{
this.link = true;
+ this.url = '';
+ this.z = 200;
this.$nextTick(() => this.$refs.urlinput.focus());
},
closeLink()
{
this.link = false;
+ this.url = '';
+ this.showInlineFormat = false;
}
}
})
diff --git a/system/author/js/vue-meta.js b/system/author/js/vue-meta.js
index 340877c..b55a452 100644
--- a/system/author/js/vue-meta.js
+++ b/system/author/js/vue-meta.js
@@ -1,26 +1,21 @@
const FormBus = new Vue();
Vue.component('component-text', {
- props: ['class', 'placeholder', 'label', 'name', 'type', 'size', 'value', 'errors'],
+ props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
template: '
' +
'' +
- '' +
- '{{ errors[name] }}' +
- '
',
- methods: {
- update: function($event, name)
- {
- FormBus.$emit('forminput', {'name': name, 'value' : $event.target.value});
- },
- },
-})
-
-Vue.component('component-date', {
- props: ['class', 'placeholder', 'readonly', 'label', 'name', 'type', 'size', 'value', 'errors'],
- template: '
' +
- '' +
- '' +
+ '' +
'{{ errors[name] }}' +
+ '{{ description }}' +
'
',
methods: {
update: function($event, name)
@@ -31,11 +26,195 @@ Vue.component('component-date', {
})
Vue.component('component-textarea', {
- props: ['class', 'placeholder', 'label', 'name', 'type', 'size', 'value', 'errors'],
+ props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
template: '
' +
- '' +
- '' +
+ '' +
+ '' +
'{{ errors[name] }}' +
+ '{{ description }}' +
+ '
',
+ methods: {
+ update: function($event, name)
+ {
+ FormBus.$emit('forminput', {'name': name, 'value' : $event.target.value});
+ },
+ },
+})
+
+Vue.component('component-url', {
+ props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: '
' +
+ '' +
+ '' +
+ '{{ errors[name] }}' +
+ '{{ description }}' +
+ '
',
+ methods: {
+ update: function($event, name)
+ {
+ FormBus.$emit('forminput', {'name': name, 'value' : $event.target.value});
+ },
+ },
+})
+
+Vue.component('component-number', {
+ props: ['class', 'id', 'description', 'min', 'max', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: '
' +
+ '' +
+ '' +
+ '{{ errors[name] }}' +
+ '{{ description }}' +
+ '
',
+ methods: {
+ update: function($event, name)
+ {
+ FormBus.$emit('forminput', {'name': name, 'value' : $event.target.value});
+ },
+ },
+})
+
+Vue.component('component-email', {
+ props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: '
' +
+ '' +
+ '' +
+ '{{ errors[name] }}' +
+ '{{ description }}' +
+ '
',
+ methods: {
+ update: function($event, name)
+ {
+ FormBus.$emit('forminput', {'name': name, 'value' : $event.target.value});
+ },
+ },
+})
+
+Vue.component('component-tel', {
+ props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: '
' +
+ '' +
+ '' +
+ '{{ errors[name] }}' +
+ '{{ description }}' +
+ '
',
+ methods: {
+ update: function($event, name)
+ {
+ FormBus.$emit('forminput', {'name': name, 'value' : $event.target.value});
+ },
+ },
+})
+
+Vue.component('component-password', {
+ props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: '
' +
+ '' +
+ '' +
+ '{{ errors[name] }}' +
+ '{{ description }}' +
+ '
',
+ methods: {
+ update: function($event, name)
+ {
+ FormBus.$emit('forminput', {'name': name, 'value' : $event.target.value});
+ },
+ },
+})
+
+Vue.component('component-date', {
+ props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: '
' +
+ '' +
+ '' +
+ '{{ errors[name] }}' +
+ '{{ description }}' +
+ '
',
+ methods: {
+ update: function($event, name)
+ {
+ FormBus.$emit('forminput', {'name': name, 'value' : $event.target.value});
+ },
+ },
+})
+
+Vue.component('component-color', {
+ props: ['class', 'id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: '
' +
+ '' +
+ '' +
+ '{{ errors[name] }}' +
+ '{{ description }}' +
'
',
methods: {
update: function($event, name)
@@ -46,13 +225,20 @@ Vue.component('component-textarea', {
})
Vue.component('component-select', {
- props: ['class', 'placeholder', 'label', 'name', 'type', 'size', 'options', 'value', 'errors'],
+ props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'label', 'name', 'type', 'options', 'value', 'errors'],
template: '
' +
'' +
- '' +
- '{{ errors[name] }}' +
+ '{{ errors[name] }}' +
+ '{{ description }}' +
'
',
methods: {
update: function($event, name)
@@ -63,13 +249,21 @@ Vue.component('component-select', {
})
Vue.component('component-checkbox', {
- props: ['class', 'label', 'checkboxlabel', 'name', 'type', 'value', 'errors'],
+ props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'label', 'checkboxlabel', 'name', 'type', 'value', 'errors'],
template: '
' +
'' +
'' +
'
',
methods: {
@@ -80,14 +274,50 @@ Vue.component('component-checkbox', {
},
})
+Vue.component('component-checkboxlist', {
+ props: ['class', 'description', 'readonly', 'required', 'disabled', 'label', 'checkboxlabel', 'options', 'name', 'type', 'value', 'errors'],
+ template: '
' +
+ '' +
+ '
',
+ methods: {
+ update: function($event, value, optionvalue, name)
+ {
+ /* if value (array) for checkboxlist is not initialized yet */
+ if(value === true || value === false)
+ {
+ value = [optionvalue];
+ }
+ FormBus.$emit('forminput', {'name': name, 'value' : value});
+ },
+ },
+})
+
Vue.component('component-radio', {
- props: ['label', 'options', 'name', 'type', 'value', 'errors'],
- template: '
' +
+ props: ['class', 'id', 'description', 'readonly', 'required', 'disabled', 'options', 'label', 'name', 'type', 'value', 'errors'],
+ template: '
' +
'' +
'' +
'
',
methods: {
@@ -167,12 +397,14 @@ let meta = new Vue({
.then(function (response) {
var formdefinitions = response.data.metadefinitions;
+
for (var key in formdefinitions) {
if (formdefinitions.hasOwnProperty(key)) {
self.tabs.push(key);
self.formErrors[key] = false;
}
}
+
self.formErrorsReset = self.formErrors;
self.formDefinitions = formdefinitions;
diff --git a/system/author/layouts/layoutEditor.twig b/system/author/layouts/layoutEditor.twig
index 50750e1..6070f31 100644
--- a/system/author/layouts/layoutEditor.twig
+++ b/system/author/layouts/layoutEditor.twig
@@ -20,6 +20,9 @@
+
+ {{ assets.renderCSS() }}
+
+
+
+
+ {{ assets.renderEditorJS() }}
+
+
+
+ {{ assets.renderJS() }}
+