Reduce querySelector() scope

jakearchibald · Sep 23, 2021 · 95e88c8 · 95e88c8
1 parent 862df73
commit 95e88c8
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 23 deletions.
diff --git a/src/js/page/main-controller.js b/src/js/page/main-controller.js
@@ -87,31 +87,32 @@ export default class MainController {
 
     domReady.then(() => {
       this._container = document.querySelector('.app-output');
+      const actionContainer = this._container.querySelector(
+        '.action-button-container'
+      );
+      const minorActionContainer = this._container.querySelector(
+        '.minor-action-container'
+      );
 
       // elements for intro anim
       this._mainUi = new MainUi(
-        document.querySelector('.toolbar'),
-        document.querySelector('.action-button-container'),
+        this._container.querySelector('.toolbar'),
+        actionContainer,
         this._outputUi.container,
         this._settingsUi.container
       );
 
-      const actionContainer = document.querySelector(
-        '.action-button-container'
-      );
-      const minorActionContainer = document.querySelector(
-        '.minor-action-container'
-      );
-
       minorActionContainer.append(
         this._bgFillUi.container,
         this._copyButtonUi.container
       );
       actionContainer.append(this._downloadButtonUi.container);
 
-      document.querySelector('.output').append(this._outputUi.container);
+      this._container.querySelector('.output').append(this._outputUi.container);
       this._container.append(this._toastsUi.container, this._dropUi.container);
-      document.querySelector('.menu-extra').append(this._changelogUi.container);
+      this._container
+        .querySelector('.menu-extra')
+        .append(this._changelogUi.container);
 
       // load previous settings
       this._loadSettings();

diff --git a/src/js/page/ui/main-menu.js b/src/js/page/ui/main-menu.js
@@ -15,11 +15,11 @@ export default class MainMenu {
 
     domReady.then(() => {
       this.container = document.querySelector('.main-menu');
-      this._loadFileInput = document.querySelector('.load-file-input');
-      this._pasteInput = document.querySelector('.paste-input');
-      this._loadDemoBtn = document.querySelector('.load-demo');
-      this._loadFileBtn = document.querySelector('.load-file');
-      this._pasteLabel = document.querySelector('.menu-input');
+      this._loadFileInput = this.container.querySelector('.load-file-input');
+      this._pasteInput = this.container.querySelector('.paste-input');
+      this._loadDemoBtn = this.container.querySelector('.load-demo');
+      this._loadFileBtn = this.container.querySelector('.load-file');
+      this._pasteLabel = this.container.querySelector('.menu-input');
       this._overlay = this.container.querySelector('.overlay');
       this._menu = this.container.querySelector('.menu');
 

diff --git a/src/js/page/ui/settings.js b/src/js/page/ui/settings.js
@@ -9,29 +9,29 @@ export default class Settings {
     this._throttleTimeout = null;
 
     domReady.then(() => {
+      this.container = document.querySelector('.settings');
+      this._scroller = this.container.querySelector('.settings-scroller');
+
       this._pluginInputs = [
-        ...document.querySelectorAll('.settings .plugins input'),
+        ...this.container.querySelectorAll('.plugins input'),
       ];
       this._globalInputs = [
-        ...document.querySelectorAll('.settings .global input'),
+        ...this.container.querySelectorAll('.global input'),
       ];
 
       this._resetRipple = new Ripple();
-      this._resetBtn = document.querySelector('.setting-reset');
+      this._resetBtn = this.container.querySelector('.setting-reset');
       this._resetBtn.append(this._resetRipple.container);
 
       // map real range elements to Slider instances
       this._sliderMap = new WeakMap();
 
       // enhance ranges
-      const ranges = document.querySelectorAll('.settings input[type=range]');
+      const ranges = this.container.querySelectorAll('input[type=range]');
       for (const range of ranges) {
         this._sliderMap.set(range, new MaterialSlider(range));
       }
 
-      this.container = document.querySelector('.settings');
-      this._scroller = document.querySelector('.settings-scroller');
-
       this.container.addEventListener('input', (error) =>
         this._onChange(error)
       );