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

add reversibility on category level

Browse Source
This commit is contained in:
undergroundwires
2020-09-01 21:18:16 +01:00
parent d235dee955
commit f51e8859ee
23 changed files with 717 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/presentation/Scripts/ScriptsTree/ScriptNodeParser.ts
View File

@@ -74,7 +74,7 @@ function convertCategoryToNode(
text: category.name,
children,
documentationUrls: category.documentationUrls,
isReversible: false,
isReversible: children && children.every((child) => child.isReversible),
};
}

41
src/presentation/Scripts/ScriptsTree/ScriptsTree.vue
View File

@@ -7,7 +7,6 @@
:filterPredicate="filterPredicate"
:filterText="filterText"
v-on:nodeSelected="toggleNodeSelectionAsync($event)"
v-on:nodeRevertToggled="handleNodeRevertToggleAsync($event)"
>
</SelectableTree>
</span>
@@ -58,10 +57,10 @@
const state = await this.getCurrentStateAsync();
switch (event.node.type) {
case NodeType.Category:
this.toggleCategoryNodeSelection(event, state);
toggleCategoryNodeSelection(event, state);
break;
case NodeType.Script:
this.toggleScriptNodeSelection(event, state);
toggleScriptNodeSelection(event, state);
break;
default:
throw new Error(`Unknown node type: ${event.node.id}`);
@@ -100,26 +99,26 @@
this.filterText = result.query;
this.filtered = result;
}
private toggleCategoryNodeSelection(event: INodeSelectedEvent, state: IApplicationState): void {
const categoryId = getCategoryId(event.node.id);
if (event.isSelected) {
state.selection.addAllInCategory(categoryId);
} else {
state.selection.removeAllInCategory(categoryId);
}
}
private toggleScriptNodeSelection(event: INodeSelectedEvent, state: IApplicationState): void {
const scriptId = getScriptId(event.node.id);
const actualToggleState = state.selection.isSelected(scriptId);
const targetToggleState = event.isSelected;
if (targetToggleState && !actualToggleState) {
state.selection.addSelectedScript(scriptId, false);
} else if (!targetToggleState && actualToggleState) {
state.selection.removeSelectedScript(scriptId);
}
}
}
function toggleCategoryNodeSelection(event: INodeSelectedEvent, state: IApplicationState): void {
const categoryId = getCategoryId(event.node.id);
if (event.isSelected) {
state.selection.addOrUpdateAllInCategory(categoryId, false);
} else {
state.selection.removeAllInCategory(categoryId);
}
}
function toggleScriptNodeSelection(event: INodeSelectedEvent, state: IApplicationState): void {
const scriptId = getScriptId(event.node.id);
const actualToggleState = state.selection.isSelected(scriptId);
const targetToggleState = event.isSelected;
if (targetToggleState && !actualToggleState) {
state.selection.addSelectedScript(scriptId, false);
} else if (!targetToggleState && actualToggleState) {
state.selection.removeSelectedScript(scriptId);
}
}
</script>
<style scoped lang="scss">

4
src/presentation/Scripts/ScriptsTree/SelectableTree/LiquorTree/LiquorTree.d.ts vendored
View File

@@ -1,4 +1,3 @@
// Two ways of typing other libraries: https://stackoverflow.com/a/53070501
declare module 'liquor-tree' {
import { PluginObject } from 'vue';
@@ -10,6 +9,8 @@ declare module 'liquor-tree' {
filter(query: string): void;
clearFilter(): void;
setModel(nodes: ReadonlyArray<ILiquorTreeNewNode>): void;
// getNodeById(id: string): ILiquorTreeExistingNode;
// recurseDown(fn: (node: ILiquorTreeExistingNode) => void): void;
}
interface ICustomLiquorTreeData {
type: number;
@@ -34,6 +35,7 @@ declare module 'liquor-tree' {
data: ILiquorTreeNodeData;
states: ILiquorTreeNodeState | undefined;
children: ReadonlyArray<ILiquorTreeExistingNode> | undefined;
expand(): void;
}
/**

2
src/presentation/Scripts/ScriptsTree/SelectableTree/Node/Node.vue
View File

@@ -4,7 +4,7 @@
<RevertToggle
class="item"
v-if="data.isReversible"
:scriptId="data.id" />
:node="data" />
<DocumentationUrls
class="item"
v-if="data.documentationUrls && data.documentationUrls.length > 0"

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

@@ -2,7 +2,8 @@
<div class="checkbox-switch" >
<input type="checkbox" class="input-checkbox"
v-model="isReverted"
@change="onRevertToggledAsync()" >
@change="onRevertToggledAsync()"
v-on:click.stop>
<div class="checkbox-animate">
<span class="checkbox-off">revert</span>
<span class="checkbox-on">revert</span>
@@ -12,130 +13,141 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { IReverter } from './Reverter/IReverter';
import { StatefulVue } from '@/presentation/StatefulVue';
import { INode } from './INode';
import { INode, NodeType } from './INode';
import { SelectedScript } from '@/application/State/Selection/SelectedScript';
import { IApplicationState } from '@/application/State/IApplicationState';
import { getCategoryId, getScriptId } from './../../ScriptNodeParser';
import { getReverter } from './Reverter/ReverterFactory';
@Component
export default class RevertToggle extends StatefulVue {
@Prop() public scriptId: string;
@Prop() public node: INode;
public isReverted = false;
private handler: IReverter;
public async mounted() {
await this.onNodeChangedAsync(this.node);
const state = await this.getCurrentStateAsync();
state.selection.changed.on(this.handleSelectionChanged);
this.updateState(state.selection.selectedScripts);
state.selection.changed.on((scripts) => this.updateState(scripts));
}
@Watch('node') public async onNodeChangedAsync(node: INode) {
const state = await this.getCurrentStateAsync();
this.handler = getReverter(node, state.app);
}
public async onRevertToggledAsync() {
const state = await this.getCurrentStateAsync();
state.selection.addOrUpdateSelectedScript(this.scriptId, this.isReverted);
this.handler.selectWithRevertState(this.isReverted, state.selection);
}
private handleSelectionChanged(selectedScripts: ReadonlyArray<SelectedScript>): void {
const selectedScript = selectedScripts.find((script) => script.id === this.scriptId);
if (!selectedScript) {
this.isReverted = false;
} else {
this.isReverted = selectedScript.revert;
}
private updateState(scripts: ReadonlyArray<SelectedScript>) {
this.isReverted = this.handler.getState(scripts);
}
}
</script>
<style scoped lang="scss">
@import "@/presentation/styles/colors.scss";
$width: 85px;
$height: 30px;
// https://www.designlabthemes.com/css-toggle-switch/
.checkbox-switch {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
width: $width;
height: $height;
-webkit-border-radius: $height;
border-radius: $height;
line-height: $height;
font-size: $height / 2;
display: inline-block;
input.input-checkbox {
position: absolute;
left: 0;
top: 0;
width: $width;
height: $height;
padding: 0;
margin: 0;
opacity: 0;
z-index: 2;
@import "@/presentation/styles/colors.scss";
$width: 85px;
$height: 30px;
// https://www.designlabthemes.com/css-toggle-switch/
.checkbox-switch {
cursor: pointer;
}
.checkbox-animate {
display: inline-block;
overflow: hidden;
position: relative;
width: $width;
height: $height;
background-color: $gray;
-webkit-transition: background-color 0.25s ease-out 0s;
transition: background-color 0.25s ease-out 0s;
-webkit-border-radius: $height;
border-radius: $height;
line-height: $height;
font-size: $height / 2;
display: inline-block;
// Circle
&:before {
$circle-size: $height * 0.66;
content: "";
display: block;
input.input-checkbox {
position: absolute;
width: $circle-size;
height: $circle-size;
border-radius: $circle-size * 2;
-webkit-border-radius: $circle-size * 2;
background-color: $slate;
top: $height * 0.16;
left: $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: $accent;
}
+ .checkbox-animate:before {
left: ($width - $width/3.5);
background-color: $light-gray;
}
+ .checkbox-animate .checkbox-off {
display: none;
left: 0;
top: 0;
width: $width;
height: $height;
padding: 0;
margin: 0;
opacity: 0;
z-index: 2;
cursor: pointer;
}
+ .checkbox-animate .checkbox-on {
display: block;
.checkbox-animate {
position: relative;
width: $width;
height: $height;
background-color: $gray;
-webkit-transition: background-color 0.25s ease-out 0s;
transition: background-color 0.25s ease-out 0s;
// Circle
&:before {
$circle-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: $slate;
top: $height * 0.16;
left: $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: $accent;
}
+ .checkbox-animate:before {
left: ($width - $width/3.5);
background-color: $light-gray;
}
+ .checkbox-animate .checkbox-off {
display: none;
opacity: 0;
}
+ .checkbox-animate .checkbox-on {
display: block;
opacity: 1;
}
}
.checkbox-off, .checkbox-on {
float: left;
color: $white;
font-weight: 700;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
.checkbox-off {
margin-left: $width / 3;
opacity: 1;
}
}
.checkbox-off, .checkbox-on {
float: left;
color: $white;
font-weight: 700;
-webkit-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
.checkbox-on {
display: none;
float: right;
margin-right: $width / 3;
opacity: 0;
}
}
.checkbox-off {
margin-left: $width / 3;
opacity: 1;
}
.checkbox-on {
display: none;
float: right;
margin-right: $width / 3;
opacity: 0;
}
}
</style>

30
src/presentation/Scripts/ScriptsTree/SelectableTree/Node/Reverter/CategoryReverter.ts Normal file
View File

@@ -0,0 +1,30 @@
import { IReverter } from './IReverter';
import { getCategoryId } from '../../../ScriptNodeParser';
import { SelectedScript } from '@/application/State/Selection/SelectedScript';
import { IApplication } from '@/domain/IApplication';
import { ScriptReverter } from './ScriptReverter';
import { IUserSelection } from '@/application/State/Selection/IUserSelection';
export class CategoryReverter implements IReverter {
private readonly categoryId: number;
private readonly scriptReverters: ReadonlyArray<ScriptReverter>;
constructor(nodeId: string, app: IApplication) {
this.categoryId = getCategoryId(nodeId);
this.scriptReverters = getAllSubScriptReverters(this.categoryId, app);
}
public getState(selectedScripts: ReadonlyArray<SelectedScript>): boolean {
return this.scriptReverters.every((script) => script.getState(selectedScripts));
}
public selectWithRevertState(newState: boolean, selection: IUserSelection): void {
selection.addOrUpdateAllInCategory(this.categoryId, newState);
}
}
function getAllSubScriptReverters(categoryId: number, app: IApplication) {
const category = app.findCategory(categoryId);
if (!category) {
throw new Error(`Category with id "${categoryId}" does not exist`);
}
const scripts = category.getAllScriptsRecursively();
return scripts.map((script) => new ScriptReverter(script.id));
}

7
src/presentation/Scripts/ScriptsTree/SelectableTree/Node/Reverter/IReverter.ts Normal file
View File

@@ -0,0 +1,7 @@
import { SelectedScript } from '@/application/State/Selection/SelectedScript';
import { IUserSelection } from '@/application/State/IApplicationState';
export interface IReverter {
getState(selectedScripts: ReadonlyArray<SelectedScript>): boolean;
selectWithRevertState(newState: boolean, selection: IUserSelection): void;
}

16
src/presentation/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ReverterFactory.ts Normal file
View File

@@ -0,0 +1,16 @@
import { INode, NodeType } from '../INode';
import { IReverter } from './IReverter';
import { ScriptReverter } from './ScriptReverter';
import { IApplication } from '@/domain/IApplication';
import { CategoryReverter } from './CategoryReverter';
export function getReverter(node: INode, app: IApplication): IReverter {
switch (node.type) {
case NodeType.Category:
return new CategoryReverter(node.id, app);
case NodeType.Script:
return new ScriptReverter(node.id);
default:
throw new Error('Unknown script type');
}
}

21
src/presentation/Scripts/ScriptsTree/SelectableTree/Node/Reverter/ScriptReverter.ts Normal file
View File

@@ -0,0 +1,21 @@
import { IReverter } from './IReverter';
import { getScriptId } from '../../../ScriptNodeParser';
import { SelectedScript } from '@/application/State/Selection/SelectedScript';
import { IUserSelection } from '@/application/State/IApplicationState';
export class ScriptReverter implements IReverter {
private readonly scriptId: string;
constructor(nodeId: string) {
this.scriptId = getScriptId(nodeId);
}
public getState(selectedScripts: ReadonlyArray<SelectedScript>): boolean {
const selectedScript = selectedScripts.find((selected) => selected.id === this.scriptId);
if (!selectedScript) {
return false;
}
return selectedScript.revert;
}
public selectWithRevertState(newState: boolean, selection: IUserSelection): void {
selection.addOrUpdateSelectedScript(this.scriptId, newState);
}
}

2
src/presentation/Scripts/ScriptsTree/SelectableTree/SelectableTree.vue
View File

@@ -7,7 +7,7 @@
v-on:node:unchecked="nodeSelected($event)"
ref="treeElement"
>
<span class="tree-text" slot-scope="{ node }">
<span class="tree-text" slot-scope="{ node }" >
<Node :data="convertExistingToNode(node)" />
</span>
</tree>