/**
* @파일 버튼.js
*/
'./clickable-component.js'에서 ClickableComponent 가져오기;
'./component'에서 컴포넌트 가져오기;
'./utils/log.js'에서 로그 가져오기;
'./utils/obj'에서 {assign} 가져오기;
'키코드'에서 키코드 가져오기;
'./utils/dom.js'에서 {createEl} 가져오기;
/**
* 모든 버튼의 기본 클래스.
*
* @extends ClickableComponent
*/
버튼 클래스 확장 ClickableComponent {
/**
* `Button`의 DOM 요소를 만듭니다.
*
* @param {문자열} [태그="버튼"]
* 요소의 노드 유형. 이 인수는 무시됩니다.
*가 전달되면 항상 `버튼` 요소를 생성합니다.
*
* @param {객체} [소품={}]
* 요소에 설정해야 하는 속성의 개체입니다.
*
* @param {객체} [속성={}]
* 요소에 설정되어야 하는 속성의 객체.
*
* @return {요소}
* 생성되는 요소.
*/
createEl(태그, 소품 = {}, 속성 = {}) {
태그 = '버튼';
소품 = 할당({
className: this.buildCSSClass()
}, 소품);
// 버튼 요소에 대한 속성 추가
속성 = 할당({
// 기본 버튼 유형이 "제출"이므로 필요
유형: '버튼'
}, 속성);
const el = createEl(태그, 소품, 속성);
el.appendChild(createEl('스팬', {
className: 'vjs-icon-placeholder'
}, {
'아리아 숨김': 참
}));
this.createControlTextEl(el);
반환 엘;
}
/**
* 이 `Button` 내부에 하위 `Component`를 추가합니다.
*
* @param {string|Component} 자식
* 추가할 자식의 이름 또는 인스턴스입니다.
*
* @param {객체} [옵션={}]
* 자식에게 전달될 옵션의 키/값 저장소
* 아이.
*
* @return {구성 요소}
* 자식으로 추가되는 `Component`. 문자열을 사용할 때
* 이 과정에서 `Component`가 생성됩니다.
*
* @버전 5부터 더 이상 사용되지 않음
*/
addChild(자식, 옵션 = {}) {
const className = this.constructor.name;
log.warn(`버튼(${className})에 실행 가능한(사용자 제어 가능) 자식 추가는 지원되지 않습니다. 대신 ClickableComponent를 사용하십시오.`);
// ClickableComponent의 addChild 메서드에서 생성된 오류 메시지를 피합니다.
return Component.prototype.addChild.call(this, child, options);
}
/**
* 활성화 또는 클릭할 수 있도록 `Button` 요소를 활성화합니다. 이것을 함께 사용
* {@링크 버튼#비활성화}.
*/
할 수 있게 하다() {
슈퍼.활성화();
this.el_.removeAttribute('비활성화됨');
}
/**
* `Button` 요소를 비활성화하여 활성화하거나 클릭할 수 없도록 합니다. 이것을 함께 사용
* {@링크 버튼#활성화}.
*/
장애를 입히다() {
슈퍼.비활성화();
this.el_.setAttribute('비활성화됨', '비활성화됨');
}
/**
* `Button`에 포커스가 있고 `keydown`이 키를 통해 트리거될 때 호출됩니다.
* 누르다.
*
* @param {EventTarget~Event} 이벤트
* 이 함수를 호출하게 만든 이벤트.
*
* @listens 키다운
*/
handleKeyDown(이벤트) {
// 브라우저에서 처리하는 Space 또는 Enter 키 작업을 무시합니다.
// 버튼 - 상위 클래스인 ClickableComponent용은 아닙니다. 또한,
// 이벤트가 DOM을 통해 전파되고 플레이어를 트리거하는 것을 방지합니다.
// 핫키. 브라우저가 _원하기_ 때문에 여기서는 preventDefault를 사용하지 않습니다.
// 처리해.
if (keycode.isEventKey(event, 'Space') || keycode.isEventKey(event, 'Enter')) {
event.stopPropagation();
반품;
}
// 지원되지 않는 키에 대한 키 누르기 처리를 전달합니다.
super.handleKeyDown(이벤트);
}
}
Component.registerComponent('버튼', 버튼);
기본 버튼 내보내기;