- {{ title }}
+ {{ title }}
{% for id, block in content %}
- {{block}}
+ {{block}}
{% endfor %}
-
+
-
+
+
diff --git a/system/author/js/author.js b/system/author/js/author.js
index 3e30ed9..308b0ed 100644
--- a/system/author/js/author.js
+++ b/system/author/js/author.js
@@ -107,6 +107,21 @@
toggleElement.classList.toggle(myclass);
}
+ if (window.Element && !Element.prototype.closest) {
+ Element.prototype.closest =
+ function(s) {
+ var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+ i,
+ el = this;
+ do {
+ i = matches.length;
+ while (--i >= 0 && matches.item(i) !== el) {};
+ } while ((i < 0) && (el = el.parentElement));
+ return el;
+ };
+ }
+
+
/**********************************
** START VERSION CHECK **
**********************************/
diff --git a/system/author/js/vue-blox.js b/system/author/js/vue-blox.js
index 3623b7a..2bee293 100644
--- a/system/author/js/vue-blox.js
+++ b/system/author/js/vue-blox.js
@@ -1,5 +1,8 @@
+const eventBus = new Vue();
+
const contentComponent = Vue.component('content-block', {
props: ['body'],
+ template: '
',
data: function () {
return {
preview: 'visible',
@@ -9,156 +12,168 @@ const contentComponent = Vue.component('content-block', {
disabled: false,
}
},
+ mounted: function()
+ {
+ eventBus.$on('closeComponents', this.closeComponents);
+ },
methods: {
- getData: function()
+ switchToEditMode: function()
{
+ eventBus.$emit('closeComponents');
self = this;
-
- if(self.$root.$data.freeze == false && self.$root.$data.blockType != '')
- {
- self.$root.$data.freeze = true;
- this.preview = 'hidden';
- this.edit = true;
- this.compmarkdown = self.$root.$data.blockMarkdown;
- this.componentType = self.$root.$data.blockType;
- self.$root.sortable.option("disabled",true);
- }
- /*
- window.addEventListener('click', function(e)
- {
- if (!e.target.closest('.editactive'))
- {
- console.info('not found');
- publishController.errors.message = false;
-
- this.preview = 'visible';
- this.edit = false;
- this.compmarkdown = '';
- self.componentType = false;
- self.$root.$data.freeze = false;
- self.$root.sortable.option("disabled",false);
- }
- });
- */
+ self.$root.$data.freeze = true; /* freeze the data */
+ self.$root.sortable.option("disabled",true); /* disable sorting */
+ this.preview = 'hidden'; /* hide the html-preview */
+ this.edit = true; /* show the edit-mode */
+ this.compmarkdown = self.$root.$data.blockMarkdown; /* get markdown data */
+ this.componentType = self.$root.$data.blockType; /* get block-type of element */
},
- cancelBlock: function()
+ closeComponents: function()
{
- publishController.errors.message = false;
-
this.preview = 'visible';
this.edit = false;
this.componentType = false;
- self = this;
- self.$root.$data.freeze = false;
- self.$root.sortable.option("disabled",false);
},
- submitBlock: function(e){
+ switchToPreviewMode: function()
+ {
+ self = this;
+ self.$root.$data.freeze = false; /* activate the data again */
+ self.$root.sortable.option("disabled",false); /* activate sorting again */
+ this.preview = 'visible'; /* show the html-preview */
+ this.edit = false; /* hide the edit mode */
+ this.compmarkdown = ''; /* clear markdown content */
+ this.componentType = false; /* delete the component type */
+ self.$root.$data.blockType = false;
+ self.$root.$data.blockMarkdown = false;
+ self.$root.$data.file = false;
+ publishController.errors.message = false; /* delete all error messages */
+ },
+ freezePage: function()
+ {
+ this.disabled = 'disabled';
+ publishController.errors.message = false;
+ publishController.publishDisabled = true;
+ var self = this;
+ self.$root.$data.freeze = true;
+ },
+ activatePage: function()
+ {
+ this.disabled = false;
+ publishController.publishDisabled = false;
+ },
+ getData: function()
+ {
+ self = this;
+ if(self.$root.$data.blockType != '')
+ {
+ this.switchToEditMode();
+ }
+
+ /*
+ if(self.$root.$data.freeze == false && self.$root.$data.blockType != '')
+ {
+ this.switchToEditMode();
+ }
+ */
+ },
+ submitBlock: function(){
var emptyline = /^\s*$(?:\r\n?|\n)/gm;
if(this.compmarkdown.search(emptyline) > -1)
{
var checkempty = this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"");
if(checkempty == '')
{
- publishController.errors.message = false;
-
- this.preview = 'visible';
- this.edit = false;
- this.componentType = false;
- self = this;
- self.$root.$data.freeze = false;
- self.$root.sortable.option("disabled",false);
+ this.switchToPreviewMode();
}
else
{
- self.$root.sortable.option("disabled",false);
this.saveBlock();
}
}
- },
+ },
saveBlock: function()
- {
- publishController.errors.message = false;
- this.disabled = 'disabled';
-
- var self = this;
-
- self.$root.$data.freeze = true;
-
- var url = self.$root.$data.root + '/api/v1/block';
-
- var params = {
- 'url': document.getElementById("path").value,
- 'markdown': this.compmarkdown,
- 'block_id': self.$root.$data.blockId,
- 'csrf_name': document.getElementById("csrf_name").value,
- 'csrf_value': document.getElementById("csrf_value").value,
- };
-
- var method = 'PUT';
-
- sendJson(function(response, httpStatus)
+ {
+ if(this.compmarkdown == undefined || this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"") == '')
{
- if(httpStatus == 400)
+ this.switchToPreviewMode();
+ }
+ else
+ {
+ this.freezePage();
+
+ var self = this;
+
+ if(this.componentType == 'image-component' && self.$root.$data.file)
{
- self.disabled = false;
- publishController.publishDisabled = false;
+ var url = self.$root.$data.root + '/api/v1/image';
+ var method = 'PUT';
}
- if(response)
+ else
{
- self.disabled = false;
- publishController.publishDisabled = false;
-
- var result = JSON.parse(response);
-
- if(result.errors)
+ var url = self.$root.$data.root + '/api/v1/block';
+ var method = 'PUT';
+ }
+
+ var params = {
+ 'url': document.getElementById("path").value,
+ 'markdown': this.compmarkdown,
+ 'block_id': self.$root.$data.blockId,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ };
+
+ sendJson(function(response, httpStatus)
+ {
+ if(httpStatus == 400)
{
- console.info(result.errors);
- publishController.errors.message = result.errors.markdown[0];
- return false;
+ self.activatePage();
}
- else
+ if(response)
{
- self.preview = 'visible';
- self.edit = false;
- self.componentType = false;
- self.$root.$data.freeze = false;
+ self.activatePage();
- if(self.$root.$data.blockId == 99999)
+ var result = JSON.parse(response);
+
+ if(result.errors)
{
- self.$root.$data.markdown.push(result.markdown);
- self.$root.$data.newBlocks.push(result);
-
- self.$root.$data.blockMarkdown = '';
- self.$root.$data.blockType = 'textarea-markdown';
- self.getData();
+ publishController.errors.message = result.errors.markdown[0];
}
else
{
- var htmlid = "blox-" + self.$root.$data.blockId;
- var html = document.getElementById(htmlid);
- html.innerHTML = result.content;
+ self.switchToPreviewMode();
- self.$root.$data.markdown[self.$root.$data.blockId] = result.markdown;
-
- self.$root.$data.blockMarkdown = '';
- self.$root.$data.blockType = '';
+ if(self.$root.$data.blockId == 99999)
+ {
+ self.$root.$data.markdown.push(result.markdown);
+ self.$root.$data.newBlocks.push(result);
+
+ self.$root.$data.blockMarkdown = '';
+ self.$root.$data.blockType = 'markdown-component';
+ self.getData();
+ }
+ else
+ {
+ var htmlid = "blox-" + self.$root.$data.blockId;
+ var html = document.getElementById(htmlid);
+ html.innerHTML = result.content;
+
+ self.$root.$data.markdown[self.$root.$data.blockId] = result.markdown;
+ self.$root.$data.blockMarkdown = '';
+ self.$root.$data.blockType = '';
+ }
}
-
- publishController.publishResult = "";
}
- }
- }, method, url, params);
+ }, method, url, params);
+ }
},
deleteBlock: function(event)
{
- var bloxeditor = event.target.parentElement.parentElement;
- console.info(bloxeditor);
+ this.freezePage();
+
+ var bloxeditor = event.target.closest('.blox-editor');
+
var bloxid = bloxeditor.getElementsByClassName('blox')[0].dataset.id;
- bloxeditor.id = "delete-"+bloxid;
-
- this.disabled = 'disabled';
-
- publishController.errors.message = false;
+ bloxeditor.firstChild.id = "delete-"+bloxid;
var self = this;
@@ -177,24 +192,21 @@ const contentComponent = Vue.component('content-block', {
{
if(httpStatus == 400)
{
- self.disabled = false;
+ self.activatePage();
}
if(response)
{
- self.disabled = false;
+ self.activatePage();
var result = JSON.parse(response);
if(result.errors)
{
publishController.errors.message = result.errors;
- publishController.publishDisabled = false;
- return false;
}
else
- {
- self.edit = false;
- self.componentType = false;
+ {
+ self.switchToPreviewMode();
var deleteblock = document.getElementById("delete-"+bloxid);
deleteblock.parentElement.remove(deleteblock);
@@ -206,46 +218,22 @@ const contentComponent = Vue.component('content-block', {
blox[i].dataset.id = i;
}
- self.$root.$data.freeze = false;
- self.$root.$data.markdown = result.markdown;
+ self.$root.$data.markdown = result.markdown;
self.$root.$data.blockMarkdown = '';
self.$root.$data.blockType = '';
-
- publishController.publishDisabled = false;
- publishController.publishResult = "";
}
}
}, method, url, params);
},
},
- /*
- mounted: function() {
- var self = this;
-
- self.sortable = new Sortable(sortblox, {
- animation: 150,
- onEnd: function (evt) {
- var params = {
- 'url': document.getElementById("path").value,
- 'old_index': evt.oldIndex,
- 'new_index': evt.newIndex,
- 'csrf_name': document.getElementById("csrf_name").value,
- 'csrf_value': document.getElementById("csrf_value").value,
- };
- self.moveBlock(params);
- },
- });
- },
- */
- template: '
',
})
-const textareaComponent = Vue.component('textarea-markdown', {
+const markdownComponent = Vue.component('markdown-component', {
props: ['compmarkdown', 'disabled'],
template: '
',
mounted: function(){
- autosize(document.querySelector('textarea'));
this.$refs.markdown.focus();
+ autosize(document.querySelectorAll('textarea'));
},
methods: {
updatemarkdown: function(event)
@@ -255,12 +243,12 @@ const textareaComponent = Vue.component('textarea-markdown', {
},
})
-const textComponent = Vue.component('text-markdown', {
+const titleComponent = Vue.component('title-component', {
props: ['compmarkdown', 'disabled'],
template: '
',
mounted: function(){
- autosize(document.querySelector('textarea'));
this.$refs.markdown.focus();
+ autosize(document.querySelectorAll('textarea'));
},
methods: {
updatemarkdown: function(event)
@@ -270,11 +258,212 @@ const textComponent = Vue.component('text-markdown', {
},
})
-const imageComponent = Vue.component('input-image', {
- template: '
Image component
',
+const imageComponent = Vue.component('image-component', {
+ props: ['compmarkdown', 'disabled'],
+ template: '
',
+ data: function(){
+ return {
+ maxsize: 5, // megabyte
+ imgpreview: false,
+ load: false,
+ imgmeta: false,
+ imgalt: '',
+ imgtitle: '',
+ imgcaption: '',
+ imglink: '',
+ imgfile: 'imgplchldr',
+ }
+ },
+ mounted: function(){
+ // autosize(document.querySelector('textarea'));
+ this.$refs.markdown.focus();
+
+ if(this.compmarkdown)
+ {
+ this.imgmeta = true;
+
+ var imgmarkdown = this.compmarkdown;
+
+ var imgcaption = imgmarkdown.match(/\*.*?\*/);
+ if(imgcaption){
+ this.imgcaption = imgcaption[0].slice(1,-1);
+ imgmarkdown = imgmarkdown.replace(this.imgcaption,'');
+ imgmarkdown = imgmarkdown.replace(/\r?\n|\r/g,'');
+ }
+
+ if(this.compmarkdown[0] == '[')
+ {
+ var imglink = this.compmarkdown.match(/\(.*?\)/g);
+ if(imglink[1])
+ {
+ this.imglink = imglink[1].slice(1,-1);
+ imgmarkdown = imgmarkdown.replace(imglink[1],'');
+ imgmarkdown = imgmarkdown.slice(1, -1);
+ }
+ }
+
+ var imgtitle = imgmarkdown.match(/\".*?\"/);
+ if(imgtitle)
+ {
+ this.imgtitle = imgtitle[0].slice(1,-1);
+ imgmarkdown = imgmarkdown.replace(imgtitle[0], '');
+ }
+
+ var imgalt = imgmarkdown.match(/\[.*?\]/);
+ if(imgalt)
+ {
+ this.imgalt = imgalt[0].slice(1,-1);
+ }
+ var imgpreview = imgmarkdown.match(/\(.*?\)/);
+ if(imgpreview)
+ {
+ this.imgpreview = imgpreview[0].slice(1,-1);
+ this.imgfile = this.imgpreview;
+ }
+ }
+ },
+ methods: {
+ updatemarkdown: function(event)
+ {
+ this.$emit('updatedMarkdown', event.target.value);
+ },
+ createmarkdown: function()
+ {
+ errors = false;
+
+ if(this.imgalt.length < 101)
+ {
+ imgmarkdown = '![' + this.imgalt + ']';
+ }
+ else
+ {
+ errors = 'Maximum size of image alt-text is 100 characters';
+ imgmarkdown = '![]';
+ }
+
+ if(this.imgtitle != '')
+ {
+ if(this.imgtitle.length < 101)
+ {
+ imgmarkdown = imgmarkdown + '(' + this.imgfile + ' "' + this.imgtitle + '")';
+ }
+ else
+ {
+ errors = 'Maximum size of image title is 100 characters';
+ }
+ }
+ else
+ {
+ imgmarkdown = imgmarkdown + '(' + this.imgfile + ')';
+ }
+
+ if(this.imglink != '')
+ {
+ if(this.imglink.length < 101)
+ {
+ imgmarkdown = '[' + imgmarkdown + '](' + this.imglink + ')';
+ }
+ else
+ {
+ errors = 'Maximum size of image link is 100 characters';
+ }
+ }
+
+ if(this.imgcaption != '')
+ {
+ if(this.imgcaption.length < 140)
+ {
+ imgmarkdown = imgmarkdown + '\n*' + this.imgcaption + '*';
+ }
+ else
+ {
+ errors = 'Maximum size of image caption is 140 characters';
+ }
+ }
+
+ if(errors)
+ {
+ this.$parent.freezePage();
+ publishController.errors.message = errors;
+ }
+ else
+ {
+ publishController.errors.message = false;
+ this.$parent.activatePage();
+ this.$emit('updatedMarkdown', imgmarkdown);
+ }
+ },
+ 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
+ {
+ self = this;
+ this.$parent.freezePage();
+ this.$root.$data.file = true;
+ this.load = true;
+
+ let reader = new FileReader();
+ reader.readAsDataURL(imageFile);
+ reader.onload = function(e) {
+ self.imgpreview = e.target.result;
+ self.$emit('updatedMarkdown', '');
+
+ /* load image to server */
+ var url = self.$root.$data.root + '/api/v1/image';
+
+ var params = {
+ 'url': document.getElementById("path").value,
+ 'image': e.target.result,
+ 'csrf_name': document.getElementById("csrf_name").value,
+ 'csrf_value': document.getElementById("csrf_value").value,
+ };
+
+ var method = 'POST';
+
+ sendJson(function(response, httpStatus)
+ {
+ if(httpStatus == 400)
+ {
+ self.$parent.activatePage();
+ }
+ if(response)
+ {
+ self.$parent.activatePage();
+ self.load = false;
+
+ var result = JSON.parse(response);
+
+ if(result.errors)
+ {
+ publishController.errors.message = result.errors;
+ }
+ else
+ {
+ self.imgmeta = true;
+ }
+ }
+ }, method, url, params);
+ }
+ }
+ }
+ }
+ }
})
-const tableComponent = Vue.component('input-table', {
+const tableComponent = Vue.component('table', {
template: '
table component
',
})
@@ -283,10 +472,9 @@ let editor = new Vue({
el: '#blox',
components: {
'content-component': contentComponent,
- 'textarea-component': textareaComponent,
- 'text-component': textComponent,
- 'image-component': imageComponent,
- 'table-component': tableComponent,
+ 'markdown-component': markdownComponent,
+ 'title-component': titleComponent,
+ 'image-component': imageComponent,
},
data: {
root: document.getElementById("main").dataset.url,
@@ -294,6 +482,7 @@ let editor = new Vue({
blockId: false,
blockType: false,
blockMarkdown: '',
+ file: false,
freeze: false,
newBlocks: [],
draftDisabled: true,
@@ -346,14 +535,43 @@ let editor = new Vue({
};
self.moveBlock(params);
},
- });
+ });
},
methods: {
setData: function(event, blocktype, body)
{
this.blockId = event.currentTarget.dataset.id;
- this.blockType = blocktype;
+ /* this.blockType = blocktype; */
this.blockMarkdown = this.markdown[this.blockId];
+ if(blocktype)
+ {
+ this.blockType = blocktype;
+ }
+ else if(this.blockId == 0)
+ {
+ this.blockType = "title-component"
+ }
+ else
+ {
+ this.blockType = this.determineBlockType(this.blockMarkdown);
+ }
+ },
+ determineBlockType: function(block)
+ {
+ var firstChar = block[0];
+ var secondChar = block[1];
+ var thirdChar = block[2];
+
+ switch(firstChar){
+ case "!":
+ if(secondChar == "[") { return "image-component" }
+ break;
+ case "[":
+ if(secondChar == "!" && thirdChar == "[") { return "image-component" } else { return "markdown-component" }
+ break;
+ default:
+ return 'markdown-component';
+ }
},
moveBlock: function(params)
{
@@ -362,7 +580,7 @@ let editor = new Vue({
var url = this.root + '/api/v1/moveblock';
var self = this;
-
+
var method = 'PUT';
sendJson(function(response, httpStatus)
@@ -379,7 +597,6 @@ let editor = new Vue({
{
publishController.errors.message = result.errors;
publishController.publishDisabled = false;
- return false;
}
else
{
diff --git a/system/author/layouts/layout.twig b/system/author/layouts/layout.twig
index 540a1bd..449c6a8 100644
--- a/system/author/layouts/layout.twig
+++ b/system/author/layouts/layout.twig
@@ -6,6 +6,8 @@
+
+
diff --git a/system/author/layouts/layoutAuth.twig b/system/author/layouts/layoutAuth.twig
index 9caa921..27c5295 100644
--- a/system/author/layouts/layoutAuth.twig
+++ b/system/author/layouts/layoutAuth.twig
@@ -7,6 +7,8 @@
+
+
diff --git a/system/author/layouts/layoutBlank.twig b/system/author/layouts/layoutBlank.twig
index cb4ad52..f0050a7 100644
--- a/system/author/layouts/layoutBlank.twig
+++ b/system/author/layouts/layoutBlank.twig
@@ -7,6 +7,8 @@
+
+
diff --git a/system/author/layouts/layoutBlox.twig b/system/author/layouts/layoutBlox.twig
index 31e250d..19a5814 100644
--- a/system/author/layouts/layoutBlox.twig
+++ b/system/author/layouts/layoutBlox.twig
@@ -7,6 +7,8 @@
+
+
diff --git a/system/author/layouts/layoutEditor.twig b/system/author/layouts/layoutEditor.twig
index 07141b7..e767b51 100644
--- a/system/author/layouts/layoutEditor.twig
+++ b/system/author/layouts/layoutEditor.twig
@@ -7,6 +7,8 @@
+
+
diff --git a/themes/typemill/partials/layout.twig b/themes/typemill/partials/layout.twig
index e7ab893..d2192be 100644
--- a/themes/typemill/partials/layout.twig
+++ b/themes/typemill/partials/layout.twig
@@ -5,6 +5,8 @@
{% block title %}{% endblock %}
+
+
diff --git a/themes/typemill/partials/layoutCover.twig b/themes/typemill/partials/layoutCover.twig
index 1660840..96d0b34 100644
--- a/themes/typemill/partials/layoutCover.twig
+++ b/themes/typemill/partials/layoutCover.twig
@@ -5,6 +5,8 @@
{% block title %}{% endblock %}
+
+
diff --git a/themes/typemill/typemill.yaml b/themes/typemill/typemill.yaml
index 06ffb99..8721474 100644
--- a/themes/typemill/typemill.yaml
+++ b/themes/typemill/typemill.yaml
@@ -1,5 +1,5 @@
name: Typemill Theme
-version: 1.1.0
+version: 1.1.1
description: The standard theme for Typemill. Responsive, minimal and without any dependencies. It uses the system fonts Calibri and Helvetica. No JavaScript is used.
author: Sebastian Schürmanns
homepage: https://typemill.net
@@ -12,6 +12,9 @@ settings:
modifiedText: 'Last updated'
modifiedFormat: 'd.m.Y'
authorIntro: 'Author'
+ images:
+ live:
+ width: 820
forms:
fields: