38 lines
1.1 KiB
JavaScript
38 lines
1.1 KiB
JavaScript
import { Utility } from '../../core/utility';
|
|
import './course-teaser.scss';
|
|
|
|
var COURSE_TEASER_INITIALIZED_CLASS = 'course-teaser--initialized';
|
|
|
|
var COURSE_TEASER_EXPANDED_CLASS = 'course-teaser__expanded';
|
|
var COURSE_TEASER_CHEVRON_CLASS = 'course-teaser__chevron';
|
|
|
|
@Utility({
|
|
selector: '[uw-course-teaser]:not(.course-teaser__not-expandable)',
|
|
})
|
|
export class CourseTeaser {
|
|
|
|
_element;
|
|
|
|
constructor(element) {
|
|
if (!element) {
|
|
throw new Error('CourseTeaser utility cannot be setup without an element!');
|
|
}
|
|
if (element.classList.contains(COURSE_TEASER_INITIALIZED_CLASS)) {
|
|
return false;
|
|
}
|
|
this._element = element;
|
|
element.addEventListener('click', e => this._onToggleExpand(e));
|
|
}
|
|
|
|
_onToggleExpand(event) {
|
|
var isLink = event.target.tagName.toLowerCase() === 'a';
|
|
var isChevron = event.target.classList.contains(COURSE_TEASER_CHEVRON_CLASS);
|
|
var isExpanded = this._element.classList.contains(COURSE_TEASER_EXPANDED_CLASS);
|
|
|
|
if ((!isExpanded && !isLink) || isChevron) {
|
|
this._element.classList.toggle(COURSE_TEASER_EXPANDED_CLASS);
|
|
}
|
|
}
|
|
|
|
}
|