|
|
|
import $ from 'jquery';
|
|
|
|
import _ from 'lodash';
|
|
|
|
import { NamedPage } from 'vj/misc/Page';
|
|
|
|
import pjax from 'vj/utils/pjax';
|
|
|
|
import { slideDown, slideUp } from 'vj/utils/slide';
|
|
|
|
|
|
|
|
type SectionAction = 'expand' | 'collapse';
|
|
|
|
type SectionState = 'expanded' | 'collapsed';
|
|
|
|
|
|
|
|
function action2state(action: SectionAction): SectionState {
|
|
|
|
return action === 'expand' ? 'expanded' : 'collapsed';
|
|
|
|
}
|
|
|
|
|
|
|
|
async function setSectionState($section: JQuery<HTMLElement>, state: SectionState) {
|
|
|
|
if ($section.is(`.${state}, .animating`)) return;
|
|
|
|
$section.addClass('animating');
|
|
|
|
const $detail = $section.find('.training__section__detail');
|
|
|
|
if (state === 'expanded') {
|
|
|
|
await slideDown($detail, 300, { opacity: 0 }, { opacity: 1 });
|
|
|
|
} else {
|
|
|
|
await slideUp($detail, 300, { opacity: 1 }, { opacity: 0 });
|
|
|
|
}
|
|
|
|
$section.addClass(state);
|
|
|
|
$section.removeClass(state === 'expanded' ? 'collapsed' : 'expanded');
|
|
|
|
$section.removeClass('animating');
|
|
|
|
}
|
|
|
|
|
|
|
|
async function handleSection(ev: JQuery.ClickEvent<Document>, type: SectionAction) {
|
|
|
|
const $section = $(ev.currentTarget).closest('.training__section');
|
|
|
|
await setSectionState($section, action2state(type));
|
|
|
|
}
|
|
|
|
|
|
|
|
function searchUser() {
|
|
|
|
const val = $('input[name=uid]').val().toString().toLowerCase();
|
|
|
|
$('.enroll_user_menu_item').each((i, e) => {
|
|
|
|
const $item = $(e);
|
|
|
|
const $username = $item.data('uname').toString().toLowerCase();
|
|
|
|
const $uid = $item.data('uid').toString();
|
|
|
|
$item.toggle($username.includes(val) || $uid === val);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function selectUser(ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
if ($('.enroll_user_menu_item:visible').length === 1) {
|
|
|
|
$('.enroll_user_menu_item:visible').first().find('a')[0].click();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function handleChooseUser(ev) {
|
|
|
|
ev.preventDefault();
|
|
|
|
$('.enroll_user_menu_item .active').removeClass('active');
|
|
|
|
$(ev.currentTarget).addClass('active');
|
|
|
|
pjax.request({ url: ev.currentTarget.href });
|
|
|
|
}
|
|
|
|
|
|
|
|
async function handleSidebarClick(ev: JQuery.ClickEvent<Document>) {
|
|
|
|
const id = $(ev.currentTarget).attr('href');
|
|
|
|
const $section = $(id).closest('.training__section');
|
|
|
|
await setSectionState($section, 'expanded');
|
|
|
|
}
|
|
|
|
|
|
|
|
async function handleHashChange() {
|
|
|
|
const id = window.location.hash;
|
|
|
|
if (id.startsWith('#node-')) {
|
|
|
|
const $section = $(id).closest('.training__section');
|
|
|
|
await setSectionState($section, 'expanded');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const page = new NamedPage('training_detail', () => {
|
|
|
|
$('.search__input').on('input', _.debounce(searchUser, 500));
|
|
|
|
$('#searchForm').on('submit', selectUser);
|
|
|
|
$(document).on('click', '[name="training__section__expand"]', (ev) => handleSection(ev, 'expand'));
|
|
|
|
$(document).on('click', '[name="training__section__collapse"]', (ev) => handleSection(ev, 'collapse'));
|
|
|
|
$(document).on('click', '.enroll_user_menu_item > a', (ev) => handleChooseUser(ev));
|
|
|
|
$(document).on('click', '#menu-item-training_detail > ul > li > a', (ev) => handleSidebarClick(ev));
|
|
|
|
window.addEventListener('hashchange', handleHashChange);
|
|
|
|
$(handleHashChange);
|
|
|
|
});
|
|
|
|
|
|
|
|
export default page;
|