diff --git a/.babelrc b/.babelrc
index 526ddfd..651b292 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,3 +1,6 @@
{
- "presets": ["@babel/preset-env"]
+ "presets": ["@babel/preset-env"],
+ "plugins": [
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ ]
}
diff --git a/index.js b/index.js
index 8a94d5c..75d137b 100644
--- a/index.js
+++ b/index.js
@@ -50,12 +50,14 @@ webpackLoader.addToDevServerConfig({
});
function ghPagesInit() {
- ghpages.publish('docs', (err) => {
- console.log('GitHub Pages branch updated.');
- });
ghpages.publish('prod', { branch: 'Production' }, (err) => {
- if(err) console.log(err)
+ if (err) console.log(err);
console.log('Prod branch updated.');
+
+ ghpages.publish('docs', (err) => {
+ if (err) console.log(err);
+ console.log('GitHub Pages branch updated.');
+ });
});
}
diff --git a/package-lock.json b/package-lock.json
index cc2cb8d..224f908 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "wrunner",
- "version": "1.8.5",
+ "version": "1.8.6",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -126,6 +126,149 @@
"@babel/types": "^7.4.4"
}
},
+ "@babel/helper-create-class-features-plugin": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.4.tgz",
+ "integrity": "sha512-l+OnKACG4uiDHQ/aJT8dwpR+LhCJALxL0mJ6nzjB25e5IPwqV1VOsY7ah6UB1DG+VOXAIMtuC54rFJGiHkxjgA==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-function-name": "^7.7.4",
+ "@babel/helper-member-expression-to-functions": "^7.7.4",
+ "@babel/helper-optimise-call-expression": "^7.7.4",
+ "@babel/helper-plugin-utils": "^7.0.0",
+ "@babel/helper-replace-supers": "^7.7.4",
+ "@babel/helper-split-export-declaration": "^7.7.4"
+ },
+ "dependencies": {
+ "@babel/generator": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.4.tgz",
+ "integrity": "sha512-m5qo2WgdOJeyYngKImbkyQrnUN1mPceaG5BV+G0E3gWsa4l/jCSryWJdM2x8OuGAOyh+3d5pVYfZWCiNFtynxg==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.7.4",
+ "jsesc": "^2.5.1",
+ "lodash": "^4.17.13",
+ "source-map": "^0.5.0"
+ }
+ },
+ "@babel/helper-function-name": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz",
+ "integrity": "sha512-AnkGIdiBhEuiwdoMnKm7jfPfqItZhgRaZfMg1XX3bS25INOnLPjPG1Ppnajh8eqgt5kPJnfqrRHqFqmjKDZLzQ==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-get-function-arity": "^7.7.4",
+ "@babel/template": "^7.7.4",
+ "@babel/types": "^7.7.4"
+ }
+ },
+ "@babel/helper-get-function-arity": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz",
+ "integrity": "sha512-QTGKEdCkjgzgfJ3bAyRwF4yyT3pg+vDgan8DSivq1eS0gwi+KGKE5x8kRcbeFTb/673mkO5SN1IZfmCfA5o+EA==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.7.4"
+ }
+ },
+ "@babel/helper-member-expression-to-functions": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.4.tgz",
+ "integrity": "sha512-9KcA1X2E3OjXl/ykfMMInBK+uVdfIVakVe7W7Lg3wfXUNyS3Q1HWLFRwZIjhqiCGbslummPDnmb7vIekS0C1vw==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.7.4"
+ }
+ },
+ "@babel/helper-optimise-call-expression": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz",
+ "integrity": "sha512-VB7gWZ2fDkSuqW6b1AKXkJWO5NyNI3bFL/kK79/30moK57blr6NbH8xcl2XcKCwOmJosftWunZqfO84IGq3ZZg==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.7.4"
+ }
+ },
+ "@babel/helper-replace-supers": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.7.4.tgz",
+ "integrity": "sha512-pP0tfgg9hsZWo5ZboYGuBn/bbYT/hdLPVSS4NMmiRJdwWhP0IznPwN9AE1JwyGsjSPLC364I0Qh5p+EPkGPNpg==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-member-expression-to-functions": "^7.7.4",
+ "@babel/helper-optimise-call-expression": "^7.7.4",
+ "@babel/traverse": "^7.7.4",
+ "@babel/types": "^7.7.4"
+ }
+ },
+ "@babel/helper-split-export-declaration": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz",
+ "integrity": "sha512-guAg1SXFcVr04Guk9eq0S4/rWS++sbmyqosJzVs8+1fH5NI+ZcmkaSkc7dmtAFbHFva6yRJnjW3yAcGxjueDug==",
+ "dev": true,
+ "requires": {
+ "@babel/types": "^7.7.4"
+ }
+ },
+ "@babel/parser": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.7.4.tgz",
+ "integrity": "sha512-jIwvLO0zCL+O/LmEJQjWA75MQTWwx3c3u2JOTDK5D3/9egrWRRA0/0hk9XXywYnXZVVpzrBYeIQTmhwUaePI9g==",
+ "dev": true
+ },
+ "@babel/template": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.4.tgz",
+ "integrity": "sha512-qUzihgVPguAzXCK7WXw8pqs6cEwi54s3E+HrejlkuWO6ivMKx9hZl3Y2fSXp9i5HgyWmj7RKP+ulaYnKM4yYxw==",
+ "dev": true,
+ "requires": {
+ "@babel/code-frame": "^7.0.0",
+ "@babel/parser": "^7.7.4",
+ "@babel/types": "^7.7.4"
+ }
+ },
+ "@babel/traverse": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.7.4.tgz",
+ "integrity": "sha512-P1L58hQyupn8+ezVA2z5KBm4/Zr4lCC8dwKCMYzsa5jFMDMQAzaBNy9W5VjB+KAmBjb40U7a/H6ao+Xo+9saIw==",
+ "dev": true,
+ "requires": {
+ "@babel/code-frame": "^7.5.5",
+ "@babel/generator": "^7.7.4",
+ "@babel/helper-function-name": "^7.7.4",
+ "@babel/helper-split-export-declaration": "^7.7.4",
+ "@babel/parser": "^7.7.4",
+ "@babel/types": "^7.7.4",
+ "debug": "^4.1.0",
+ "globals": "^11.1.0",
+ "lodash": "^4.17.13"
+ },
+ "dependencies": {
+ "@babel/code-frame": {
+ "version": "7.5.5",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.5.5.tgz",
+ "integrity": "sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==",
+ "dev": true,
+ "requires": {
+ "@babel/highlight": "^7.0.0"
+ }
+ }
+ }
+ },
+ "@babel/types": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.7.4.tgz",
+ "integrity": "sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==",
+ "dev": true,
+ "requires": {
+ "esutils": "^2.0.2",
+ "lodash": "^4.17.13",
+ "to-fast-properties": "^2.0.0"
+ }
+ }
+ }
+ },
"@babel/helper-define-map": {
"version": "7.4.4",
"resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.4.4.tgz",
@@ -356,6 +499,17 @@
"@babel/plugin-syntax-async-generators": "^7.2.0"
}
},
+ "@babel/plugin-proposal-decorators": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.7.4.tgz",
+ "integrity": "sha512-GftcVDcLCwVdzKmwOBDjATd548+IE+mBo7ttgatqNDR7VG7GqIuZPtRWlMLHbhTXhcnFZiGER8iIYl1n/imtsg==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-create-class-features-plugin": "^7.7.4",
+ "@babel/helper-plugin-utils": "^7.0.0",
+ "@babel/plugin-syntax-decorators": "^7.7.4"
+ }
+ },
"@babel/plugin-proposal-json-strings": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz",
@@ -406,6 +560,15 @@
"@babel/helper-plugin-utils": "^7.0.0"
}
},
+ "@babel/plugin-syntax-decorators": {
+ "version": "7.7.4",
+ "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.7.4.tgz",
+ "integrity": "sha512-0oNLWNH4k5ZbBVfAwiTU53rKFWIeTh6ZlaWOXWJc4ywxs0tjz5fc3uZ6jKAnZSxN98eXVgg7bJIuzjX+3SXY+A==",
+ "dev": true,
+ "requires": {
+ "@babel/helper-plugin-utils": "^7.0.0"
+ }
+ },
"@babel/plugin-syntax-json-strings": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz",
@@ -1429,6 +1592,12 @@
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
"dev": true
},
+ "autobind-decorator": {
+ "version": "2.4.0",
+ "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.4.0.tgz",
+ "integrity": "sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw==",
+ "dev": true
+ },
"aws-sign2": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
diff --git a/package.json b/package.json
index be6df95..addcaf2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "wrunner",
- "version": "1.8.5",
+ "version": "1.8.6",
"description": "A slider plugin.",
"homepage": "https://github.com/whiteGloom/wRunner",
"main": "./prod/wrunner-native.js",
@@ -22,7 +22,9 @@
"@babel/cli": "^7.6.2",
"@babel/core": "^7.2.2",
"@babel/node": "^7.6.2",
+ "@babel/plugin-proposal-decorators": "^7.7.4",
"@babel/preset-env": "^7.2.3",
+ "autobind-decorator": "^2.4.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
diff --git a/src/showcase/blocks/sample/sample.pug b/src/showcase/blocks/sample/sample.pug
index 780f2b6..c68a2f7 100644
--- a/src/showcase/blocks/sample/sample.pug
+++ b/src/showcase/blocks/sample/sample.pug
@@ -1,3 +1,5 @@
+include ../textInput/textInput
+
mixin sample(options = {})
-
const {title = "", id="", data = [
@@ -31,4 +33,4 @@ mixin sample(options = {})
when "checkbox"
input(type="checkbox")
default
- input(type="text")
\ No newline at end of file
+ +textInput
\ No newline at end of file
diff --git a/src/showcase/blocks/sample/sample.styl b/src/showcase/blocks/sample/sample.styl
index c3f0cd4..48bdd47 100644
--- a/src/showcase/blocks/sample/sample.styl
+++ b/src/showcase/blocks/sample/sample.styl
@@ -33,6 +33,7 @@
&__parameter-value
width: 100%
+ color: black
&__title
text-align: center
diff --git a/src/showcase/blocks/textInput/textInput.pug b/src/showcase/blocks/textInput/textInput.pug
new file mode 100644
index 0000000..de4f0e1
--- /dev/null
+++ b/src/showcase/blocks/textInput/textInput.pug
@@ -0,0 +1,2 @@
+mixin textInput(options = {})
+ input.textInput
diff --git a/src/showcase/blocks/textInput/textInput.styl b/src/showcase/blocks/textInput/textInput.styl
new file mode 100644
index 0000000..3365bae
--- /dev/null
+++ b/src/showcase/blocks/textInput/textInput.styl
@@ -0,0 +1,5 @@
+.textInput
+ border:none
+ height: 100%
+ border-radius: 3px
+ background-color: white
\ No newline at end of file
diff --git a/src/wRunner/model/modelMain/modelMain.js b/src/wRunner/model/modelMain/modelMain.js
index 17d721e..517b6bf 100644
--- a/src/wRunner/model/modelMain/modelMain.js
+++ b/src/wRunner/model/modelMain/modelMain.js
@@ -1,4 +1,6 @@
+import { boundMethod } from 'autobind-decorator';
import ModelDefaults from '../modelDefaults/modelDefaults';
+
import makeEventModule from '@event';
import helperModule from '@helper';
@@ -51,6 +53,7 @@ class ModelMain {
return Math.round((value) / this.step) * this.step;
}
+ @boundMethod
setType(newType) {
if (Object.values(this.type.constants).includes(newType)) {
this.type.value = newType;
@@ -61,6 +64,7 @@ class ModelMain {
}
}
+ @boundMethod
setLimits(newLimits = {}) {
let min = helper.isNumber(newLimits.minLimit) ? +newLimits.minLimit : this.limits.minLimit;
let max = helper.isNumber(newLimits.maxLimit) ? +newLimits.maxLimit : this.limits.maxLimit;
@@ -74,6 +78,7 @@ class ModelMain {
this.limitsUpdateEvent.trigger({ ...this.limits });
}
+ @boundMethod
setStep(newStep) {
if (!helper.isNumber(newStep) || +newStep < 1) return;
this.step = +newStep;
@@ -81,6 +86,7 @@ class ModelMain {
this.stepUpdateEvent.trigger(this.step);
}
+ @boundMethod
setSingleValue(newValue) {
const value = helper.isNumber(newValue) ? +newValue : this.values.singleValue;
@@ -88,6 +94,7 @@ class ModelMain {
this.valueUpdateEvent.trigger({ ...this.values });
}
+ @boundMethod
setRangeValues(newValues) {
const values = helper.isObject(newValues) ? newValues : {};
let min = helper.isNumber(values.minValue)
@@ -104,6 +111,7 @@ class ModelMain {
this.valueUpdateEvent.trigger({ ...this.values });
}
+ @boundMethod
setNearestValue(newValue, viaPercents) {
if (!helper.isNumber(newValue)) return;
@@ -123,6 +131,7 @@ class ModelMain {
}
}
+ @boundMethod
setRoots(newRoots) {
if (!helper.isDOMEl(newRoots)) return;
this.roots = newRoots;
@@ -130,6 +139,7 @@ class ModelMain {
this.rootsUpdateEvent.trigger(this.roots);
}
+ @boundMethod
setTheme(newTheme) {
if (typeof newTheme !== 'string') return;
@@ -139,6 +149,7 @@ class ModelMain {
this.themeUpdateEvent.trigger(this.theme.value);
}
+ @boundMethod
setDirection(newDirection) {
if (Object.values(this.direction.constants).includes(newDirection)) {
this.direction.oldValue = this.direction.value;
@@ -150,6 +161,7 @@ class ModelMain {
}
}
+ @boundMethod
setValueNotesDisplay(newValue) {
if (typeof newValue !== 'boolean') return;
this.valueNotesDisplay = newValue;
@@ -157,12 +169,14 @@ class ModelMain {
this.valueNotesDisplayUpdateEvent.trigger(this.valueNotesDisplay);
}
+ @boundMethod
setValueNotesMode(newMode) {
if (Object.values(this.valueNotesMode.constants).includes(newMode)) {
this.valueNotesMode.value = newMode;
}
}
+ @boundMethod
setScaleDivisionsCount(newCount) {
if (!helper.isNumber(newCount) || newCount < 0) return;
@@ -172,6 +186,7 @@ class ModelMain {
this.scaleDivisionsCountUpdateEvent.trigger(this.scaleDivisionsCount);
}
+ @boundMethod
getType() {
return {
value: this.type.value,
@@ -179,26 +194,32 @@ class ModelMain {
};
}
+ @boundMethod
getLimits() {
return { ...this.limits };
}
+ @boundMethod
getValues() {
return { ...this.values };
}
+ @boundMethod
getStep() {
return this.step;
}
+ @boundMethod
getRoots() {
return this.roots;
}
+ @boundMethod
getTheme() {
return this.theme.value;
}
+ @boundMethod
getDirection() {
return {
value: this.direction.value,
@@ -206,10 +227,12 @@ class ModelMain {
};
}
+ @boundMethod
getValueNotesDisplay() {
return this.valueNotesDisplay;
}
+ @boundMethod
getValueNotesMode() {
return {
value: this.valueNotesMode.value,
@@ -217,6 +240,7 @@ class ModelMain {
};
}
+ @boundMethod
getScaleDivisionsCount() {
return this.scaleDivisionsCount;
}
diff --git a/src/wRunner/presenter/presenter.js b/src/wRunner/presenter/presenter.js
index 335fcb4..858daff 100644
--- a/src/wRunner/presenter/presenter.js
+++ b/src/wRunner/presenter/presenter.js
@@ -1,3 +1,4 @@
+import { boundMethod } from 'autobind-decorator';
import ModelDefaults from '../model/modelDefaults/modelDefaults';
class Presenter {
@@ -19,27 +20,27 @@ class Presenter {
getPublicMethods() {
return {
- setType: this.model.setType.bind(this.model),
- setLimits: this.model.setLimits.bind(this.model),
- setStep: this.model.setStep.bind(this.model),
- setSingleValue: this.model.setSingleValue.bind(this.model),
- setRangeValues: this.model.setRangeValues.bind(this.model),
- setNearestValue: this.model.setNearestValue.bind(this.model),
- setRoots: this.model.setRoots.bind(this.model),
- setTheme: this.model.setTheme.bind(this.model),
- setDirection: this.model.setDirection.bind(this.model),
- setValueNotesDisplay: this.model.setValueNotesDisplay.bind(this.model),
- setScaleDivisionsCount: this.model.setScaleDivisionsCount.bind(this.model),
-
- getType: this.model.getType.bind(this.model),
- getLimits: this.model.getLimits.bind(this.model),
- getStep: this.model.getStep.bind(this.model),
- getValues: this.model.getValues.bind(this.model),
- getRoots: this.model.getRoots.bind(this.model),
- getTheme: this.model.getTheme.bind(this.model),
- getDirection: this.model.getDirection.bind(this.model),
- getValueNotesDisplay: this.model.getValueNotesDisplay.bind(this.model),
- getScaleDivisionsCount: this.model.getScaleDivisionsCount.bind(this.model),
+ setType: this.model.setType,
+ setLimits: this.model.setLimits,
+ setStep: this.model.setStep,
+ setSingleValue: this.model.setSingleValue,
+ setRangeValues: this.model.setRangeValues,
+ setNearestValue: this.model.setNearestValue,
+ setRoots: this.model.setRoots,
+ setTheme: this.model.setTheme,
+ setDirection: this.model.setDirection,
+ setValueNotesDisplay: this.model.setValueNotesDisplay,
+ setScaleDivisionsCount: this.model.setScaleDivisionsCount,
+
+ getType: this.model.getType,
+ getLimits: this.model.getLimits,
+ getStep: this.model.getStep,
+ getValues: this.model.getValues,
+ getRoots: this.model.getRoots,
+ getTheme: this.model.getTheme,
+ getDirection: this.model.getDirection,
+ getValueNotesDisplay: this.model.getValueNotesDisplay,
+ getScaleDivisionsCount: this.model.getScaleDivisionsCount,
onThemeUpdate: this.model.themeUpdateEvent.addHandler,
onDirectionUpdate: this.model.directionUpdateEvent.addHandler,
@@ -53,6 +54,7 @@ class Presenter {
};
}
+ @boundMethod
typeUpdateEventHandler() {
this.view.updateDOM(this.model.getType());
this.view.applyStyles([this.model.theme, this.model.direction]);
@@ -63,14 +65,17 @@ class Presenter {
this.model.recalculateValue();
}
+ @boundMethod
limitsUpdateEventHandler() {
this.model.recalculateValue();
}
+ @boundMethod
stepUpdateEventHandler() {
this.model.recalculateValue();
}
+ @boundMethod
valueUpdateEventHandler() {
this.view.drawValue(
this.model.getValues(),
@@ -81,6 +86,7 @@ class Presenter {
);
}
+ @boundMethod
rootsUpdateEventHandler() {
this.view.append(this.model.roots);
this.view.drawValue(
@@ -92,6 +98,7 @@ class Presenter {
);
}
+ @boundMethod
themeUpdateEventHandler() {
this.view.applyStyles([this.model.theme, this.model.direction]);
this.view.drawValue(
@@ -103,6 +110,7 @@ class Presenter {
);
}
+ @boundMethod
directionUpdateEventHandler() {
this.view.applyStyles([this.model.theme, this.model.direction]);
this.view.drawValue(
@@ -114,6 +122,7 @@ class Presenter {
);
}
+ @boundMethod
valueNotesDisplayUpdateEventHandler() {
this.view.applyValueNotesDisplay(
this.model.getValueNotesDisplay(),
@@ -128,11 +137,13 @@ class Presenter {
);
}
+ @boundMethod
scaleDivisionsCountUpdateEventHandler() {
this.view.generateScaleDivisions(this.model.getScaleDivisionsCount());
this.view.applyStyles([this.model.theme, this.model.direction]);
}
+ @boundMethod
windowResizeEventHandler() {
this.view.drawValue(
this.model.getValues(),
@@ -143,14 +154,17 @@ class Presenter {
);
}
+ @boundMethod
UIActionMouseDownHandler(event) {
this.view.handlerMouseDownAction(event, this.model.getDirection());
}
+ @boundMethod
UIValueActionHandler(data) {
this.model.setNearestValue(data);
}
+ @boundMethod
valueNoteModeUpdateEventHandler(value) {
this.model.setValueNotesMode(value);
this.view.applyValueNotesDisplay(
@@ -162,32 +176,32 @@ class Presenter {
applyDefaultEvents() {
// Model events
this.model.typeUpdateEvent
- .addHandler(this.typeUpdateEventHandler.bind(this));
+ .addHandler(this.typeUpdateEventHandler);
this.model.limitsUpdateEvent
- .addHandler(this.limitsUpdateEventHandler.bind(this));
+ .addHandler(this.limitsUpdateEventHandler);
this.model.stepUpdateEvent
- .addHandler(this.stepUpdateEventHandler.bind(this));
+ .addHandler(this.stepUpdateEventHandler);
this.model.valueUpdateEvent
- .addHandler(this.valueUpdateEventHandler.bind(this));
+ .addHandler(this.valueUpdateEventHandler);
this.model.rootsUpdateEvent
- .addHandler(this.rootsUpdateEventHandler.bind(this));
+ .addHandler(this.rootsUpdateEventHandler);
this.model.themeUpdateEvent
- .addHandler(this.themeUpdateEventHandler.bind(this));
+ .addHandler(this.themeUpdateEventHandler);
this.model.directionUpdateEvent
- .addHandler(this.directionUpdateEventHandler.bind(this));
+ .addHandler(this.directionUpdateEventHandler);
this.model.valueNotesDisplayUpdateEvent
- .addHandler(this.valueNotesDisplayUpdateEventHandler.bind(this));
+ .addHandler(this.valueNotesDisplayUpdateEventHandler);
this.model.scaleDivisionsCountUpdateEvent
- .addHandler(this.scaleDivisionsCountUpdateEventHandler.bind(this));
+ .addHandler(this.scaleDivisionsCountUpdateEventHandler);
this.view.valueNoteModeUpdateEvent
- .addHandler(this.valueNoteModeUpdateEventHandler.bind(this));
+ .addHandler(this.valueNoteModeUpdateEventHandler);
this.view.windowResizeEvent
- .addHandler(this.windowResizeEventHandler.bind(this));
+ .addHandler(this.windowResizeEventHandler);
this.view.UIActionMouseDown
- .addHandler(this.UIActionMouseDownHandler.bind(this));
+ .addHandler(this.UIActionMouseDownHandler);
this.view.UIValueAction
- .addHandler(this.UIValueActionHandler.bind(this));
+ .addHandler(this.UIValueActionHandler);
}
applyUserEvents(options = {}) {
diff --git a/src/wRunner/view/view.js b/src/wRunner/view/view.js
index 550569c..a579e91 100644
--- a/src/wRunner/view/view.js
+++ b/src/wRunner/view/view.js
@@ -53,7 +53,7 @@ class View {
let wasDragged = false;
// Handlers
- function handlerFunction(event) {
+ const handler = (event) => {
const isHorizontal = direction.value === direction.constants.horizontalValue;
const scale = this.path[isHorizontal ? 'offsetWidth' : 'offsetHeight'];
const min = this.path.getBoundingClientRect()[isHorizontal ? 'left' : 'top'];
@@ -64,10 +64,8 @@ class View {
const data = ((pos - min) / scale) * 100;
this.UIValueAction.trigger(isHorizontal ? data : 100 - data);
- }
- const handler = handlerFunction.bind(this);
-
- function mouseUpFunction(eventUp) {
+ };
+ const mouseUp = (eventUp) => {
const { target } = eventUp;
document.body.removeEventListener('mousemove', handler);
@@ -75,8 +73,7 @@ class View {
if (target === this.handle || target === this.handleMin || target === this.handleMax) return;
handler(eventUp);
- }
- const mouseUp = mouseUpFunction.bind(this);
+ };
document.body.addEventListener('mousemove', () => { wasDragged = true; }, { once: true });
document.body.addEventListener('mousemove', handler);
@@ -221,12 +218,12 @@ class View {
const getSizeProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
const posProp = isHorizontal ? 'left' : 'top';
- function drawEl(element, value, title) {
+ const draw = (element, value, title) => {
const pathScale = this.path[getSizeProp];
const el = element;
const percent = (value - minLimit) / valuesCount;
el.style.cssText = '';
- el.innerHTML = typeof title === 'object'
+ el.textContent = typeof title === 'object'
? `${title[0]}${isHorizontal ? ' - ' : '
|
'}${title[1]}`
: title;
@@ -234,8 +231,7 @@ class View {
? ((percent * pathScale - el[getSizeProp] / 2) / pathScale) * 100
: 100 - ((percent * pathScale + el[getSizeProp] / 2) / pathScale) * 100;
el.style[posProp] = `${position}%`;
- }
- const draw = drawEl.bind(this);
+ };
window.requestAnimationFrame(() => {
if (this.valueNotesList.length === 1) {
@@ -267,11 +263,11 @@ class View {
const getSizeProp = direction.value === direction.constants.horizontalValue ? 'offsetWidth' : 'offsetHeight';
const [elFirst,, elSec] = this.valueNotesList;
const sizes = (elFirst[getSizeProp] + elSec[getSizeProp]) / 2;
- function calcPos(el, value) {
- return ((value - minLimit) / valuesCount) * this.path[getSizeProp] + el[getSizeProp] / 2;
- }
- const calc = calcPos.bind(this);
- const distance = calc(elSec, rangeValueMax) - calc(elFirst, rangeValueMin);
+ const calcPos = (el, value) => {
+ const percent = (value - minLimit) / valuesCount;
+ return percent * this.path[getSizeProp] + el[getSizeProp] / 2;
+ };
+ const distance = calcPos(elSec, rangeValueMax) - calcPos(elFirst, rangeValueMin);
if (distance >= sizes) {
if (valueNotesMode.value !== valueNotesMode.constants.separateValue) {