|
@@ -16,7 +16,7 @@ const contentComponent = Vue.component('content-block', {
|
|
'</transition>' +
|
|
'</transition>' +
|
|
'<div class="blox-buttons" v-if="edit">' +
|
|
'<div class="blox-buttons" v-if="edit">' +
|
|
'<button class="edit" :disabled="disabled" @click.prevent="saveBlock">{{ \'save\'|translate }}</button>' +
|
|
'<button class="edit" :disabled="disabled" @click.prevent="saveBlock">{{ \'save\'|translate }}</button>' +
|
|
- '<button class="cancel" :disabled="disabled" @click.prevent="switchToPreviewMode">{{ \'cancel\'|translate }}</button>' +
|
|
|
|
|
|
+ '<button class="cancel" :disabled="disabled" @click.prevent="cancel">{{ \'cancel\'|translate }}</button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'<div :class="preview" ref="preview"><slot><format-component></format-component></slot></div>' +
|
|
'<div :class="preview" ref="preview"><slot><format-component></format-component></slot></div>' +
|
|
@@ -79,6 +79,10 @@ const contentComponent = Vue.component('content-block', {
|
|
},
|
|
},
|
|
updateMarkdown: function($event)
|
|
updateMarkdown: function($event)
|
|
{
|
|
{
|
|
|
|
+ eventBus.$emit('markdownChanged');
|
|
|
|
+ self.$root.$data.unsafed = true;
|
|
|
|
+ this.edit = true;
|
|
|
|
+ this.unsafed = true;
|
|
this.compmarkdown = $event;
|
|
this.compmarkdown = $event;
|
|
this.setComponentSize();
|
|
this.setComponentSize();
|
|
},
|
|
},
|
|
@@ -105,10 +109,19 @@ const contentComponent = Vue.component('content-block', {
|
|
switchToEditMode: function()
|
|
switchToEditMode: function()
|
|
{
|
|
{
|
|
if(this.edit){ return; }
|
|
if(this.edit){ return; }
|
|
|
|
+
|
|
|
|
+ if(this.$root.$data.unsafed)
|
|
|
|
+ {
|
|
|
|
+ publishController.errors.message = "Please save or cancel your changes.";
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
eventBus.$emit('closeComponents');
|
|
eventBus.$emit('closeComponents');
|
|
|
|
+
|
|
self = this;
|
|
self = this;
|
|
|
|
+
|
|
self.$root.$data.freeze = true; /* freeze the data */
|
|
self.$root.$data.freeze = true; /* freeze the data */
|
|
- self.$root.$data.sortdisabled = true; /* disable sorting */
|
|
|
|
|
|
+ self.$root.$data.sortdisabled = true; /* disable sorting */
|
|
this.preview = 'hidden'; /* hide the html-preview */
|
|
this.preview = 'hidden'; /* hide the html-preview */
|
|
this.edit = true; /* show the edit-mode */
|
|
this.edit = true; /* show the edit-mode */
|
|
this.compmarkdown = self.$root.$data.blockMarkdown; /* get markdown data */
|
|
this.compmarkdown = self.$root.$data.blockMarkdown; /* get markdown data */
|
|
@@ -125,19 +138,25 @@ const contentComponent = Vue.component('content-block', {
|
|
this.$refs.preview.style.minHeight = "auto";
|
|
this.$refs.preview.style.minHeight = "auto";
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ cancel: function()
|
|
|
|
+ {
|
|
|
|
+ self = this;
|
|
|
|
+ self.$root.$data.unsafed = false;
|
|
|
|
+ this.switchToPreviewMode();
|
|
|
|
+ },
|
|
switchToPreviewMode: function()
|
|
switchToPreviewMode: function()
|
|
{
|
|
{
|
|
self = this;
|
|
self = this;
|
|
- self.$root.$data.freeze = false; /* activate the data again */
|
|
|
|
- self.$root.sortdisabled = 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.freeze = false; /* activate the data again */
|
|
|
|
+ self.$root.sortdisabled = 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.blockType = false;
|
|
self.$root.$data.blockMarkdown = false;
|
|
self.$root.$data.blockMarkdown = false;
|
|
self.$root.$data.file = false;
|
|
self.$root.$data.file = false;
|
|
- publishController.errors.message = false; /* delete all error messages */
|
|
|
|
|
|
+ publishController.errors.message = false; /* delete all error messages */
|
|
this.$refs.preview.style.minHeight = "auto";
|
|
this.$refs.preview.style.minHeight = "auto";
|
|
},
|
|
},
|
|
freezePage: function()
|
|
freezePage: function()
|
|
@@ -216,7 +235,8 @@ const contentComponent = Vue.component('content-block', {
|
|
{
|
|
{
|
|
if(this.compmarkdown == undefined || this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"") == '')
|
|
if(this.compmarkdown == undefined || this.compmarkdown.replace(/(\r\n|\n|\r|\s)/gm,"") == '')
|
|
{
|
|
{
|
|
- this.switchToPreviewMode();
|
|
|
|
|
|
+ this.$root.$data.unsafed = false;
|
|
|
|
+ this.switchToPreviewMode();
|
|
}
|
|
}
|
|
else
|
|
else
|
|
{
|
|
{
|
|
@@ -263,6 +283,7 @@ const contentComponent = Vue.component('content-block', {
|
|
var oldVideoID = this.$root.$data.blockMarkdown.match(/#.*? /);
|
|
var oldVideoID = this.$root.$data.blockMarkdown.match(/#.*? /);
|
|
if(this.compmarkdown.indexOf(oldVideoID[0].substring(1).trim()) !== -1)
|
|
if(this.compmarkdown.indexOf(oldVideoID[0].substring(1).trim()) !== -1)
|
|
{
|
|
{
|
|
|
|
+ this.$root.$data.unsafed = false;
|
|
this.activatePage();
|
|
this.activatePage();
|
|
this.switchToPreviewMode();
|
|
this.switchToPreviewMode();
|
|
return;
|
|
return;
|
|
@@ -294,6 +315,7 @@ const contentComponent = Vue.component('content-block', {
|
|
{
|
|
{
|
|
if(httpStatus == 400)
|
|
if(httpStatus == 400)
|
|
{
|
|
{
|
|
|
|
+ this.$root.$data.unsafed = false;
|
|
self.activatePage();
|
|
self.activatePage();
|
|
publishController.errors.message = "Looks like you are logged out. Please login and try again.";
|
|
publishController.errors.message = "Looks like you are logged out. Please login and try again.";
|
|
}
|
|
}
|
|
@@ -305,12 +327,14 @@ const contentComponent = Vue.component('content-block', {
|
|
|
|
|
|
if(result.errors)
|
|
if(result.errors)
|
|
{
|
|
{
|
|
|
|
+ self.$root.$data.unsafed = false;
|
|
publishController.errors.message = result.errors.message;
|
|
publishController.errors.message = result.errors.message;
|
|
}
|
|
}
|
|
else
|
|
else
|
|
{
|
|
{
|
|
var thisBlockType = self.$root.$data.blockType;
|
|
var thisBlockType = self.$root.$data.blockType;
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+ self.$root.$data.unsafed = false;
|
|
self.switchToPreviewMode();
|
|
self.switchToPreviewMode();
|
|
|
|
|
|
if(self.$root.$data.blockId == 99999)
|
|
if(self.$root.$data.blockId == 99999)
|
|
@@ -374,6 +398,7 @@ const contentComponent = Vue.component('content-block', {
|
|
}
|
|
}
|
|
else if(httpStatus != 200)
|
|
else if(httpStatus != 200)
|
|
{
|
|
{
|
|
|
|
+ self.$root.$data.unsafed = false;
|
|
self.activatePage();
|
|
self.activatePage();
|
|
publishController.errors.message = "Sorry, something went wrong. Please refresh the page and try again.";
|
|
publishController.errors.message = "Sorry, something went wrong. Please refresh the page and try again.";
|
|
}
|
|
}
|
|
@@ -405,11 +430,13 @@ const contentComponent = Vue.component('content-block', {
|
|
{
|
|
{
|
|
if(httpStatus == 400)
|
|
if(httpStatus == 400)
|
|
{
|
|
{
|
|
|
|
+ self.$root.$data.unsafed = false;
|
|
self.activatePage();
|
|
self.activatePage();
|
|
publishController.errors.message = "Looks like you are logged out. Please login and try again.";
|
|
publishController.errors.message = "Looks like you are logged out. Please login and try again.";
|
|
}
|
|
}
|
|
if(response)
|
|
if(response)
|
|
{
|
|
{
|
|
|
|
+ self.$root.$data.unsafed = false;
|
|
self.activatePage();
|
|
self.activatePage();
|
|
|
|
|
|
var result = JSON.parse(response);
|
|
var result = JSON.parse(response);
|
|
@@ -798,8 +825,9 @@ const noticeComponent = Vue.component('notice-component', {
|
|
this.prefix = this.getNoticePrefix(this.compmarkdown);
|
|
this.prefix = this.getNoticePrefix(this.compmarkdown);
|
|
|
|
|
|
var lines = this.compmarkdown.match(/^.*([\n\r]+|$)/gm);
|
|
var lines = this.compmarkdown.match(/^.*([\n\r]+|$)/gm);
|
|
- for (var i = 0; i < lines.length; i++) {
|
|
|
|
- lines[i] = lines[i].replace(/(^[\! ]+)/mg, '');
|
|
|
|
|
|
+ for (var i = 0; i < lines.length; i++)
|
|
|
|
+ {
|
|
|
|
+ lines[i] = lines[i].replace(/(^[\! ]+(?!\[))/mg, '');
|
|
}
|
|
}
|
|
|
|
|
|
this.notice = lines.join('');
|
|
this.notice = lines.join('');
|
|
@@ -1432,11 +1460,11 @@ const imageComponent = Vue.component('image-component', {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- var imgpreview = imgmarkdown.match(/\(.*?\)/);
|
|
|
|
- if(imgpreview)
|
|
|
|
|
|
+ var imgfile = imgmarkdown.match(/\(.*?\)/);
|
|
|
|
+ if(imgfile)
|
|
{
|
|
{
|
|
- this.imgpreview = imgpreview[0].slice(1,-1);
|
|
|
|
- this.imgfile = this.imgpreview;
|
|
|
|
|
|
+ this.imgfile = imgfile[0].slice(1,-1);
|
|
|
|
+ this.imgpreview = this.$root.$data.root + '/' + this.imgfile;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -1822,500 +1850,6 @@ const fileComponent = Vue.component('file-component', {
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
-const medialib = Vue.component('medialib', {
|
|
|
|
- props: ['parentcomponent'],
|
|
|
|
- template: '<div class="medialib">' +
|
|
|
|
- '<div class="mt3">' +
|
|
|
|
- '<div class="w-30 dib v-top ph4 pv3">' +
|
|
|
|
- '<button class="f6 link br0 ba ph3 pv2 mb2 w-100 dim white bn bg-tm-red" @click.prevent="closemedialib()">{{ \'close library\'|translate }}</button>' +
|
|
|
|
- '<div class="w-100 relative">' +
|
|
|
|
- '<div><input v-model="search" class="w-100 border-box pa2 mb3 br0 ba b--light-silver"><svg class="icon icon-search absolute top-1 right-1 pa1 gray"><use xlink:href="#icon-search"></use></svg></div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<button @click.prevent="showImages()" class="link br0 ba ph3 pv2 mv2 mr1" :class="isImagesActive()">{{ \'Images\'|translate }}</button>' +
|
|
|
|
- '<button @click.prevent="showFiles()" class="link br0 ba ph3 pv2 mv2 ml1" :class="isFilesActive()">{{ \'Files\'|translate }}</button>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="w-70 dib v-top center">' +
|
|
|
|
- '<div v-if="errors" class="w-95 mv3 white bg-tm-red tc f5 lh-copy pa3">{{errors}}</div>' +
|
|
|
|
- '<transition-group name="list">' +
|
|
|
|
- '<div class="w-29 ma3 dib v-top bg-white shadow-tm overflow-hidden" v-for="(image, index) in filteredImages" :key="image.name" v-if="showimages">' +
|
|
|
|
- '<a href="#" @click.prevent="selectImage(image)" :style="getBackgroundImage(image)" class="link mw5 dt hide-child cover bg-center">' +
|
|
|
|
- '<span class="white dtc v-mid center w-100 h-100 child bg-black-80 pa5"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> click to select</span>' +
|
|
|
|
- '</a>' +
|
|
|
|
- '<div>' +
|
|
|
|
- '<div class="w-70 dib v-top pl3 pv3 f6 truncate"><strong>{{ image.name }}</strong></div>' +
|
|
|
|
- '<button @click.prevent="showImageDetails(image,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-green hover-white"><svg class="icon icon-info baseline"><use xlink:href="#icon-info"></use></svg></button>' +
|
|
|
|
- '<button @click.prevent="deleteImage(image,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg></button>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</transition-group>' +
|
|
|
|
- '<div class="w-95 dib v-top bg-white mv3 relative" v-if="showimagedetails">' +
|
|
|
|
- '<div class="flex flex-wrap item-start">' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="w6 h6 bg-black-40 dtc v-mid bg-chess">' +
|
|
|
|
- '<img :src="imagedetaildata.src_live" class="mw6 max-h6 dt center">' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="w-50 pa3 lh-copy f7 relative">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Name</div><div class="b">{{ imagedetaildata.name}}</div>' +
|
|
|
|
- '<div class="black-30 mt3 mb1">URL</div><div class="b">{{ imagedetaildata.src_live}}</div>' +
|
|
|
|
- '<div class="flex flex-wrap item-start">' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Size</div><div class="b">{{ getSize(imagedetaildata.bytes) }}</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Dimensions</div><div class="b">{{ imagedetaildata.width }}x{{ imagedetaildata.height }} px</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Type</div><div class="b">{{ imagedetaildata.type }}</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Date</div><div class="b">{{ getDate(imagedetaildata.timestamp) }}</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="absolute w-90 bottom-0 flex justify-between">' +
|
|
|
|
- '<button @click.prevent="selectImage(imagedetaildata)" class="w-50 mr1 pa2 link bn bg-light-gray hover-bg-tm-green hover-white"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> select</button>' +
|
|
|
|
- '<button @click.prevent="deleteImage(imagedetaildata, detailindex)" class="w-50 ml1 pa2 link bn bg-light-gray hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg> delete</button>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<button class="f7 link br0 ba ph3 pv2 dim white bn bg-tm-red absolute top-0 right-0" @click.prevent="showImages()">close details</button>' +
|
|
|
|
- '<div class="pa3">' +
|
|
|
|
- '<h4>Image used in:</h4>' +
|
|
|
|
- '<ul class="ma0 pa0" v-if="imagedetaildata.pages && imagedetaildata.pages.length > 0">' +
|
|
|
|
- '<li class="list pa1" v-for="page in imagedetaildata.pages">' +
|
|
|
|
- '<a class="link tm-red" :href="baseurl + page">{{ page }}</a>' +
|
|
|
|
- '</li>' +
|
|
|
|
- '</ul>' +
|
|
|
|
- '<div v-else>No pages found.</div>'+
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<transition-group name="list">' +
|
|
|
|
- '<div class="w-29 ma3 dib v-top bg-white shadow-tm overflow-hidden" v-for="(file, index) in filteredFiles" :key="file.name" v-if="showfiles">' +
|
|
|
|
- '<a href="#" @click.prevent="selectFile(file)" class="w-100 link cover bg-tm-green bg-center relative dt">' +
|
|
|
|
- '<div class="absolute w-100 tc white f1 top-3 h0 ttu" v-html="file.info.extension"></div>' +
|
|
|
|
- '<div class="link dt hide-child w-100">' +
|
|
|
|
- '<span class="white dtc v-top center w-100 h-100 child pt6 pb3 tc"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> click to select</span>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</a>' +
|
|
|
|
- '<div>' +
|
|
|
|
- '<div class="w-70 dib v-top pl3 pv3 f6 truncate"><strong>{{ file.name }}</strong></div>' +
|
|
|
|
- '<button @click.prevent="showFileDetails(file,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-green hover-white"><svg class="icon icon-info baseline"><use xlink:href="#icon-info"></use></svg></button>' +
|
|
|
|
- '<button @click.prevent="deleteFile(file,index)" class="w-15 center dib link bn v-mid pv3 bg-white hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg></button>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</transition-group>' +
|
|
|
|
- '<div class="w-95 dib v-top bg-white mv3 relative" v-if="showfiledetails">' +
|
|
|
|
- '<div class="flex flex-wrap item-start">' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="w6 h6 bg-black-40 dtc v-mid bg-tm-green tc">' +
|
|
|
|
- '<div class="w-100 dt center white f1 ttu">{{ filedetaildata.info.extension }}</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="w-50 pa3 lh-copy f7 relative">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Name</div><div class="b">{{ filedetaildata.name}}</div>' +
|
|
|
|
- '<div class="black-30 mt3 mb1">URL</div><div class="b">{{ filedetaildata.url}}</div>' +
|
|
|
|
- '<div class="flex flex-wrap item-start">' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Size</div><div class="b">{{ getSize(filedetaildata.bytes) }}</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Type</div><div class="b">{{ filedetaildata.info.extension }}</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="w-50">' +
|
|
|
|
- '<div class="black-30 mt3 mb1">Date</div><div class="b">{{ getDate(filedetaildata.timestamp) }}</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<div class="absolute w-90 bottom-0 flex justify-between">' +
|
|
|
|
- '<button @click.prevent="selectFile(filedetaildata)" class="w-50 mr1 pa2 link bn bg-light-gray hover-bg-tm-green hover-white"><svg class="icon icon-check baseline"><use xlink:href="#icon-check"></use></svg> select</button>' +
|
|
|
|
- '<button @click.prevent="deleteFile(filedetaildata, detailindex)" class="w-50 ml1 pa2 link bn bg-light-gray hover-bg-tm-red hover-white"><svg class="icon icon-trash-o baseline"><use xlink:href="#icon-trash-o"></use></svg> delete</button>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '<button class="f7 link br0 ba ph3 pv2 dim white bn bg-tm-red absolute top-0 right-0" @click.prevent="showFiles()">close details</button>' +
|
|
|
|
- '<div class="pa3">' +
|
|
|
|
- '<h4>File used in:</h4>' +
|
|
|
|
- '<ul class="ma0 pa0" v-if="filedetaildata.pages && filedetaildata.pages.length > 0">' +
|
|
|
|
- '<li class="list pa1" v-for="page in filedetaildata.pages">' +
|
|
|
|
- '<a class="link tm-red" :href="baseurl + page">{{ page }}</a>' +
|
|
|
|
- '</li>' +
|
|
|
|
- '</ul>' +
|
|
|
|
- '<div v-else>No pages found.</div>'+
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>' +
|
|
|
|
- '</div>',
|
|
|
|
- data: function(){
|
|
|
|
- return {
|
|
|
|
- imagedata: false,
|
|
|
|
- showimages: true,
|
|
|
|
- imagedetaildata: false,
|
|
|
|
- showimagedetails: false,
|
|
|
|
- filedata: false,
|
|
|
|
- showfiles: false,
|
|
|
|
- filedetaildata: false,
|
|
|
|
- showfiledetails: false,
|
|
|
|
- detailindex: false,
|
|
|
|
- load: false,
|
|
|
|
- baseurl: 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(' + image.src_thumb + ');width:250px';
|
|
|
|
- },
|
|
|
|
- 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.baseurl = 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.baseurl = 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 = 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'];
|
|
|
|
- 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 = 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';
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-})
|
|
|
|
-
|
|
|
|
|
|
|
|
let activeFormats = [];
|
|
let activeFormats = [];
|
|
|
|
|
|
@@ -2342,6 +1876,7 @@ let editor = new Vue({
|
|
blockMarkdown: false,
|
|
blockMarkdown: false,
|
|
file: false,
|
|
file: false,
|
|
freeze: false,
|
|
freeze: false,
|
|
|
|
+ unsafed: false,
|
|
newBlocks: [],
|
|
newBlocks: [],
|
|
addblock: false,
|
|
addblock: false,
|
|
draftDisabled: true,
|
|
draftDisabled: true,
|
|
@@ -2495,7 +2030,8 @@ let editor = new Vue({
|
|
},
|
|
},
|
|
setData: function(event, blocktype, body)
|
|
setData: function(event, blocktype, body)
|
|
{
|
|
{
|
|
- // change this, not needed anymore.
|
|
|
|
|
|
+ if(this.unsafed){ return; }
|
|
|
|
+
|
|
this.blockId = event.currentTarget.dataset.id;
|
|
this.blockId = event.currentTarget.dataset.id;
|
|
this.blockMarkdown = this.markdown[this.blockId];
|
|
this.blockMarkdown = this.markdown[this.blockId];
|
|
if(blocktype)
|
|
if(blocktype)
|