diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.html b/src/app/components/shared/tag-cloud/tag-cloud.component.html
index ed922b41278ea285312a742603b95dab0a5cb4f3..87579d49a27660d41fe018833fd79eec836ed7a7 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.html
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.html
@@ -1,8 +1,8 @@
<ars-screen ars-flex-box>
<ars-row [height]="65">
</ars-row>
- <mat-drawer-container>
- <mat-drawer [(opened)]="drawerOpen" position="start">
+ <mat-drawer-container class="spacyTagCloudContainer">
+ <mat-drawer [(opened)]="configurationOpen" position="start">
Test <!-- TODO: Gruppe 4 -->
</mat-drawer>
<mat-drawer-content>
@@ -10,10 +10,13 @@
<angular-tag-cloud
class="spacyTagCloud"
(window:resize)="onResize($event)"
+ (afterInit)="initTagCloud()"
[data]="data"
[width]="options.width"
[height]="options.height"
[overflow]="options.overflow"
+ [delay]="options.delay"
+ [randomizeAngle]="options.randomizeAngle"
[zoomOnHover]="zoomOnHoverOptions"
[realignOnResize]="false">
</angular-tag-cloud>
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.scss b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
index bc1df4b8c90998a1ebe718cb3db0137b7aeeb9b2..74753756847711bf81bce455fce2ff9ba66402ca 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.scss
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.scss
@@ -5,14 +5,10 @@ ars-fill {
}
mat-drawer-container {
- background-color: var(--background);
height: 100%;
width: 100%;
}
-/* TODO: Gruppe 4 */
-
mat-drawer {
- background-color: var(--background);
- color: var(--on-background);
+ background-color: var(--dialog);
}
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.component.ts b/src/app/components/shared/tag-cloud/tag-cloud.component.ts
index 25e6b1f17856f1dbd708182af5d4fbad77964ece..872cb641eb8741ab2e6b3f09324eb952c68c85d0 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.component.ts
+++ b/src/app/components/shared/tag-cloud/tag-cloud.component.ts
@@ -23,6 +23,7 @@ import {ActivatedRoute} from '@angular/router';
import {UserRole} from '../../../models/user-roles.enum';
import {RoomService} from '../../../services/http/room.service';
import {ThemeService} from '../../../../theme/theme.service';
+import {CloudParameters} from "./tag-cloud.interface";
class CustomPosition implements Position {
left: number;
@@ -64,7 +65,8 @@ type TagCloudStyleData = [
string, // w7
string, // w8
string, // w9
- string // w10
+ string, // w10
+ string // background
];
const colorRegex = /rgba?\((\d+), (\d+), (\d+)(?:, (\d(?:\.\d+)?))?\)/;
@@ -80,7 +82,8 @@ const defaultColors: string[] = [
'var(--on-background, lightgreen)', // w7
'var(--purple, tomato)', // w8
'var(--magenta, white)', // w9
- 'var(--light-green, brown)' // w10
+ 'var(--light-green, brown)', // w10
+ 'var(--background, black)' //background
];
const getResolvedDefaultColors = (): string[] => {
@@ -118,6 +121,22 @@ const setGlobalStyles = (styles: TagCloudStyleData): void => {
}
customTagCloudStyles.sheet.insertRule('.spacyTagCloud > span:hover { ' + styles[0] + ' }', rules.length);
customTagCloudStyles.sheet.insertRule('.spacyTagCloud > span:hover > a { ' + styles[0] + ' }', rules.length);
+ customTagCloudStyles.sheet.insertRule('.spacyTagCloudContainer {' + styles[11] + '}', rules.length);
+};
+
+const getDefaultCloudParameters = (): CloudParameters => {
+ const resDefaultColors = getResolvedDefaultColors();
+ return {
+ backgroundColor: resDefaultColors[11],
+ fontColor: resDefaultColors[0],
+ fontSizeMin: 100,
+ fontSizeMax: 380,
+ hoverScale: 1.3,
+ hoverTime: 0.6,
+ hoverDelay: 0.4,
+ delayWord: 0,
+ randomAngles: false
+ }
};
@Component({
@@ -140,19 +159,21 @@ export class TagCloudComponent implements OnInit {
// if height is between 0 and 1 it will be set to the height of the upper element multiplied by the value
height: 0.99,
overflow: false,
- font: 'Georgia' // not working
+ font: 'Georgia', // not working
+ delay: 0,
+ randomizeAngle: false
};
zoomOnHoverOptions: ZoomOnHoverOptions = {
scale: 1.3, // Elements will become 130 % of current size on hover
transitionTime: 0.6, // it will take 0.6 seconds until the zoom level defined in scale property has been reached
- delay: 0.4,// Zoom will take affect after 0.4 seconds
- color: 'red'
+ delay: 0.4 // Zoom will take affect after 0.4 seconds
};
userRole: UserRole;
data: CloudData[] = [];
sorted = false;
debounceTimer = 0;
lastDebounceTime = 0;
+ configurationOpen = false;
constructor(private commentService: CommentService,
private spacyService: SpacyService,
@@ -176,7 +197,7 @@ export class TagCloudComponent implements OnInit {
if (e === 'createQuestion') {
this.openCreateDialog();
} else if (e === 'topicCloudConfig') {
- // TODO Group 4: OPEN Topic Cloud Config
+ this.configurationOpen = !this.configurationOpen;
} else if (e === 'topicCloudAdministration') {
// TODO Group 5: OPEN Topic Cloud Administration
}
@@ -205,20 +226,56 @@ export class TagCloudComponent implements OnInit {
this.commentService.getAckComments(this.roomId).subscribe((comments: Comment[]) => {
this.analyse(comments);
});
- this.resetColorsToTheme();
this.themeService.getTheme().subscribe(() => {
- this.resetColorsToTheme();
if (this.child) {
setTimeout(() => {
+ this.setCloudParameters(this.getCurrentCloudParameters(), false);
this.updateTagCloud();
}, 1);
}
});
}
+ initTagCloud() {
+ setTimeout(() => {
+ this.setCloudParameters(this.getCurrentCloudParameters(), false);
+ });
+ }
+
resetColorsToTheme() {
- setGlobalStyles(getResolvedDefaultColors()
- .map(e => 'color: ' + e + ' !important;') as TagCloudStyleData);
+ this.setCloudParameters(getDefaultCloudParameters());
+ }
+
+ getCurrentCloudParameters(): CloudParameters {
+ const jsonData = localStorage.getItem('tagCloudConfiguration');
+ const elem: CloudParameters = jsonData != null ? JSON.parse(jsonData) : null;
+ return elem || getDefaultCloudParameters();
+ }
+
+ setCloudParameters(data: CloudParameters, save = true): void {
+ const arr = getResolvedDefaultColors();
+ arr[0] = data.fontColor;
+ arr[11] = data.backgroundColor;
+ const fontRange = (data.fontSizeMax - data.fontSizeMin) / 10;
+ const styles = arr.map((e, i) => {
+ if (i > 10) {
+ return 'background-color: ' + e + ';';
+ } else if (i > 0) {
+ return 'color: ' + e + '; font-size: ' + (data.fontSizeMin + fontRange * i).toFixed(0) + '%;';
+ } else {
+ return 'color: ' + e + ';';
+ }
+ });
+ setGlobalStyles(styles as TagCloudStyleData);
+ this.zoomOnHoverOptions.delay = data.hoverDelay;
+ this.zoomOnHoverOptions.scale = data.hoverScale;
+ this.zoomOnHoverOptions.transitionTime = data.hoverTime;
+ this.options.delay = data.delayWord;
+ this.options.randomizeAngle = data.randomAngles;
+ this.updateTagCloud();
+ if (save) {
+ localStorage.setItem('tagCloudConfiguration', JSON.stringify(data));
+ }
}
analyse(comments: Comment[]) {
@@ -242,10 +299,6 @@ export class TagCloudComponent implements OnInit {
});
}
- drawerOpen(): boolean {
- return true;
- }
-
onResize(event: UIEvent): any {
this.updateTagCloud();
}
diff --git a/src/app/components/shared/tag-cloud/tag-cloud.interface.ts b/src/app/components/shared/tag-cloud/tag-cloud.interface.ts
index 525f5fab3ab6a0cf99b5f6332157956842839d80..b3faae6f98bc4f485fc2ed4bbaeaefdbc71be061 100644
--- a/src/app/components/shared/tag-cloud/tag-cloud.interface.ts
+++ b/src/app/components/shared/tag-cloud/tag-cloud.interface.ts
@@ -1,4 +1,4 @@
-export interface CloudParameters{
+export interface CloudParameters {
/**
* Background color of the Tag-cloud
*/
@@ -22,7 +22,7 @@ export interface CloudParameters{
/**
* Time for hovering in ms
*/
- hoverTime:number;
+ hoverTime: number;
/**
* Time before hover animation starts in ms
*/