Нам нужно воспроизвести видео, и когда пользователь нажимает клавишу «m», нам нужно разделить экран на две половины по вертикали.Одна половина должна отображать только текст «DVR», а другая половина должна отображать список с 30 элементами списка (Этот номер только для целей тестирования. Первоначально мы будем получать номер с сервера).Каждый элемент списка будет содержать изображение и текст.Когда мы отображаем меню, элементы списка Всегда должны быть видны с первого, а первый элемент должен быть в фокусе.Когда мы нажимаем клавишу вниз, фокус должен быть смещен на второй элемент ... Ниже приведен код.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>VOD</title>
<script src='lib/hls.js'></script>
<script src='js/index.js'></script>
<style>
html, body
{
height:100%;
width: 100%;
overflow: hidden;
}
#vid
{
position: fixed;
top: 50%;
left: 50%;
z-index: -1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
#mid {
display: flex;
width: 100%;
height: 100%;
justify-content: stretch;
flex-flow: row nowrap;
z-index: 2;
}
#mid.hidden {
display: none;
}
#mid1, #mid2 {
display: flex;
flex: 1;
align-items: center;
}
#mid1 {
justify-content: center;
background-color: rgba(255, 255, 255, 0.5);
}
#mid2 {
background-color: rgba(255, 255, 255, 0.6);
}
#ulid {
list-style-type: none;
width: 100%;
margin: 0;
border: 0;
padding: 0;
}
.list-item {
width: 100%;
height: 150px;
border-style: solid;
border-width: 1px;
display:flex;
align-items: center;
justify-content: flex-start;
}
li:focus {
background-color: lightslategray;
}
</style>
</head>
<body>
<video id='vid' src='textMotion.mp4' autoplay loop></video>
<div id='mid' class='hidden'>
<div id="mid1">
<h1>DVR</h1>
</div>
<div id="mid2">
<ol id='ulid'></ol>
</div>
</div>
</body>
</html>
JavaScript:
var foc_list_index = 0;
function processListEvent(event) {
console.log('list Event : ' + event.keyCode + 'focused li ' + foc_list_index);
let keyCode = event.keyCode;
// Down
if(keyCode == 40) {
foc_list_index ++;
document.getElementById('li' + foc_list_index).focus();
}
// Up
if(keyCode == 38) {
if(foc_list_index == 0) {
console.log('Ignoring key up as we are already at first list index');
return;
}
foc_list_index --;
document.getElementById('li' + foc_list_index).focus();
}
}
function displayMenu() {
let mid = document.getElementById('mid');
// If already menu is visible, hide it
if(mid.classList.contains('hidden') == false) {
mid.classList.toggle('hidden');
let ulid = document.getElementById('ulid');
while(ulid.firstChild) {
ulid.removeChild(ulid.firstChild);
}
return;
}
let ulid = document.getElementById('ulid');
for(let index = 0; index < 30; index ++) {
let lItem = document.createElement('li');
lItem.classList.add('list-item');
lItem.setAttribute('id', 'li' + index);
lItem.setAttribute('tabindex', index);
lItem.addEventListener('keydown', processListEvent, false);
let img = document.createElement("img");
img.src = 'img/TNT.png';
lItem.appendChild(img);
lItem.appendChild(document.createTextNode('Showing ID : ' + index));
ulid.appendChild(lItem);
}
mid.classList.toggle("hidden");
document.getElementById('li0').focus();
foc_list_index = 0;
}
function processKeyPress(e) {
console.log('received keyEvent : ' + e.keyCode);
let keyCode = e.keyCode;
let mid = document.getElementById('mid');
// Menu button or key 'm'
if((keyCode == 77) || (keyCode == 462)) {
displayMenu();
}
}
document.addEventListener('keydown', processKeyPress);
Этот код работает нормально, за исключением следующих проблем.
1) Когда пользователь нажимает «m», отображается меню и отображается вторая половина из элемента списка 12Несмотря на то, что элементы списка от 0 до 29 присутствуют, он отображается из элемента списка 12. Но он должен отображаться из элемента списка 0. Я выяснил причину этой проблемы.Это потому, что я держу 'align-items: center;'и для mid1, и для mid2 текст на первом экране и список на втором экране должны располагаться по центру по вертикали.Если я уберу 'align-items: center;'для середины 2 список отображается правильно, но когда в списке очень мало элементов, таких как 3 (вместо 30), список не отображается вертикально по центру.Не уверен, как решить эту проблему.
2) Когда я нажимаю клавишу, когда фокус пересекает видимый элемент списка, также перемещается левая половина экрана, которую не следует перемещать.
Снимок экрана для первого выпуска (элементы списка должны отображаться с 0, когда пользователь выбирает 'm')
Снимок экрана дляпроблема, если я уберу 'align-items: center;'для mid2 и в списке есть 3 элемента (вместо 30).Список должен располагаться по центру по вертикали.
Снимок экрана для второго выпуска (движется левая половина экрана, которую нельзя перемещать прифокус пересекает видимый элемент списка, нажимая клавишу вниз)
Может ли кто-нибудь помочь мне решить эти проблемы.