Change from detecting change in screen orientation to detecting chang…

…e in aspect ratio of parent element of Big As SVG element

README.md

@@ -506,9 +506,9 @@ Default: `false`
 
 **Tip:** Specifying `wordPerLineInPortrait` (the parameter name by itself, with no trailing equal sign or value) has the same effect as `wordPerLineInPortrait=true`.
 
-## Conditional orientation-specific content
+## Conditional aspect-ratio-specific content
 
-To conditionally display text depending on the screen orientation, wrap the text in conditional markup.
+To conditionally display text depending on the aspect ratio of the parent element of the Big As SVG element, wrap the text in conditional markup.
 
 Portrait-only:
 

bigas.js

@@ -158,12 +158,24 @@ function formatSVGElementById (svgElementId) {
     }
   }
 
-  // Handle screen orientation change
-  screen.orientation.addEventListener('change', (event) => {
-    const type = event.target.type
-    insertText (svgElement)
+  // Handle aspect ratio (e.g. screen orientation) change
+  const resizeObserver = new ResizeObserver((entries) => {
+    entries.forEach(entry => {
+      const oldAspectRatioType = getStateProperty('_aspectRatioType')
+      let newAspectRatioType
+      const { inlineSize: borderWidth, blockSize: borderHeight } = entry.borderBoxSize[0]
+      if (borderWidth < borderHeight) {
+        newAspectRatioType = 'portrait'
+      } else {
+        newAspectRatioType = 'landscape'
+      }
+      if (newAspectRatioType != oldAspectRatioType) {
+        setStateProperty('_aspectRatioType', newAspectRatioType)
+        insertText(svgElement)
+      }
+    })
   })
-
+  resizeObserver.observe(svgElement.parentElement)
 }
 
 // Toggle between pause and automatic page flipping
@@ -364,9 +376,19 @@ function fitSVGViewBoxToBBox (svgElement) {
 function insertText (svgElement) {
   const svgNS = 'http://www.w3.org/2000/svg'
   const state = getState()
+  // If the aspect ration type has not yet been set, then set it
+  var aspectRatioType = state._aspectRatioType
+  if (!aspectRatioType) {
+    if (svgElement.parentElement.clientWidth < svgElement.parentElement.clientHeight) {
+      aspectRatioType = 'portrait'
+    } else {
+      aspectRatioType = 'landscape'
+    }
+    setStateProperty('_aspectRatioType', aspectRatioType)
+  }
   var text
   var regexLineSeparator = new RegExp(lineSeparator, 'g')
-  if (state.wordPerLineInPortrait && (screen.orientation.type == 'portrait-primary')) {
+  if (state.wordPerLineInPortrait && (aspectRatioType == 'portrait')) {
     regexLineSeparator = new RegExp('[' + lineSeparator + ', ]', 'g')
   }
   // If the SVG element specifies text in its own data-text attribute, use it
@@ -425,19 +447,20 @@ function convertCharRefsToChars (str) {
   return result
 }
 
-// Resolve conditional text content (such as screen-orientation-specific content)
+// Resolve conditional text content (such as aspect-ratio-specific content)
 function resolveConditionalContent(line) {
+  const aspectRatioType = getStateProperty('_aspectRatioType')
   // Handle landscape-specific content
   var regex = /\[l:([^\]]+)\]/g
   var result = line
   result = line.replace(regex, function (_ , group) {
     var resolved
-    switch (screen.orientation.type) {
-      case 'landscape-primary':
+    switch (aspectRatioType) {
+      case 'landscape':
         // Remove conditional markup wrapper (the match), keep content (the group)
         resolved = group
         break
-      case 'portrait-primary':
+      case 'portrait':
         // Remove the entire match (conditional markup wrapper and its content)
         resolved = ''
         break
@@ -448,12 +471,12 @@ function resolveConditionalContent(line) {
   regex = /\[p:([^\]]+)\]/g
   result = result.replace(regex, function (_ , group) {
     var resolved
-    switch (screen.orientation.type) {
-      case 'portrait-primary':
+    switch (aspectRatioType) {
+      case 'portrait':
         // Remove conditional markup wrapper (the match), keep content (the group)
         resolved = group
         break
-      case 'landscape-primary':
+      case 'landscape':
         // Remove the entire match (conditional markup wrapper and its content)
         resolved = ''
         break

examples/multiplication/index.html

@@ -1,9 +1,9 @@
 <!doctype html>
 <html>
 <head>
-<title>Burger</title>
+<title>Multiplication tables</title>
+<link href="../../images/favicon.ico" rel="shortcut icon"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-<link href="../images/favicon.ico" rel="shortcut icon"/>
 <script type="module">
 import * as Multiplication from "./modules/multiplication.js"
 Multiplication.init()
@@ -38,6 +38,7 @@
   }
 
   .tables .table {
+    user-select: none;
     padding: 1rem;
     border: 0;
     transition: border-color 0.5s;

examples/multiplication/modules/multiplication.js

@@ -1,11 +1,11 @@
 import { getState, setState, getStateProperty, setStateProperty } from './state.js'
 import { log } from '../../../modules/log.js'
 
-const urlEncodedMultiplicationSign = '%26%23x00D7%3B'
+const urlEncodedMultiplicationSign = '%C3%97'
 const urlEncodedSpace = '+'
-const urlEncodedNoBreakSpace = '%26%23xA0%3B'
-const urlEncodedEqualsSign = '%26%23x3D%3B'
-const urlEncodedEnDash = '%26%23x2013%3B'
+const urlEncodedNoBreakSpace = '%C2%A0'
+const urlEncodedEqualsSign = '%3D'
+const urlEncodedEnDash = '%E2%80%93'
 
 const lineSeparator = '/'
 const pageSeparator = '//'
@@ -31,6 +31,8 @@ function showListofTables () {
     table.dataset.minMultiplier = state.minMultiplier
     table.dataset.maxMultiplier = state.maxMultiplier
     table.classList.add('table')
+    // \u{00D7} is a multiplication sign
+    // \u{2026} is a horizontal ellipsis
     table.textContent = multiplicand + ' \u{00D7} ' + state.minMultiplier + ' \u{2026} ' + state.maxMultiplier
     table.addEventListener('click', (event) => {
       showTableBigAs (table.dataset.multiplicand, table.dataset.minMultiplier, table.dataset.maxMultiplier)

modules/state.js

@@ -29,6 +29,7 @@ let state = {
   trimTop: 0,
   width: null,
   wordPerLineInPortrait: false,
+  _aspectRatioType: null,
   _initialPage: true,
   _intervalID: false
 }