Skip to content

Commit 922e6ee

Browse files
ollmollm
committed
New: Navigate in the library using the keyboard
1 parent f980a52 commit 922e6ee

File tree

6 files changed

+97
-239
lines changed

6 files changed

+97
-239
lines changed

‎scripts/dom.js

+3-215
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ function addImageToDom(querySelector, path, animation = true)
183183

184184
async function loadFilesIndexPage(file, animation, path, keepScroll, mainPath)
185185
{
186-
file.read().then(async function(files){
186+
return file.read().then(async function(files){
187187

188188
queue.clean('folderThumbnails');
189189

@@ -305,211 +305,6 @@ async function loadFilesIndexPage(file, animation, path, keepScroll, mainPath)
305305

306306
var currentPath = false, currentPathScrollTop = [];
307307

308-
function _loadIndexPage(animation = true, path = false, content = false, keepScroll = false, mainPath = false, fromGoBack = false)
309-
{
310-
onReading = false;
311-
312-
reading.hideContent();
313-
314-
generateAppMenu();
315-
316-
currentPathScrollTop[currentPath === false ? 0 : currentPath] = template.contentRight().children().scrollTop();
317-
318-
for(let _path in currentPathScrollTop)
319-
{
320-
if(_path != 0 && !new RegExp('^'+pregQuote(_path)).test(path))
321-
delete currentPathScrollTop[_path];
322-
}
323-
324-
if(currentPathScrollTop[path === false ? 0 : path])
325-
keepScroll = currentPathScrollTop[path === false ? 0 : path];
326-
327-
currentPath = path;
328-
329-
if(!path)
330-
{
331-
var sort = config.sortIndex;
332-
var sortInvert = config.sortInvertIndex;
333-
var foldersFirst = config.foldersFirstIndex;
334-
}
335-
else
336-
{
337-
var sort = config.sort;
338-
var sortInvert = config.sortInvert;
339-
var foldersFirst = config.foldersFirst;
340-
}
341-
342-
var orderKey2 = false;
343-
344-
if(sort == 'name')
345-
{
346-
var order = 'simple';
347-
var orderKey = 'name';
348-
}
349-
else if(sort == 'numeric')
350-
{
351-
var order = 'numeric';
352-
var orderKey = 'name';
353-
}
354-
else if(sort == 'name-numeric')
355-
{
356-
var order = 'simple-numeric';
357-
var orderKey = 'name';
358-
}
359-
else if(sort == 'last-add')
360-
{
361-
var order = 'real-numeric';
362-
var orderKey = 'added';
363-
sortInvert = !sortInvert;
364-
}
365-
else
366-
{
367-
var order = 'real-numeric';
368-
var orderKey = 'readingProgress';
369-
var orderKey2 = 'lastReading';
370-
sortInvert = !sortInvert;
371-
}
372-
373-
if(!path)
374-
{
375-
indexPathControl(false);
376-
377-
var comicsStorage = storage.get('comics');
378-
var comics = [];
379-
380-
if(!isEmpty(comicsStorage))
381-
{
382-
for(let key in comicsStorage)
383-
{
384-
if(fs.existsSync(comicsStorage[key].path))
385-
{
386-
comics.push(comicsStorage[key]);
387-
}
388-
else
389-
{
390-
//console.log(comicsStorage[key]);
391-
}
392-
}
393-
394-
for(let key in comics)
395-
{
396-
var images = getFolderThumbnails(comics[key].path);
397-
398-
comics[key].images = images;
399-
comics[key].mainPath = config.showFullPathLibrary ? p.parse(comics[key].path).root : comics[key].path;
400-
}
401-
402-
comics.sort(function (a, b) {
403-
return (sortInvert) ? -(orderBy(a, b, order, orderKey, orderKey2)) : orderBy(a, b, order, orderKey, orderKey2);
404-
});
405-
}
406-
407-
handlebarsContext.comics = comics;
408-
handlebarsContext.comicsIndex = true;
409-
handlebarsContext.comicsIndexVar = 'true';
410-
handlebarsContext.comicsReadingProgress = false;
411-
412-
template.loadContentRight('index.content.right.'+config.viewIndex+'.html', animation, keepScroll);
413-
414-
handlebarsContext.headerTitle = false;
415-
handlebarsContext.headerTitlePath = false;
416-
template.loadHeader('index.header.html', animation);
417-
418-
if(!content)
419-
{
420-
template.loadContentLeft('index.content.left.html', animation);
421-
template.loadGlobalElement('index.elements.menus.html', 'menus');
422-
floatingActionButton(true, 'dom.addComicButtons();');
423-
}
424-
425-
events.events();
426-
427-
}
428-
else
429-
{
430-
if(!fromGoBack)
431-
indexPathControl(path, mainPath);
432-
433-
handlebarsContext.comicsIndex = false;
434-
handlebarsContext.comicsIndexVar = 'false';
435-
436-
headerPath(path, mainPath);
437-
template.loadHeader('index.header.html', animation);
438-
template.loadContentRight('index.content.right.loading.html', animation, keepScroll);
439-
440-
if(!content)
441-
{
442-
if(readingActive)
443-
{
444-
template.loadContentLeft('index.content.left.html', animation);
445-
}
446-
447-
template.loadGlobalElement('index.elements.menus.html', 'menus');
448-
floatingActionButton(false);
449-
}
450-
451-
cache.cleanQueue();
452-
453-
if(!fs.existsSync(fileManager.realPath(path, -1)) && fileManager.containsCompressed(path))
454-
{
455-
fileCompressed.decompressRecursive(path, function(files){
456-
457-
if(checkError(files) && files.error == ERROR_UNZIPPING_THE_FILE)
458-
return dom.compressedError(files);
459-
460-
if(!fs.statSync(fileManager.realPath(path, -1)).isDirectory() && inArray(fileExtension(path), compressedExtensions.all))
461-
{
462-
fileCompressed.returnFiles(path, false, false, function(files){
463-
464-
if(checkError(files) && files.error == ERROR_UNZIPPING_THE_FILE)
465-
return dom.compressedError(files);
466-
467-
loadFilesIndexPage(animation, path, keepScroll, mainPath);
468-
469-
});
470-
}
471-
else
472-
{
473-
loadFilesIndexPage(animation, path, keepScroll, mainPath);
474-
}
475-
476-
});
477-
}
478-
else
479-
{
480-
if(!fs.statSync(fileManager.realPath(path, -1)).isDirectory() && inArray(fileExtension(path), compressedExtensions.all))
481-
{
482-
fileCompressed.returnFiles(path, false, false, function(files){
483-
484-
if(checkError(files) && files.error == ERROR_UNZIPPING_THE_FILE)
485-
return dom.compressedError(files);
486-
487-
loadFilesIndexPage(animation, path, keepScroll, mainPath);
488-
489-
});
490-
}
491-
else
492-
{
493-
loadFilesIndexPage(animation, path, keepScroll, mainPath);
494-
}
495-
}
496-
}
497-
498-
if(readingActive)
499-
{
500-
readingActive = false;
501-
}
502-
503-
justifyViewModule();
504-
505-
gamepad.updateBrowsableItems();
506-
507-
$(window).off('resize').on('resize', function(){
508-
justifyViewModule();
509-
});
510-
511-
}
512-
513308
async function loadIndexPage(animation = true, path = false, content = false, keepScroll = false, mainPath = false, fromGoBack = false)
514309
{
515310
onReading = false;
@@ -646,13 +441,11 @@ async function loadIndexPage(animation = true, path = false, content = false, ke
646441
cache.cleanQueue();
647442

648443
let file = fileManager.file(path);
649-
loadFilesIndexPage(file, animation, path, keepScroll, mainPath);
444+
await loadFilesIndexPage(file, animation, path, keepScroll, mainPath);
650445
}
651446

652447
if(readingActive)
653-
{
654448
readingActive = false;
655-
}
656449

657450
justifyViewModule();
658451

@@ -1397,12 +1190,7 @@ async function openComic(animation = true, path = true, mainPath = true, end = f
13971190
gamepad.setButtonEvent('reading', 1, function(key, button) {
13981191

13991192
if(key == 1)
1400-
{
1401-
let barBack = document.querySelector('.bar-back.active, .bar-back.show');
1402-
1403-
if(barBack)
1404-
eval(barBack.getAttribute('onclick'));
1405-
}
1193+
gamepad.goBack();
14061194

14071195
});
14081196

‎scripts/gamepad.js

+67-19
Original file line numberDiff line numberDiff line change
@@ -255,10 +255,20 @@ function setAxesStepsEvent(key, buttons, callback)
255255
// Use the gamepad to navigate between the items in the content
256256
var currentScreenItems = [];
257257
var currentHighlightItem = -1;
258+
var lastUpdateBrowsableItemsSkiped = false;
259+
var hasKeyboardNavigation = false;
258260

259261
function updateBrowsableItems(force = false)
260262
{
261-
if(!hasGamepads && !force) return;
263+
if(!hasGamepads && !hasKeyboardNavigation && !force)
264+
{
265+
lastUpdateBrowsableItemsSkiped = true;
266+
267+
return;
268+
}
269+
270+
hasKeyboardNavigation = false;
271+
lastUpdateBrowsableItemsSkiped = false;
262272

263273
currentScreenItems = [];
264274
currentHighlightItem = -1;
@@ -268,20 +278,25 @@ function updateBrowsableItems(force = false)
268278
let scrollElement = template.contentRight().children().get(0);
269279
let scrollTop = scrollElement.scrollTop;
270280

281+
let toHighlight = false;
282+
271283
for(let i = 0, len = items.length; i < len; i++)
272284
{
273285
let item = items[i];
274286
let rect = item.getBoundingClientRect();
275287

288+
if((toHighlight === false && item.classList.contains('gamepad-to-highlight')) || item.classList.contains('gamepad-highlight'))
289+
toHighlight = i;
290+
276291
currentScreenItems.push({
277292
element: item,
278-
x: rect.left + (rect.width / 2),
279-
y: rect.top + (rect.height / 2) + scrollTop,
293+
x: rect.left/* + (rect.width / 2)*/,
294+
y: rect.top/* + (rect.height / 2)*/ + scrollTop,
280295
});
281296
}
282297

283298
if(currentScreenItems.length > 0)
284-
highlightItem(0);
299+
highlightItem(toHighlight ? toHighlight : 0);
285300
}
286301

287302
function highlightItem(index)
@@ -379,6 +394,14 @@ function goHighlightItem()
379394
eval(current.element.getAttribute('onclick'));
380395
}
381396

397+
function goBack()
398+
{
399+
let barBack = document.querySelector('.bar-back.active, .bar-back.show');
400+
401+
if(barBack)
402+
eval(barBack.getAttribute('onclick'));
403+
}
404+
382405
setButtonEvent('browsableItems', [0, 12, 13, 14, 15], function(key) {
383406

384407
if(key == 0)
@@ -412,34 +435,59 @@ setButtonEvent('fullscreen', 11, function(key) {
412435
});
413436

414437
// Support also navigation by keyboard
438+
window.addEventListener('keydown', function(event) {
415439

416-
/*$(window).on('keydown', function(e) {
440+
let key = event.keyCode;
417441

418-
if(onReading)
442+
if(!onReading || key == 8)
419443
{
420-
if(e.keyCode == 37)
421-
{
422-
goPrevious();
423-
}
424-
else if(e.keyCode == 38 && !readingViewIs('scroll'))
444+
if(key == 8 || key == 13 || key == 37 || key == 38 || key == 39 || key == 40)
425445
{
426-
goStart();
446+
event.preventDefault();
447+
448+
hasKeyboardNavigation = true;
449+
450+
if(lastUpdateBrowsableItemsSkiped)
451+
updateBrowsableItems(true);
452+
453+
if(key == 8)
454+
goBack();
455+
else if(key == 13)
456+
goHighlightItem();
457+
else if(key == 37)
458+
highlightClosestItem(0);
459+
else if(key == 38)
460+
highlightClosestItem(2);
461+
else if(key == 39)
462+
highlightClosestItem(1);
463+
else if(key == 40)
464+
highlightClosestItem(3);
427465
}
428-
else if(e.keyCode == 39)
429-
{
430-
goNext();
431-
}
432-
else if(e.keyCode == 40 && !readingViewIs('scroll'))
466+
else
433467
{
434-
goEnd();
468+
console.log(key);
435469
}
436470
}
437471

438-
});*/
472+
});
473+
474+
// Update Browsable Items position if window size its changed
475+
var gamepadResizeST = false;
476+
477+
window.addEventListener('resize', function() {
478+
479+
gamepadResizeST = setTimeout(function(){
480+
481+
updateBrowsableItems();
482+
483+
}, 500);
484+
485+
});
439486

440487
module.exports = {
441488
setButtonEvent: setButtonEvent,
442489
setAxesEvent: setAxesEvent,
443490
setAxesStepsEvent: setAxesStepsEvent,
444491
updateBrowsableItems: updateBrowsableItems,
492+
goBack: goBack,
445493
}

0 commit comments

Comments
 (0)