Improved the jump to the selected option

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index a8e40aa1b625c29a6632b026ce34645ae1d607c1..e83ac560da9238e1591b5e6065014e65acbc1e17 100644 (file)
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -640,3 +640,20 @@ $wcfAcpSubMenuWidth: 300px;
        color: $wcfContentText;
        font-weight: 600;
 }
+
+@keyframes hightlightOptionLabel {
+       0% {
+               transform: scale(1);
+       }
+       50% {
+               transform: scale(1.1);
+       }
+       100% {
+               transform: scale(1);
+       }
+}
+
+.hightlightOptionLabel {
+       animation: hightlightOptionLabel .48s ease-in-out;
+       display: inline-block;
+}

diff --git a/wcfsetup/install/files/acp/templates/option.tpl b/wcfsetup/install/files/acp/templates/option.tpl
index ab4c5a91263ef57f2c0a348c941bc24b898267b3..9305aa4c1ee24de2bb64db915507f77ee3457cc3 100644 (file)
--- a/wcfsetup/install/files/acp/templates/option.tpl
+++ b/wcfsetup/install/files/acp/templates/option.tpl
@@ -5,20 +5,34 @@
 <script data-relocate="true">
        $(function() {
                new WCF.Option.Handler();
-               
-               {if $optionName}
-                       setTimeout(function() {
-                               var option = elById('{$optionName}');
-                               var div = elCreate('div');
-                               div.id = 'wcfOptionAnchor';
-                               div.style.setProperty('position', 'absolute', '');
-                               div.style.setProperty('top', (option.closest('dl').offsetTop - 60) + 'px', '');
-                               document.body.appendChild(div);
-                               div.scrollIntoView({ behavior: 'smooth' });
+       });
+
+       document.addEventListener("DOMContentLoaded", () => {
+               const searchParams = new URLSearchParams(document.location.search);
+               const optionName = searchParams.get("optionName");
+               if (optionName) {
+                       window.setTimeout(() => {
+                               const element = document.getElementById(optionName);
+                               if (!element) {
+                                       return;
+                               }
+
+                               const dl = element.closest("dl");
+                               if (!dl) {
+                                       return;
+                               }
+
+                               const elementTop = Math.trunc(element.getBoundingClientRect().top);
+                               window.scrollTo(0, elementTop - 50);
+                               element.focus();
                                
-                               option.focus();
+                               window.setTimeout(() => {
+                                       const label = dl.querySelector("dt label");
+                                       label.classList.add("hightlightOptionLabel");
+                                       label.addEventListener("transitionEnd",() => label.classList.remove("hightlightOptionLabel"), { once: true });
+                               }, 500);
                        }, 200);
-               {/if}
+               }
        });
        
        {event name='javascriptInit'}

diff --git a/wcfsetup/install/files/lib/acp/form/OptionForm.class.php b/wcfsetup/install/files/lib/acp/form/OptionForm.class.php
index 4ff8836dd2a95222e87248a45663cdecef3d0b0f..b50f22d467bb7909724b3c8460b32427d1417529 100644 (file)
--- a/wcfsetup/install/files/lib/acp/form/OptionForm.class.php
+++ b/wcfsetup/install/files/lib/acp/form/OptionForm.class.php
@@ -9,7 +9,6 @@ use wcf\system\exception\IllegalLinkException;
 use wcf\system\menu\acp\ACPMenu;
 use wcf\system\style\StyleHandler;
 use wcf\system\WCF;
-use wcf\util\StringUtil;
 
 /**
  * Shows the option edit form.
@@ -33,12 +32,6 @@ class OptionForm extends AbstractOptionListForm
      */
     public $categoryID = 0;
 
-    /**
-     * option name for highlighting
-     * @var string
-     */
-    public $optionName = '';
-
     /**
      * the option tree
      * @var array
@@ -64,10 +57,6 @@ class OptionForm extends AbstractOptionListForm
         }
         $this->categoryName = $this->category->categoryName;
 
-        if (isset($_GET['optionName'])) {
-            $this->optionName = StringUtil::trim($_GET['optionName']);
-        }
-
         parent::readParameters();
     }
 
@@ -118,7 +107,6 @@ class OptionForm extends AbstractOptionListForm
 
         WCF::getTPL()->assign([
             'category' => $this->category,
-            'optionName' => $this->optionName,
             'optionTree' => $this->optionTree,
             'rewriteTestApplications' => ApplicationHandler::getInstance()->getApplications(),
         ]);