|
1
|
import {Component, Inject, Input, RendererFactory2, ViewEncapsulation} from '@angular/core';
|
|
2
|
import {ActivatedRoute, Router} from '@angular/router';
|
|
3
|
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
|
|
4
|
import {LayoutService} from "../../openaireLibrary/services/layout.service";
|
|
5
|
import {CustomizationOptions} from "../../openaireLibrary/connect/community/CustomizationOptions";
|
|
6
|
import {DOCUMENT} from "@angular/common";
|
|
7
|
|
|
8
|
@Component({
|
|
9
|
selector: 'customization',
|
|
10
|
template: ``
|
|
11
|
})
|
|
12
|
|
|
13
|
export class CustomizationComponent {
|
|
14
|
@Input() communityId;
|
|
15
|
@Input() layout: CustomizationOptions;
|
|
16
|
@Input() properties:EnvProperties;
|
|
17
|
customizationCss:string = "";
|
|
18
|
|
|
19
|
|
|
20
|
constructor(private route: ActivatedRoute,private router: Router, private _layoutService: LayoutService, @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2) {
|
|
21
|
}
|
|
22
|
|
|
23
|
public ngOnInit() {
|
|
24
|
|
|
25
|
this.buildCss();
|
|
26
|
try {
|
|
27
|
const head = this.document.getElementsByTagName('head')[0];
|
|
28
|
|
|
29
|
let customizationCssFile = this.document.getElementById('customCssfile' ) as HTMLLinkElement;
|
|
30
|
if (customizationCssFile) {
|
|
31
|
customizationCssFile.href = "/assets/customization.css";
|
|
32
|
} else {
|
|
33
|
const style = this.document.createElement('link');
|
|
34
|
style.id = 'customCssfile';
|
|
35
|
style.rel = 'stylesheet';
|
|
36
|
style.href = "/assets/customization.css";
|
|
37
|
head.appendChild(style);
|
|
38
|
}
|
|
39
|
let customCss = this.document.getElementById('customStyle' ) as HTMLLinkElement;
|
|
40
|
if (customCss) {
|
|
41
|
customCss.append(this.customizationCss);
|
|
42
|
} else {
|
|
43
|
const style = this.document.createElement('style');
|
|
44
|
style.id = 'customStyle';
|
|
45
|
head.appendChild(style);
|
|
46
|
const renderer = this.rendererFactory.createRenderer(this.document, {
|
|
47
|
id: '-1',
|
|
48
|
encapsulation: ViewEncapsulation.None,
|
|
49
|
styles: [],
|
|
50
|
data: {}
|
|
51
|
});
|
|
52
|
let CSSElement = renderer.createText(this.customizationCss);
|
|
53
|
renderer.appendChild(style,CSSElement);
|
|
54
|
}
|
|
55
|
} catch (e) {
|
|
56
|
console.error('Renderrer Error to append style ', e);
|
|
57
|
}
|
|
58
|
}
|
|
59
|
private buildCss() {
|
|
60
|
|
|
61
|
this.customizationCss = `
|
|
62
|
:root {
|
|
63
|
--portal-main-color: ` + this.layout.identity.mainColor+`;
|
|
64
|
--portal-dark-color: ` + this.layout.identity.secondaryColor+`;
|
|
65
|
--background-light-color: ` + this.layout.backgrounds.light.color+`;
|
|
66
|
}
|
|
67
|
`;
|
|
68
|
//Search SVG
|
|
69
|
let search = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 532"><defs><style>.cls-1{isolation:isolate;}.cls-2{fill:{{color}};mix-blend-mode:multiply;}</style></defs><title>Asset 3</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-2" d="M0,431s362,109,841,62,632,68,1159-9V0H0Z"/><path class="cls-2" d="M0,514s1401,71,2000-69V0H0Z"/></g></g></g></svg>`;;
|
|
70
|
let svg = 'data:image/svg+xml,' + encodeURIComponent(search.replace('{{color}}', this.layout.backgrounds.form.color));
|
|
71
|
this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {');
|
|
72
|
this.customizationCss = this.customizationCss.concat(' background: ' + "url('" + svg + "') transparent no-repeat center bottom }");
|
|
73
|
|
|
74
|
//Button link SVG
|
|
75
|
let arrow = `<svg width="23" height="11" viewBox="0 0 23 11" xmlns="http://www.w3.org/2000/svg"><polyline fill="none" stroke="{{color}}" points="17 1 22 5.5 17 10 " /><line fill="none" stroke="{{color}}" x1="0" y1="5.5" x2="22.4" y2="5.5" /></svg>`;;
|
|
76
|
let svg_arrow = 'data:image/svg+xml,' + encodeURIComponent(arrow.split('{{color}}').join(this.layout.identity.mainColor));
|
|
77
|
this.customizationCss = this.customizationCss.concat('.uk-button-text::before {');
|
|
78
|
this.customizationCss = this.customizationCss.concat(' background-image: ' + "url('" + svg_arrow + "') !important}");
|
|
79
|
|
|
80
|
this.customizationCss = this.customizationCss.concat(' .communityPanelBackground, .communityPanelBackground .uk-section-primary {');
|
|
81
|
this.customizationCss = this.customizationCss.concat(' background-color: ' + this.layout.backgrounds.dark.color + ';}');
|
|
82
|
this.customizationCss = this.customizationCss.concat(' .uk-button:not(.uk-button-text){');
|
|
83
|
this.customizationCss = this.customizationCss.concat(' border-radius:' + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : '4') + 'px;');
|
|
84
|
this.customizationCss = this.customizationCss.concat(' }');
|
|
85
|
|
|
86
|
|
|
87
|
this.customizationCss = this.customizationCss.concat(' .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button {');
|
|
88
|
this.customizationCss = this.customizationCss.concat(' background-color:' + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + ';');
|
|
89
|
this.customizationCss = this.customizationCss.concat(' color: ' + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) + ';');
|
|
90
|
this.customizationCss = this.customizationCss.concat('border-color: ' + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) + ';');
|
|
91
|
this.customizationCss = this.customizationCss.concat(' border-style: ' + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) + ';');
|
|
92
|
this.customizationCss = this.customizationCss.concat(' border-width: ' + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + 'px;');
|
|
93
|
this.customizationCss = this.customizationCss.concat(' }');
|
|
94
|
|
|
95
|
|
|
96
|
this.customizationCss = this.customizationCss.concat(' .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover {');
|
|
97
|
this.customizationCss = this.customizationCss.concat(' background-color:' + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : '#154B71') + ';');
|
|
98
|
this.customizationCss = this.customizationCss.concat(' color: '+ (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : 'white') + ';');
|
|
99
|
this.customizationCss = this.customizationCss.concat(' border-color: ' + (this.layout.buttons.lightBackground.onHover.borderColor != null ? this.layout.buttons.lightBackground.onHover.borderColor : 'transparent') + ';');
|
|
100
|
this.customizationCss = this.customizationCss.concat(' }');
|
|
101
|
/*Buttons*/
|
|
102
|
this.customizationCss = this.customizationCss.concat(' .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {');
|
|
103
|
this.customizationCss = this.customizationCss.concat( 'background-color: ' + this.layout.buttons.darkBackground.backgroundColor + ' !important;');
|
|
104
|
this.customizationCss = this.customizationCss.concat(' color: ' + this.layout.buttons.darkBackground.color + ' !important;');
|
|
105
|
this.customizationCss = this.customizationCss.concat(' border-color: ' + this.layout.buttons.darkBackground.borderColor + ' !important;');
|
|
106
|
this.customizationCss = this.customizationCss.concat(' border-style: ' + this.layout.buttons.darkBackground.borderStyle + ' !important;');
|
|
107
|
this.customizationCss = this.customizationCss.concat( 'border-width: ' + this.layout.buttons.darkBackground.borderWidth + 'px !important;');
|
|
108
|
this.customizationCss = this.customizationCss.concat( 'border-radius:' + this.layout.buttons.darkBackground.borderRadius + 'px !important;');
|
|
109
|
|
|
110
|
this.customizationCss = this.customizationCss.concat(' }');
|
|
111
|
|
|
112
|
|
|
113
|
this.customizationCss = this.customizationCss.concat(' .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover {');
|
|
114
|
this.customizationCss = this.customizationCss.concat(' background-color: ' + this.layout.buttons.darkBackground.onHover.backgroundColor + ' !important;');
|
|
115
|
this.customizationCss = this.customizationCss.concat( 'color: ' + this.layout.buttons.darkBackground.onHover.color + ' !important;');
|
|
116
|
this.customizationCss = this.customizationCss.concat( 'border-color:' + this.layout.buttons.darkBackground.onHover.borderColor + ' !important;');
|
|
117
|
this.customizationCss = this.customizationCss.concat(' }');
|
|
118
|
// console.debug(this.customizationCss)
|
|
119
|
|
|
120
|
}
|
|
121
|
}
|