initial commit
This commit is contained in:
@@ -0,0 +1,405 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-tool__caption,
|
||||
.inline-image__caption,
|
||||
.ce-toolbar--opened {
|
||||
/*display: none;*/
|
||||
border: unset;
|
||||
box-shadow: unset;
|
||||
font-style: oblique;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
padding-top: 0
|
||||
}
|
||||
|
||||
.ce-paragraph {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
|
||||
.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_en }}</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/where-else') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">{{ $itemView->name_en }}</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_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="THE 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_en }}</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_en }}</h2>
|
||||
<div style="text-align: right;" class="right-text">View: {{ $itemView->count_view ?? 0 }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description" name="description"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
|
||||
{{-- Random Articles --}}
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($randomArticlesView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}" alt="">
|
||||
<div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/chiangmai/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function initAjaxSetupToken() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateArticleCount() {
|
||||
|
||||
const articleId = "{{ $itemView->id }}";
|
||||
|
||||
// set up ajax
|
||||
initAjaxSetupToken();
|
||||
|
||||
const ajaxProp = {
|
||||
url: "{{ url('update-article-count') }}", // Endpoint to update count
|
||||
dataType: 'json',
|
||||
method: 'POST', // Use POST to update data
|
||||
data: JSON.stringify({
|
||||
id: articleId
|
||||
}), // Corrected stringify method
|
||||
contentType: 'application/json', // Send JSON payload
|
||||
processData: false, // Not needed, but harmless
|
||||
success: function(response) {
|
||||
//console.log('Article view count updated:', response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Error updating view count:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.ajax(ajaxProp).done(function(res) {
|
||||
if (res.status) {
|
||||
console.log('update success');
|
||||
} else {
|
||||
console.log('update fail')
|
||||
}
|
||||
}).fail(function(xhr, status, error) {
|
||||
console.log('update fail')
|
||||
});
|
||||
}
|
||||
updateArticleCount();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- 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/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-break-line"></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,
|
||||
},
|
||||
breakLine: {
|
||||
class: BreakLine,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+ENTER',
|
||||
},
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
},
|
||||
inlineImage: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
}
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description_en) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
//readOnly: true,
|
||||
minHeight: 0,
|
||||
data: JSON.parse(descriptionData),
|
||||
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
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'video') {
|
||||
element.style.pointerEvents = 'auto';
|
||||
return;
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'a') {
|
||||
element.setAttribute('target', '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 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';
|
||||
}
|
||||
const elements = $(".image-tool__caption[data-placeholder='Caption']");
|
||||
// Iterate over the matched elements and hide them
|
||||
elements.each(function() {
|
||||
$(this).attr("data-placeholder", ""); // Replace "Caption" with an empty string
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,405 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-tool__caption,
|
||||
.inline-image__caption,
|
||||
.ce-toolbar--opened {
|
||||
/*display: none;*/
|
||||
border: unset;
|
||||
box-shadow: unset;
|
||||
font-style: oblique;
|
||||
text-align: center;
|
||||
margin-top: 0;
|
||||
padding-top: 0
|
||||
}
|
||||
|
||||
.ce-paragraph {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
.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">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category/where-else') }}" class="text-white">หมวดหมู่</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_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="THE 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 style="text-align: right;" class="right-text">View: {{ $itemView->count_view ?? 0 }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="description" name="description"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end tab style 01 section -->
|
||||
|
||||
{{-- Random Articles --}}
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($randomArticlesView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}" alt="">
|
||||
<div class="blog-hover-icon"><span class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function initAjaxSetupToken() {
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateArticleCount() {
|
||||
|
||||
const articleId = "{{ $itemView->id }}";
|
||||
|
||||
// set up ajax
|
||||
initAjaxSetupToken();
|
||||
|
||||
const ajaxProp = {
|
||||
url: "{{ url('update-article-count') }}", // Endpoint to update count
|
||||
dataType: 'json',
|
||||
method: 'POST', // Use POST to update data
|
||||
data: JSON.stringify({
|
||||
id: articleId
|
||||
}), // Corrected stringify method
|
||||
contentType: 'application/json', // Send JSON payload
|
||||
processData: false, // Not needed, but harmless
|
||||
success: function(response) {
|
||||
//console.log('Article view count updated:', response);
|
||||
},
|
||||
error: function(xhr, status, error) {
|
||||
console.error('Error updating view count:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
$.ajax(ajaxProp).done(function(res) {
|
||||
if (res.status) {
|
||||
console.log('update success');
|
||||
} else {
|
||||
console.log('update fail')
|
||||
}
|
||||
}).fail(function(xhr, status, error) {
|
||||
console.log('update fail')
|
||||
});
|
||||
}
|
||||
updateArticleCount();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- 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/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-break-line"></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,
|
||||
},
|
||||
breakLine: {
|
||||
class: BreakLine,
|
||||
inlineToolbar: true,
|
||||
shortcut: 'CMD+SHIFT+ENTER',
|
||||
},
|
||||
youtube: YoutubeEmbed,
|
||||
embed: {
|
||||
class: Embed,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
video: {
|
||||
class: VideoTool,
|
||||
inlineToolbar: false,
|
||||
},
|
||||
image: {
|
||||
class: ImageTool,
|
||||
},
|
||||
inlineImage: {
|
||||
class: InlineImage,
|
||||
inlineToolbar: true,
|
||||
},
|
||||
}
|
||||
|
||||
const descriptionData = {!! json_encode($itemView->description) !!};
|
||||
const editorDescription = new EditorJS({
|
||||
holder: 'description',
|
||||
tools: tools,
|
||||
//readOnly: true,
|
||||
minHeight: 0,
|
||||
data: JSON.parse(descriptionData),
|
||||
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
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'video') {
|
||||
element.style.pointerEvents = 'auto';
|
||||
return;
|
||||
}
|
||||
if (element.tagName.toLowerCase() === 'a') {
|
||||
element.setAttribute('target', '_blank');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 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';
|
||||
}
|
||||
const elements = $(".image-tool__caption[data-placeholder='Caption']");
|
||||
// Iterate over the matched elements and hide them
|
||||
elements.each(function() {
|
||||
$(this).attr("data-placeholder", ""); // Replace "Caption" with an empty string
|
||||
});
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,196 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<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">
|
||||
{{ $subCategoryView->name_en }}</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/where-else') }}" class="text-white">Categories</a></li>
|
||||
<li class="text-white">
|
||||
{{ $subCategoryView->name_en }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANGMAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
Subjects</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $subCategoryView->name_en }}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ.." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="From date.." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="To date.." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name_en }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->isoFormat('D MMMM YYYY') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const subCategoryId = "{{ $subCategoryView->id }}"; // Sub category ID
|
||||
const baseUrl = `/category/where-else/article/${subCategoryId}`; // Base URL for your route
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,196 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
height: 42px;
|
||||
border: 1px solid #1a1a1a;
|
||||
padding: 0 20px;
|
||||
background: #1a1a1a;
|
||||
color: #fff
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<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">
|
||||
{{ $subCategoryView->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">หน้าแรก</a></li>
|
||||
<li><a href="{{ url('category/where-else') }}" class="text-white">หมวดหมู่</a></li>
|
||||
<li class="text-white">{{ $subCategoryView->name }}</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wow animate__fadeIn">
|
||||
<div class="container">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANGMAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">{{ count($itemView) }}
|
||||
เรื่องราว</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
{{ $subCategoryView->name }}
|
||||
</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
|
||||
<form method="GET" action="" id="searchForm" class="search-bar d-inline-flex justify-content-center">
|
||||
<div class="search-bar d-inline-flex justify-content-center">
|
||||
|
||||
<input type="text" placeholder="ชื่อหัวข้อ.." name="keyword" id="keyword"
|
||||
value="{{ $keywordView }}" style="max-width: 300px;" autocomplete="off">
|
||||
|
||||
<input placeholder="ตั้งแต่วันที่.." type="text" id="due_date_from" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<input placeholder="ถึงวันที่.." type="text" id="due_date_to" style="max-width: 300px;"
|
||||
autocomplete="off" />
|
||||
|
||||
<button class="search-btn" id="btn-search">ค้นหา</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 blog-content">
|
||||
<ul
|
||||
class="blog-grid blog-wrapper grid grid-loading grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col hover-option4 blog-post-style3 gutter-extra-large">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView as $item)
|
||||
<li class="grid-item last-paragraph-no-margin text-center text-sm-start wow animate__fadeInUp">
|
||||
<div class="blog-post bg-light-gray">
|
||||
<div class="blog-post-images overflow-hidden position-relative">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="">
|
||||
<div class="blog-hover-icon"><span
|
||||
class="text-extra-large font-weight-300">+</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="post-details padding-40px-all md-padding-20px-all">
|
||||
<a href="{{ url('category/where-else/article-detail/' . $item->id) }}"
|
||||
class="alt-font post-title text-medium text-extra-dark-gray w-100 d-block lg-w-100 margin-15px-bottom">
|
||||
{{ $item->name }}
|
||||
</a>
|
||||
<div class="separator-line-horrizontal-full bg-medium-gray margin-20px-tb"></div>
|
||||
<div class="author">
|
||||
<span class="text-medium-gray text-uppercase text-extra-small d-inline-block">
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('Do MMMM') }}
|
||||
{{ Carbon\Carbon::parse($item->due_date)->setTimezone('Asia/Bangkok')->locale('th_TH')->isoFormat('YYYY') + 543 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- start pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView])
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
<script>
|
||||
var today = new Date();
|
||||
var dateFormat = "d-m-Y";
|
||||
|
||||
var dueDateFrom = $("#due_date_from");
|
||||
var dueDateTo = $("#due_date_to");
|
||||
|
||||
const dateFrom = "{{ $fromDateView }}";
|
||||
const dateTo = "{{ $toDateView }}";
|
||||
|
||||
dueDateFrom.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateFrom,
|
||||
|
||||
});
|
||||
|
||||
dueDateTo.flatpickr({
|
||||
showClearButton: true,
|
||||
enableTime: false,
|
||||
dateFormat: dateFormat,
|
||||
maxDate: today,
|
||||
defaultDate: dateTo,
|
||||
|
||||
});
|
||||
|
||||
const clearDatePicker = () => {
|
||||
dueDateFrom.flatpickr().clear();
|
||||
dueDateTo.flatpickr().clear();
|
||||
|
||||
// Set the date format again after clearing
|
||||
dueDateFrom.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
dueDateTo.flatpickr({
|
||||
dateFormat: dateFormat
|
||||
});
|
||||
}
|
||||
|
||||
$('#btn-search').on('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const subCategoryId = "{{ $subCategoryView->id }}"; // Sub category ID
|
||||
const baseUrl = `/category/where-else/article/${subCategoryId}`; // Base URL for your route
|
||||
|
||||
|
||||
// Get input values
|
||||
const keyword = $("#keyword").val();
|
||||
const fromDate = $("#due_date_from").val();
|
||||
const toDate = $("#due_date_to").val();
|
||||
|
||||
// Build query parameters dynamically
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (keyword) params.append('search', keyword);
|
||||
if (fromDate) params.append('from', fromDate);
|
||||
if (toDate) params.append('to', toDate);
|
||||
|
||||
// Build the final URL with query parameters
|
||||
const newUrl = `${baseUrl}?${params.toString()}`;
|
||||
|
||||
// Redirect to the new URL
|
||||
window.location.href = newUrl;
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@@ -0,0 +1,102 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@section('main')
|
||||
|
||||
<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">Categories</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 class="text-white">Categories</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom category">
|
||||
<div class="container-fluid" style="margin-bottom: 100px;">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.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">Categories
|
||||
</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
WHERE ELSE</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView['sub_category'] as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/where-else/article/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a href="{{ url('category/where-else/article/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name_en }}
|
||||
</span></a>
|
||||
<p class="text-medium-gray text-extra-small text-uppercase">
|
||||
({{ $itemView['count_article'][$item->id] ?? 0 }})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
@@ -0,0 +1,110 @@
|
||||
@extends('layouts.frontendTemplate')
|
||||
|
||||
<style>
|
||||
li a:hover {
|
||||
color: #E23134 !important
|
||||
}
|
||||
|
||||
.category span {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category p {
|
||||
font-size: 14px;
|
||||
}
|
||||
</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">หมวดหมู่</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">หน้าแรก</a></li>
|
||||
<li class="text-white">หมวดหมู่</li>
|
||||
</ul>
|
||||
<!-- end breadcrumb -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end page title section -->
|
||||
|
||||
<!-- start portfolio section -->
|
||||
<section class="wow animate__fadeIn border-bottom border-color-extra-light-gray no-padding-bottom category">
|
||||
<div class="container-fluid" style="margin-bottom: 100px;">
|
||||
<div class="row margin-100px-bottom md-margin-70px-bottom sm-margin-50px-bottom">
|
||||
<div class="col-12 text-center">
|
||||
<img src="{{ url('images/logo_thegreaterchiangmai_2.png') }}" class="logo-dark margin-50px-bottom"
|
||||
alt="GREATER CHIANGMAI">
|
||||
<p class="alt-font text-medium-gray margin-5px-bottom text-uppercase text-small">หมวดหมู่ที่น่าสนใจ</p>
|
||||
<h5 class="text-uppercase alt-font text-extra-dark-gray margin-20px-bottom font-weight-700 md-w-100">
|
||||
WHERE ELSE</h5>
|
||||
<span class="separator-line-horrizontal-medium-light2 bg-deep-pink d-table mx-auto w-100px"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 filter-content overflow-hidden">
|
||||
<ul
|
||||
class="hover-option6 lightbox-portfolio portfolio-wrapper grid grid-loading grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium">
|
||||
<li class="grid-sizer"></li>
|
||||
|
||||
@foreach ($itemView['sub_category'] as $item)
|
||||
<li class="grid-item last-paragraph-no-margin wow animate__fadeInUp">
|
||||
<figure>
|
||||
<div class="portfolio-img bg-deep-pink position-relative text-center overflow-hidden">
|
||||
<img src="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"
|
||||
alt="" />
|
||||
<div class="portfolio-icon">
|
||||
<a href="{{ url('category/where-else/article/' . $item->id) }}"><i
|
||||
class="fas fa-link text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
<a class="gallery-link" title="image title..."
|
||||
href="{{ $item->image_url . '/thumbnail/' . $item->image_name }}"><i
|
||||
class="fas fa-search text-extra-dark-gray" aria-hidden="true"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption class="bg-white">
|
||||
<div class="portfolio-hover-main text-center">
|
||||
<div class="portfolio-hover-box align-middle">
|
||||
<div class="portfolio-hover-content position-relative">
|
||||
<a href="{{ url('category/where-else/article/' . $item->id) }}"><span
|
||||
class="line-height-normal font-weight-600 text-small alt-font margin-5px-bottom text-extra-dark-gray text-uppercase d-block">
|
||||
{{ $item->name }}
|
||||
</span></a>
|
||||
<p class="text-medium-gray text-extra-small text-uppercase">
|
||||
({{ $itemView['count_article'][$item->id] ?? 0 }})
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</li>
|
||||
@endforeach
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="pagination-wrapper">
|
||||
@include('uc.pagination', ['data' => $itemView['sub_category']])
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- end portfolio section -->
|
||||
|
||||
@stop
|
||||
|
||||
@section('js')
|
||||
|
||||
@endsection
|
||||
Reference in New Issue
Block a user