Markdown Renderer hinzugefügt
This commit is contained in:
R40fendt
@@ -7,7 +7,7 @@ TODO:
|
||||
- Addhit
|
||||
- Galerie (Kommentare fixen, Rest geht)
|
||||
- BuLi-Tipp (Paarungsergebnisse Ladescreen fehlt noch, evtl. IFrame entfernen?)
|
||||
- Startseite (Events testen, type=fotos?)
|
||||
- Startseite Event Markdown-HTML Support
|
||||
- Footer, Texte?
|
||||
- Navbar Hamburger Menu
|
||||
- Klönkasten ungelesen Punkt (localStorage)
|
||||
|
||||
@@ -18,11 +18,13 @@
|
||||
"embla-carousel-vue": "^8.6.0",
|
||||
"jarallax": "^2.2.1",
|
||||
"jquery": "^3.7.1",
|
||||
"katex": "^0.16.27",
|
||||
"moment": "^2.30.1",
|
||||
"sloc": "^0.3.2",
|
||||
"striptags": "^3.2.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-async-computed": "^4.0.1",
|
||||
"vue-renderer-markdown": "^0.0.62",
|
||||
"vue-router": "^4.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -4,30 +4,32 @@ import striptags from "striptags";
|
||||
import moment, { Moment } from "moment";
|
||||
import Modal from "../Modal.vue";
|
||||
import $ from "jquery";
|
||||
import MarkdownRender from 'vue-renderer-markdown'
|
||||
import 'katex/dist/katex.min.css'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
let openedModals: number[] = [];
|
||||
return {
|
||||
openedModals,
|
||||
modaltypes: ["text", "html"],
|
||||
RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
events() {
|
||||
let result: any[]=[];
|
||||
data() {
|
||||
let openedModals: number[] = [];
|
||||
return {
|
||||
openedModals,
|
||||
modaltypes: ["text", "html"],
|
||||
RitzenbergenLib: RitzenbergenLib.RitzenbergenLib,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
events() {
|
||||
let result: any[] = [];
|
||||
|
||||
$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"),{
|
||||
crossDomain: true,
|
||||
async: false,
|
||||
success: function (data:string) {
|
||||
result = JSON.parse(data);
|
||||
},
|
||||
});
|
||||
console.log(result);
|
||||
return result;
|
||||
/*
|
||||
$.ajax(RitzenbergenLib.RitzenbergenLib.api("get_events.php"), {
|
||||
crossDomain: true,
|
||||
async: false,
|
||||
success: function (data: string) {
|
||||
result = JSON.parse(data);
|
||||
},
|
||||
});
|
||||
console.log(result);
|
||||
return result;
|
||||
/*
|
||||
Beispiel-Event-Array:
|
||||
[
|
||||
{
|
||||
@@ -38,6 +40,7 @@ export default {
|
||||
content: "<h1>Test</h1>",
|
||||
link: undefined,
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
minitext: ""
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
@@ -47,6 +50,8 @@ export default {
|
||||
content: "<h1>Testlink</h1>",
|
||||
link: "#/test",
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
minitext: ""
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
@@ -56,6 +61,8 @@ export default {
|
||||
content: "<h1>Testlink2</h1>",
|
||||
link: "/",
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
minitext: ""
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
@@ -65,6 +72,8 @@ export default {
|
||||
content: "Fotos vom Erntefest 2011",
|
||||
link: "erntefest/2011",
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
minitext: ""
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
@@ -74,105 +83,133 @@ export default {
|
||||
content: "<h1>Test2</h1>",
|
||||
link: undefined,
|
||||
foto: "erntefest/2011/pic08.jpg",
|
||||
minitext: ""
|
||||
},
|
||||
},
|
||||
];*/
|
||||
},
|
||||
},
|
||||
methods:{
|
||||
vorschautext(content:string) {
|
||||
let stripped=striptags(content);
|
||||
let vorschaulen=30;
|
||||
if(stripped.length>vorschaulen){
|
||||
return stripped.substring(0,vorschaulen)+"...";
|
||||
}else{
|
||||
return stripped;
|
||||
}
|
||||
},
|
||||
format_date(date: string){
|
||||
let mymoment:Moment=moment(date);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
vorschautext(content: string) {
|
||||
let stripped = striptags(content);
|
||||
let vorschaulen = 30;
|
||||
if (stripped.length > vorschaulen) {
|
||||
return stripped.substring(0, vorschaulen) + "...";
|
||||
} else {
|
||||
return stripped;
|
||||
}
|
||||
},
|
||||
format_date(date: string) {
|
||||
let mymoment: Moment = moment(date);
|
||||
|
||||
return mymoment.format("DD.MM.YYYY");
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Modal,
|
||||
},
|
||||
return mymoment.format("DD.MM.YYYY");
|
||||
},
|
||||
galerie(content: string) {
|
||||
this.$router.push({ path: "/bild/" + content });
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Modal,
|
||||
MarkdownRender
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-12 content-head">
|
||||
<div class="mbr-section-head">
|
||||
<h4
|
||||
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
|
||||
>
|
||||
<strong>Termine & Neuigkeiten</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- Events -->
|
||||
<section class="features03 cid-u6k7q0xyDG" id="news-1-u6k7q0xyDG">
|
||||
<div class="container-fluid">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-12 content-head">
|
||||
<div class="mbr-section-head">
|
||||
<h4
|
||||
class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"
|
||||
>
|
||||
<strong>Termine & Neuigkeiten</strong>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<!-- Events -->
|
||||
|
||||
<h5 class="align-center" v-if="events.length == 0">
|
||||
Es stehen keine Events an.
|
||||
</h5>
|
||||
<h5 class="align-center" v-if="events.length == 0">
|
||||
Es stehen keine Events an.
|
||||
</h5>
|
||||
|
||||
<div
|
||||
class="item features-image col-12 col-md-6 col-lg-3"
|
||||
:class="{ active: i % 4 == 0 }"
|
||||
v-for="(event, i) in events"
|
||||
>
|
||||
<Modal
|
||||
v-show="
|
||||
openedModals.includes(event.id) && modaltypes.includes(event.type)
|
||||
"
|
||||
@closemodal="openedModals.splice(openedModals.indexOf(event.id), 1)"
|
||||
:content="event.content"
|
||||
></Modal>
|
||||
<div class="item-wrapper">
|
||||
<div class="item-img mb-3">
|
||||
<img :src="RitzenbergenLib.get_img(event.foto)" />
|
||||
</div>
|
||||
<div class="item-content align-left">
|
||||
<h6 class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5">
|
||||
<strong
|
||||
><a class="text-black fw-bold" :data-id="event.id">{{
|
||||
event.eventname
|
||||
}}</a></strong
|
||||
>
|
||||
</h6>
|
||||
<p class="mbr-text mbr-fonts-style mb-3 display-7">
|
||||
{{ format_date(event.datum) }}
|
||||
</p>
|
||||
<p class="mbr-text mbr-fonts-style mb-3 display-7">
|
||||
{{ vorschautext(event.minitext) }}
|
||||
</p>
|
||||
<div class="mbr-section-btn item-footer">
|
||||
<a
|
||||
:download="event.type == 'dlink' ? event.link : undefined"
|
||||
:href="event.link"
|
||||
><button
|
||||
class="btn item-btn btn-primary display-7"
|
||||
:data-id="event.id"
|
||||
@click="openedModals.push(event.id)"
|
||||
>
|
||||
<span v-if="event.type == 'link'">Einladung öffnen</span>
|
||||
<span v-else-if="event.type == 'dlink'"
|
||||
>Einladung runterladen</span
|
||||
>
|
||||
<span v-else-if="event.type == 'fotos'" @click="galerie(event.content)">Fotos ansehen</span>
|
||||
<span v-else>Mehr</span>
|
||||
</button></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div
|
||||
class="item features-image col-12 col-md-6 col-lg-3"
|
||||
:class="{ active: i % 4 == 0 }"
|
||||
v-for="(event, i) in events"
|
||||
>
|
||||
<Modal
|
||||
v-show="
|
||||
openedModals.includes(event.id) &&
|
||||
modaltypes.includes(event.type)
|
||||
"
|
||||
@closemodal="
|
||||
openedModals.splice(
|
||||
openedModals.indexOf(event.id),
|
||||
1
|
||||
)
|
||||
"
|
||||
>
|
||||
<MarkdownRender :content="event.content" :options="{'allowHtml': true}"/>
|
||||
</Modal>
|
||||
|
||||
<div class="item-wrapper">
|
||||
<div class="item-img mb-3">
|
||||
<img :src="RitzenbergenLib.get_img(event.foto)" />
|
||||
</div>
|
||||
<div class="item-content align-left">
|
||||
<h6
|
||||
class="item-subtitle mbr-fonts-style mt-0 mb-3 display-5"
|
||||
>
|
||||
<strong
|
||||
><a
|
||||
class="text-black fw-bold"
|
||||
:data-id="event.id"
|
||||
>{{ event.eventname }}</a
|
||||
></strong
|
||||
>
|
||||
</h6>
|
||||
<p class="mbr-text mbr-fonts-style mb-3 display-7">
|
||||
{{ format_date(event.datum) }}
|
||||
</p>
|
||||
<p class="mbr-text mbr-fonts-style mb-3 display-7">
|
||||
{{ vorschautext(event.minitext) }}
|
||||
</p>
|
||||
<div class="mbr-section-btn item-footer">
|
||||
<a
|
||||
:download="
|
||||
event.type == 'dlink'
|
||||
? event.link
|
||||
: undefined
|
||||
"
|
||||
:href="event.link"
|
||||
><button
|
||||
class="btn item-btn btn-primary display-7"
|
||||
:data-id="event.id"
|
||||
@click="openedModals.push(event.id)"
|
||||
>
|
||||
<span v-if="event.type == 'link'"
|
||||
>Einladung öffnen</span
|
||||
>
|
||||
<span v-else-if="event.type == 'dlink'"
|
||||
>Einladung runterladen</span
|
||||
>
|
||||
<span
|
||||
v-else-if="event.type == 'fotos'"
|
||||
@click="galerie(event.content)"
|
||||
>Fotos ansehen</span
|
||||
>
|
||||
<span v-else>Mehr</span>
|
||||
</button></a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
<style></style>
|
||||
|
||||
Reference in New Issue
Block a user