feat(reader-react): wip updates media queries

triplecanopy · Jun 9, 2022 · 6fa0b6e · 6fa0b6e
1 parent 27d9214
commit 6fa0b6e
Show file tree

Hide file tree

Showing 20 changed files with 74 additions and 149 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -25,3 +25,4 @@ packages/b-ber-templates/Xml/*.js
 packages/b-ber-templates/figures/*.js
 packages/b-ber-lib/utils/*.js
 packages/b-ber-markdown-renderer/src/highlightjs
+packages/b-ber-reader-react/src/constants/index.js
diff --git a/packages/b-ber-reader-react/.prettierignore b/packages/b-ber-reader-react/.prettierignore
@@ -0,0 +1 @@
+src/constants/index.js
diff --git a/packages/b-ber-reader-react/src/components/Footnote.jsx b/packages/b-ber-reader-react/src/components/Footnote.jsx
@@ -113,13 +113,13 @@ class Footnote extends React.Component {
 
   handleOnMouseOver = e => {
     if (e) e.preventDefault()
-    if (Viewport.isMobile()) return
+    if (Viewport.isSingleColumn()) return
     this.toggleFootnote()
   }
 
   // Hide footnote if user hovers over a different note
   handleOnMouseMove = e => {
-    if (Viewport.isMobile()) return
+    if (Viewport.isSingleColumn()) return
 
     if (
       e.target.nodeName === 'SPAN' &&
@@ -179,12 +179,12 @@ class Footnote extends React.Component {
 
   footnoteStyles() {
     const { columnWidth, columnGap, paddingLeft } = this.props.viewerSettings
-    const isMobile = Viewport.isMobile()
+    const isSingleColumn = Viewport.isSingleColumn()
     const aboveElement = this.getFootnoteOffset()
     const offsetProp = aboveElement ? 'bottom' : 'top'
     const offset = offsetProp === 'bottom' ? '1rem' : '1.5rem'
     const left = 0
-    const width = isMobile
+    const width = isSingleColumn
       ? window.innerWidth - paddingLeft * 2
       : `${columnWidth + columnGap}px`
 
@@ -197,7 +197,7 @@ class Footnote extends React.Component {
     styles.left = this.footnoteContainer.current.getBoundingClientRect().x
 
     // Adjust position based on verso or recto position of footnote reference
-    styles.left = isMobile
+    styles.left = isSingleColumn
       ? (styles.left = styles.left * -1 + paddingLeft)
       : styles.left >= window.innerWidth / 2
       ? (styles.left = styles.left * -1 + paddingLeft + columnWidth + columnGap)

diff --git a/packages/b-ber-reader-react/src/components/Frame.jsx b/packages/b-ber-reader-react/src/components/Frame.jsx
@@ -11,7 +11,7 @@ class Frame extends React.Component {
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (
-      !Viewport.isMobile() ||
+      !Viewport.isSingleColumn() ||
       !this.node?.current ||
       nextProps.view.loaded === false ||
       this.props.view.loaded === nextProps.view.loaded
@@ -55,7 +55,7 @@ class Frame extends React.Component {
       fontSize,
     }
 
-    if (Viewport.verticallyScrolling(this.props)) {
+    if (Viewport.isVerticallyScrolling(this.props)) {
       // Mobile
       style = {
         ...style,

diff --git a/packages/b-ber-reader-react/src/components/Layout.jsx b/packages/b-ber-reader-react/src/components/Layout.jsx
@@ -15,7 +15,7 @@ import ReaderContext from '../lib/reader-context'
 import { RESIZE_DEBOUNCE_TIMER, layouts } from '../constants'
 
 function Leaves({ layout, leafLeftStyles, leafRightStyles }) {
-  return Viewport.verticallyScrolling({ layout }) ? null : (
+  return Viewport.isVerticallyScrolling({ layout }) ? null : (
     <>
       <div className="bber-leaf bber-leaf--left" style={leafLeftStyles} />
       <div className="bber-leaf bber-leaf--right" style={leafRightStyles} />
@@ -175,7 +175,7 @@ class Layout extends React.Component {
     if (layout === layouts.SCROLL) {
       contextClass = 'scroll'
     } else {
-      contextClass = Viewport.verticallyScrolling({ layout })
+      contextClass = Viewport.isVerticallyScrolling({ layout })
         ? 'mobile'
         : 'desktop'
     }

diff --git a/packages/b-ber-reader-react/src/components/Marker.jsx b/packages/b-ber-reader-react/src/components/Marker.jsx
@@ -76,7 +76,7 @@ class Marker extends React.Component {
 
     if (
       !this.props.elemRef?.current ||
-      Viewport.verticallyScrolling(this.props.readerSettings)
+      Viewport.isVerticallyScrolling(this.props.readerSettings)
     ) {
       return offsetHeight
     }

diff --git a/packages/b-ber-reader-react/src/components/Media/Controls/AudioControlsFull.jsx b/packages/b-ber-reader-react/src/components/Media/Controls/AudioControlsFull.jsx
@@ -98,7 +98,7 @@ function AudioControlsFull(props) {
 }
 
 function AudioControls(props) {
-  return Viewport.isMobile() ? (
+  return Viewport.isSingleColumn() ? (
     <AudioControlsFullStacked {...props} />
   ) : (
     <AudioControlsFull {...props} />

diff --git a/packages/b-ber-reader-react/src/components/Media/Vimeo.jsx b/packages/b-ber-reader-react/src/components/Media/Vimeo.jsx
@@ -112,7 +112,7 @@ class Vimeo extends React.Component {
     let paddingTop
 
     if (iframePositioningEnabled) {
-      const mobile = Viewport.isMobile()
+      const mobile = Viewport.isSingleColumn()
       const position = mobile ? 'static' : 'absolute' // Only run re-positioning on desktop
       const x = aspectRatio.get('x')
       const y = aspectRatio.get('y')

diff --git a/packages/b-ber-reader-react/src/components/Navigation/NavigationFooter.jsx b/packages/b-ber-reader-react/src/components/Navigation/NavigationFooter.jsx
@@ -5,23 +5,23 @@ import { ChapterNext, ChapterPrevious, PageNext, PagePrevious } from './Icon'
 const show = {
   chapter: {
     prev: props =>
-      (Viewport.isMobile() ||
+      (Viewport.isSingleColumn() ||
         props.uiOptions.navigation.footer_icons.chapter) &&
       props.currentSpineItemIndex !== 0,
 
     next: props =>
-      (Viewport.isMobile() ||
+      (Viewport.isSingleColumn() ||
         props.uiOptions.navigation.footer_icons.chapter) &&
       props.currentSpineItemIndex !== props.spine.length - 1,
   },
   page: {
     prev: props =>
-      !Viewport.verticallyScrolling(props) &&
+      !Viewport.isVerticallyScrolling(props) &&
       props.uiOptions.navigation.footer_icons.page &&
       (props.currentSpineItemIndex !== 0 || props.spreadIndex !== 0),
 
     next: props =>
-      !Viewport.verticallyScrolling(props) &&
+      !Viewport.isVerticallyScrolling(props) &&
       props.uiOptions.navigation.footer_icons.page &&
       (props.currentSpineItemIndex !== props.spine.length - 1 ||
         props.spreadIndex !== props.lastSpreadIndex),

diff --git a/packages/b-ber-reader-react/src/components/Reader/index.jsx b/packages/b-ber-reader-react/src/components/Reader/index.jsx
@@ -255,7 +255,9 @@ class Reader extends Component {
       columnGap,
     } = this.props.viewerSettings
 
-    const isScrolling = Viewport.verticallyScrolling(this.props.readerSettings)
+    const isScrolling = Viewport.isVerticallyScrolling(
+      this.props.readerSettings
+    )
 
     let translateX = 0
     if (!isScrolling) {

diff --git a/packages/b-ber-reader-react/src/components/Reader/navigation.js b/packages/b-ber-reader-react/src/components/Reader/navigation.js
@@ -110,7 +110,7 @@ export function navigateToElementById(id) {
 
   // Scroll to vertical position, leave a bit of room for the controls and
   // whitespace around the element
-  if (Viewport.verticallyScrolling(this.props.readerSettings)) {
+  if (Viewport.isVerticallyScrolling(this.props.readerSettings)) {
     const padding = 25
     const offset =
       document.querySelector('.bber-controls__header').offsetHeight + padding

diff --git a/packages/b-ber-reader-react/src/components/Spread.jsx b/packages/b-ber-reader-react/src/components/Spread.jsx
@@ -84,7 +84,7 @@ class Spread extends React.Component {
     // console.log('spreadPosition', elementEdgeLeft / layoutWidth, spreadPosition)
 
     let left = 0
-    if (!Viewport.verticallyScrolling(this.props.readerSettings)) {
+    if (!Viewport.isVerticallyScrolling(this.props.readerSettings)) {
       left = layoutWidth * spreadPosition
       // if (recto) left -= layoutWidth
       if (unbound) left = 0

diff --git a/packages/b-ber-reader-react/src/components/SpreadImageStyles.jsx b/packages/b-ber-reader-react/src/components/SpreadImageStyles.jsx
@@ -29,7 +29,7 @@ function SpreadImageStyles(props) {
   // console.log('recto || unbound', recto, unbound, spreadPosition)
 
   // prettier-ignore
-  const styles = Viewport.verticallyScrolling(props) ? null : `
+  const styles = Viewport.isVerticallyScrolling(props) ? null : `
     /* Previous pages */
     .spread-index__${adjustedSpreadPosition - 2} #spread__${markerRefId} > figure,
     .spread-index__${adjustedSpreadPosition - 2} #spread__${markerRefId} > .spread__content,

diff --git a/packages/b-ber-reader-react/src/constants/index.js b/packages/b-ber-reader-react/src/constants/index.js
@@ -4,16 +4,9 @@ export const RESIZE_DEBOUNCE_TIMER = 60
 export const MUTATION_DEBOUNCE_TIMER = 60
 export const DEFERRED_CALLBACK_TIMER = 60
 
-export const transitions = {
-  SLIDE: 'slide',
-  FADE: 'fade',
-}
+export const transitions = { SLIDE: 'slide', FADE: 'fade' }
 
-export const themes = {
-  DEFAULT: 'default',
-  LIGHT: 'light',
-  DARK: 'dark',
-}
+export const themes = { DEFAULT: 'default', LIGHT: 'light', DARK: 'dark' }
 
 export const messagesTypes = {
   PAGINATION_EVENT: 'PAGINATION_EVENT',
@@ -25,58 +18,25 @@ export const messagesTypes = {
   SCROLL_EVENT: 'SCROLL_EVENT',
 }
 
-// Media queries from TC theme. The XL isn't currently used (except for in the
-// `LAYOUT_MAX_WIDTH`), may not be necessary
-//
-//
-// Mobile
-// $mq-xs: "only screen and (max-width: 768px)";
-// Tablet
-// $mq-sm: "only screen and (min-width: 769px) and (max-width: 1140px)";
-// Desktop 1
-// $mq-md: "only screen and (min-width: 1141px) and (max-width: 1440px)";
-// Desktop 2
-// $mq-lg: "only screen and (min-width: 1441px) and (max-width: 1920px)";
-// Desktop 3
-// $mq-xl: "only screen and (min-width: 1921px)";
-
-// Media queries horizontal in px
-export const BREAKPOINT_HORIZONTAL_SMALL = 900
-
-// Enforce a single column scrolling layout on awkward screen sizes
-export const MINIMUM_ONE_COLUMN_ASPECT_RATIO = 13 / 5
-
-// Columns
-// export const DESKTOP_COLUMN_COUNT = 16
-// export const MOBILE_COLUMN_COUNT = 9
-
-// Used in DocumentPreProcessor for appended stylesheets
-// prettier-ignore
-export const MEDIA_QUERY_SMALL = `only screen and (min-width: ${BREAKPOINT_HORIZONTAL_SMALL}px)`
-// prettier-ignore
-export const MEDIA_QUERY_LARGE = `only screen and (max-width: ${BREAKPOINT_HORIZONTAL_SMALL +  1}px)`
-
-export const MEDIA_PLAYBACK_RATES = {
-  SLOW: 0.5,
-  NORMAL: 1.0,
-  FAST: 1.5,
-}
-
+export const MEDIA_PLAYBACK_RATES = { SLOW: 0.5, NORMAL: 1.0, FAST: 1.5 }
 export const MEDIA_CONTROLS_PRESETS = new Set(['simple', 'normal', 'full'])
 
 export const layouts = { SCROLL: 'scroll', COLUMNS: 'columns' }
 
-// Media Queries
+// Enforce a single column scrolling layout on awkward screen sizes
+export const MEDIA_QUERY_MIN_SCROLLING_ASPECT_RATIO = 'only screen and (min-aspect-ratio: 13 / 5)'
+
+// Media queries for various horizontal screen sizes
+export const MEDIA_QUERY_MOBILE      = 'only screen and (max-width: 768px)'
+export const MEDIA_QUERY_TABLET      = 'only screen and (min-width: 768px) and (max-width: 1140px)'
+export const MEDIA_QUERY_DESKTOP_SM  = 'only screen and (min-width: 1140px) and (max-width: 1140px)'
+export const MEDIA_QUERY_DESKTOP_MD  = 'only screen and (min-width: 1140px) and (max-width: 1440px)'
+export const MEDIA_QUERY_DESKTOP_LG  = 'only screen and (min-width: 1440px) and (max-width: 1920px)'
+export const MEDIA_QUERY_DESKTOP_XL  = 'only screen and (min-width: 1920px)'
 
-export const mediaQueryMobile = 'only screen and (max-width: 768px)'
-export const mediaQueryTablet =
-  'only screen and (min-width: 768px) and (max-width: 1140px)'
-export const mediaQueryDesktopSm =
-  'only screen and (min-width: 1140px) and (max-width: 1140px)'
-export const mediaQueryDesktopMd =
-  'only screen and (min-width: 1140px) and (max-width: 1440px)'
-export const mediaQueryDesktopLg = 'only screen and (min-width: 1440px)'
-export const mediaQueryDesktopXl = 'only screen and (min-width: 1920px)'
+// Media queries used in DocumentPreProcessor for generated stylesheets
+export const MEDIA_QUERY_SCROLLING = 'only screen and (max-width: 1140px), (min-aspect-ratio: 13 / 5)'
+export const MEDIA_QUERY_SLIDING   = 'only screen and (min-width: 1140px) and (max-aspect-ratio: 13 / 5)'
 
 /**
  *
@@ -85,7 +45,7 @@ export const mediaQueryDesktopXl = 'only screen and (min-width: 1920px)'
  */
 export const horizontalBreakpoints = new Map([
   [
-    mediaQueryMobile,
+    MEDIA_QUERY_MOBILE,
     {
       maxWidth: '100%',
       maxHeight: 'auto',
@@ -98,7 +58,7 @@ export const horizontalBreakpoints = new Map([
     },
   ],
   [
-    mediaQueryTablet,
+    MEDIA_QUERY_TABLET,
     {
       maxWidth: '738px',
       maxHeight: 'auto',
@@ -111,7 +71,7 @@ export const horizontalBreakpoints = new Map([
     },
   ],
   [
-    mediaQueryDesktopSm,
+    MEDIA_QUERY_DESKTOP_SM,
     {
       maxWidth: '900px',
       maxHeight: '500px',
@@ -124,7 +84,7 @@ export const horizontalBreakpoints = new Map([
     },
   ],
   [
-    mediaQueryDesktopMd,
+    MEDIA_QUERY_DESKTOP_MD, // TODO not called? See above
     {
       maxWidth: '1080px',
       maxHeight: '720px',
@@ -137,7 +97,7 @@ export const horizontalBreakpoints = new Map([
     },
   ],
   [
-    mediaQueryDesktopLg,
+    MEDIA_QUERY_DESKTOP_LG,
     {
       maxWidth: '1280px',
       maxHeight: '750px',
@@ -150,7 +110,7 @@ export const horizontalBreakpoints = new Map([
     },
   ],
   [
-    mediaQueryDesktopXl,
+    MEDIA_QUERY_DESKTOP_XL,
     {
       maxWidth: '1680px',
       maxHeight: '900px',
@@ -163,36 +123,3 @@ export const horizontalBreakpoints = new Map([
     },
   ],
 ])
-
-/**
- *
- * Vertical Spacing
- *
- */
-// TODO are these used?
-export const verticalBreakpoints = new Map([
-  [
-    'only screen and (min-height: 500px)',
-    [
-      {
-        maxHeight: '500px',
-      },
-    ],
-  ],
-  [
-    'only screen and (max-height: 500px)',
-    [
-      {
-        maxHeight: '720px',
-      },
-    ],
-  ],
-  [
-    'only screen and (max-height: 350px)',
-    [
-      {
-        maxHeight: '750px',
-      },
-    ],
-  ],
-])