Просмотр исходного кода

#6797: Fix sidenav jumpy/glitchy behavior on page reload when pinned

checktheroads 4 лет назад
Родитель
Сommit
261372289a

Разница между файлами не показана из-за своего большого размера
+ 0 - 0
netbox/project-static/dist/graphiql.js.map


Разница между файлами не показана из-за своего большого размера
+ 0 - 0
netbox/project-static/dist/netbox.js


Разница между файлами не показана из-за своего большого размера
+ 0 - 0
netbox/project-static/dist/netbox.js.map


+ 4 - 1
netbox/project-static/src/sidenav.ts

@@ -17,7 +17,10 @@ class SideNav {
 
   constructor(base: HTMLDivElement) {
     this.base = base;
-    this.state = new StateManager<NavState>({ pinned: true }, { persist: true });
+    this.state = new StateManager<NavState>(
+      { pinned: true },
+      { persist: true, key: 'netbox-sidenav' },
+    );
 
     this.init();
     this.initLinks();

+ 12 - 2
netbox/project-static/src/state/index.ts

@@ -8,6 +8,11 @@ interface StateOptions {
    * exists in localStorage, the value will be read and used as the initial value.
    */
   persist?: boolean;
+
+  /**
+   * Use a static localStorage key instead of automatically generating one.
+   */
+  key?: string;
 }
 
 /**
@@ -49,10 +54,15 @@ export class StateManager<T extends Dict, K extends keyof T = keyof T> {
   private key: string = '';
 
   constructor(raw: T, options: StateOptions) {
-    this.key = this.generateStateKey(raw);
-
     this.options = options;
 
+    // Use static key if defined.
+    if (typeof this.options.key === 'string') {
+      this.key = this.options.key;
+    } else {
+      this.key = this.generateStateKey(raw);
+    }
+
     if (this.options.persist) {
       const saved = this.retrieve();
       if (saved !== null) {

+ 16 - 1
netbox/templates/base/base.html

@@ -21,7 +21,7 @@
     {# Page title #}
     <title>{% block title %}Home{% endblock %} | NetBox</title>
 
-    <script>
+    <script type="text/javascript">
       /**
        * Determine the best initial color mode to use prior to rendering.
        */
@@ -82,6 +82,21 @@
   </head>
   
   <body>
+    <script type="text/javascript">
+      (function() {
+        // Check localStorage to see if the sidebar should be pinned.
+        var sideNavRaw = localStorage.getItem('netbox-sidenav');
+        if (typeof sideNavRaw === 'string') {
+          var sideNavState = JSON.parse(sideNavRaw);
+          if (sideNavState.pinned === true) {
+            // If the sidebar should be pinned, set the appropriate body attributes prior to the
+            // rest of the content rendering. This prevents jumpy/glitchy behavior on page reloads.
+            document.body.setAttribute('data-sidenav-pinned', '');
+            document.body.setAttribute('data-sidenav-show', '');
+          }
+        }
+      })();
+    </script>
 
     {# Page layout #}
     {% block layout %}{% endblock %}

Некоторые файлы не были показаны из-за большого количества измененных файлов