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) {