From dcd739f69233b5fb49f06cbe97c2ffece1dc2db6 Mon Sep 17 00:00:00 2001
From: Stefan Schermann <stefan.schermann@gmail.com>
Date: Fri, 8 Sep 2023 13:53:34 +0200
Subject: [PATCH 1/2] fix dom exception by creating slider wrappers from
 mithril

---
 src/ui/gamesMenu.ts    |  2 +-
 src/ui/helper/Siema.js | 36 +++++++++++-------------------------
 2 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/src/ui/gamesMenu.ts b/src/ui/gamesMenu.ts
index 81b9df3304..4d6488b1c3 100644
--- a/src/ui/gamesMenu.ts
+++ b/src/ui/gamesMenu.ts
@@ -335,5 +335,5 @@ function renderAllGames() {
   return h('div.games_carousel', {
     oncreate: wrapperOnCreate,
     onremove: wrapperOnRemove,
-  }, allCards)
+  }, helper.isPortrait() ? h('div', allCards.map(card => h('div', card))) : allCards)
 }
diff --git a/src/ui/helper/Siema.js b/src/ui/helper/Siema.js
index 3f1bddcbb1..15f814b2ae 100644
--- a/src/ui/helper/Siema.js
+++ b/src/ui/helper/Siema.js
@@ -14,8 +14,8 @@ export default class Siema {
     // Resolve selector's type
     this.selector = typeof this.config.selector === 'string' ? document.querySelector(this.config.selector) : this.config.selector
 
-    // Early throw if selector doesn't exists
-    if (this.selector === null) {
+    // Early throw if selector or sliderframe don't exist
+    if (this.selector === null || this.selector.firstElementChild === null) {
       throw new Error('Something wrong with your selector ??')
     }
 
@@ -24,7 +24,7 @@ export default class Siema {
 
     // Create global references
     this.selectorWidth = this.selector.offsetWidth
-    this.innerElements = [].slice.call(this.selector.children)
+    this.innerElements = [].slice.call(this.selector.firstElementChild.children)
     this.currentSlide =
       Math.max(0, Math.min(this.config.startIndex, this.innerElements.length - this.perPage))
     this.transformProperty = 'transform';
@@ -134,36 +134,22 @@ export default class Siema {
     const widthItem = this.selectorWidth / this.perPage
     const itemsToBuild = this.innerElements.length
 
-    // Create frame and apply styling
-    this.sliderFrame = document.createElement('div')
+    // Get frame and apply styling
+    this.sliderFrame = this.selector.firstElementChild
     this.sliderFrame.style.width = `${widthItem * itemsToBuild}px`
 
-    // Create a document fragment to put slides into it
-    const docFragment = document.createDocumentFragment()
-
     for (let i = 0; i < this.innerElements.length; i++) {
-      const element = this.buildSliderFrameItem(this.innerElements[i])
-      docFragment.appendChild(element)
+      this.buildSliderFrameItem(this.innerElements[i])
     }
 
-    // Add fragment to the frame
-    this.sliderFrame.appendChild(docFragment)
-
-    // Clear selector (just in case something is there) and insert a frame
-    this.selector.innerHTML = ''
-    this.selector.appendChild(this.sliderFrame)
-
     // Go to currently active slide after initial build
     this.slideToCurrent()
   }
 
-  buildSliderFrameItem(elm) {
-    const elementContainer = document.createElement('div')
+  buildSliderFrameItem(elementContainer) {
     elementContainer.style.cssFloat = this.config.rtl ? 'right' : 'left'
     elementContainer.style.float = this.config.rtl ? 'right' : 'left'
     elementContainer.style.width = `${100 / (this.innerElements.length)}%`
-    elementContainer.appendChild(elm)
-    return elementContainer
   }
 
 
@@ -463,12 +449,12 @@ export default class Siema {
     this.selector.style.cursor = 'auto'
 
     if (restoreMarkup) {
-      const slides = document.createDocumentFragment()
       for (let i = 0; i < this.innerElements.length; i++) {
-        slides.appendChild(this.innerElements[i])
+        this.innerElements[i].removeAttribute('style')
+      }
+      if (this.sliderFrame) {
+        this.sliderFrame.removeAttribute('style')
       }
-      this.selector.innerHTML = ''
-      this.selector.appendChild(slides)
       this.selector.removeAttribute('style')
     }
 

From a8697fb9ee28e561a9f18073ea4ab9d0cf952ec5 Mon Sep 17 00:00:00 2001
From: Stefan Schermann <stefan.schermann@gmail.com>
Date: Fri, 8 Sep 2023 13:54:21 +0200
Subject: [PATCH 2/2] only redraw when announcement changes

---
 src/announce.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/announce.ts b/src/announce.ts
index 4ed062be87..dcb8c06e1a 100644
--- a/src/announce.ts
+++ b/src/announce.ts
@@ -34,8 +34,10 @@ export async function set(a?: Announcement): Promise<void> {
       return
     }
   }
-  announce = a
-  redraw()
+  if (announce !== a) {
+    announce = a
+    redraw()
+  }
 }
 
 export async function dismiss(): Promise<void> {