Add video-js shortcode #308
@ -272,7 +272,7 @@ textarea.form-control {
|
||||
border-color: var(--gcg-color-primary);
|
||||
}
|
||||
|
||||
.content *:not(details, details > *, .shortcode *, .alert *) {
|
||||
.content *:not(details, details > *, .shortcode *, .alert *, .video-js *) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -69,6 +69,14 @@
|
||||
});
|
||||
});
|
||||
|
||||
// video-js
|
||||
$(document).ready(function () {
|
||||
document.querySelectorAll("video.video-js").forEach((video) => {
|
||||
// @ts-ignore
|
||||
videojs(video, {});
|
||||
});
|
||||
});
|
||||
|
||||
// filter
|
||||
$(document).ready(function () {
|
||||
if ($(".filter-container").length != 0) {
|
||||
|
||||
@ -35,11 +35,13 @@ params:
|
||||
- https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.css
|
||||
- https://assets.cantorgymnasium.de/fonts/fira/fira.min.css
|
||||
- https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.min.css
|
||||
- https://assets.cantorgymnasium.de/videojs/v8/video-js.min.css
|
||||
- /pagefind/pagefind-ui.css
|
||||
js:
|
||||
- https://assets.cantorgymnasium.de/bootstrap/v5/js/bootstrap.bundle.min.js
|
||||
- https://assets.cantorgymnasium.de/slick/v1.8/slick.min.js
|
||||
- https://assets.cantorgymnasium.de/lazyload/v17/dist/lazyload.min.js
|
||||
- https://assets.cantorgymnasium.de/videojs/v8/video.min.js
|
||||
- /pagefind/pagefind-ui.js
|
||||
head_js:
|
||||
- https://assets.cantorgymnasium.de/jquery/v3.7/jquery.min.js
|
||||
|
||||
@ -32,7 +32,7 @@ Im Rahmen der ["Red Hand Day"-Aktion](https://www.redhandday.org/de/), welche au
|
||||
|
||||
Unserem Wunsch, diese Botschaft im Form von Handabdrücken an die Politik zu übergeben, konnte der Bundestagsabgeordnete für Halle, Herr Dr. Karamba Diaby, entsprechen. Am Dienstag, dem 12.09.2023, bekamen wir die Gelegenheit, eine Podiumsdiskussion mit ihm zu veranstalten. In diesem Rahmen übergaben wir ihm auch eine Mappe mit unseren Handabdrücken.
|
||||
|
||||
<video class="mb-0" src="https://cloud.cantorgymnasium.de/s/9RqxDLfppQt5YBL/download/RedHandErweitert_Final.mp4" controls width="100%"></video>
|
||||
{{< video src="https://cloud.cantorgymnasium.de/s/9RqxDLfppQt5YBL/download/RedHandErweitert_Final.mp4" >}}
|
||||
|
||||
{{< card title="Artikel: Red Hand Day - Talk mit Dr. Karamba Diaby" link="/blog/red-hand-day-talk-mit-dr-karamba-diaby/" >}}
|
||||
|
||||
@ -236,7 +236,7 @@ Auf das letzte Klavierstück der Veranstaltung - "Nightbook" von Ludovico Einaud
|
||||
|
||||
Zum letzten Mal für diesen abwechslungsreichen Nachmittag stand nun wieder die Wissenschaft im Vordergrund: mittels einer Live-Übertragung durften unsere Gäste den Start eines Wetterballons, organisiert und umgesetzt durch den Modulkurs Physik der Klasse 11, mitverfolgen.
|
||||
|
||||
<video src="https://cloud.cantorgymnasium.de/s/8HHKXf5Fewb5im7/download/Wetterballon%20ffmpeg.mp4" width="100%" controls></video>
|
||||
{{< video src="https://cloud.cantorgymnasium.de/s/8HHKXf5Fewb5im7/download/Wetterballon%20ffmpeg.mp4" >}}
|
||||
|
||||
Zum Zeitpunkt der Veröffentlichung dieses Artikels ist der Wetterballon bereits gelandet und die aufgenommenen Daten befinden sich in der Auswertung. Regelmäßige Website-Besucher können sich also schon jetzt auf einen eigenen Beitrag zum Ballonstart freuen.
|
||||
|
||||
@ -324,7 +324,7 @@ Einige Versuche später entstand um 12.46 Uhr die Endversion des Bildes als krö
|
||||
|
||||
{{< gallery dir="/media/blog/Sj2023_2024/35-jahre-gcg/flashmob" >}}
|
||||
|
||||
<video src="https://cloud.cantorgymnasium.de/s/kP6KYoBsjBGEwLs/download/35%20Jahre%20Georg%20Cantor%20Gymnasium.mp4" width="100%" controls></video>
|
||||
{{< video src="https://cloud.cantorgymnasium.de/s/kP6KYoBsjBGEwLs/download/35%20Jahre%20Georg%20Cantor%20Gymnasium.mp4" >}}
|
||||
|
||||
## Danksagung
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="shortcode card border-primary rounded-0 hover-shadow mb-2">
|
||||
<div class="card-body mb-0">
|
||||
<h4 class="card-title"><a class="text-decoration-none" href='{{ .link }}'>{{ .title }}</a></h4>
|
||||
<a href='{{ .link }}' class="text-decoration-none btn btn-primary btn-sm mb-0">{{ partial "mdi" "tray-arrow-down" }}<span class="ms-2">Download</span></a>
|
||||
<h4 class="card-title"><a class="text-decoration-none" href="{{ .link }}">{{ .title }}</a></h4>
|
||||
<a href="{{ .link }}" class="text-decoration-none btn btn-primary btn-sm mb-0">{{ partial "mdi" "tray-arrow-down" }}<span class="ms-2">Download</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
{{ if and .image (ne .image "/media/image.webp") }}
|
||||
<img class="card-img-top rounded-0" src="{{ .image | relURL }}">
|
||||
{{ else }}
|
||||
<div class="container fb-tile-color" style="background-color:{{ .bg_color }};">
|
||||
<div class="container fb-tile-color" style="background-color: {{ .bg_color }};">
|
||||
<span class="fb-tile-icon" style="color: {{ .font_color }}">{{ partial "mdi" .icon }}</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
@ -32,4 +32,4 @@
|
||||
</div>
|
||||
<div class="filter-sizer col-1"></div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="shortcode card">
|
||||
<audio src='{{ .Get "src" }}' class="mb-0" controls></audio>
|
||||
</div>
|
||||
<audio src="{{ .Get `src` }}" class="mb-0" controls></audio>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="shortcode card border-primary rounded-0 hover-shadow mb-4">
|
||||
<div class="card-body mb-0">
|
||||
<h4 class="card-title"><a class="text-decoration-none" href='{{ .Get "link" }}'>{{ .Get "title" }}</a></h4>
|
||||
<a href='{{ .Get "link" }}' class="mb-0 btn btn-primary btn-sm text-decoration-none">Mehr anzeigen</a>
|
||||
<h4 class="card-title"><a class="text-decoration-none" href="{{ .Get `link` }}">{{ .Get "title" }}</a></h4>
|
||||
<a href="{{ .Get `link` }}" class="mb-0 btn btn-primary btn-sm text-decoration-none">Mehr anzeigen</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,14 +6,14 @@
|
||||
{{ $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
|
||||
{{ if $isimg }}
|
||||
{{ $linkURL := print (trim $.Site.BaseURL "/") "/" $dir "/" .Name | absURL }}
|
||||
<div class="col-lg-3 col-md-4 col-sm-6">
|
||||
<a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}">
|
||||
<div class="ratio ratio-4x3">
|
||||
<img class="lazy img-thumbnail w-100 object-cover" data-src="{{ $linkURL }}">
|
||||
</div>
|
||||
</a>
|
||||
<div class="col-lg-3 col-md-4 col-sm-6 mb-2">
|
||||
<a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}">
|
||||
<div class="ratio ratio-4x3">
|
||||
<img class="lazy img-thumbnail w-100 object-cover" data-src="{{ $linkURL }}">
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<div class="shortcode col-lg-3 col-md-4 col-sm-6">
|
||||
<a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src='{{ .Get "src" }}'></a>
|
||||
</div>
|
||||
<a class="vb-gallery" data-gall="{{ md5 (.Get `src`) }}" href="{{ .Get `src` }}"><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src="{{ .Get `src` }}"></a>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{{ $dir := (.Get "dir") }}
|
||||
{{ if $dir }}
|
||||
<div class="shortcode card border-primary rounded-3">
|
||||
<div class="carousel slide mb-0" data-bs-ride="true" id='slider-{{ md5 $dir }}'>
|
||||
<div class="carousel slide mb-0" data-bs-ride="true" id="slider-{{ md5 $dir }}">
|
||||
{{ $images := slice }}
|
||||
{{ range readDir (print "/static/" $dir) }}
|
||||
{{ if (lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)") }}
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="carousel-inner mb-0">
|
||||
{{ range $index, $image := $images }}
|
||||
<div class="carousel-item mb-0 {{ if eq $index 0 }}active{{end}}">
|
||||
<img src='{{ print $.Site.BaseURL $dir "/" $image.Name | absURL }}' class="d-block w-100 mb-0 rounded-3">
|
||||
<img src="{{ print $.Site.BaseURL $dir `/` $image.Name | absURL }}" class="d-block w-100 mb-0 rounded-3">
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
@ -30,4 +30,4 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
1
layouts/shortcodes/video.html
Normal file
1
layouts/shortcodes/video.html
Normal file
@ -0,0 +1 @@
|
||||
<video class="video-js vjs-fluid" src="{{ .Get `src` }}" width="100%" controls></video>
|
||||
@ -10,7 +10,7 @@
|
||||
<div class="filter-container row mx-auto">
|
||||
{{ range sort .Params.events ".date" }}
|
||||
{{ if not .hidden }}
|
||||
<div class="filter-item col-12" data-groups='{{if partial "data/termin-upcoming" .}}upcoming{{else}}past{{end}}'>
|
||||
<div class="filter-item col-12" data-groups="{{ if partial `data/termin-upcoming` . }}upcoming{{else}}past{{end}}">
|
||||
{{ partial "termin" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@ -52,6 +52,7 @@
|
||||
YoutubeShortcode,
|
||||
AudioShortcode,
|
||||
SliderShortcode,
|
||||
VideoShortcode,
|
||||
} from "./shortcodes/index.js";
|
||||
import { StatusPage, WikiLink } from "./links/index.js";
|
||||
import Icons from "./icons.js";
|
||||
@ -110,6 +111,7 @@
|
||||
CMS.registerShortcode("youtube", YoutubeShortcode);
|
||||
CMS.registerShortcode("audio", AudioShortcode);
|
||||
CMS.registerShortcode("slider", SliderShortcode);
|
||||
CMS.registerShortcode("video", VideoShortcode);
|
||||
|
||||
// links
|
||||
CMS.registerAdditionalLink(StatusPage);
|
||||
|
||||
@ -1,17 +1,19 @@
|
||||
import AudioShortcode from "./audio.js";
|
||||
import CardShortcode from "./card.js";
|
||||
import DownloadShortcode from "./download.js";
|
||||
import GalleryShortcode from "./gallery.js";
|
||||
import ImageShortcode from "./image.js";
|
||||
import DownloadShortcode from "./download.js";
|
||||
import CardShortcode from "./card.js";
|
||||
import YoutubeShortcode from "./youtube.js";
|
||||
import AudioShortcode from "./audio.js";
|
||||
import SliderShortcode from "./slider.js";
|
||||
import VideoShortcode from "./video.js";
|
||||
import YoutubeShortcode from "./youtube.js";
|
||||
|
||||
export {
|
||||
AudioShortcode,
|
||||
CardShortcode,
|
||||
DownloadShortcode,
|
||||
GalleryShortcode,
|
||||
ImageShortcode,
|
||||
DownloadShortcode,
|
||||
CardShortcode,
|
||||
YoutubeShortcode,
|
||||
AudioShortcode,
|
||||
SliderShortcode,
|
||||
VideoShortcode,
|
||||
YoutubeShortcode,
|
||||
};
|
||||
|
||||
74
static/admin/shortcodes/video.js
Normal file
74
static/admin/shortcodes/video.js
Normal file
@ -0,0 +1,74 @@
|
||||
import { Card, TextField, Label } from "./components.js";
|
||||
|
||||
const VideoShortcode = {
|
||||
label: "Videodatei",
|
||||
openTag: "{{< ",
|
||||
closeTag: " >}}",
|
||||
separator: " ",
|
||||
toProps: (args) => {
|
||||
if (args.length > 0) {
|
||||
const src =
|
||||
args
|
||||
.find((arg) => arg.startsWith("src="))
|
||||
?.split("=")[1]
|
||||
.replaceAll('"', "") ?? "";
|
||||
return { src: src };
|
||||
}
|
||||
return { src: "" };
|
||||
},
|
||||
toArgs: ({ src }) => {
|
||||
return [`src=\"${src}\"`];
|
||||
},
|
||||
control: ({ src, onChange, controlProps }) => {
|
||||
const { collection, field } = controlProps;
|
||||
|
||||
const handleChange = ({ path }) => {
|
||||
onChange({ src: path });
|
||||
};
|
||||
|
||||
const handleOpenMediaLibrary = useMediaInsert(
|
||||
src,
|
||||
{ collection, field },
|
||||
handleChange
|
||||
);
|
||||
|
||||
return Card([
|
||||
Label("Videodatei"),
|
||||
h(
|
||||
"span",
|
||||
{ className: "CMS_WidgetDateTime_inputs" },
|
||||
TextField({
|
||||
value: src,
|
||||
onChange: (event) => {
|
||||
onChange({ src: event.target.value });
|
||||
},
|
||||
}),
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
key: "video-button",
|
||||
className: "CMS_WidgetDateTime_NowButton_root",
|
||||
},
|
||||
h(
|
||||
"button",
|
||||
{
|
||||
type: "button",
|
||||
onClick: handleOpenMediaLibrary,
|
||||
className: "CMS_Button_root CMS_Button_outlined-primary",
|
||||
},
|
||||
"wählen"
|
||||
)
|
||||
)
|
||||
),
|
||||
]);
|
||||
},
|
||||
preview: ({ src }) => {
|
||||
return h(
|
||||
"div",
|
||||
{ className: "card" },
|
||||
h("video", { className: "w-100", src: src, controls: true })
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default VideoShortcode;
|
||||
Loading…
x
Reference in New Issue
Block a user