window-fix
This commit is contained in:
parent
fa79a0cd5d
commit
e627bae06c
|
@ -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
|
||||||
|
|
|
@ -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 = ''
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -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'
|
||||||
})
|
})
|
||||||
|
|
|
@ -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'
|
||||||
})
|
})
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
@ -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 || ''
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
|
@ -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'
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue
Block a user