Add an option to disable animation

lakejason0 · Oct 1, 2022 · 2f9da02 · 2f9da02
1 parent 12dcfac
commit 2f9da02
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/includes/SkinLakeus.php b/includes/SkinLakeus.php
@@ -31,6 +31,7 @@ public function getTemplateData() {
             $data["is-repository-link-shown"] = true;
         }
         $data["is-notice-with-border"] = $config->get( 'LakeusSiteNoticeHasBorder' );
+        $data["is-portlet-animated"] = $config->get( 'LakeusShouldAnimatePortlets' );
 
         $pageToolsKey = array_search('p-tb' , array_column( $data["data-portlets-sidebar"]["array-portlets-rest"], 'id' ) );
         $data["data-portlets"]["data-page-tools"] = $data["data-portlets-sidebar"]["array-portlets-rest"][$pageToolsKey];

diff --git a/includes/templates/Portlet.mustache b/includes/templates/Portlet.mustache
@@ -2,7 +2,7 @@
     aria-labelledby="{{id}}-label">
     <input type="checkbox" aria-labelledby="{{id}}-label" />
     <h3 id="{{id}}-label" {{{html-user-language-attributes}}}>{{label}}</h3>
-    <div class="mw-portlet-body">
+    <div class="mw-portlet-body{{#is-portlet-animated}} should-animate{{/is-portlet-animated}}">
         <ul {{{html-user-language-attributes}}}>
             {{{html-items}}}
         </ul>

diff --git a/resources/skin.less b/resources/skin.less
@@ -645,8 +645,11 @@ div.editOptions {
   .mw-portlet-body {
     display: block;
     visibility: hidden;
-    animation-name: animation-menu-hide;
-    animation-duration: 0.2s;
+
+    &.should-animate {
+      animation-name: animation-menu-hide;
+      animation-duration: 0.2s;
+    }
 
     ul {
       background: @background-color-portlet-body;
@@ -681,7 +684,7 @@ div.editOptions {
       visibility: visible;
     }
 
-    ~ .mw-portlet-body {
+    ~ .mw-portlet-body.should-animate {
       animation-name: animation-menu-show;
       animation-duration: 0.2s;
     }

diff --git a/skin.json b/skin.json
@@ -256,6 +256,10 @@
     "LakeusSiteNoticeHasBorder": {
       "value": false,
       "description": "Whether to add a border to site notice. Useful for plain text notices."
+    },
+    "LakeusShouldAnimatePortlets": {
+      "value": false,
+      "description": "Whether to animate portlets. May cause visual artifacts when enabled due to z-index issues."
     }
   }
 }