issues #11 - moved the constants to a separate file and removed unnecessary initialization of properties

Author: coder1x

src/components/code/CopyCodeButton.ts

@@ -1,6 +1,7 @@
 import { boundMethod } from 'autobind-decorator';
 
 import RangeSliderOptions from '@shared/interface/globInterface';
+import { NAME_PLUGIN } from '@shared/constants';
 
 class CopyCodeButton {
   private className: string;
@@ -70,7 +71,7 @@ class CopyCodeButton {
   private handleCopyClick() {
     if (!this.list) return false;
 
-    let text = '$(\'.demo\').RangeSliderFox({\n';
+    let text = `$('.demo').${NAME_PLUGIN}({\n`;
 
     this.list.childNodes.forEach((item) => {
       const element = item as HTMLElement;

src/components/input-data/InputData.ts

@@ -3,7 +3,7 @@ class InputData {
 
   private input: HTMLInputElement | null = null;
 
-  private className: string = '';
+  private className: string;
 
   private element: Element;
 

src/components/keyboard-control/KeyboardControl.ts

@@ -16,7 +16,7 @@ class KeyboardControl {
 
   private keyStepHoldCache: number = 0;
 
-  private nameClass: string = '';
+  private nameClass: string;
 
   private objRangeSlider: any;
 

src/components/miscellaneous/Miscellaneous.ts

@@ -27,7 +27,7 @@ class Different {
 
   private reset: HTMLButtonElement | null = null;
 
-  private panel: Element | null = null;
+  private panel: Element;
 
   private modifier: string = '';
 
@@ -87,7 +87,7 @@ class Different {
       this.orientation.checked = orientFlag;
       this.orientationCache = orientation ?? '';
 
-      const { classList } = this.panel as Element;
+      const { classList } = this.panel;
 
       if (orientFlag) {
         classList.add(this.modifier);
@@ -177,7 +177,7 @@ class Different {
   @boundMethod
   private handleOrientationClick(event: Event) {
     const element = event.target as HTMLInputElement;
-    const { classList } = this.panel as Element;
+    const { classList } = this.panel;
 
     if (element.checked) {
       classList.add(this.modifier);
@@ -197,9 +197,7 @@ class Different {
   }
 
   private setDomElement() {
-    if (this.panel) {
-      this.modifier = `${this.panel.classList[0]}_vertical`;
-    }
+    this.modifier = `${this.panel.classList[0]}_vertical`;
 
     this.type = this.getDomElement('double');
     this.disabled = this.getDomElement('disabled');

src/components/panel/Panel.ts

@@ -6,13 +6,14 @@ import Hints from '@com/hints/Hints';
 import Different from '@com/miscellaneous/Miscellaneous';
 import CopyCodeButton from '@com/code/CopyCodeButton';
 import KeyboardControl from '@com/keyboard-control/KeyboardControl';
+import { NAME_PLUGIN } from '@shared/constants';
 
 interface Actions {
   bindEvent: <T>(object: T) => boolean | void;
 }
 
 class Panel {
-  private element: Element | null = null;
+  private element: Element;
 
   private objectValues: Values | null = null;
 
@@ -26,7 +27,7 @@ class Panel {
 
   private objectCopyCode: CopyCodeButton | null = null;
 
-  private className: string = '';
+  private className: string;
 
   private objectKeyboardControl: KeyboardControl | null = null;
 
@@ -37,8 +38,6 @@ class Panel {
   }
 
   createRangeSlider(options: RangeSliderOptions) {
-    if (!this.element) return false;
-
     const element = this.element.querySelector(
       `${this.className}__slider-wrapper`,
     );
@@ -69,7 +68,7 @@ class Panel {
       onChange,
       onUpdate,
       onReset,
-    }).data('RangeSliderFox'); // will return an object for one item
+    }).data(NAME_PLUGIN); // will return an object for one item
 
     const bindEvent = <T extends Actions | null>(object: T) => {
       if (!object) return false;
@@ -114,19 +113,17 @@ class Panel {
   private init() {
     this.objectValues = new Values('.js-values', this.getDomElement('.js-values') as Element);
 
-    if (this.element) {
-      this.objectInputData = new InputData(this.className, this.element);
-    }
+    this.objectInputData = new InputData(this.className, this.element);
+
     this.objectGrid = new Grid('.js-grid', this.getDomElement('.js-grid') as Element);
     this.objectHints = new Hints('.js-hints', this.getDomElement('.js-hints') as Element);
 
-    if (this.element) {
-      this.objectDifferent = new Different(
-        '.js-miscellaneous',
-        this.getDomElement('.js-miscellaneous') as Element,
-        this.element,
-      );
-    }
+    this.objectDifferent = new Different(
+      '.js-miscellaneous',
+      this.getDomElement('.js-miscellaneous') as Element,
+      this.element,
+    );
+
     this.objectCopyCode = new CopyCodeButton('.js-code', this.getDomElement('.js-code') as Element);
 
     this.objectKeyboardControl = new KeyboardControl(
@@ -136,7 +133,6 @@ class Panel {
   }
 
   private getDomElement(nameElement: string) {
-    if (!this.element) return null;
     return this.element.querySelector(nameElement);
   }
 

src/plugins/rangeSliderFox/mvc/controller/Controller.ts

@@ -1,5 +1,7 @@
 import { boundMethod } from 'autobind-decorator';
 
+import { NAME_PLUGIN } from '@shared/constants';
+
 import RangeSliderOptions from '../../globInterface';
 import { ObserverOptions } from '../../Observer';
 import Model from '../model/Model';
@@ -51,7 +53,7 @@ class Controller {
     if (!this.view) return false;
     const element = this.view.element as Element;
     if (element.constructor.name !== 'HTMLInputElement') return false;
-    $.data(element, 'RangeSliderFox', null);
+    $.data(element, NAME_PLUGIN, null);
     this.view.destroy();
     this.view = null;
     this.model = null;

src/plugins/rangeSliderFox/mvc/view/View.ts

@@ -1,5 +1,7 @@
 import { boundMethod } from 'autobind-decorator';
 
+import { RANGE_SLIDER_NAME } from '@shared/constants';
+
 import { Observer, ObserverOptions } from '../../Observer';
 import RangeSliderOptions from '../../globInterface';
 import Handle from './subView/Handle';
@@ -9,9 +11,7 @@ import Grid from './subView/Grid';
 import UpdateTip from './view.d';
 
 class View extends Observer {
-  private rangeSliderName: string = '';
-
-  private wrapperSlider: Element | null = null;
+  private wrapperSlider: Element | null;
 
   private rangeSlider: Element | null = null;
 
@@ -39,26 +39,25 @@ class View extends Observer {
 
   onHandle: (() => void) | null = null;
 
-  element: Element | null = null;
+  element: Element;
 
   constructor(element: Element) {
     super();
     this.element = element;
-    this.rangeSliderName = 'range-slider-fox';
     this.wrapperSlider = this.element.parentElement;
 
     this.init();
   }
 
   destroy() {
-    if (!this.element || !this.wrapperSlider) return false;
+    if (!this.wrapperSlider) return false;
 
     const typeElem = this.element.constructor.name;
     if (typeElem === 'HTMLInputElement') {
       const input = this.element as HTMLInputElement;
       input.value = ' ';
     }
-    const element = this.wrapperSlider.querySelector(`.js-${this.rangeSliderName}`);
+    const element = this.wrapperSlider.querySelector(`.js-${RANGE_SLIDER_NAME}`);
     if (element) { element.remove(); }
 
     this.handle = null;
@@ -70,8 +69,6 @@ class View extends Observer {
   }
 
   setValueInput(from: number, to: number, type: string) {
-    if (!this.element) return false;
-
     let string = '';
     if (this.element.constructor.name === 'HTMLInputElement') {
       const input = this.element as HTMLInputElement;
@@ -134,23 +131,23 @@ class View extends Observer {
   createDomElementBase() {
     this.rangeSlider = View.createElement(
       'div',
-      [this.rangeSliderName, `js-${this.rangeSliderName}`],
+      [RANGE_SLIDER_NAME, `js-${RANGE_SLIDER_NAME}`],
     );
     this.rangeSliderTop = View.createElement('div', [
-      `${this.rangeSliderName}__top`,
-      `js-${this.rangeSliderName}__top`,
+      `${RANGE_SLIDER_NAME}__top`,
+      `js-${RANGE_SLIDER_NAME}__top`,
     ]);
     this.rangeSliderCenter = View.createElement('div', [
-      `${this.rangeSliderName}__center`,
-      `js-${this.rangeSliderName}__center`,
+      `${RANGE_SLIDER_NAME}__center`,
+      `js-${RANGE_SLIDER_NAME}__center`,
     ]);
     this.rangeSliderBottom = View.createElement('div', [
-      `${this.rangeSliderName}__bottom`,
-      `js-${this.rangeSliderName}__bottom`,
+      `${RANGE_SLIDER_NAME}__bottom`,
+      `js-${RANGE_SLIDER_NAME}__bottom`,
     ]);
     this.rangeSliderLine = View.createElement('span', [
-      `${this.rangeSliderName}__line`,
-      `js-${this.rangeSliderName}__line`,
+      `${RANGE_SLIDER_NAME}__line`,
+      `js-${RANGE_SLIDER_NAME}__line`,
     ]);
 
     this.rangeSliderCenter.appendChild(this.rangeSliderLine);
@@ -164,7 +161,7 @@ class View extends Observer {
   }
 
   async setOrientation(type: string) {
-    const modifier = `${this.rangeSliderName}_vertical`;
+    const modifier = `${RANGE_SLIDER_NAME}_vertical`;
     const { classList } = this.rangeSlider as Element;
     this.vertical = type === 'vertical';
 
@@ -408,8 +405,6 @@ class View extends Observer {
     const attributes = new Map();
 
     const getDataAttribute = (item: string) => {
-      if (!this.element) return false;
-
       const attribute = `data-${item}`;
       if (this.element.hasAttribute(attribute)) {
         const value = this.element.getAttribute(attribute) ?? '';
@@ -466,7 +461,7 @@ class View extends Observer {
     });
 
     observer.observe(
-      (this.element as Element),
+      this.element,
       {
         attributeFilter: nameAttributes,
       },
@@ -486,19 +481,10 @@ class View extends Observer {
       this.createDomElementBase(); // create basic DOM elements
       this.bindEvent(); // add event listeners
 
-      this.handle = new Handle(
-        (this.rangeSliderCenter as HTMLElement),
-        this.rangeSliderName,
-      );
-      this.hints = new Hints(
-        this.rangeSliderTop as Element,
-        this.rangeSliderName,
-      );
-      this.bar = new Bar(
-        this.rangeSliderCenter as HTMLElement,
-        this.rangeSliderName,
-      );
-      this.grid = new Grid(this.rangeSliderBottom as Element, this.rangeSliderName);
+      this.handle = new Handle((this.rangeSliderCenter as HTMLElement));
+      this.hints = new Hints(this.rangeSliderTop as Element);
+      this.bar = new Bar(this.rangeSliderCenter as HTMLElement);
+      this.grid = new Grid(this.rangeSliderBottom as Element);
 
       this.createListeners();
       this.changeAttributes();

src/plugins/rangeSliderFox/mvc/view/subView/Bar.ts

@@ -4,22 +4,22 @@ import {
   getProperty,
   setProperty,
 } from '@shared/helpers/readWriteProperties';
+
+import { RANGE_SLIDER_NAME } from '@shared/constants';
+
 import { Observer } from '../../../Observer';
 
 class Bar extends Observer {
   private rangeSliderCenter: Element;
 
-  private rangeSliderName: string;
-
   private elementBar: HTMLElement | null = null;
 
   private bar: boolean = false;
 
   private vertical: boolean = false;
 
-  constructor(element: HTMLElement | Element, rangeSliderName: string) {
+  constructor(element: HTMLElement | Element) {
     super();
-    this.rangeSliderName = rangeSliderName;
     this.rangeSliderCenter = element;
   }
 
@@ -73,7 +73,7 @@ class Bar extends Observer {
     if (this.bar && this.elementBar) return false;
     if (!this.bar && !this.elementBar) return false;
 
-    const barName = `${this.rangeSliderName}__bar`;
+    const barName = `${RANGE_SLIDER_NAME}__bar`;
     this.elementBar = Bar.createElement('span', [barName, `js-${barName}`]);
     this.rangeSliderCenter.appendChild(this.elementBar);