296 lines
10 KiB
PHP
296 lines
10 KiB
PHP
@extends('layouts.frontendTemplate')
|
|
|
|
<style>
|
|
li a:hover {
|
|
color: #E23134 !important
|
|
}
|
|
|
|
.category span {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.category p {
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
.video-wrapper {
|
|
position: unset !important;
|
|
}
|
|
|
|
.video-wrapper iframe {
|
|
width: 100% !important;
|
|
height: 400px !important;
|
|
}
|
|
</style>
|
|
|
|
@section('main')
|
|
|
|
<!-- start page title section -->
|
|
<section class="wow animate__fadeIn bg-extra-dark-gray padding-35px-tb page-title-small top-space">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-xl-8 col-md-6 text-center text-md-start">
|
|
<!-- start page title -->
|
|
<h1 class="alt-font text-white-2 font-weight-600 mb-0 text-uppercase">{{ $itemView->name }}</h1>
|
|
<!-- end page title -->
|
|
</div>
|
|
<div
|
|
class="col-xl-4 col-md-6 breadcrumb alt-font text-small justify-content-center justify-content-md-end sm-margin-10px-top">
|
|
<!-- breadcrumb -->
|
|
<ul class="text-center text-md-end">
|
|
<li><a href="{{ url('') }}" class="text-white">Home</a></li>
|
|
<li><a href="{{ url('category') }}" class="text-white">Categories</a></li>
|
|
<li><a href="{{ url('category/subject/' . $categoryView->id) }}"
|
|
class="text-white">{{ $categoryView->name }}</a></li>
|
|
<li class="text-white">{{ $itemView->name }}</li>
|
|
</ul>
|
|
<!-- end breadcrumb -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end page title section -->
|
|
|
|
<!-- start tab style 01 section -->
|
|
<section class="wow animate__fadeIn">
|
|
<div class="container tab-style2">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<img src="{{ url('images/logo.png') }}" class="logo-dark margin-50px-bottom" alt="GREATER CHIANG MAI">
|
|
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">
|
|
{{ Carbon\Carbon::parse($itemView->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
|
</p>
|
|
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
|
{{ $itemView->name }}</h5>
|
|
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
|
</div>
|
|
|
|
<div class="col-12 my-5">
|
|
|
|
<h2 class="alt-font text-extra-dark-gray margin-10px-bottom font-weight-600 md-w-100"
|
|
style="font-size: 26px">{{ $itemView->name }}</h2>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="description" name="description"></div>
|
|
</div>
|
|
</section>
|
|
<!-- end tab style 01 section -->
|
|
|
|
|
|
@stop
|
|
|
|
@section('js')
|
|
|
|
|
|
<!-- Include Editor.js core -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
|
|
|
|
<!-- Include the plugins -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/header"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/list"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/paragraph"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/quote"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/image"></script>>
|
|
<script src="https://cdn.jsdelivr.net/npm/editorjs-inline-image"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/embed"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/code"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/table"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/marker"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/delimiter"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/warning"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@editorjs/link"></script>
|
|
|
|
<script>
|
|
// Custom video tool for embedding videos
|
|
class VideoTool {
|
|
constructor({
|
|
data
|
|
}) {
|
|
this.data = data || {};
|
|
}
|
|
|
|
// Render input for video URL
|
|
render() {
|
|
const wrapper = document.createElement("div");
|
|
wrapper.style.pointerEvents = 'none'; // Disable all events on the wrapper
|
|
|
|
const video = document.createElement("video");
|
|
video.controls = true; // Enable controls for playback
|
|
video.style.width = "100%";
|
|
video.style.marginTop = "10px";
|
|
video.src = this.data.url || "";
|
|
|
|
wrapper.appendChild(video);
|
|
return wrapper;
|
|
}
|
|
}
|
|
|
|
class YoutubeEmbed {
|
|
/**
|
|
* Define the toolbox settings for the Editor.js toolbar.
|
|
*/
|
|
static get toolbox() {
|
|
return {
|
|
title: "YouTube",
|
|
icon: '<svg width="18" height="18" viewBox="0 0 24 24"><path d="M19.615 3.184c-.403-1.516-1.589-2.693-3.09-3.091-2.719-.727-13.525-.727-16.244 0-1.514.398-2.687 1.57-3.09 3.091-.727 2.719-.727 13.525 0 16.244.403 1.514 1.576 2.693 3.09 3.09 2.719.727 13.525.727 16.244 0 1.516-.397 2.692-1.576 3.09-3.09.727-2.719.727-13.525 0-16.244zm-11.615 13.316v-8l8 4-8 4z"/></svg>',
|
|
};
|
|
}
|
|
|
|
constructor({
|
|
data,
|
|
config,
|
|
api,
|
|
readOnly
|
|
}) {
|
|
this.data = data || {};
|
|
this.readOnly = readOnly;
|
|
this.wrapper = null;
|
|
this.url = this.data.url || '';
|
|
this.isEdited = false;
|
|
}
|
|
|
|
/**
|
|
* Render the input field and YouTube preview.
|
|
*/
|
|
render() {
|
|
this.wrapper = document.createElement('div');
|
|
this.wrapper.classList.add('block-wrapper');
|
|
|
|
const input = document.createElement('input');
|
|
input.value = this.url;
|
|
input.placeholder = "Paste YouTube URL here...";
|
|
input.style.width = '100%';
|
|
|
|
this.wrapper.appendChild(input);
|
|
this._createIframe(this.url);
|
|
|
|
input.addEventListener('change', (event) => {
|
|
this.isEdited = true;
|
|
this.url = event.target.value;
|
|
this._createIframe(this.url);
|
|
});
|
|
|
|
return this.wrapper;
|
|
}
|
|
|
|
/**
|
|
* Create the iframe for the YouTube video.
|
|
*/
|
|
_createIframe(url) {
|
|
const videoId = this._extractVideoID(url);
|
|
if (!videoId) {
|
|
if (this.isEdited) {
|
|
this.wrapper.querySelector('input').classList.add('invalid');
|
|
}
|
|
return;
|
|
}
|
|
|
|
this.wrapper.innerHTML = ''; // Clear the wrapper
|
|
|
|
const plyrContainer = document.createElement('div');
|
|
plyrContainer.classList.add('video-wrapper');
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = `https://www.youtube.com/embed/${videoId}`;
|
|
iframe.allowFullscreen = true;
|
|
|
|
plyrContainer.appendChild(iframe);
|
|
this.wrapper.appendChild(plyrContainer);
|
|
}
|
|
|
|
/**
|
|
* Extract the YouTube video ID from the URL.
|
|
*/
|
|
_extractVideoID(url) {
|
|
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&?/]+)/;
|
|
const match = url.match(regex);
|
|
return match ? match[1] : null;
|
|
}
|
|
|
|
/**
|
|
* Return the saved data for this block.
|
|
*/
|
|
save(blockContent) {
|
|
return {
|
|
url: this.url,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Notify the core that this tool supports read-only mode.
|
|
*/
|
|
static get isReadOnlySupported() {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
const tools = {
|
|
header: {
|
|
class: Header,
|
|
inlineToolbar: false,
|
|
},
|
|
youtube: YoutubeEmbed,
|
|
embed: {
|
|
class: Embed,
|
|
inlineToolbar: false,
|
|
},
|
|
linkTool: {
|
|
class: LinkTool,
|
|
inlineToolbar: false,
|
|
},
|
|
video: {
|
|
class: VideoTool,
|
|
inlineToolbar: false,
|
|
},
|
|
image: {
|
|
class: InlineImage,
|
|
inlineToolbar: false,
|
|
},
|
|
}
|
|
|
|
const descriptionData = {!! json_encode($itemView->description) !!};
|
|
const editorDescription = new EditorJS({
|
|
holder: 'description',
|
|
tools: tools,
|
|
//readOnly: true,
|
|
data: JSON.parse(descriptionData),
|
|
minHeight: 0,
|
|
onReady: () => {
|
|
const editorContainer = document.querySelector('#description');
|
|
|
|
// Disable editing for all tools
|
|
if (editorContainer) {
|
|
const allElements = editorContainer.querySelectorAll('*');
|
|
allElements.forEach(element => {
|
|
if (element.hasAttribute('contenteditable')) {
|
|
element.setAttribute('contenteditable', 'false'); // Set to non-editable
|
|
}
|
|
});
|
|
}
|
|
|
|
// Hide toolbar actions
|
|
const toolbarActions = document.querySelectorAll(
|
|
'.ce-toolbar__actions, .ce-toolbar__actions--opened');
|
|
toolbarActions.forEach(action => {
|
|
action.style.display = 'none'; // Hide the action toolbars
|
|
});
|
|
|
|
// Optionally hide any popups
|
|
const popoverContainer = document.querySelector('.ce-popover__container');
|
|
if (popoverContainer) {
|
|
popoverContainer.style.display = 'none';
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
@endsection
|