window-fix

This commit is contained in:
Untone 2024-07-06 09:41:16 +03:00
parent fa79a0cd5d
commit e627bae06c
14 changed files with 43 additions and 47 deletions

View File

@ -57,8 +57,8 @@ export type ArticlePageSearchParams = {
const scrollTo = (el: HTMLElement) => { const scrollTo = (el: HTMLElement) => {
const { top } = el.getBoundingClientRect() const { top } = el.getBoundingClientRect()
if (window)
window.scrollTo({ window?.scrollTo({
top: top + window.scrollY - DEFAULT_HEADER_OFFSET, top: top + window.scrollY - DEFAULT_HEADER_OFFSET,
left: 0, left: 0,
behavior: 'smooth' behavior: 'smooth'
@ -270,7 +270,8 @@ export const FullArticle = (props: Props) => {
// Check iframes size // Check iframes size
let articleContainer: HTMLElement | undefined let articleContainer: HTMLElement | undefined
const updateIframeSizes = () => { const updateIframeSizes = () => {
if (!(articleContainer && props.article.body && window)) return if (!window) return
if (!(articleContainer && props.article.body)) return
const iframes = articleContainer?.querySelectorAll('iframe') const iframes = articleContainer?.querySelectorAll('iframe')
if (!iframes) return if (!iframes) return
const containerWidth = articleContainer?.offsetWidth const containerWidth = articleContainer?.offsetWidth

View File

@ -71,7 +71,7 @@ export const Header = (props: Props) => {
const mainContent = document.querySelector<HTMLDivElement>('.main-content') const mainContent = document.querySelector<HTMLDivElement>('.main-content')
if (fixed() || modal() !== null) { if (fixed() || modal() !== null) {
windowScrollTop = window.scrollY windowScrollTop = window?.scrollY || 0
if (mainContent) mainContent.style.marginTop = `-${windowScrollTop}px` if (mainContent) mainContent.style.marginTop = `-${windowScrollTop}px`
} }
@ -79,7 +79,7 @@ export const Header = (props: Props) => {
document.body.classList.toggle(styles.fixed, fixed() && !modal()) document.body.classList.toggle(styles.fixed, fixed() && !modal())
if (!(fixed() || modal())) { if (!(fixed() || modal())) {
window.scrollTo(0, windowScrollTop) window?.scrollTo(0, windowScrollTop)
if (mainContent) mainContent.style.marginTop = '' if (mainContent) mainContent.style.marginTop = ''
} }
}) })

View File

@ -75,7 +75,7 @@ export const NotificationsPanel = (props: Props) => {
const mainContent = document.querySelector<HTMLDivElement>('.main-content') const mainContent = document.querySelector<HTMLDivElement>('.main-content')
if (props.isOpen && mainContent && window) { if (props.isOpen && mainContent && window) {
windowScrollTop = window.scrollY windowScrollTop = window?.scrollY || 0
mainContent.style.marginTop = `-${windowScrollTop}px` mainContent.style.marginTop = `-${windowScrollTop}px`
} }
@ -83,7 +83,7 @@ export const NotificationsPanel = (props: Props) => {
if (!props.isOpen && mainContent && window) { if (!props.isOpen && mainContent && window) {
mainContent.style.marginTop = '' mainContent.style.marginTop = ''
window.scrollTo(0, windowScrollTop) window?.scrollTo(0, windowScrollTop)
} }
}) })

View File

@ -20,12 +20,11 @@ const isInViewport = (el: Element): boolean => {
return rect.top <= DEFAULT_HEADER_OFFSET + 24 // default offset + 1.5em (default header margin-top) return rect.top <= DEFAULT_HEADER_OFFSET + 24 // default offset + 1.5em (default header margin-top)
} }
const scrollToHeader = (element: HTMLElement) => { const scrollToHeader = (element: HTMLElement) => {
if (window) window?.scrollTo({
window.scrollTo({
behavior: 'smooth', behavior: 'smooth',
top: top:
element.getBoundingClientRect().top - element.getBoundingClientRect().top -
document.body.getBoundingClientRect().top - document?.body.getBoundingClientRect().top -
DEFAULT_HEADER_OFFSET DEFAULT_HEADER_OFFSET
}) })
} }

View File

@ -33,7 +33,7 @@ const AUTO_SAVE_DELAY = 3000
const handleScrollTopButtonClick = (ev: MouseEvent | TouchEvent) => { const handleScrollTopButtonClick = (ev: MouseEvent | TouchEvent) => {
ev.preventDefault() ev.preventDefault()
window.scrollTo({ window?.scrollTo({
top: 0, top: 0,
behavior: 'smooth' behavior: 'smooth'
}) })

View File

@ -55,7 +55,7 @@ const AUTO_SAVE_DELAY = 3000
const handleScrollTopButtonClick = (ev: MouseEvent | TouchEvent) => { const handleScrollTopButtonClick = (ev: MouseEvent | TouchEvent) => {
ev.preventDefault() ev.preventDefault()
window.scrollTo({ window?.scrollTo({
top: 0, top: 0,
behavior: 'smooth' behavior: 'smooth'
}) })

View File

@ -87,8 +87,8 @@ export const ProfileSecurityView = (_props: any) => {
handleInputChange('newPasswordConfirm', value) handleInputChange('newPasswordConfirm', value)
if (newPasswordRepeatRef && value !== formData()['newPassword']) { if (newPasswordRepeatRef && value !== formData()['newPassword']) {
const rect = newPasswordRepeatRef.getBoundingClientRect() const rect = newPasswordRepeatRef.getBoundingClientRect()
const topPosition = window.scrollY + rect.top - DEFAULT_HEADER_OFFSET * 2 const topPosition = (window?.scrollY || 0) + rect.top - DEFAULT_HEADER_OFFSET * 2
window.scrollTo({ window?.scrollTo({
top: topPosition, top: topPosition,
left: 0, left: 0,
behavior: 'smooth' behavior: 'smooth'
@ -117,8 +117,8 @@ export const ProfileSecurityView = (_props: any) => {
setOldPasswordError(t('Incorrect old password')) setOldPasswordError(t('Incorrect old password'))
showSnackbar({ type: 'error', body: t('Incorrect old password') }) showSnackbar({ type: 'error', body: t('Incorrect old password') })
const rect = oldPasswordRef.getBoundingClientRect() const rect = oldPasswordRef.getBoundingClientRect()
const topPosition = window.scrollY + rect.top - DEFAULT_HEADER_OFFSET * 2 const topPosition = (window?.scrollY || 0) + rect.top - DEFAULT_HEADER_OFFSET * 2
window.scrollTo({ window?.scrollTo({
top: topPosition, top: topPosition,
left: 0, left: 0,
behavior: 'smooth' behavior: 'smooth'

View File

@ -44,7 +44,7 @@ const STORE_NAME = 'topics'
const CACHE_LIFETIME = 24 * 60 * 60 * 1000 // один день в миллисекундах const CACHE_LIFETIME = 24 * 60 * 60 * 1000 // один день в миллисекундах
const setupIndexedDB = async () => { const setupIndexedDB = async () => {
if (!('indexedDB' in window)) { if (window && !('indexedDB' in window)) {
console.error("This browser doesn't support IndexedDB") console.error("This browser doesn't support IndexedDB")
return return
} }

View File

@ -35,15 +35,15 @@ export default function TranslationWrapper(props: TranslationWrapperProps): JSX.
const [isTranslating, setIsTranslating] = createSignal(false) const [isTranslating, setIsTranslating] = createSignal(false)
onMount(async () => { onMount(async () => {
if ('translation' in window) { if (window && 'translation' in window) {
const translation = (window as Window).translation const translation = (window as Window)?.translation
const canTranslate = await translation?.canTranslate({ const canTranslate = await translation?.canTranslate({
sourceLanguage: props.sourceLanguage || 'ru', sourceLanguage: props.sourceLanguage || 'ru',
targetLanguage: props.targetLanguage targetLanguage: props.targetLanguage
}) })
if (canTranslate !== 'no') { if (translation && canTranslate !== 'no') {
setIsTranslating(true) setIsTranslating(true)
try { try {

View File

@ -48,9 +48,9 @@ export default (props: RouteSectionProps<{ article: Shout }>) => {
(a?: Shout) => { (a?: Shout) => {
if (!a) return if (!a) return
console.debug('[routes.slug] article found') console.debug('[routes.slug] article found')
window.gtag?.('event', 'page_view', { window?.gtag?.('event', 'page_view', {
page_title: a.title, page_title: a.title,
page_location: window.location.href, page_location: window?.location.href || '',
page_path: loc.pathname page_path: loc.pathname
}) })
}, },

View File

@ -40,10 +40,10 @@ export default (props: RouteSectionProps<{ articles: Shout[] }>) => {
createReaction(() => { createReaction(() => {
if (author()) { if (author()) {
console.debug('[routes.slug] article signal changed once') console.debug('[routes.slug] article signal changed once')
window.gtag?.('event', 'page_view', { window?.gtag?.('event', 'page_view', {
page_title: author()?.name || '', page_title: author()?.name || '',
page_location: window.location.href, page_location: window?.location.href || '',
page_path: window.location.pathname page_path: window?.location.pathname || ''
}) })
} }
}) })

View File

@ -78,7 +78,7 @@ export default () => {
</div> </div>
</li> </li>
</ul> </ul>
<Button value={t('Back')} onClick={() => window.history.back()} /> <Button value={t('Back')} onClick={() => window?.history.back()} />
</article> </article>
</AuthGuard> </AuthGuard>
</PageLayout> </PageLayout>

View File

@ -1,5 +1,5 @@
import { RouteSectionProps, createAsync, useParams } from '@solidjs/router' import { RouteSectionProps, createAsync, useParams } from '@solidjs/router'
import { ErrorBoundary, Suspense, createMemo, createReaction } from 'solid-js' import { ErrorBoundary, Suspense, createEffect, createMemo } from 'solid-js'
import { FourOuFourView } from '~/components/Views/FourOuFour' import { FourOuFourView } from '~/components/Views/FourOuFour'
import { TopicView } from '~/components/Views/Topic' import { TopicView } from '~/components/Views/Topic'
import { Loading } from '~/components/_shared/Loading' import { Loading } from '~/components/_shared/Loading'
@ -34,16 +34,12 @@ export default (props: RouteSectionProps<{ articles: Shout[] }>) => {
const { t } = useLocalize() const { t } = useLocalize()
const topic = createMemo(() => topicEntities?.()[params.slug]) const topic = createMemo(() => topicEntities?.()[params.slug])
const title = createMemo(() => `${t('Discours')} :: ${topic()?.title || ''}`) const title = createMemo(() => `${t('Discours')} :: ${topic()?.title || ''}`)
createEffect(() => {
// docs: `a side effect that is run the first time the expression if (topic() && window) {
// wrapped by the returned tracking function is notified of a change` window?.gtag?.('event', 'page_view', {
createReaction(() => {
if (topic()) {
console.debug('[routes.slug] article signal changed once')
window.gtag?.('event', 'page_view', {
page_title: topic()?.title, page_title: topic()?.title,
page_location: window.location.href, page_location: window?.location.href,
page_path: window.location.pathname page_path: window?.location.pathname
}) })
} }
}) })

View File

@ -11,7 +11,7 @@ export const saveScrollPosition = () => {
} }
export const restoreScrollPosition = () => { export const restoreScrollPosition = () => {
window.scroll({ window?.scroll({
top: scrollPosition.top, top: scrollPosition.top,
left: scrollPosition.left left: scrollPosition.left
}) })
@ -21,7 +21,7 @@ export const scrollHandler = (elemId: string, offset = -100) => {
const anchor = document.querySelector(`#${elemId}`) const anchor = document.querySelector(`#${elemId}`)
if (anchor && window) { if (anchor && window) {
window.scrollTo({ window?.scrollTo?.({
top: anchor.getBoundingClientRect().top + offset, top: anchor.getBoundingClientRect().top + offset,
behavior: 'smooth' behavior: 'smooth'
}) })