From 839355f1de24b08bdcd754b1e93a31b19b351099 Mon Sep 17 00:00:00 2001 From: obergodmar Date: Wed, 1 Jul 2020 21:35:19 +0300 Subject: [PATCH] Add main menu; add panel fixes --- package.json | 4 +- src/app/index.tsx | 20 ++++- src/app/style.scss | 24 ++++++ src/assets/assets.scss | 2 + src/components/index.ts | 2 + .../main-menu-component.scss | 21 ++++++ .../main-menu-component.tsx | 17 +++++ .../menu-item-component.scss | 31 ++++++++ .../menu-item-component.tsx | 30 ++++++++ .../panel-component/panel-component.tsx | 75 ++++++++++--------- .../range-component/range-component.tsx | 2 +- .../view-component/view-component.scss | 28 ------- .../view-component/view-component.tsx | 4 - src/utils/index.ts | 11 +-- tsconfig.json | 1 + 15 files changed, 194 insertions(+), 78 deletions(-) create mode 100644 src/components/main-menu-component/main-menu-component.scss create mode 100644 src/components/main-menu-component/main-menu-component.tsx create mode 100644 src/components/menu-item-component/menu-item-component.scss create mode 100644 src/components/menu-item-component/menu-item-component.tsx diff --git a/package.json b/package.json index 28639ea..a1e43da 100644 --- a/package.json +++ b/package.json @@ -29,9 +29,7 @@ "since 2010" ], "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" + "since 2010" ] } } diff --git a/src/app/index.tsx b/src/app/index.tsx index 6b8ac5a..1fcc138 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -1,7 +1,15 @@ import * as React from 'react' import { KeyboardEvent, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' -import { MusicComponent, PanelComponent, PreviewComponent, SettingsComponent, ViewComponent } from '../components' +import { + MainMenuComponent, + MenuItemComponent, + MusicComponent, + PanelComponent, + PreviewComponent, + SettingsComponent, + ViewComponent +} from '../components' import places from '../assets' import { delay, soundLoad, UI_SOUND_VOLUME } from '../utils' import { useSettings } from '../hooks' @@ -131,6 +139,16 @@ export default function App() { className='main' > + +
+ obergodmar + v1.2.0 +
+ + { + return ( +
+ {children} +
+ ) +} + +MainMenuComponent.displayName = 'MainMenuComponent' diff --git a/src/components/menu-item-component/menu-item-component.scss b/src/components/menu-item-component/menu-item-component.scss new file mode 100644 index 0000000..a3c534a --- /dev/null +++ b/src/components/menu-item-component/menu-item-component.scss @@ -0,0 +1,31 @@ +@import '../../app/style'; + +$menuItemWidth: 32px; +$menuItemHeight: 41px; + +.menu-item { + width: $menuItemWidth - 4px; + height: $menuItemHeight - 4px; + border-radius: 6px; + background-image: $helpButton; + background-position: center; + background-repeat: no-repeat; + background-size: $menuItemWidth $menuItemHeight; + + &--active { + background-image: $helpButtonClick; + } + + &:hover { + box-shadow: $hoverBox; + } + + &:focus { + outline: none; + box-shadow: $hoverBox; + } + + &:active { + background-image: $helpButtonClick; + } +} diff --git a/src/components/menu-item-component/menu-item-component.tsx b/src/components/menu-item-component/menu-item-component.tsx new file mode 100644 index 0000000..0e3b19b --- /dev/null +++ b/src/components/menu-item-component/menu-item-component.tsx @@ -0,0 +1,30 @@ +import * as React from 'react' +import { KeyboardEvent } from 'react' + +import './menu-item-component.scss' + +interface Props { + isActive: boolean + handleClick: () => void +} + +export const MenuItemComponent = ({isActive, handleClick}: Props) => { + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.keyCode !== 13 && e.keyCode !== 32) { + return + } + handleClick() + } + + return ( +
+ ) +} + +MenuItemComponent.displayName = 'MainMenuComponent' diff --git a/src/components/panel-component/panel-component.tsx b/src/components/panel-component/panel-component.tsx index 89646fd..4c6ec79 100644 --- a/src/components/panel-component/panel-component.tsx +++ b/src/components/panel-component/panel-component.tsx @@ -57,7 +57,7 @@ export const PanelComponent = ({ } } - const resizePanel = useCallback((animate = true) => { + const resetPanel = useCallback((animate = true) => { if (!panel.current) { return } @@ -73,7 +73,7 @@ export const PanelComponent = ({ useEffect(() => { let timeout: NodeJS.Timeout const handleResize = debounce(() => { - resizePanel() + resetPanel() timeout = setTimeout(() => { if (!panel || !panel.current) { return @@ -88,33 +88,48 @@ export const PanelComponent = ({ } window.removeEventListener('resize', handleResize) } - }, [panel, resizePanel]) + }, [panel, resetPanel]) useEffect(() => { if (!isShown) { - resizePanel(false) + resetPanel(false) } - }, [isShown, resizePanel]) + }, [isShown, resetPanel]) const handleDragScroll = (e: MouseEvent) => { if (!isDrag) { return } + const overflow = windowOverflow() + if (!overflow) { + return + } + + const {clientX, clientY} = e + const value = isBottom ? clientX : clientY + const diff = limiter(value, overflow) + setPosition(diff) + changePosition() + } + + const windowOverflow = () => { const {innerWidth, innerHeight} = window const windowSize = isBottom ? innerWidth : innerHeight const containerSize = itemsCount * ((isBottom ? PREVIEW_WIDTH : PREVIEW_HEIGHT) + 15) if (!(containerSize > windowSize)) { - return + return 0 } - const overflow = Math.abs(containerSize - windowSize) - const {clientX, clientY} = e - const value = isBottom ? clientX : clientY - const diff = trackMouse - value + lastPosition - if (Math.abs(diff) > overflow + 40 || diff < 0) { - return + return Math.abs(containerSize - windowSize) + } + + const limiter = (value: number, overflow: number, isWheel: boolean = false) => { + let diff = (!isWheel ? trackMouse : 0) - value + lastPosition + if (Math.abs(diff) > overflow + 40) { + diff = overflow + 40 + } else if (diff < 0) { + diff = 0 } - setPosition(diff) - changePosition() + return diff } const changePosition = () => { @@ -125,8 +140,9 @@ export const PanelComponent = ({ } const handleMouseDown = (e: MouseEvent) => { + const {clientX, clientY} = e e.nativeEvent.stopImmediatePropagation() - setTrackMouse(isBottom ? e.clientX : e.clientY) + setTrackMouse(isBottom ? clientX : clientY) setDrag(true) } @@ -139,19 +155,14 @@ export const PanelComponent = ({ const handleTouchMove = (e: TouchEvent) => { const {touches} = e - const {innerWidth, innerHeight} = window - const windowSize = isBottom ? innerWidth : innerHeight - const containerSize = itemsCount * ((isBottom ? PREVIEW_WIDTH : PREVIEW_HEIGHT) + 15) - if (!(containerSize > windowSize)) { - return - } - const overflow = Math.abs(containerSize - windowSize) const {clientX, clientY} = touches[0] - const value = isBottom ? clientX : clientY - const diff = trackMouse - value + lastPosition - if (Math.abs(diff) > overflow + 40 || diff < 0) { + const overflow = windowOverflow() + if (!overflow) { return } + + const value = isBottom ? clientX : clientY + const diff = limiter(value, overflow) setPosition(diff) changePosition() } @@ -164,17 +175,13 @@ export const PanelComponent = ({ const handleScroll = (e: WheelEvent) => { const {deltaY} = e - const {innerWidth, innerHeight} = window - const windowSize = isBottom ? innerWidth : innerHeight - const containerSize = itemsCount * ((isBottom ? PREVIEW_WIDTH : PREVIEW_HEIGHT) + 15) - if (!(containerSize > windowSize)) { - return - } - const overflow = Math.abs(containerSize - windowSize) - const diff = (deltaY > 0 ? 80 : -80) + lastPosition - if (Math.abs(diff) > overflow + 40 || diff < 0) { + const overflow = windowOverflow() + if (!overflow) { return } + + const value = deltaY > 0 ? 80 : -80 + const diff = limiter(value, overflow, true) setPosition(diff) changePosition() setLastPosition(position) diff --git a/src/components/range-component/range-component.tsx b/src/components/range-component/range-component.tsx index 2987f8d..4524eca 100644 --- a/src/components/range-component/range-component.tsx +++ b/src/components/range-component/range-component.tsx @@ -56,7 +56,7 @@ export const RangeComponent = ({handleChange, defaultValue}: Props) => { } const {width, left} = (stick.current.parentNode as HTMLDivElement).getBoundingClientRect() const {clientX} = e - const diff = clientX - left + const diff = clientX - left - 20 if (diff > width - 35 || diff < 0) { return } diff --git a/src/components/view-component/view-component.scss b/src/components/view-component/view-component.scss index 4c63963..068d73d 100644 --- a/src/components/view-component/view-component.scss +++ b/src/components/view-component/view-component.scss @@ -25,34 +25,6 @@ opacity: 0; } } - - - &-author { - z-index: 2; - position: absolute; - right: 10px; - top: 10px; - width: 110px; - font-family: $font; - text-shadow: $fontShadow; - color: $fontColor; - font-size: 16px; - display: flex; - align-items: center; - justify-content: space-between; - opacity: .3; - - a { - cursor: $cursorPointer, auto; - color: inherit; - text-decoration: none; - - &:focus { - outline: none; - box-shadow: $hoverBox; - } - } - } } @keyframes pulse { diff --git a/src/components/view-component/view-component.tsx b/src/components/view-component/view-component.tsx index ad53f75..05e92f5 100644 --- a/src/components/view-component/view-component.tsx +++ b/src/components/view-component/view-component.tsx @@ -37,10 +37,6 @@ export const ViewComponent = ({src}: Props) => { }} >
-
- obergodmar - 1.1.0 -
) } diff --git a/src/utils/index.ts b/src/utils/index.ts index 6a22956..b4d713a 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -20,15 +20,12 @@ export const randomNumber = (min: number, max: number) => ( Math.floor(Math.random() * (max - min)) + min ) -export const debounce = (fn: () => any, ms: number) => { - let timer: NodeJS.Timeout | null - return () => { +export function debounce(fn: (args: any) => any, ms: number) { + let timer: NodeJS.Timeout + return (...args: any) => { if (timer) { clearTimeout(timer) } - timer = setTimeout(() => { - timer = null - fn() - }, ms) + timer = setTimeout(() => fn.apply(this, args), ms) } } diff --git a/tsconfig.json b/tsconfig.json index 8d991d3..6a2bf46 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,7 @@ "module": "esnext", "moduleResolution": "node", "downlevelIteration": true, + "noImplicitThis": false, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true,