44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code to comply with ESLint rules

Browse Source 
Major refactoring using ESLint with rules from AirBnb and Vue.

Enable most of the ESLint rules and do necessary linting in the code.
Also add more information for rules that are disabled to describe what
they are and why they are disabled.

Allow logging (`console.log`) in test files, and in development mode
(e.g. when working with `npm run serve`), but disable it when
environment is production (as pre-configured by Vue). Also add flag
(`--mode production`) in `lint:eslint` command so production linting is
executed earlier in lifecycle.

Disable rules that requires a separate work. Such as ESLint rules that
are broken in TypeScript: no-useless-constructor (eslint/eslint#14118)
and no-shadow (eslint/eslint#13014).
This commit is contained in:
undergroundwires
2022-01-02 18:20:14 +01:00
parent 96265b75de
commit 5b1fbe1e2f
341 changed files with 16126 additions and 15101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

228
src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue
View File

@@ -1,55 +1,55 @@
<template>
<div class="checkbox-switch" >
<input type="checkbox" class="input-checkbox"
v-model="isReverted"
@change="onRevertToggled()"
v-on:click.stop>
<div class="checkbox-animate">
<span class="checkbox-off">revert</span>
<span class="checkbox-on">revert</span>
</div>
</div>
<div class="checkbox-switch" >
<input type="checkbox" class="input-checkbox"
v-model="isReverted"
@change="onRevertToggled()"
v-on:click.stop>
<div class="checkbox-animate">
<span class="checkbox-off">revert</span>
<span class="checkbox-on">revert</span>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Watch } from 'vue-property-decorator';
import { IReverter } from './Reverter/IReverter';
import { StatefulVue } from '@/presentation/components/Shared/StatefulVue';
import { INode } from './INode';
import { SelectedScript } from '@/application/Context/State/Selection/SelectedScript';
import { getReverter } from './Reverter/ReverterFactory';
import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
import { IReverter } from './Reverter/IReverter';
import { INode } from './INode';
import { getReverter } from './Reverter/ReverterFactory';
@Component
export default class RevertToggle extends StatefulVue {
@Prop() public node: INode;
public isReverted = false;
@Prop() public node: INode;
private handler: IReverter;
public isReverted = false;
@Watch('node', {immediate: true}) public async onNodeChanged(node: INode) {
const context = await this.getCurrentContext();
this.handler = getReverter(node, context.state.collection);
}
public async onRevertToggled() {
const context = await this.getCurrentContext();
this.handler.selectWithRevertState(this.isReverted, context.state.selection);
}
private handler: IReverter;
protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
this.updateStatus(newState.selection.selectedScripts);
this.events.unsubscribeAll();
this.events.register(newState.selection.changed.on((scripts) => this.updateStatus(scripts)));
}
@Watch('node', { immediate: true }) public async onNodeChanged(node: INode) {
const context = await this.getCurrentContext();
this.handler = getReverter(node, context.state.collection);
}
private updateStatus(scripts: ReadonlyArray<SelectedScript>) {
this.isReverted = this.handler.getState(scripts);
}
public async onRevertToggled() {
const context = await this.getCurrentContext();
this.handler.selectWithRevertState(this.isReverted, context.state.selection);
}
protected handleCollectionState(newState: IReadOnlyCategoryCollectionState): void {
this.updateStatus(newState.selection.selectedScripts);
this.events.unsubscribeAll();
this.events.register(newState.selection.changed.on((scripts) => this.updateStatus(scripts)));
}
private updateStatus(scripts: ReadonlyArray<SelectedScript>) {
this.isReverted = this.handler.getState(scripts);
}
}
</script>
<style scoped lang="scss">
@use 'sass:math';
@use "@/presentation/assets/styles/main" as *;
@@ -65,96 +65,96 @@ $size-height : 30px;
// https://www.designlabthemes.com/css-toggle-switch/
.checkbox-switch {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
width: $size-width;
height: $size-height;
-webkit-border-radius: $size-height;
border-radius: $size-height;
line-height: $size-height;
font-size: math.div($size-height, 2);
display: inline-block;
input.input-checkbox {
position: absolute;
left: 0;
top: 0;
width: $size-width;
height: $size-height;
padding: 0;
margin: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
display: inline-block;
overflow: hidden;
}
.checkbox-animate {
position: relative;
width: $size-width;
height: $size-height;
-webkit-border-radius: $size-height;
border-radius: $size-height;
line-height: $size-height;
font-size: math.div($size-height, 2);
display: inline-block;
background-color: $color-bg-unchecked;
-webkit-transition: background-color 0.25s ease-out 0s;
transition: background-color 0.25s ease-out 0s;
input.input-checkbox {
position: absolute;
left: 0;
top: 0;
width: $size-width;
height: $size-height;
padding: 0;
margin: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
// Circle
&:before {
$circle-size: $size-height * 0.66;
content: "";
display: block;
position: absolute;
width: $circle-size;
height: $circle-size;
border-radius: $circle-size * 2;
-webkit-border-radius: $circle-size * 2;
background-color: $color-bullet-unchecked;
top: $size-height * 0.16;
left: $size-width * 0.05;
-webkit-transition: left 0.3s ease-out 0s;
transition: left 0.3s ease-out 0s;
z-index: 10;
}
}
.checkbox-animate {
position: relative;
width: $size-width;
height: $size-height;
background-color: $color-bg-unchecked;
-webkit-transition: background-color 0.25s ease-out 0s;
transition: background-color 0.25s ease-out 0s;
// Circle
&:before {
$circle-size: $size-height * 0.66;
content: "";
display: block;
position: absolute;
width: $circle-size;
height: $circle-size;
border-radius: $circle-size * 2;
-webkit-border-radius: $circle-size * 2;
background-color: $color-bullet-unchecked;
top: $size-height * 0.16;
left: $size-width * 0.05;
-webkit-transition: left 0.3s ease-out 0s;
transition: left 0.3s ease-out 0s;
z-index: 10;
}
input.input-checkbox:checked {
+ .checkbox-animate {
background-color: $color-bg-checked;
}
input.input-checkbox:checked {
+ .checkbox-animate {
background-color: $color-bg-checked;
}
+ .checkbox-animate:before {
left: ($size-width - math.div($size-width, 3.5));
background-color: $color-bullet-checked;
}
+ .checkbox-animate .checkbox-off {
display: none;
opacity: 0;
}
+ .checkbox-animate .checkbox-on {
display: block;
opacity: 1;
}
+ .checkbox-animate:before {
left: ($size-width - math.div($size-width, 3.5));
background-color: $color-bullet-checked;
}
.checkbox-off, .checkbox-on {
float: left;
font-weight: 700;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.checkbox-off {
margin-left: math.div($size-width, 3);
opacity: 1;
color: $color-text-unchecked;
}
.checkbox-on {
+ .checkbox-animate .checkbox-off {
display: none;
float: right;
margin-right: math.div($size-width, 3);
opacity: 0;
color: $color-text-checked;
}
+ .checkbox-animate .checkbox-on {
display: block;
opacity: 1;
}
}
.checkbox-off, .checkbox-on {
float: left;
font-weight: 700;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.checkbox-off {
margin-left: math.div($size-width, 3);
opacity: 1;
color: $color-text-unchecked;
}
.checkbox-on {
display: none;
float: right;
margin-right: math.div($size-width, 3);
opacity: 0;
color: $color-text-checked;
}
}
</style>
</style>