+
on Enter. Let's help.
+ if (isLegacy && event.key === 'Enter') {
+ preventDefault(event);
+ event.stopPropagation();
+ if (afterCursor() == '') {
+ insert('\n ');
+ const pos = save();
+ pos.start = --pos.end;
+ restore(pos);
+ }
+ else {
+ insert('\n');
+ }
+ }
+ }
+ function handleSelfClosingCharacters(event) {
+ const open = `([{'"`;
+ const close = `)]}'"`;
+ const codeAfter = afterCursor();
+ const codeBefore = beforeCursor();
+ const escapeCharacter = codeBefore.substr(codeBefore.length - 1) === '\\';
+ const charAfter = codeAfter.substr(0, 1);
+ if (close.includes(event.key) && !escapeCharacter && charAfter === event.key) {
+ // We already have closing char next to cursor.
+ // Move one char to right.
+ const pos = save();
+ preventDefault(event);
+ pos.start = ++pos.end;
+ restore(pos);
+ }
+ else if (open.includes(event.key)
+ && !escapeCharacter
+ && (`"'`.includes(event.key) || ['', ' ', '\n'].includes(charAfter))) {
+ preventDefault(event);
+ const pos = save();
+ const wrapText = pos.start == pos.end ? '' : getSelection().toString();
+ const text = event.key + wrapText + close[open.indexOf(event.key)];
+ insert(text);
+ pos.start++;
+ pos.end++;
+ restore(pos);
+ }
+ }
+ function handleTabCharacters(event) {
+ if (event.key === 'Tab') {
+ preventDefault(event);
+ if (event.shiftKey) {
+ const before = beforeCursor();
+ let [padding, start,] = findPadding(before);
+ if (padding.length > 0) {
+ const pos = save();
+ // Remove full length tab or just remaining padding
+ const len = Math.min(options.tab.length, padding.length);
+ restore({ start, end: start + len });
+ document.execCommand('delete');
+ pos.start -= len;
+ pos.end -= len;
+ restore(pos);
+ }
+ }
+ else {
+ insert(options.tab);
+ }
+ }
+ }
+ function handleUndoRedo(event) {
+ if (isUndo(event)) {
+ preventDefault(event);
+ at--;
+ const record = history[at];
+ if (record) {
+ editor.innerHTML = record.html;
+ restore(record.pos);
+ }
+ if (at < 0)
+ at = 0;
+ }
+ if (isRedo(event)) {
+ preventDefault(event);
+ at++;
+ const record = history[at];
+ if (record) {
+ editor.innerHTML = record.html;
+ restore(record.pos);
+ }
+ if (at >= history.length)
+ at--;
+ }
+ }
+ function recordHistory() {
+ if (!focus)
+ return;
+ const html = editor.innerHTML;
+ const pos = save();
+ const lastRecord = history[at];
+ if (lastRecord) {
+ if (lastRecord.html === html
+ && lastRecord.pos.start === pos.start
+ && lastRecord.pos.end === pos.end)
+ return;
+ }
+ at++;
+ history[at] = { html, pos };
+ history.splice(at + 1);
+ const maxHistory = 300;
+ if (at > maxHistory) {
+ at = maxHistory;
+ history.splice(0, 1);
+ }
+ }
+ function handlePaste(event) {
+ preventDefault(event);
+ const text = (event.originalEvent || event)
+ .clipboardData
+ .getData('text/plain')
+ .replace(/\r/g, '');
+ const pos = save();
+ insert(text);
+ highlight(editor);
+ restore({
+ start: Math.min(pos.start, pos.end) + text.length,
+ end: Math.min(pos.start, pos.end) + text.length,
+ dir: '<-',
+ });
+ }
+ function visit(editor, visitor) {
+ const queue = [];
+ if (editor.firstChild)
+ queue.push(editor.firstChild);
+ let el = queue.pop();
+ while (el) {
+ if (visitor(el) === 'stop')
+ break;
+ if (el.nextSibling)
+ queue.push(el.nextSibling);
+ if (el.firstChild)
+ queue.push(el.firstChild);
+ el = queue.pop();
+ }
+ }
+ function isCtrl(event) {
+ return event.metaKey || event.ctrlKey;
+ }
+ function isUndo(event) {
+ return isCtrl(event) && !event.shiftKey && event.code === 'KeyZ';
+ }
+ function isRedo(event) {
+ return isCtrl(event) && event.shiftKey && event.code === 'KeyZ';
+ }
+ function insert(text) {
+ text = text
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+ document.execCommand('insertHTML', false, text);
+ }
+ function debounce(cb, wait) {
+ let timeout = 0;
+ return (...args) => {
+ clearTimeout(timeout);
+ timeout = window.setTimeout(() => cb(...args), wait);
+ };
+ }
+ function findPadding(text) {
+ // Find beginning of previous line.
+ let i = text.length - 1;
+ while (i >= 0 && text[i] !== '\n')
+ i--;
+ i++;
+ // Find padding of the line.
+ let j = i;
+ while (j < text.length && /[ \t]/.test(text[j]))
+ j++;
+ return [text.substring(i, j) || '', i, j];
+ }
+ function toString() {
+ return editor.textContent || '';
+ }
+ function preventDefault(event) {
+ event.preventDefault();
+ }
+ function getSelection() {
+ var _a;
+ if (((_a = editor.parentNode) === null || _a === void 0 ? void 0 : _a.nodeType) == Node.DOCUMENT_FRAGMENT_NODE) {
+ return editor.parentNode.getSelection();
+ }
+ return window.getSelection();
+ }
+ return {
+ updateOptions(newOptions) {
+ Object.assign(options, newOptions);
+ },
+ updateCode(code) {
+ editor.textContent = code;
+ highlight(editor);
+ },
+ onUpdate(cb) {
+ callback = cb;
+ },
+ toString,
+ save,
+ restore,
+ recordHistory,
+ destroy() {
+ for (let [type, fn] of listeners) {
+ editor.removeEventListener(type, fn);
+ }
+ },
+ };
+}
diff --git a/system/typemill/author/js/vue-account.js b/system/typemill/author/js/vue-account.js
new file mode 100644
index 0000000..0dc05ad
--- /dev/null
+++ b/system/typemill/author/js/vue-account.js
@@ -0,0 +1,87 @@
+const app = Vue.createApp({
+ template: `
+ `,
+ data() {
+ return {
+ formDefinitions: data.userfields,
+ formData: data.userdata,
+ userroles: data.userroles,
+ message: '',
+ messageClass: '',
+ errors: {},
+ }
+ },
+ mounted() {
+ eventBus.$on('forminput', formdata => {
+ this.formData[formdata.name] = formdata.value;
+ });
+ },
+ methods: {
+ selectComponent: function(type)
+ {
+ return 'component-'+type;
+ },
+ save: function()
+ {
+ this.reset();
+ var self = this;
+
+ tmaxios.put('/api/v1/account',{
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ 'userdata': this.formData
+ })
+ .then(function (response)
+ {
+ self.messageClass = 'bg-teal-500';
+ self.message = response.data.message;
+ })
+ .catch(function (error)
+ {
+ self.messageClass = 'bg-rose-500';
+ self.message = error.response.data.message;
+ if(error.response.data.errors !== undefined)
+ {
+ self.errors = error.response.data.errors;
+ }
+ });
+ },
+ reset: function()
+ {
+ this.errors = {};
+ this.message = '';
+ this.messageClass = '';
+ }
+ },
+})
\ No newline at end of file
diff --git a/system/typemill/author/js/vue-eventbus.js b/system/typemill/author/js/vue-eventbus.js
new file mode 100644
index 0000000..99e145c
--- /dev/null
+++ b/system/typemill/author/js/vue-eventbus.js
@@ -0,0 +1,31 @@
+class Event{
+ constructor(){
+ this.events = {};
+ }
+
+ $on(eventName, fn) {
+ this.events[eventName] = this.events[eventName] || [];
+ this.events[eventName].push(fn);
+ }
+
+ $off(eventName, fn) {
+ if (this.events[eventName]) {
+ for (var i = 0; i < this.events[eventName].length; i++) {
+ if (this.events[eventName][i] === fn) {
+ this.events[eventName].splice(i, 1);
+ break;
+ }
+ };
+ }
+ }
+
+ $emit(eventName, data) {
+ if (this.events[eventName]) {
+ this.events[eventName].forEach(function(fn) {
+ fn(data);
+ });
+ }
+ }
+};
+
+const eventBus = new Event();
diff --git a/system/typemill/author/js/vue-plugins.js b/system/typemill/author/js/vue-plugins.js
new file mode 100644
index 0000000..7f11a91
--- /dev/null
+++ b/system/typemill/author/js/vue-plugins.js
@@ -0,0 +1,118 @@
+const app = Vue.createApp({
+ template: `
+ `,
+ data() {
+ return {
+ current: '',
+ formDefinitions: data.plugins,
+ formData: data.settings,
+ message: '',
+ messageClass: '',
+ errors: {},
+ userroles: false
+ }
+ },
+ mounted() {
+ eventBus.$on('forminput', formdata => {
+ this.formData[this.current][formdata.name] = formdata.value;
+ });
+ },
+ methods: {
+ setCurrent: function(name)
+ {
+ if(this.current == name)
+ {
+ this.current = '';
+ }
+ else
+ {
+ this.current = name;
+ }
+ },
+ selectComponent: function(type)
+ {
+ return 'component-'+type;
+ },
+ save: function()
+ {
+ this.reset();
+ var self = this;
+
+ tmaxios.post('/api/v1/plugin',{
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ 'plugin': this.current,
+ 'settings': this.formData[this.current]
+ })
+ .then(function (response)
+ {
+ self.messageClass = 'bg-teal-500';
+ self.message = response.data.message;
+ })
+ .catch(function (error)
+ {
+ self.messageClass = 'bg-rose-500';
+ self.message = error.response.data.message;
+ if(error.response.data.errors !== undefined)
+ {
+ self.errors = error.response.data.errors;
+ }
+ });
+ },
+ reset: function()
+ {
+ this.errors = {};
+ this.message = '';
+ this.messageClass = '';
+ }
+ },
+})
\ No newline at end of file
diff --git a/system/typemill/author/js/vue-shared.js b/system/typemill/author/js/vue-shared.js
new file mode 100644
index 0000000..cfe2949
--- /dev/null
+++ b/system/typemill/author/js/vue-shared.js
@@ -0,0 +1,1457 @@
+app.component('component-text', {
+ props: ['id', 'description', 'maxlength', 'hidden', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'css', 'errors'],
+ template: `
+
+ `,
data() {
return {
- message: 'Add system forms with vue here',
- root: document.getElementById("main").dataset.url,
currentTab: 'System',
tabs: [],
- formDefinitions: data.system.fields,
+ formDefinitions: data.system,
formData: data.settings,
- formErrors: {},
- formErrorsReset: {},
- item: false,
- userroles: false,
- saved: false,
+ message: '',
+ messageClass: '',
+ errors: {},
}
},
- computed: {
- currentTabComponent: function () {
- if(this.currentTab == 'Content')
- {
- editor.showEditor = 'show';
- posts.showPosts = 'show';
- }
- else
- {
- editor.showEditor = 'hidden';
- posts.showPosts = 'hidden';
- return 'tab-' + this.currentTab.toLowerCase()
- }
- }
- },
- mounted() {
+ mounted() {
+
for (var key in this.formDefinitions)
{
if (this.formDefinitions.hasOwnProperty(key))
{
- this.tabs.push(key);
- this.formErrors[key] = false;
+ this.tabs.push(this.formDefinitions[key].legend);
+ this.errors[key] = false;
}
}
- this.formErrorsReset = this.formErrors;
+
+ eventBus.$on('forminput', formdata => {
+ this.formData[formdata.name] = formdata.value;
+ });
+
},
methods: {
- selectComponent: function(field)
+ selectComponent: function(type)
{
- return 'component-'+field.type;
+ return 'component-'+type;
},
- },
-}).mount('#systemsettings')
+ activateTab: function(tab){
+ this.currentTab = tab;
+ },
+ save: function()
+ {
+ this.reset();
+ var self = this;
+
+ tmaxios.post('/api/v1/settings',{
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ 'settings': this.formData
+ })
+ .then(function (response)
+ {
+ self.messageClass = 'bg-teal-500';
+ self.message = response.data.message;
+ })
+ .catch(function (error)
+ {
+ self.messageClass = 'bg-rose-500';
+ self.message = error.response.data.message;
+ if(error.response.data.errors !== undefined)
+ {
+ self.errors = error.response.data.errors;
+ }
+ });
+ },
+ reset: function()
+ {
+ this.errors = {};
+ this.message = '';
+ this.messageClass = '';
+ }
+ },
+})
/*
diff --git a/system/typemill/author/js/vue-themes.js b/system/typemill/author/js/vue-themes.js
new file mode 100644
index 0000000..13b29de
--- /dev/null
+++ b/system/typemill/author/js/vue-themes.js
@@ -0,0 +1,130 @@
+const app = Vue.createApp({
+ template: `
+ `,
+ data() {
+ return {
+ current: '',
+ formDefinitions: data.themes,
+ formData: data.settings,
+ message: '',
+ messageClass: '',
+ errors: {},
+ userroles: false
+ }
+ },
+ mounted() {
+ eventBus.$on('forminput', formdata => {
+ this.formData[this.current][formdata.name] = formdata.value;
+ });
+ },
+ methods: {
+ setCurrent: function(name)
+ {
+ if(this.current == name)
+ {
+ this.current = '';
+ }
+ else
+ {
+ this.current = name;
+ }
+ },
+ selectComponent: function(type)
+ {
+ return 'component-'+type;
+ },
+ save: function()
+ {
+ this.reset();
+ var self = this;
+
+ tmaxios.post('/api/v1/theme',{
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ 'theme': this.current,
+ 'settings': this.formData[this.current]
+ })
+ .then(function (response)
+ {
+ self.messageClass = 'bg-teal-500';
+ self.message = response.data.message;
+
+ self.updateCSS();
+ })
+ .catch(function (error)
+ {
+ self.messageClass = 'bg-rose-500';
+ self.message = error.response.data.message;
+ if(error.response.data.errors !== undefined)
+ {
+ self.errors = error.response.data.errors;
+ }
+ });
+ },
+ updateCSS: function()
+ {
+ /* check if css has been modified */
+ /* if so, send to api endpoint */
+ },
+ reset: function()
+ {
+ this.errors = {};
+ this.message = '';
+ this.messageClass = '';
+ }
+ },
+})
\ No newline at end of file
diff --git a/system/typemill/author/js/vue-translate.js b/system/typemill/author/js/vue-translate.js
new file mode 100644
index 0000000..9b06a45
--- /dev/null
+++ b/system/typemill/author/js/vue-translate.js
@@ -0,0 +1,13 @@
+app.config.globalProperties.$filters = {
+ translate(value)
+ {
+ if (!value) return ''
+ translation_key = value.replace(/[ ]/g,"_").replace(/[.]/g, "_").replace(/[,]/g, "_").replace(/[-]/g, "_").replace(/[,]/g,"_").toUpperCase()
+ translation_value = data.labels[translation_key]
+ if(!translation_value || translation_value.length === 0){
+ return value
+ } else {
+ return data.labels[translation_key]
+ }
+ }
+}
diff --git a/system/typemill/author/js/vue-users.js b/system/typemill/author/js/vue-users.js
new file mode 100644
index 0000000..4e96261
--- /dev/null
+++ b/system/typemill/author/js/vue-users.js
@@ -0,0 +1,407 @@
+const app = Vue.createApp({
+ template: `
+
`,
+ methods: {
+ getEditLink: function(username){
+ return this.$root.$data.root + '/tm/user/' + username;
+ },
+ }
+})
+
+app.component('pagination', {
+ props: ['page'],
+ template: '',
+ methods: {
+ goto: function(page){
+
+ this.$root.$data.pagenumber = page;
+ let usernames = this.$root.getusernamesforpage();
+ this.$root.getuserdata(usernames);
+ },
+ checkActive: function()
+ {
+ if(this.page == this.$root.$data.pagenumber)
+ {
+ return 'bg-stone-200';
+ }
+ return 'bg-stone-100';
+ }
+ }
+})
+
+
+
+
+/*
+const app = Vue.createApp({
+ template: `
+ `,
+ data() {
+ return {
+ current: '',
+ formDefinitions: data.themes,
+ formData: data.settings,
+ message: '',
+ messageClass: '',
+ errors: {},
+ userroles: false
+ }
+ },
+ mounted() {
+ eventBus.$on('forminput', formdata => {
+ this.formData[this.current][formdata.name] = formdata.value;
+ });
+ },
+ methods: {
+ setCurrent: function(name)
+ {
+ if(this.current == name)
+ {
+ this.current = '';
+ }
+ else
+ {
+ this.current = name;
+ }
+ },
+ selectComponent: function(type)
+ {
+ return 'component-'+type;
+ },
+ save: function()
+ {
+ this.reset();
+ var self = this;
+
+ tmaxios.post('/api/v1/theme',{
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ 'theme': this.current,
+ 'settings': this.formData[this.current]
+ })
+ .then(function (response)
+ {
+ self.messageClass = 'bg-teal-500';
+ self.message = response.data.message;
+
+ self.updateCSS();
+ })
+ .catch(function (error)
+ {
+ self.messageClass = 'bg-rose-500';
+ self.message = error.response.data.message;
+ if(error.response.data.errors !== undefined)
+ {
+ self.errors = error.response.data.errors;
+ }
+ });
+ },
+ reset: function()
+ {
+ this.errors = {};
+ this.message = '';
+ this.messageClass = '';
+ }
+ },
+})
+*/
\ No newline at end of file
diff --git a/system/typemill/author/layouts/layoutSystem.twig b/system/typemill/author/layouts/layoutSystem.twig
index 07dfd8f..c19bd0c 100644
--- a/system/typemill/author/layouts/layoutSystem.twig
+++ b/system/typemill/author/layouts/layoutSystem.twig
@@ -19,9 +19,6 @@
-
{{ assets.renderCSS() }}
@@ -39,7 +36,7 @@
-
+
{% block content %}{% endblock %}
@@ -52,36 +49,21 @@
-
-
-
+
+
{% block javascript %}{% endblock %}
{{ assets.renderJS() }}
diff --git a/system/typemill/author/partials/mainNavi.twig b/system/typemill/author/partials/mainNavi.twig
index d895084..43882ea 100644
--- a/system/typemill/author/partials/mainNavi.twig
+++ b/system/typemill/author/partials/mainNavi.twig
@@ -5,7 +5,7 @@
Login
diff --git a/system/typemill/author/css/custom.css b/system/typemill/author/css/custom.css index fceb575..4182565 100644 --- a/system/typemill/author/css/custom.css +++ b/system/typemill/author/css/custom.css @@ -15,3 +15,15 @@ position: relative; } +[v-cloak] { + display: none; +} +.initial-enter-active, +.initial-leave-active { + transition: opacity 0.2s ease; +} + +.initial-enter-from, +.initial-leave-to { + opacity: 0; +} \ No newline at end of file diff --git a/system/typemill/author/css/output.css b/system/typemill/author/css/output.css index 47ef2f6..978f593 100644 --- a/system/typemill/author/css/output.css +++ b/system/typemill/author/css/output.css @@ -616,6 +616,10 @@ video { } } +.pointer-events-none { + pointer-events: none; +} + .static { position: static; } @@ -628,6 +632,39 @@ video { position: relative; } +.inset-y-0 { + top: 0px; + bottom: 0px; +} + +.left-0 { + left: 0px; +} + +.right-0 { + right: 0px; +} + +.top-0 { + top: 0px; +} + +.top-1 { + top: 0.25rem; +} + +.right-1 { + right: 0.25rem; +} + +.bottom-0 { + bottom: 0px; +} + +.top-3 { + top: 0.75rem; +} + .m-0 { margin: 0px; } @@ -641,10 +678,59 @@ video { margin-bottom: 0.5rem; } +.my-8 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.my-5 { + margin-top: 1.25rem; + margin-bottom: 1.25rem; +} + +.my-1 { + margin-top: 0.25rem; + margin-bottom: 0.25rem; +} + +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.my-3 { + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + .mt-6 { margin-top: 1.5rem; } +.mb-3 { + margin-bottom: 0.75rem; +} + +.mt-5 { + margin-top: 1.25rem; +} + +.mb-5 { + margin-bottom: 1.25rem; +} + +.mb-1 { + margin-bottom: 0.25rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + .mt-2 { margin-top: 0.5rem; } @@ -653,8 +739,16 @@ video { margin-top: 1rem; } -.mt-5 { - margin-top: 1.25rem; +.mb-4 { + margin-bottom: 1rem; +} + +.mt-auto { + margin-top: auto; +} + +.mt-8 { + margin-top: 2rem; } .mt-7 { @@ -669,10 +763,6 @@ video { margin-right: 0.5rem; } -.mb-1 { - margin-bottom: 0.25rem; -} - .block { display: block; } @@ -689,6 +779,10 @@ video { display: flex; } +.inline-flex { + display: inline-flex; +} + .table { display: table; } @@ -697,6 +791,26 @@ video { display: none; } +.h-8 { + height: 2rem; +} + +.h-12 { + height: 3rem; +} + +.h-6 { + height: 1.5rem; +} + +.h-5 { + height: 1.25rem; +} + +.h-64 { + height: 16rem; +} + .min-h-screen { min-height: 100vh; } @@ -709,22 +823,38 @@ video { width: 100%; } -.w-1\/5 { - width: 20%; +.w-half { + width: 48%; } -.w-4\/5 { - width: 80%; +.w-6 { + width: 1.5rem; } -.w-1\/4 { - width: 25%; +.w-5 { + width: 1.25rem; +} + +.w-2\/3 { + width: 66.666667%; +} + +.w-1\/3 { + width: 33.333333%; +} + +.w-10 { + width: 2.5rem; } .w-3\/4 { width: 75%; } +.w-1\/4 { + width: 25%; +} + .max-w-md { max-width: 28rem; } @@ -733,14 +863,6 @@ video { max-width: 72rem; } -.max-w-xl { - max-width: 36rem; -} - -.max-w-sm { - max-width: 24rem; -} - .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -749,10 +871,22 @@ video { cursor: pointer; } +.flex-col { + flex-direction: column; +} + +.flex-wrap { + flex-wrap: wrap; +} + .content-center { align-content: center; } +.items-start { + align-items: flex-start; +} + .items-center { align-items: center; } @@ -769,6 +903,24 @@ video { justify-content: space-between; } +.justify-around { + justify-content: space-around; +} + +.overflow-auto { + overflow: auto; +} + +.overflow-hidden { + overflow: hidden; +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + .rounded { border-radius: 0.25rem; } @@ -781,10 +933,18 @@ video { border-width: 0px; } +.border-2 { + border-width: 2px; +} + .border-b-2 { border-bottom-width: 2px; } +.border-b-4 { + border-bottom-width: 4px; +} + .border-l-2 { border-left-width: 2px; } @@ -793,10 +953,6 @@ video { border-right-width: 2px; } -.border-b-4 { - border-bottom-width: 4px; -} - .border-l-4 { border-left-width: 4px; } @@ -815,6 +971,16 @@ video { border-color: rgb(231 229 228 / var(--tw-border-opacity)); } +.border-red-500 { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity)); +} + +.border-stone-300 { + --tw-border-opacity: 1; + border-color: rgb(214 211 209 / var(--tw-border-opacity)); +} + .border-stone-700 { --tw-border-opacity: 1; border-color: rgb(68 64 60 / var(--tw-border-opacity)); @@ -825,9 +991,19 @@ video { border-color: rgb(245 245 244 / var(--tw-border-opacity)); } -.border-slate-100 { +.border-stone-50 { --tw-border-opacity: 1; - border-color: rgb(241 245 249 / var(--tw-border-opacity)); + border-color: rgb(250 250 249 / var(--tw-border-opacity)); +} + +.border-white { + --tw-border-opacity: 1; + border-color: rgb(255 255 255 / var(--tw-border-opacity)); +} + +.border-cyan-500 { + --tw-border-opacity: 1; + border-color: rgb(6 182 212 / var(--tw-border-opacity)); } .border-slate-200 { @@ -835,9 +1011,9 @@ video { border-color: rgb(226 232 240 / var(--tw-border-opacity)); } -.bg-rose-600 { +.bg-teal-600 { --tw-bg-opacity: 1; - background-color: rgb(225 29 72 / var(--tw-bg-opacity)); + background-color: rgb(13 148 136 / var(--tw-bg-opacity)); } .bg-white { @@ -845,19 +1021,29 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.bg-stone-100 { - --tw-bg-opacity: 1; - background-color: rgb(245 245 244 / var(--tw-bg-opacity)); -} - .bg-stone-700 { --tw-bg-opacity: 1; background-color: rgb(68 64 60 / var(--tw-bg-opacity)); } -.bg-stone-50 { +.bg-teal-500 { --tw-bg-opacity: 1; - background-color: rgb(250 250 249 / var(--tw-bg-opacity)); + background-color: rgb(20 184 166 / var(--tw-bg-opacity)); +} + +.bg-rose-500 { + --tw-bg-opacity: 1; + background-color: rgb(244 63 94 / var(--tw-bg-opacity)); +} + +.bg-stone-100 { + --tw-bg-opacity: 1; + background-color: rgb(245 245 244 / var(--tw-bg-opacity)); +} + +.bg-red-100 { + --tw-bg-opacity: 1; + background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } .bg-stone-200 { @@ -865,28 +1051,35 @@ video { background-color: rgb(231 229 228 / var(--tw-bg-opacity)); } -.bg-stone-400 { +.bg-stone-50 { --tw-bg-opacity: 1; - background-color: rgb(168 162 158 / var(--tw-bg-opacity)); -} - -.bg-stone-300 { - --tw-bg-opacity: 1; - background-color: rgb(214 211 209 / var(--tw-bg-opacity)); + background-color: rgb(250 250 249 / var(--tw-bg-opacity)); } .bg-clip-padding { background-clip: padding-box; } -.p-3 { - padding: 0.75rem; +.bg-center { + background-position: center; } .p-4 { padding: 1rem; } +.p-3 { + padding: 0.75rem; +} + +.p-8 { + padding: 2rem; +} + +.p-1 { + padding: 0.25rem; +} + .p-2 { padding: 0.5rem; } @@ -916,11 +1109,49 @@ video { padding-bottom: 0.75rem; } +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .px-4 { padding-left: 1rem; padding-right: 1rem; } +.pl-3 { + padding-left: 0.75rem; +} + +.pl-10 { + padding-left: 2.5rem; +} + +.pr-2 { + padding-right: 0.5rem; +} + +.pr-1 { + padding-right: 0.25rem; +} + +.pr-10 { + padding-right: 2.5rem; +} + +.pr-3 { + padding-right: 0.75rem; +} + +.pl-8 { + padding-left: 2rem; +} + .pt-4 { padding-top: 1rem; } @@ -929,12 +1160,8 @@ video { padding-bottom: 0.75rem; } -.pb-2 { - padding-bottom: 0.5rem; -} - -.pb-1 { - padding-bottom: 0.25rem; +.text-right { + text-align: right; } .text-6xl { @@ -952,11 +1179,31 @@ video { line-height: 1rem; } +.text-lg { + font-size: 1.125rem; + line-height: 1.75rem; +} + +.text-xl { + font-size: 1.25rem; + line-height: 1.75rem; +} + +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + .text-2xl { font-size: 1.5rem; line-height: 2rem; } +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + .font-normal { font-weight: 400; } @@ -1000,17 +1247,51 @@ video { color: rgb(225 29 72 / var(--tw-text-opacity)); } +.text-teal-500 { + --tw-text-opacity: 1; + color: rgb(20 184 166 / var(--tw-text-opacity)); +} + +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); +} + +.text-gray-500 { + --tw-text-opacity: 1; + color: rgb(107 114 128 / var(--tw-text-opacity)); +} + +.text-teal-600 { + --tw-text-opacity: 1; + color: rgb(13 148 136 / var(--tw-text-opacity)); +} + .underline { -webkit-text-decoration-line: underline; text-decoration-line: underline; } +.no-underline { + -webkit-text-decoration-line: none; + text-decoration-line: none; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } +.outline { + outline-style: solid; +} + +.blur { + --tw-blur: blur(8px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + .drop-shadow-md { --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); @@ -1044,23 +1325,26 @@ video { transition-duration: 150ms; } +.duration-100 { + transition-duration: 100ms; +} + .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } +.hover\:border-b-4:hover { + border-bottom-width: 4px; +} + .hover\:border-stone-700:hover { --tw-border-opacity: 1; border-color: rgb(68 64 60 / var(--tw-border-opacity)); } -.hover\:border-cyan-300:hover { +.hover\:border-teal-500:hover { --tw-border-opacity: 1; - border-color: rgb(103 232 249 / var(--tw-border-opacity)); -} - -.hover\:border-cyan-500:hover { - --tw-border-opacity: 1; - border-color: rgb(6 182 212 / var(--tw-border-opacity)); + border-color: rgb(20 184 166 / var(--tw-border-opacity)); } .hover\:bg-gray-200:hover { @@ -1068,9 +1352,24 @@ video { background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.hover\:bg-stone-700:hover { +.hover\:bg-stone-900:hover { --tw-bg-opacity: 1; - background-color: rgb(68 64 60 / var(--tw-bg-opacity)); + background-color: rgb(28 25 23 / var(--tw-bg-opacity)); +} + +.hover\:bg-teal-600:hover { + --tw-bg-opacity: 1; + background-color: rgb(13 148 136 / var(--tw-bg-opacity)); +} + +.hover\:bg-stone-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(231 229 228 / var(--tw-bg-opacity)); +} + +.hover\:bg-stone-100:hover { + --tw-bg-opacity: 1; + background-color: rgb(245 245 244 / var(--tw-bg-opacity)); } .hover\:bg-stone-50:hover { @@ -1078,9 +1377,9 @@ video { background-color: rgb(250 250 249 / var(--tw-bg-opacity)); } -.hover\:text-white:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); +.hover\:underline:hover { + -webkit-text-decoration-line: underline; + text-decoration-line: underline; } .focus\:border-blue-600:focus { @@ -1093,11 +1392,6 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } -.focus\:bg-stone-700:focus { - --tw-bg-opacity: 1; - background-color: rgb(68 64 60 / var(--tw-bg-opacity)); -} - .focus\:bg-stone-50:focus { --tw-bg-opacity: 1; background-color: rgb(250 250 249 / var(--tw-bg-opacity)); @@ -1108,11 +1402,6 @@ video { color: rgb(55 65 81 / var(--tw-text-opacity)); } -.focus\:text-white:focus { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; @@ -1124,17 +1413,14 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.active\:bg-stone-700:active { - --tw-bg-opacity: 1; - background-color: rgb(68 64 60 / var(--tw-bg-opacity)); -} - .active\:bg-stone-50:active { --tw-bg-opacity: 1; background-color: rgb(250 250 249 / var(--tw-bg-opacity)); } -.active\:text-white:active { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); +@media (prefers-color-scheme: dark) { + .dark\:text-gray-400 { + --tw-text-opacity: 1; + color: rgb(156 163 175 / var(--tw-text-opacity)); + } } \ No newline at end of file diff --git a/system/typemill/author/js/codejar.js b/system/typemill/author/js/codejar.js new file mode 100644 index 0000000..8260b3f --- /dev/null +++ b/system/typemill/author/js/codejar.js @@ -0,0 +1,449 @@ +const globalWindow = window; +export function CodeJar(editor, highlight, opt = {}) { + const options = Object.assign({ tab: '\t', indentOn: /[({\[]$/, moveToNewLine: /^[)}\]]/, spellcheck: false, catchTab: true, preserveIdent: true, addClosing: true, history: true, window: globalWindow }, opt); + const window = options.window; + const document = window.document; + let listeners = []; + let history = []; + let at = -1; + let focus = false; + let callback; + let prev; // code content prior keydown event + editor.setAttribute('contenteditable', 'plaintext-only'); + editor.setAttribute('spellcheck', options.spellcheck ? 'true' : 'false'); + editor.style.outline = 'none'; + editor.style.overflowWrap = 'break-word'; + editor.style.overflowY = 'auto'; + editor.style.whiteSpace = 'pre-wrap'; + let isLegacy = false; // true if plaintext-only is not supported + highlight(editor); + if (editor.contentEditable !== 'plaintext-only') + isLegacy = true; + if (isLegacy) + editor.setAttribute('contenteditable', 'true'); + const debounceHighlight = debounce(() => { + const pos = save(); + highlight(editor, pos); + restore(pos); + }, 30); + let recording = false; + const shouldRecord = (event) => { + return !isUndo(event) && !isRedo(event) + && event.key !== 'Meta' + && event.key !== 'Control' + && event.key !== 'Alt' + && !event.key.startsWith('Arrow'); + }; + const debounceRecordHistory = debounce((event) => { + if (shouldRecord(event)) { + recordHistory(); + recording = false; + } + }, 300); + const on = (type, fn) => { + listeners.push([type, fn]); + editor.addEventListener(type, fn); + }; + on('keydown', event => { + if (event.defaultPrevented) + return; + prev = toString(); + if (options.preserveIdent) + handleNewLine(event); + else + legacyNewLineFix(event); + if (options.catchTab) + handleTabCharacters(event); + if (options.addClosing) + handleSelfClosingCharacters(event); + if (options.history) { + handleUndoRedo(event); + if (shouldRecord(event) && !recording) { + recordHistory(); + recording = true; + } + } + if (isLegacy) + restore(save()); + }); + on('keyup', event => { + if (event.defaultPrevented) + return; + if (event.isComposing) + return; + if (prev !== toString()) + debounceHighlight(); + debounceRecordHistory(event); + if (callback) + callback(toString()); + }); + on('focus', _event => { + focus = true; + }); + on('blur', _event => { + focus = false; + }); + on('paste', event => { + recordHistory(); + handlePaste(event); + recordHistory(); + if (callback) + callback(toString()); + }); + function save() { + const s = getSelection(); + const pos = { start: 0, end: 0, dir: undefined }; + let { anchorNode, anchorOffset, focusNode, focusOffset } = s; + if (!anchorNode || !focusNode) + throw 'error1'; + // Selection anchor and focus are expected to be text nodes, + // so normalize them. + if (anchorNode.nodeType === Node.ELEMENT_NODE) { + const node = document.createTextNode(''); + anchorNode.insertBefore(node, anchorNode.childNodes[anchorOffset]); + anchorNode = node; + anchorOffset = 0; + } + if (focusNode.nodeType === Node.ELEMENT_NODE) { + const node = document.createTextNode(''); + focusNode.insertBefore(node, focusNode.childNodes[focusOffset]); + focusNode = node; + focusOffset = 0; + } + visit(editor, el => { + if (el === anchorNode && el === focusNode) { + pos.start += anchorOffset; + pos.end += focusOffset; + pos.dir = anchorOffset <= focusOffset ? '->' : '<-'; + return 'stop'; + } + if (el === anchorNode) { + pos.start += anchorOffset; + if (!pos.dir) { + pos.dir = '->'; + } + else { + return 'stop'; + } + } + else if (el === focusNode) { + pos.end += focusOffset; + if (!pos.dir) { + pos.dir = '<-'; + } + else { + return 'stop'; + } + } + if (el.nodeType === Node.TEXT_NODE) { + if (pos.dir != '->') + pos.start += el.nodeValue.length; + if (pos.dir != '<-') + pos.end += el.nodeValue.length; + } + }); + // collapse empty text nodes + editor.normalize(); + return pos; + } + function restore(pos) { + const s = getSelection(); + let startNode, startOffset = 0; + let endNode, endOffset = 0; + if (!pos.dir) + pos.dir = '->'; + if (pos.start < 0) + pos.start = 0; + if (pos.end < 0) + pos.end = 0; + // Flip start and end if the direction reversed + if (pos.dir == '<-') { + const { start, end } = pos; + pos.start = end; + pos.end = start; + } + let current = 0; + visit(editor, el => { + if (el.nodeType !== Node.TEXT_NODE) + return; + const len = (el.nodeValue || '').length; + if (current + len > pos.start) { + if (!startNode) { + startNode = el; + startOffset = pos.start - current; + } + if (current + len > pos.end) { + endNode = el; + endOffset = pos.end - current; + return 'stop'; + } + } + current += len; + }); + if (!startNode) + startNode = editor, startOffset = editor.childNodes.length; + if (!endNode) + endNode = editor, endOffset = editor.childNodes.length; + // Flip back the selection + if (pos.dir == '<-') { + [startNode, startOffset, endNode, endOffset] = [endNode, endOffset, startNode, startOffset]; + } + s.setBaseAndExtent(startNode, startOffset, endNode, endOffset); + } + function beforeCursor() { + const s = getSelection(); + const r0 = s.getRangeAt(0); + const r = document.createRange(); + r.selectNodeContents(editor); + r.setEnd(r0.startContainer, r0.startOffset); + return r.toString(); + } + function afterCursor() { + const s = getSelection(); + const r0 = s.getRangeAt(0); + const r = document.createRange(); + r.selectNodeContents(editor); + r.setStart(r0.endContainer, r0.endOffset); + return r.toString(); + } + function handleNewLine(event) { + if (event.key === 'Enter') { + const before = beforeCursor(); + const after = afterCursor(); + let [padding] = findPadding(before); + let newLinePadding = padding; + // If last symbol is "{" ident new line + if (options.indentOn.test(before)) { + newLinePadding += options.tab; + } + // Preserve padding + if (newLinePadding.length > 0) { + preventDefault(event); + event.stopPropagation(); + insert('\n' + newLinePadding); + } + else { + legacyNewLineFix(event); + } + // Place adjacent "}" on next line + if (newLinePadding !== padding && options.moveToNewLine.test(after)) { + const pos = save(); + insert('\n' + padding); + restore(pos); + } + } + } + function legacyNewLineFix(event) { + // Firefox does not support plaintext-only mode + // and puts
+
+
+
+
+ -
+
-
+ ++ +++
{{theme.name}}
+author: {{theme.author}} | version: {{theme.version}} | {{theme.licence}}+{{theme.description}}
++ + ++
+
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-textarea', {
+ props: ['id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'css', 'value', 'errors'],
+ data: function () {
+ return {
+ textareaclass: ''
+ }
+ },
+ template: `{{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ formatValue: function(value)
+ {
+ if(value !== null && typeof value === 'object')
+ {
+ this.textareaclass = 'codearea';
+ return JSON.stringify(value, undefined, 4);
+ }
+ return value;
+ },
+ },
+})
+
+app.component('component-select', {
+ props: ['id', 'description', 'readonly', 'required', 'disabled', 'label', 'name', 'type', 'css', 'options', 'value', 'errors', 'dataset', 'userroles'],
+ template: `{{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-checkbox', {
+ props: ['id', 'description', 'readonly', 'required', 'disabled', 'label', 'checkboxlabel', 'name', 'type', 'css', 'value', 'errors'],
+ template: `{{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
`,
+ methods: {
+ update: function($event, value, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': value});
+ },
+ },
+})
+
+app.component('component-checkboxlist', {
+ props: ['description', 'readonly', 'required', 'disabled', 'label', 'checkboxlabel', 'options', 'name', 'type', 'css', 'value', 'errors'],
+ template: `{{ $filters.translate(label) }}
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
`,
+ methods: {
+ update: function($event, value, optionvalue, name)
+ {
+ /* if value (array) for checkboxlist is not initialized yet */
+ if(value === true || value === false)
+ {
+ value = [optionvalue];
+ }
+ eventBus.$emit('forminput', {'name': name, 'value': value});
+ },
+ },
+})
+
+app.component('component-radio', {
+ props: ['id', 'description', 'readonly', 'required', 'disabled', 'options', 'label', 'name', 'type', 'css', 'value', 'errors'],
+ template: `{{ $filters.translate(label) }}
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
`,
+ methods: {
+ update: function($event, value, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': value});
+ },
+ },
+})
+
+app.component('component-number', {
+ props: ['id', 'description', 'min', 'max', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'css', 'value', 'errors'],
+ template: `{{ $filters.translate(label) }}
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-date', {
+ props: ['id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'css', 'value', 'errors'],
+ template: `{{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-email', {
+ props: ['id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'css', 'value', 'errors'],
+ template: `
+
+
+
+
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-tel', {
+ props: ['id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'css', 'value', 'errors'],
+ template: `
+
+
+
+
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-url', {
+ props: ['id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'css', 'value', 'errors'],
+ template: `
+
+
+
+
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-color', {
+ props: ['id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'css', 'value', 'errors'],
+ template: `
+
+
+
+
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-password', {
+ props: ['id', 'description', 'maxlength', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'autocomplete', 'generator', 'css', 'value', 'errors'],
+ data() {
+ return {
+ fieldType: "password"
+ };
+ },
+ template: `
+
+
+
+
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
`,
+ methods: {
+ update: function(newvalue, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': newvalue});
+ },
+ toggleFieldType: function()
+ {
+ if (this.fieldType === "password")
+ {
+ this.fieldType = "text";
+ }
+ else
+ {
+ this.fieldType = "password";
+ }
+ },
+ generatePassword: function()
+ {
+ const digits = '0123456789';
+ const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+ const lower = upper.toLowerCase();
+ const characters = digits + upper + lower;
+ const length = 40;
+
+ const randomCharacters = Array.from({ length }, (_) =>
+ this.getRandomCharacter(characters),
+ ).join('')
+
+ const passwordLength = this.getRandomInt(30,40);
+
+ const password = randomCharacters.substring(0,passwordLength);
+
+ this.update(password, this.name);
+ },
+ getRandomInt: function(min,max)
+ {
+ return Math.floor(Math.random() * (max - min + 1) + min);
+ },
+ getRandomCharacter: function(characters)
+ {
+ let randomNumber
+
+ do{
+ randomNumber = crypto.getRandomValues(new Uint8Array(1))[0]
+ } while (randomNumber >= 256 - (256 % characters.length))
+
+ return characters[randomNumber % characters.length]
+ }
+ },
+})
+
+app.component('component-hidden', {
+ props: ['id', 'maxlength', 'required', 'disabled', 'name', 'type', 'css', 'value', 'errors'],
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ errors[name] }}
+{{ $filters.translate(description) }}
+
+
+
+
+
+
`,
+ methods: {
+ update: function($event, name)
+ {
+ eventBus.$emit('forminput', {'name': name, 'value': $event.target.value});
+ },
+ },
+})
+
+app.component('component-customfields', {
+ props: ['id', 'description', 'readonly', 'required', 'disabled', 'options', 'label', 'name', 'type', 'value', 'errors'],
+ data: function () {
+ return {
+ fielderrors: false,
+ fielddetails: {},
+ disableaddbutton: false,
+ cfvalue: [{}]
+ }
+ },
+ template: `
+
+
+
+
+
`,
+ mounted: function(){
+ if(typeof this.value === 'undefined' || this.value === null || this.value.length == 0)
+ {
+ // this.cfvalue = [{}];
+ // this.update(this.cfvalue, this.name);
+ this.disableaddbutton = 'disabled';
+ }
+ else
+ {
+ /* turn object { key:value, key:value } into array [[key,value][key,value]] */
+ this.cfvalue = Object.entries(this.value);
+ /* and back into array of objects [ {key: key, value: value}{key:key, value: value }] */
+ this.cfvalue = this.cfvalue.map(function(item){ return { 'key': item[0], 'value': item[1] } });
+ }
+ },
+ methods: {
+ update: function(value, name)
+ {
+ this.fielderrors = false;
+ this.errors = false;
+
+ /* transform array of objects [{key:mykey, value:myvalue}] into array [[mykey,myvalue]] */
+ var storedvalue = value.map(function(item){ return [item.key, item.value]; });
+
+ /* transform array [[mykey,myvalue]] into object { mykey:myvalue } */
+ storedvalue = Object.fromEntries(storedvalue);
+
+ FormBus.$emit('forminput', {'name': name, 'value': storedvalue});
+ },
+ updatePairKey: function(index,event)
+ {
+ this.cfvalue[index].key = event.target.value;
+
+ var regex = /^[a-z0-9]+$/i;
+
+ if(!this.keyIsUnique(event.target.value,index))
+ {
+ this.cfvalue[index].keyerror = 'red';
+ this.fielderrors = 'Error: The key already exists';
+ this.disableaddbutton = 'disabled';
+ return;
+ }
+ else if(!regex.test(event.target.value))
+ {
+ this.cfvalue[index].keyerror = 'red';
+ this.fielderrors = 'Error: Only alphanumeric for keys allowed';
+ this.disableaddbutton = 'disabled';
+ return;
+ }
+
+ delete this.cfvalue[index].keyerror;
+ this.disableaddbutton = false;
+ this.update(this.cfvalue,this.name);
+ },
+ keyIsUnique: function(keystring, index)
+ {
+ for(obj in this.cfvalue)
+ {
+ if( (obj != index) && (this.cfvalue[obj].key == keystring) )
+ {
+ return false;
+ }
+ }
+ return true;
+ },
+ updatePairValue: function(index, event)
+ {
+ this.cfvalue[index].value = event.target.value;
+
+ var regex = /<.*(?=>)/gm;
+ if(event.target.value == '' || regex.test(event.target.value))
+ {
+ this.cfvalue[index].valueerror = 'red';
+ this.fielderrors = 'Error: No empty values or html tags are allowed';
+ }
+ else
+ {
+ delete this.cfvalue[index].valueerror;
+ this.update(this.cfvalue,this.name);
+ }
+ },
+ addField: function()
+ {
+ for(object in this.cfvalue)
+ {
+ if(Object.keys(this.cfvalue[object]).length === 0)
+ {
+ return;
+ }
+ }
+ this.cfvalue.push({});
+ this.disableaddbutton = 'disabled';
+ },
+ deleteField: function(index)
+ {
+ this.cfvalue.splice(index,1);
+ this.disableaddbutton = false;
+ this.update(this.cfvalue,this.name);
+ },
+ },
+})
+
+app.component('component-image', {
+ props: ['id', 'description', 'maxlength', 'hidden', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: `{{ $filters.translate(description) }}
+ {{ errors[name] }}
+ {{ fielderrors }}
+
+
+
+
+
+
+
+
+
+
`,
+ data: function(){
+ return {
+ maxsize: 10, // megabyte
+ imgpreview: false,
+ showmedialib: false,
+ load: false,
+ quality: false,
+ qualitylabel: false,
+ }
+ },
+ methods: {
+ getimagesrc: function(value)
+ {
+ if(value !== undefined && value !== null && value !== '')
+ {
+ var imgpreview = myaxios.defaults.baseURL + '/' + value;
+ if(value.indexOf("media/live") > -1 )
+ {
+ this.quality = 'live';
+ this.qualitylabel = 'switch quality to: original';
+ }
+ else if(value.indexOf("media/original") > -1)
+ {
+ this.quality = 'original';
+ this.qualitylabel = 'switch quality to: live';
+ }
+ return imgpreview;
+ }
+ },
+ update: function(value)
+ {
+ FormBus.$emit('forminput', {'name': this.name, 'value': value});
+ },
+ updatemarkdown: function(markdown, url)
+ {
+ /* is called from child component medialib */
+ this.update(url);
+ },
+ createmarkdown: function(url)
+ {
+ /* is called from child component medialib */
+ this.update(url);
+ },
+ deleteImage: function()
+ {
+ this.imgpreview = false;
+ this.update('');
+ },
+ switchQuality: function(value)
+ {
+ if(value !== null && value !== '')
+ {
+ if(this.quality == 'live')
+ {
+ var newUrl = value.replace("media/live", "media/original");
+ this.update(newUrl);
+ this.quality = 'original';
+ this.qualitylabel = 'switch quality to: live';
+ }
+ else
+ {
+ var newUrl = value.replace("media/original", "media/live");
+ this.update(newUrl);
+ this.quality = 'live';
+ this.qualitylabel = 'switch quality to: original';
+ }
+ }
+ },
+ openmedialib: function()
+ {
+ this.showmedialib = true;
+ },
+ onFileChange: function( e )
+ {
+ if(e.target.files.length > 0)
+ {
+ let imageFile = e.target.files[0];
+ let size = imageFile.size / 1024 / 1024;
+
+ if (!imageFile.type.match('image.*'))
+ {
+ publishController.errors.message = "Only images are allowed.";
+ }
+ else if (size > this.maxsize)
+ {
+ publishController.errors.message = "The maximal size of images is " + this.maxsize + " MB";
+ }
+ else
+ {
+ sharedself = this;
+
+ let reader = new FileReader();
+ reader.readAsDataURL(imageFile);
+ reader.onload = function(e)
+ {
+ sharedself.imgpreview = e.target.result;
+
+ myaxios.post('/api/v1/image',{
+ 'url': document.getElementById("path").value,
+ 'image': e.target.result,
+ 'name': imageFile.name,
+ 'publish': true,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ })
+ .then(function (response) {
+ sharedself.update(response.data.name);
+ })
+ .catch(function (error)
+ {
+ sharedself.load = false;
+ if(error.response)
+ {
+ publishController.errors.message = error.response.data.errors;
+ }
+ });
+ }
+ }
+ }
+ }
+ },
+})
+
+app.component('component-file', {
+ props: ['id', 'description', 'maxlength', 'hidden', 'readonly', 'required', 'disabled', 'placeholder', 'label', 'name', 'type', 'value', 'errors'],
+ template: `
+
+
+
+
+ ![]()
+
+
+
+
+
+ ' +
+
+ {{ $filters.translate('upload an image') }}
'+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $filters.translate(description) }}
{{ errors[name] }}
+
+
+
+
+
+
+
`,
+ data: function(){
+ return {
+ maxsize: 20, // megabyte
+ showmedialib: false,
+ fileid: '',
+ load: false,
+ userroles: ['all'],
+ selectedrole: '',
+ }
+ },
+ mounted: function(){
+ this.getrestriction();
+ },
+ methods: {
+ update: function(value)
+ {
+ FormBus.$emit('forminput', {'name': this.name, 'value': value});
+ },
+ updatemarkdown: function(markdown, url)
+ {
+ /* is called from child component medialib if file has been selected */
+ this.update(url);
+ this.getrestriction(url);
+ },
+ createmarkdown: function(url)
+ {
+ /* is called from child component medialib */
+ this.update(url);
+ },
+ openmedialib: function()
+ {
+ this.showmedialib = true;
+ },
+ deleteFile: function()
+ {
+ this.update('');
+ this.selectedrole = 'all';
+ },
+ getrestriction: function(url)
+ {
+ var filename = this.value;
+ if(url)
+ {
+ filename = url;
+ }
+
+ var myself = this;
+
+ myaxios.get('/api/v1/filerestrictions',{
+ params: {
+ 'url': document.getElementById("path").value,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ 'filename': filename,
+ }
+ })
+ .then(function (response) {
+ myself.userroles = ['all'];
+ myself.userroles = myself.userroles.concat(response.data.userroles);
+ myself.selectedrole = response.data.restriction;
+ })
+ .catch(function (error)
+ {
+ if(error.response)
+ {
+ }
+ });
+ },
+ updaterestriction: function()
+ {
+ myaxios.post('/api/v1/filerestrictions',{
+ 'url': document.getElementById("path").value,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ 'filename': this.value,
+ 'role': this.selectedrole,
+ })
+ .then(function (response) {
+
+ })
+ .catch(function (error)
+ {
+ if(error.response)
+ {
+ }
+ });
+ },
+ onFileChange: function( e )
+ {
+ if(e.target.files.length > 0)
+ {
+ let uploadedFile = e.target.files[0];
+ let size = uploadedFile.size / 1024 / 1024;
+
+ if (size > this.maxsize)
+ {
+ publishController.errors.message = "The maximal size of a file is " + this.maxsize + " MB";
+ }
+ else
+ {
+ sharedself = this;
+
+ sharedself.load = true;
+
+ let reader = new FileReader();
+ reader.readAsDataURL(uploadedFile);
+ reader.onload = function(e) {
+ myaxios.post('/api/v1/file',{
+ 'url': document.getElementById("path").value,
+ 'file': e.target.result,
+ 'name': uploadedFile.name,
+ 'publish': true,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ })
+ .then(function (response) {
+ sharedself.load = false;
+ sharedself.selectedrole = 'all';
+ sharedself.update(response.data.info.url);
+ })
+ .catch(function (error)
+ {
+ sharedself.load = false;
+ if(error.response)
+ {
+ publishController.errors.message = error.response.data.errors;
+ }
+ });
+ }
+ }
+ }
+ }
+ }
+})
+
+const medialib = app.component('medialib', {
+ props: ['parentcomponent'],
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $filters.translate('upload') }}
+
+
+
+
+
+
+
+
+
+
`,
+ data: function(){
+ return {
+ imagedata: false,
+ showimages: true,
+ imagedetaildata: false,
+ showimagedetails: false,
+ filedata: false,
+ showfiles: false,
+ filedetaildata: false,
+ showfiledetails: false,
+ detailindex: false,
+ load: false,
+ baseurl: myaxios.defaults.baseURL,
+ adminurl: false,
+ search: '',
+ errors: false,
+ }
+ },
+ mounted: function(){
+
+ if(this.parentcomponent == 'files')
+ {
+ this.showFiles();
+ }
+
+ this.errors = false;
+ var self = this;
+
+ myaxios.get('/api/v1/medialib/images',{
+ params: {
+ 'url': document.getElementById("path").value,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ }
+ })
+ .then(function (response)
+ {
+ self.imagedata = response.data.images;
+ })
+ .catch(function (error)
+ {
+ if(error.response)
+ {
+ self.errors = error.response.data.errors;
+ }
+ });
+ },
+ computed: {
+ filteredImages() {
+
+ var searchimages = this.search;
+ var filteredImages = {};
+ var images = this.imagedata;
+ if(images)
+ {
+ Object.keys(images).forEach(function(key) {
+ var searchindex = key + ' ' + images[key].name;
+ if(searchindex.toLowerCase().indexOf(searchimages.toLowerCase()) !== -1)
+ {
+ filteredImages[key] = images[key];
+ }
+ });
+ }
+ return filteredImages;
+ },
+ filteredFiles() {
+
+ var searchfiles = this.search;
+ var filteredFiles = {};
+ var files = this.filedata;
+ if(files)
+ {
+ Object.keys(files).forEach(function(key) {
+ var searchindex = key + ' ' + files[key].name;
+ if(searchindex.toLowerCase().indexOf(searchfiles.toLowerCase()) !== -1)
+ {
+ filteredFiles[key] = files[key];
+ }
+ });
+ }
+ return filteredFiles;
+ }
+ },
+ methods: {
+ isImagesActive: function()
+ {
+ if(this.showimages)
+ {
+ return 'bg-tm-green white';
+ }
+ return 'bg-light-gray black';
+ },
+ isFilesActive: function()
+ {
+ if(this.showfiles)
+ {
+ return 'bg-tm-green white';
+ }
+ return 'bg-light-gray black';
+ },
+ closemedialib: function()
+ {
+ this.$parent.showmedialib = false;
+ },
+ getBackgroundImage: function(image)
+ {
+ return 'background-image: url(' + this.baseurl + '/' + image.src_thumb + ');width:250px';
+ },
+ getImageUrl(relativeUrl)
+ {
+ return this.baseurl + '/' + relativeUrl;
+ },
+ showImages: function()
+ {
+ this.errors = false;
+ this.showimages = true;
+ this.showfiles = false;
+ this.showimagedetails = false;
+ this.showfiledetails = false;
+ this.imagedetaildata = false;
+ this.detailindex = false;
+ },
+ showFiles: function()
+ {
+ this.showimages = false;
+ this.showfiles = true;
+ this.showimagedetails = false;
+ this.showfiledetails = false;
+ this.imagedetaildata = false;
+ this.filedetaildata = false;
+ this.detailindex = false;
+
+ if(!this.files)
+ {
+ this.errors = false;
+ var filesself = this;
+
+ myaxios.get('/api/v1/medialib/files',{
+ params: {
+ 'url': document.getElementById("path").value,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ }
+ })
+ .then(function (response)
+ {
+ filesself.filedata = response.data.files;
+ })
+ .catch(function (error)
+ {
+ if(error.response)
+ {
+ filesself.errors = error.response.data.errors;
+ }
+ });
+ }
+ },
+ showImageDetails: function(image,index)
+ {
+ this.errors = false;
+ this.showimages = false;
+ this.showfiles = false;
+ this.showimagedetails = true;
+ this.detailindex = index;
+ this.adminurl = myaxios.defaults.baseURL + '/tm/content/visual';
+
+ var imageself = this;
+
+ myaxios.get('/api/v1/image',{
+ params: {
+ 'url': document.getElementById("path").value,
+ 'name': image.name,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ }
+ })
+ .then(function (response)
+ {
+ imageself.imagedetaildata = response.data.image;
+ })
+ .catch(function (error)
+ {
+ if(error.response)
+ {
+ imageself.errors = error.response.data.errors;
+ }
+ });
+ },
+ showFileDetails: function(file,index)
+ {
+ this.errors = false;
+ this.showimages = false;
+ this.showfiles = false;
+ this.showimagedetails = false;
+ this.showfiledetails = true;
+ this.detailindex = index;
+
+ this.adminurl = myaxios.defaults.baseURL + '/tm/content/visual';
+
+ var fileself = this;
+
+ myaxios.get('/api/v1/file',{
+ params: {
+ 'url': document.getElementById("path").value,
+ 'name': file.name,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ }
+ })
+ .then(function (response)
+ {
+ fileself.filedetaildata = response.data.file;
+ })
+ .catch(function (error)
+ {
+ if(error.response)
+ {
+ fileself.errors = error.response.data.errors;
+ }
+ });
+ },
+ selectImage: function(image)
+ {
+ this.showImages();
+
+ if(this.parentcomponent == 'images')
+ {
+ var imgmarkdown = {target: {value: '' }};
+
+ this.$parent.imgfile = image.src_live;
+ this.$parent.imgpreview = this.baseurl + '/' + image.src_live;
+ this.$parent.imgmeta = true;
+
+ this.$parent.showmedialib = false;
+
+ this.$parent.createmarkdown(image.src_live);
+/* this.$parent.updatemarkdown(imgmarkdown, image.src_live); */
+ }
+ if(this.parentcomponent == 'files')
+ {
+ var filemarkdown = {target: {value: '[' + image.name + '](' + image.src_live +'){.tm-download}' }};
+
+ this.$parent.filemeta = true;
+ this.$parent.filetitle = image.name;
+
+ this.$parent.showmedialib = false;
+
+ this.$parent.updatemarkdown(filemarkdown, image.src_live);
+ }
+ },
+ selectFile: function(file)
+ {
+ /* if image component is open */
+ if(this.parentcomponent == 'images')
+ {
+ var imgextensions = ['png','jpg', 'jpeg', 'gif', 'svg', 'webp'];
+ if(imgextensions.indexOf(file.info.extension) == -1)
+ {
+ this.errors = "you cannot insert a file into an image component";
+ return;
+ }
+ var imgmarkdown = {target: {value: '' }};
+
+ this.$parent.imgfile = file.url;
+ this.$parent.imgpreview = this.baseurl + '/' + file.url;
+ this.$parent.imgmeta = true;
+
+ this.$parent.showmedialib = false;
+
+ this.$parent.createmarkdown(file.url);
+/* this.$parent.updatemarkdown(imgmarkdown, file.url);*/
+ }
+ if(this.parentcomponent == 'files')
+ {
+ var filemarkdown = {target: {value: '['+ file.name +']('+ file.url +'){.tm-download file-' + file.info.extension + '}' }};
+
+ this.$parent.showmedialib = false;
+
+ this.$parent.filemeta = true;
+ this.$parent.filetitle = file.info.filename + ' (' + file.info.extension.toUpperCase() + ')';
+
+ this.$parent.updatemarkdown(filemarkdown, file.url);
+ }
+ this.showFiles();
+ },
+ removeImage: function(index)
+ {
+ this.imagedata.splice(index,1);
+ },
+ removeFile: function(index)
+ {
+ this.filedata.splice(index,1);
+ },
+ deleteImage: function(image, index)
+ {
+ imageself = this;
+
+ myaxios.delete('/api/v1/image',{
+ data: {
+ 'url': document.getElementById("path").value,
+ 'name': image.name,
+ 'index': index,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ }
+ })
+ .then(function (response)
+ {
+ imageself.showImages();
+ imageself.removeImage(index);
+ })
+ .catch(function (error)
+ {
+ if(error.response)
+ {
+ imageself.errors = error.response.data.errors;
+ }
+ });
+ },
+ deleteFile: function(file, index)
+ {
+ fileself = this;
+
+ myaxios.delete('/api/v1/file',{
+ data: {
+ 'url': document.getElementById("path").value,
+ 'name': file.name,
+ 'index': index,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ }
+ })
+ .then(function (response)
+ {
+ fileself.showFiles();
+ fileself.removeFile(index);
+ })
+ .catch(function (error)
+ {
+ if(error.response)
+ {
+ fileself.errors = error.response.data.errors;
+ }
+ });
+ },
+ getDate(timestamp)
+ {
+ date = new Date(timestamp * 1000);
+
+ datevalues = {
+ 'year': date.getFullYear(),
+ 'month': date.getMonth()+1,
+ 'day': date.getDate(),
+ 'hour': date.getHours(),
+ 'minute': date.getMinutes(),
+ 'second': date.getSeconds(),
+ };
+ return datevalues.year + '-' + datevalues.month + '-' + datevalues.day;
+ },
+ getSize(bytes)
+ {
+ var i = Math.floor(Math.log(bytes) / Math.log(1024)),
+ sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+ return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + sizes[i];
+ },
+ isChecked: function(classname)
+ {
+ if(this.imgclass == classname)
+ {
+ return ' checked';
+ }
+ },
+ },
+})
diff --git a/system/typemill/author/js/vue-system.js b/system/typemill/author/js/vue-system.js
index 0797004..55bfebb 100644
--- a/system/typemill/author/js/vue-system.js
+++ b/system/typemill/author/js/vue-system.js
@@ -1,79 +1,98 @@
-const { createApp } = Vue
-
-createApp({
- template: ``,
+const app = Vue.createApp({
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{errors}}
+
+
+
+
+
+ {{ image.name }}
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ Name
{{ imagedetaildata.name}}
+ URL
{{ getImageUrl(imagedetaildata.src_live)}}
+
+
+
+
+ Size
{{ getSize(imagedetaildata.bytes) }}
+
+
+ Dimensions
{{ imagedetaildata.width }}x{{ imagedetaildata.height }} px
+
+
+ Type
{{ imagedetaildata.type }}
+
+
+ Date
{{ getDate(imagedetaildata.timestamp) }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ file.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ filedetaildata.info.extension }}
+
+
+ Name
{{ filedetaildata.name}}
+ URL
{{ filedetaildata.url}}
+
+
+
+
+ Size
{{ getSize(filedetaildata.bytes) }}
+
+
+ Type
{{ filedetaildata.info.extension }}
+
+
+ Date
{{ getDate(filedetaildata.timestamp) }}
+
+
+
+
+
+
+ -
+
-
+ ++ +++
+
++++{{theme.name}}
+author: {{theme.author}} | version: {{theme.version}} | {{theme.licence}}+{{theme.description}}
++ + ++
+
+
+
+
+
+
+
+
+ -
+
+
`,
+ methods: {
+ startSearch: function()
+ {
+ this.$root.error = false;
+
+ if(this.searchterm.trim() != '')
+ {
+ if(this.searchterm.trim().length < 3)
+ {
+ this.$root.error = 'Please enter at least 3 characters';
+ return;
+ }
+ this.$root.search(this.searchterm, this.filter);
+ }
+ },
+ clearSearch: function()
+ {
+ this.$root.error = false;
+ this.searchterm = '';
+ this.$root.clear(this.filter);
+ },
+ setFilter: function(filter)
+ {
+ this.searchterm = '';
+ this.filter = filter;
+ if(filter == 'userrole')
+ {
+ this.searchterm = this.userroles[0];
+ }
+ },
+ checkActive: function(filter)
+ {
+ if(this.filter == filter)
+ {
+ return 'border-stone-700 bg-stone-200';
+ }
+ return 'border-stone-100 bg-stone-100';
+ }
+ }
+})
+
+app.component('usertable', {
+ props: ['userdata'],
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+ {{error}}
+ You can use the asterisk (*) wildcard to search for name@* or *@domain.com.
+ | Username | +Userrole | +Edit | +|
|---|---|---|---|
| {{ user.username }} | +{{ user.userrole }} | +{{ user.email }} | +edit | +
+
+ -
+
-
+ ++ +++
+
++++{{theme.name}}
+author: {{theme.author}} | version: {{theme.version}} | {{theme.licence}}+{{theme.description}}
++ + ++
+
-
{% for name,navitem in mainnavi %}
- - {{ translate(navitem.title)|capitalize }} + {{ translate(navitem.title)|capitalize }} {% endfor %}