Fix homepage scrolling error. Remove svg4everybody

Author: ddworak

guide/homepage/.js/src/main/scala/io/udash/web/homepage/components/Header.scala

@@ -5,22 +5,19 @@ import io.udash.web.commons.config.ExternalUrls
 import io.udash.web.commons.styles.GlobalStyles
 import io.udash.web.commons.styles.attributes.Attributes
 import io.udash.web.commons.styles.components.{HeaderButtonsStyles, HeaderNavStyles, MobileMenuStyles}
-import io.udash.web.homepage.Context._
-import io.udash.web.homepage.{HelloState, IndexState}
+import io.udash.web.homepage.Context.*
+import io.udash.web.homepage.HelloState
 import io.udash.web.homepage.styles.partials.{HeaderStyles, HomepageStyles}
-import io.udash.wrappers.jquery.{JQueryEvent, _}
-import org.scalajs.dom.Element
-import scalatags.JsDom.all._
+import io.udash.wrappers.jquery.*
+import org.scalajs.dom.{Element, document}
+import scalatags.JsDom.all.*
 
 object Header extends HeaderButtons with HeaderNav {
-  import io.udash.css.CssView._
+  import io.udash.css.CssView.*
 
   override val buttonStyles: HeaderButtonsStyles = HeaderStyles
   override val navStyles: HeaderNavStyles = HeaderStyles
 
-  private val window = jQ(org.scalajs.dom.window)
-  window.on("scroll", onScroll)
-
   private lazy val btnMobileMenu = a(href := "#", MobileMenuStyles.btnMobile, HeaderStyles.btnMobile)(
     div(MobileMenuStyles.btnMobileLines)(
       span(MobileMenuStyles.btnMobileLineTop),
@@ -46,35 +43,34 @@ object Header extends HeaderButtons with HeaderNav {
     )
   ).render
 
-  private lazy val jqNav = jQ(navElement)
-  private lazy val jqMobileButton = jQ(btnMobileMenu)
+  locally {
+    jQ(org.scalajs.dom.window).on("scroll", onScroll)
 
-  jqMobileButton.on(EventName.click, (_: Element, jqEvent: JQueryEvent) => {
-    jqEvent.preventDefault()
-    toggleBooleanAttribute(jqNav, Attributes.data(Attributes.Active))
-    toggleBooleanAttribute(jqMobileButton, Attributes.data(Attributes.Active))
-  })
+    jQ(btnMobileMenu).on(EventName.click, (_: Element, jqEvent: JQueryEvent) => {
+      jqEvent.preventDefault()
+      toggleBooleanAttribute(navElement, Attributes.data(Attributes.Active))
+      toggleBooleanAttribute(btnMobileMenu, Attributes.data(Attributes.Active))
+    })
+  }
 
   private def onScroll(el: Element, ev: JQueryEvent): Unit = {
     val pinnedAttr: String = Attributes.data(Attributes.Pinned)
 
-    val pin = jQ(template).attr(pinnedAttr).getOrElse("false").toBoolean
-    val scrollTop = jQ(org.scalajs.dom.window).scrollTop()
-    val introHeight = jQ(s".${HomepageStyles.sectionIntro.className}").height()
-
+    val pin = template.attributes.get(pinnedAttr).exists(_.value == "true")
+    val scrollTop = org.scalajs.dom.window.scrollY
+    val introHeight = document.querySelector(s".${HomepageStyles.sectionIntro.className}").getBoundingClientRect().height
     if (scrollTop >= introHeight && !pin) {
-      jQ(template).attr(pinnedAttr, "true")
+      template.setAttribute(pinnedAttr, "true")
     } else if (scrollTop < introHeight && pin) {
-      jQ(template).attr(pinnedAttr, "false")
+      template.setAttribute(pinnedAttr, "false")
     }
   }
 
   def getTemplate: Modifier = template
 
-  private def toggleBooleanAttribute(jqElement: JQuery, attribute: String): Unit = {
-    val activeOption = jqElement.attr(attribute)
-    val newValue = if (activeOption.isEmpty || !activeOption.get.toBoolean) true else false
-
-    jqElement.attr(Attributes.data(Attributes.Active), newValue.toString)
+  private def toggleBooleanAttribute(element: Element, attribute: String): Unit = {
+    val activeOption = element.attributes.get(attribute).map(_.value)
+    val newValue = activeOption.isEmpty || !activeOption.get.toBoolean
+    element.setAttribute(attribute, newValue.toString)
   }
 }

guide/homepage/.js/src/main/scala/io/udash/web/homepage/views/RootView.scala

@@ -1,21 +1,19 @@
 package io.udash.web.homepage.views
 
-import com.avsystem.commons._
-import io.udash._
+import com.avsystem.commons.*
+import io.udash.*
 import io.udash.css.CssView
 import io.udash.web.commons.components.Footer
 import io.udash.web.commons.styles.GlobalStyles
 import io.udash.web.homepage.RootState
 import io.udash.web.homepage.components.Header
 import io.udash.web.homepage.styles.partials.HomepageStyles
-import scalatags.JsDom.tags2._
-
-import scala.scalajs.js
+import scalatags.JsDom.tags2.*
 
 object RootViewFactory extends StaticViewFactory[RootState.type](() => new RootView)
 
 class RootView extends ContainerView with CssView {
-  import scalatags.JsDom.all._
+  import scalatags.JsDom.all.*
 
   private val content = div(
     Header.getTemplate,
@@ -26,9 +24,4 @@ class RootView extends ContainerView with CssView {
   )
 
   override def getTemplate: Modifier = content
-
-  override def renderChild(view: Option[View]): Unit = {
-    super.renderChild(view)
-    js.Dynamic.global.svg4everybody()
-  }
 }

project/Dependencies.scala

@@ -5,7 +5,7 @@ import sbt.*
 import sbt.Keys.scalaVersion
 
 object Dependencies {
-  val versionOfScala = "2.13.18" //update .github/workflows/ci.yml as well
+  val versionOfScala = "2.13.18" //run githubWorkflowGenerate
 
   val jqueryWrapperVersion = "3.3.0"
 
@@ -30,7 +30,6 @@ object Dependencies {
   val flexmarkVersion = "0.64.8"
   val logbackVersion = "1.3.16"
   val fontAwesomeVersion = "5.10.1"
-  val svg4everybodyVersion = "2.1.9"
 
   val scalatestVersion = "3.2.19"
   val mockitoScalaVersion = "2.0.0"
@@ -165,7 +164,6 @@ object Dependencies {
   ))
 
   val homepageJsDeps = Def.setting(Seq[JSModuleID](
-    "org.webjars.npm" % "svg4everybody" % svg4everybodyVersion / s"$svg4everybodyVersion/dist/svg4everybody.js",
     ProvidedJS / "prism.js",
   ))