Revision 60892
Added by Argiro Kokogiannaki almost 3 years ago
customization.component.ts | ||
---|---|---|
4 | 4 |
import {LayoutService} from "../../openaireLibrary/services/layout.service"; |
5 | 5 |
import {CustomizationOptions} from "../../openaireLibrary/connect/community/CustomizationOptions"; |
6 | 6 |
import {DOCUMENT} from "@angular/common"; |
7 |
import {DomSanitizer} from "@angular/platform-browser"; |
|
8 |
import {StringUtils} from "../../openaireLibrary/utils/string-utils.class"; |
|
9 | 7 |
|
10 | 8 |
@Component({ |
11 | 9 |
selector: 'customization', |
... | ... | |
19 | 17 |
customizationCss:string = ""; |
20 | 18 |
|
21 | 19 |
|
22 |
constructor(private route: ActivatedRoute, |
|
23 |
private router: Router, private _layoutService: LayoutService, @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2, private sanitizer: DomSanitizer |
|
24 |
) { |
|
25 |
|
|
20 |
constructor(private route: ActivatedRoute,private router: Router, private _layoutService: LayoutService, @Inject(DOCUMENT) private document, private rendererFactory: RendererFactory2) { |
|
26 | 21 |
} |
27 | 22 |
|
28 | 23 |
public ngOnInit() { |
29 |
console.log("cust init") |
|
30 |
this._layoutService.getLayout(this.properties, this.communityId).subscribe( |
|
31 |
layout => { |
|
32 |
if (layout) { |
|
33 |
console.debug("service"); |
|
34 |
this.layout = CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId); |
|
35 |
} else { |
|
36 |
this.layout = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor, CustomizationOptions.getIdentity(this.communityId).secondaryColor); |
|
37 |
console.debug("default"); |
|
38 |
} |
|
39 |
this.privateAppendCss(); |
|
40 |
}, |
|
41 |
error => { |
|
42 |
console.log(" Layout not found - use default"); |
|
43 |
this.layout = new CustomizationOptions(); |
|
44 |
this.privateAppendCss(); |
|
45 |
} |
|
46 |
); |
|
47 |
this.route.queryParams.subscribe(params => { |
|
48 |
if(params['layout']) { |
|
49 |
this.layout = JSON.parse(StringUtils.URIDecode(params['layout'])); |
|
50 |
this.privateAppendCss(); |
|
51 |
}else{ |
|
52 | 24 |
|
53 |
} |
|
54 |
}); |
|
55 |
// this.privateAppendCss(); |
|
56 |
} |
|
57 |
privateAppendCss(){ |
|
58 |
|
|
59 | 25 |
this.buildCss(); |
60 | 26 |
try { |
61 | 27 |
const head = this.document.getElementsByTagName('head')[0]; |
... | ... | |
105 | 71 |
this.customizationCss = this.customizationCss.concat('.generalSearchForm,.publicationsSearchForm,.projectsSearchForm, .projectsTableSearchForm,.organizationsSearchForm,.datasourcesSearchForm {'); |
106 | 72 |
this.customizationCss = this.customizationCss.concat(' background: ' + "url('" + svg + "') transparent no-repeat center bottom }"); |
107 | 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 |
|
|
108 | 80 |
this.customizationCss = this.customizationCss.concat(' .communityPanelBackground, .communityPanelBackground .uk-section-primary {'); |
109 | 81 |
this.customizationCss = this.customizationCss.concat(' background-color: ' + this.layout.backgrounds.dark.color + ';}'); |
110 | 82 |
this.customizationCss = this.customizationCss.concat(' .uk-button:not(.uk-button-text){'); |
Also available in: Unified diff
[Connect | Trunk]
- Update affiliations layout
- Use customization class to create the css
- Create preview/ demo component
- Clean up piwik helper file
- updates on customization css