335 lines
11 KiB
PHP
335 lines
11 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>
|
||
<body>
|
||
<div class="wrap leadership">
|
||
<?php include(__DIR__ . "/_include/_header.php") ?>
|
||
<!-- container -->
|
||
<div class="container">
|
||
<!-- editor's pick -->
|
||
<section class="leadership-hero">
|
||
<div class="leadership-inner hero-top hero-breadcrumb">
|
||
<ul class="breadcrumb" aria-label="breadcrumb">
|
||
<li><a href="./index.html">홈</a></li>
|
||
<li><a href="./leadership.html">리더십</a></li>
|
||
<li><span class="current">셀프 리더십</span></li>
|
||
</ul>
|
||
</div>
|
||
<!-- editor's pick -->
|
||
|
||
<!-- 리더십 고정 배너 3종: PC 1442×460 / 모바일 360×234 -->
|
||
<div class="hero-banner">
|
||
<div class="swiper hero-swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<div class="banner-img">
|
||
<picture>
|
||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_01.png">
|
||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_01_m.png">
|
||
<img src="/edu/img/leadership/img_banner_01.png" alt="실천으로 완성하는 리더십">
|
||
</picture>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="swiper-slide">
|
||
<div class="banner-img">
|
||
<picture>
|
||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_02.png">
|
||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_02_m.png">
|
||
<img src="/edu/img/leadership/img_banner_02.png" alt="성장하는 리더십 여정">
|
||
</picture>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="swiper-slide">
|
||
<div class="banner-img">
|
||
<picture>
|
||
<source media="(min-width: 769px)" srcset="/edu/img/leadership/img_banner_03.png">
|
||
<source media="(max-width: 768px)" srcset="/edu/img/leadership/img_banner_03_m.png">
|
||
<img src="/edu/img/leadership/img_banner_03.png" alt="리더로 성장하는 과정">
|
||
</picture>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-pagination hero-pagination" aria-hidden="true"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tabs -->
|
||
<div class="leadership-tabs" aria-label="리더십 카테고리">
|
||
<div class="leadership-inner">
|
||
<div class="leadership-tabs-list" role="tablist" aria-label="리더십 카테고리 탭">
|
||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L01">
|
||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_01.svg" alt="" /></span>
|
||
<span class="tab-text">리더십 입문</span>
|
||
</button>
|
||
<button class="leadership-tab is-active" type="button" role="tab" aria-selected="true" data-cate="CA200L02">
|
||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_02.svg" alt="" /></span>
|
||
<span class="tab-text">셀프리더십</span>
|
||
</button>
|
||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L03">
|
||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_03.svg" alt="" /></span>
|
||
<span class="tab-text">팀리더십</span>
|
||
</button>
|
||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L04">
|
||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_04.svg" alt="" /></span>
|
||
<span class="tab-text">실전 리더십</span>
|
||
</button>
|
||
<button class="leadership-tab" type="button" role="tab" aria-selected="false" data-cate="CA200L05">
|
||
<span class="tab-icon"><img src="/edu/img/ico/ico_leadership_05.svg" alt="" /></span>
|
||
<span class="tab-text">인물탐구</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- video list -->
|
||
|
||
<section class="leadership-video-list" aria-label="리더십 콘텐츠 목록">
|
||
<div class="leadership-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,
|
||
},
|
||
});
|
||
|
||
// Tabs
|
||
const tabs = Array.from(document.querySelectorAll('.leadership-tab'));
|
||
if (!tabs.length) return;
|
||
|
||
tabs.forEach(function (tab) {
|
||
tab.addEventListener('click', function () {
|
||
tabs.forEach(function (t) {
|
||
t.classList.remove('is-active');
|
||
t.setAttribute('aria-selected', 'false');
|
||
});
|
||
tab.classList.add('is-active');
|
||
tab.setAttribute('aria-selected', 'true');
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<script>
|
||
$(function () {
|
||
|
||
let page = 1;
|
||
let loading = false;
|
||
let lastPage = false;
|
||
let requestSeq = 0;
|
||
|
||
let category = $('.leadership-tab.is-active').data('cate') || 'CA200L02';
|
||
let sort = $('.select-sort').val() || 'view';
|
||
|
||
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();
|
||
});
|
||
|
||
|
||
|
||
/*
|
||
|
||
|
||
console.log('scrollTop='+scrollTop);
|
||
console.log('windowHeight='+windowHeight);
|
||
console.log('docHeight='+docHeight);
|
||
|
||
console.log('scrollTop + windowHeight=');
|
||
console.log(scrollTop + windowHeight);
|
||
|
||
console.log('docHeight - 400=');
|
||
console.log(docHeight - 450);
|
||
|
||
|
||
|
||
$(window).on('scroll', function () {
|
||
|
||
if (loading || lastPage) return;
|
||
|
||
const scrollTop = $(window).scrollTop();
|
||
const windowHeight = $(window).height();
|
||
const docHeight = $(document).height();
|
||
|
||
|
||
|
||
.container
|
||
*/
|
||
|
||
|
||
|
||
/* 무한스크롤 */
|
||
$(window).on('scroll', function () {
|
||
|
||
if (loading || lastPage) return;
|
||
|
||
const scrollTop = $(window).scrollTop();
|
||
const windowHeight = $(window).height();
|
||
const docHeight = $(document).height();
|
||
|
||
if (scrollTop + windowHeight >= docHeight - 200) {
|
||
page++;
|
||
loadVideos();
|
||
}
|
||
});
|
||
|
||
|
||
|
||
|
||
function resetList(moveTop) {
|
||
page = 1;
|
||
lastPage = false;
|
||
$('#video-list').empty();
|
||
|
||
if (moveTop) {
|
||
$('html, body').scrollTop(0);
|
||
}
|
||
}
|
||
|
||
function setLoading(isLoading) {
|
||
loading = isLoading;
|
||
|
||
if (isLoading) {
|
||
$('#video-loading').show();
|
||
} else {
|
||
$('#video-loading').hide();
|
||
}
|
||
}
|
||
|
||
function loadVideos() {
|
||
|
||
requestSeq++;
|
||
const currentRequestSeq = requestSeq;
|
||
|
||
setLoading(true);
|
||
|
||
$.ajax({
|
||
url: '/edu/ajax/get_video_list.php',
|
||
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);
|
||
} else {
|
||
if (html === '') {
|
||
lastPage = true;
|
||
page--;
|
||
} else {
|
||
$('#video-list').append(html);
|
||
}
|
||
}
|
||
|
||
if (page === 1 && html === '') {
|
||
lastPage = true;
|
||
$('#video-list').html(
|
||
'<li class="video-item video-empty">' +
|
||
'<div class="item-info">' +
|
||
'<strong class="item-title">등록된 콘텐츠가 없습니다.</strong>' +
|
||
'</div>' +
|
||
'</li>'
|
||
);
|
||
}
|
||
},
|
||
error: function () {
|
||
if (page > 1) {
|
||
page--;
|
||
}
|
||
},
|
||
complete: function () {
|
||
if (currentRequestSeq === requestSeq) {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|