Skip to content

Commit

Permalink
fix: buggy file selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimlimjustin
kimlimjustin committed Dec 7, 2021
1 parent 0b2a673 commit 107f2ff
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 17 deletions.
16 changes: 8 additions & 8 deletions src/Components/Files/File Operation/select.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ const arrowRightHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void =>
e.preventDefault();
let nextSibling = (e.shiftKey ? latestShiftSelected.nextSibling : latestSelected.nextSibling) as HTMLElement;
if (hideHiddenFiles) {
while (nextSibling && nextSibling.dataset.hiddenFile !== undefined) {
while (nextSibling && nextSibling.dataset.isHidden === 'true') {
nextSibling = nextSibling.nextSibling as HTMLElement;
}
}
Expand All @@ -171,7 +171,7 @@ const arrowRightHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void =>
let start = false;
for (const sibling of latestSelected.parentNode.children) {
if (start || sibling === nextSibling || sibling === latestSelected) {
if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.hiddenFile === 'true')) sibling.classList.add('selected');
if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === 'true')) sibling.classList.add('selected');
}
if (sibling === latestSelected) start = true;
if (sibling === nextSibling) break;
Expand All @@ -192,7 +192,7 @@ const arrowLeftHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
e.preventDefault();
let previousSibling = (e.shiftKey ? latestShiftSelected.previousSibling : latestSelected.previousSibling) as HTMLElement;
if (hideHiddenFiles) {
while (previousSibling && previousSibling.dataset.hiddenFile !== undefined) {
while (previousSibling && previousSibling.dataset.isHidden === 'true') {
previousSibling = previousSibling.previousSibling as HTMLElement;
}
}
Expand All @@ -203,7 +203,7 @@ const arrowLeftHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
if (e.shiftKey) {
for (const sibling of latestSelected.parentNode.children) {
if (start || sibling === previousSibling || sibling === latestSelected) {
if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.hiddenFile === 'true')) sibling.classList.add('selected');
if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === 'true')) sibling.classList.add('selected');
}
if (sibling === previousSibling) start = true;
if (sibling === latestSelected) break;
Expand All @@ -229,7 +229,7 @@ const arrowDownHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
const siblings = latestSelected.parentNode.children;
let elementBelow = siblings[Array.from(siblings).indexOf(e.shiftKey ? latestShiftSelected : latestSelected) + totalGridInArrow] as HTMLElement;
if (hideHiddenFiles) {
while (elementBelow && elementBelow.dataset.hiddenFile !== undefined) {
while (elementBelow && elementBelow.dataset.isHidden === 'true') {
elementBelow = siblings[Array.from(siblings).indexOf(elementBelow) + totalGridInArrow] as HTMLElement;
}
}
Expand All @@ -240,7 +240,7 @@ const arrowDownHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
if (e.shiftKey) {
for (const sibling of latestSelected.parentNode.children) {
if (start || sibling === elementBelow || sibling === latestSelected) {
if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.hiddenFile === 'true')) sibling.classList.add('selected');
if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === 'true')) sibling.classList.add('selected');
}
if (sibling === latestSelected) start = true;
if (sibling === elementBelow) break;
Expand All @@ -266,7 +266,7 @@ const arrowUpHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
const siblings = latestSelected.parentNode.children;
let elementAbove = siblings[Array.from(siblings).indexOf(e.shiftKey ? latestShiftSelected : latestSelected) - totalGridInArrow] as HTMLElement;
if (hideHiddenFiles) {
while (elementAbove && elementAbove.dataset.hiddenFile !== undefined) {
while (elementAbove && elementAbove.dataset.isHidden === 'true') {
elementAbove = siblings[Array.from(siblings).indexOf(elementAbove) - totalGridInArrow] as HTMLElement;
}
}
Expand All @@ -277,7 +277,7 @@ const arrowUpHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
if (e.shiftKey) {
for (const sibling of latestSelected.parentNode.children) {
if (start || sibling === elementAbove || sibling === latestSelected) {
if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.hiddenFile === 'true')) sibling.classList.add('selected');
if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === 'true')) sibling.classList.add('selected');
}
if (sibling === elementAbove) start = true;
if (sibling === latestSelected) break;
Expand Down
20 changes: 17 additions & 3 deletions src/Components/Functions/lazyLoadingImage.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,21 @@ import FileAPI from '../../Api/files';

const FETCHED_ICONS: string[] = []; // Array of fetch icons

import { isElementInViewport } from './viewport';
/**
* Check if element in viewport
* @param {HTMLElement} el - Element to check
* @returns {boolean} if element in viewport
*/
const isOnImageViewport = (el: HTMLElement): boolean => {
const rect = el.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom - windowHeight <= windowHeight &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};

/**
* Load lazy-load image when user open a directory
Expand All @@ -11,7 +25,7 @@ import { isElementInViewport } from './viewport';
export const LOAD_IMAGE = (): void => {
const images = document.querySelectorAll('img[data-src]');
images.forEach((image: HTMLImageElement) => {
if (isElementInViewport(image)) {
if (isOnImageViewport(image)) {
if (image.dataset.isImg === 'true') {
image.src = new FileAPI(image.dataset.src).readAsset();
} else {
Expand All @@ -32,7 +46,7 @@ const LAZY_LOAD_INIT = (): void => {
document.querySelector('.main-box').addEventListener('scroll', () => {
const images = document.querySelectorAll('img[data-src]');
images.forEach((image: HTMLImageElement) => {
if (isElementInViewport(image)) {
if (isOnImageViewport(image)) {
if (image.dataset.isImg === 'true') {
image.src = new FileAPI(image.dataset.src).readAsset();
} else {
Expand Down
5 changes: 2 additions & 3 deletions src/Components/Functions/viewport.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@
*/
const isElementInViewport = (el: HTMLElement): boolean => {
const rect = el.getBoundingClientRect();
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom - windowHeight <= windowHeight &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
Expand All @@ -23,4 +22,4 @@ const ensureElementInViewPort = (element: HTMLElement): void => {
if (!isElementInViewport(element)) element.scrollIntoView({ block: 'center', behavior: 'smooth' });
};

export { isElementInViewport, ensureElementInViewPort };
export { ensureElementInViewPort };
5 changes: 2 additions & 3 deletions src/Components/Shortcut/shortcut.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import focusingPath from '../Functions/focusingPath';
import { OpenDir } from '../Open/open';
import getDirname from '../Functions/path/dirname';
import copyLocation from '../Files/File Operation/location';
import { ChangeSelectedEvent, getSelected, unselectAllSelected } from '../Files/File Operation/select';
import { ChangeSelectedEvent, getSelected, Select, unselectAllSelected } from '../Files/File Operation/select';
import Pin from '../Files/File Operation/pin';
import New from '../Functions/new';
import { createNewWindow } from '../../Api/window';
Expand Down Expand Up @@ -224,8 +224,7 @@ const Shortcut = (): void => {
for (const _file of _files) {
const _fileName = _file.querySelector('#file-filename').innerHTML.toLowerCase();
if (_fileName.startsWith(searchingFileName)) {
_file.classList.add('selected');
_file.scrollIntoView({ block: 'center', behavior: 'smooth' });
Select(_file as HTMLElement, false, false);
ensureElementInViewPort(_file as HTMLElement);
ChangeSelectedEvent();
break;
Expand Down

1 comment on commit 107f2ff

@vercel
Copy link

@vercel vercel bot commented on 107f2ff Dec 7, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.