271 lines
8.9 KiB
PHP
271 lines
8.9 KiB
PHP
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<?php include(__DIR__ . "/_include/_head.php") ?>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<?php
|
|
$SET_PREFIX = 'I'; //L=리더십(기본값), I=인사이트
|
|
require_once __DIR__ . '/../bbs/leadership_init_data.php';
|
|
?>
|
|
<body>
|
|
<div class="wrap insight">
|
|
<?php include(__DIR__ . "/_include/_header.php") ?>
|
|
<!-- container -->
|
|
<div class="container">
|
|
<!-- editor's pick -->
|
|
<section class="insight-hero">
|
|
<div class="insight-inner hero-top hero-breadcrumb">
|
|
<ul class="breadcrumb" aria-label="breadcrumb">
|
|
<li><a href="./index.php">홈</a></li>
|
|
<li><a href="./insight.php">인사이트</a></li>
|
|
<li><span class="current">경제와 사회</span></li>
|
|
</ul>
|
|
</div>
|
|
<!-- editor's pick -->
|
|
<div class="hero-banner">
|
|
<div class="swiper hero-swiper">
|
|
<div class="swiper-wrapper">
|
|
<?php foreach ($array_banner_img as $i => $bn): ?>
|
|
<div class="swiper-slide">
|
|
<div class="banner-img">
|
|
<picture>
|
|
<source media="(min-width: 769px)" srcset="<?= $bn['normal'] ?>">
|
|
<source media="(max-width: 768px)" srcset="<?= $bn['mobile'] ?>">
|
|
<img src="<?= $bn['normal'] ?>" alt="<?= $bn['title'] ?>">
|
|
</picture>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="swiper-pagination hero-pagination" aria-hidden="true"></div>
|
|
<button type="button" class="swiper-button-prev hero-prev btn-prev" aria-label="이전 슬라이드"></button>
|
|
<button type="button" class="swiper-button-next hero-next btn-next" aria-label="다음 슬라이드"></button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Tabs -->
|
|
<div class="leadership-tabs" aria-label="카테고리">
|
|
<div class="leadership-inner">
|
|
<div class="leadership-tabs-list" role="tablist" aria-label="카테고리 탭">
|
|
<?php foreach ($array_tab_info as $i => $ti): ?>
|
|
<button class="leadership-tab <?php if($i==0){?>is-active<?php }?>" type="button" role="tab" aria-selected="<?php if($i==0){?>true<?php }else{?>false<?php }?> " data-cate="<?= $ti['base_code'] ?>">
|
|
<span class="tab-icon"><img src="<?= $ti['src'] ?>" alt="" /></span>
|
|
<span class="tab-text"><?= $ti['code_name'] ?></span>
|
|
</button>
|
|
<?php endforeach; ?>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- video list -->
|
|
|
|
<section class="insight-video-list">
|
|
<div class="insight-inner">
|
|
<div class="list-head">
|
|
<span class="total">TOTAL <em></em></span>
|
|
<div class="list-options">
|
|
<div class="select-wrap">
|
|
<select class="select-sort" title="정렬">
|
|
<option value="view" selected>조회수</option>
|
|
<option value="latest" >업데이트</option>
|
|
<option value="seen">내가본컨텐츠</option>
|
|
<option value="unseen">안본컨텐츠</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 탭선택에 따른 동적 컨텐츠영역 -->
|
|
<ul class="video-grid" id="video-list"></ul>
|
|
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- // container -->
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Hero Swiper (리더십과 동일)
|
|
new Swiper('.hero-swiper', {
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 4000,
|
|
disableOnInteraction: false,
|
|
},
|
|
speed: 600,
|
|
pagination: {
|
|
el: '.hero-pagination',
|
|
clickable: true,
|
|
},
|
|
navigation: {
|
|
nextEl: '.hero-next',
|
|
prevEl: '.hero-prev',
|
|
},
|
|
});
|
|
|
|
// Tabs (리더십과 동일)
|
|
const tabs = Array.from(document.querySelectorAll('.leadership-tab'));
|
|
if (tabs.length) {
|
|
tabs.forEach(function (tab) {
|
|
tab.addEventListener('click', function () {
|
|
tabs.forEach(function (t) {
|
|
t.classList.remove('is-active');
|
|
t.setAttribute('aria-selected', 'false');
|
|
});
|
|
|
|
let currentText = $(this).find('.tab-text').text();
|
|
console.log('tabs');
|
|
console.log(currentText);
|
|
$('.current').text(currentText);
|
|
|
|
tab.classList.add('is-active');
|
|
tab.setAttribute('aria-selected', 'true');
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
$( document ).ready(function() {
|
|
/*
|
|
let currentText = $('.current').find('.tab-text').text();
|
|
if(currentText==""){$('.current').text("리더십 입문");}
|
|
*/
|
|
let firstTabText = $('.leadership-tab.is-active').find('.tab-text').text();
|
|
if($('.current').text() == "" && firstTabText != ""){
|
|
$('.current').text(firstTabText);
|
|
}
|
|
});
|
|
|
|
$(function () {
|
|
|
|
let page = 1;
|
|
let loading = false;
|
|
let lastPage = false;
|
|
let requestSeq = 0;
|
|
|
|
//let category = $('.leadership-tab.is-active').data('cate') || 'CA200L01';
|
|
let category = $('.leadership-tab.is-active').data('cate') || 'CA200<?= $SET_PREFIX ?>01';
|
|
let sort = $('.select-sort').val() || 'latest';
|
|
|
|
loadVideos();
|
|
|
|
$('.leadership-tab').on('click', function () {
|
|
if (loading) return;
|
|
|
|
$('.leadership-tab').removeClass('is-active').attr('aria-selected', 'false');
|
|
$(this).addClass('is-active').attr('aria-selected', 'true');
|
|
|
|
category = $(this).data('cate');
|
|
resetList(true);
|
|
loadVideos();
|
|
});
|
|
|
|
$('.select-sort').on('change', function () {
|
|
if (loading) return;
|
|
|
|
sort = $(this).val();
|
|
resetList(true);
|
|
loadVideos();
|
|
});
|
|
|
|
$('.container').on('scroll', function () {
|
|
if (loading || lastPage) return;
|
|
|
|
const scrollTop = this.scrollTop;
|
|
const windowHeight = this.clientHeight;
|
|
const docHeight = this.scrollHeight;
|
|
|
|
if (scrollTop + windowHeight >= docHeight - 100) {
|
|
page++;
|
|
loadVideos();
|
|
}
|
|
});
|
|
|
|
function resetList(moveTop) {
|
|
page = 1;
|
|
lastPage = false;
|
|
$('#video-list').empty();
|
|
|
|
if (moveTop) {
|
|
$('.container').scrollTop(0);
|
|
}
|
|
}
|
|
|
|
function setLoading(isLoading) {
|
|
loading = isLoading;
|
|
}
|
|
|
|
function loadVideos() {
|
|
requestSeq++;
|
|
const currentRequestSeq = requestSeq;
|
|
|
|
setLoading(true);
|
|
|
|
$.ajax({
|
|
url: '/edu/ajax/get_video_list.php?SET_PREFIX=<?= $SET_PREFIX ?>',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
cache: false,
|
|
data: {
|
|
category: category,
|
|
sort: sort,
|
|
page: page
|
|
},
|
|
success: function (res) {
|
|
if (currentRequestSeq !== requestSeq) return;
|
|
|
|
if (!res || res.success !== true) {
|
|
if (page > 1) page--;
|
|
return;
|
|
}
|
|
|
|
const html = $.trim(res.html || '');
|
|
const totalCount = parseInt(res.total_count, 10) || 0;
|
|
|
|
$('.total em').text(totalCount);
|
|
|
|
if (page === 1) {
|
|
$('#video-list').html(html);
|
|
|
|
if (html === '') {
|
|
lastPage = true;
|
|
$('#video-list').html(
|
|
'<li class="video-item video-empty">' +
|
|
'<div class="item-info">' +
|
|
'<strong class="item-title">등록된 콘텐츠가 없습니다.</strong>' +
|
|
'</div>' +
|
|
'</li>'
|
|
);
|
|
}
|
|
} else {
|
|
if (html === '') {
|
|
lastPage = true;
|
|
page--;
|
|
} else {
|
|
$('#video-list').append(html);
|
|
}
|
|
}
|
|
},
|
|
error: function () {
|
|
if (page > 1) page--;
|
|
},
|
|
complete: function () {
|
|
if (currentRequestSeq === requestSeq) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|