import {Component, Input} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties'; import {LayoutService} from "../../openaireLibrary/services/layout.service"; import {CustomizationOptions} from "../../openaireLibrary/connect/community/CustomizationOptions"; import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper"; import {PiwikHelper} from "../piwikHelper"; import {StringUtils} from "../../openaireLibrary/utils/string-utils.class"; declare var appendCss: any; @Component({ selector: 'customization', template: ` ` }) export class CustomizationComponent { @Input() communityId; layout: CustomizationOptions; constructor(private route: ActivatedRoute, private router: Router, private _layoutService: LayoutService ) { } public ngOnInit() { this.route.data .subscribe((data: { envSpecific: EnvProperties }) => { this.route.queryParams.subscribe(params => { if(params['layout']) { this.layout = JSON.parse(StringUtils.URIDecode(params['layout'])); this.buildCss(); }else{ // this.properties = data.envSpecific; //com.communityId, // data.envSpecific.adminToolsAPIURL + '/' this._layoutService.mockLayout().subscribe( layout => { this.layout = layout; this.buildCss(); } ); } }); }); } private buildCss() { console.log(this.layout); document.documentElement.style.setProperty('--portal-main-color', this.layout.mainColor); document.documentElement.style.setProperty('--portal-dark-color', this.layout.secondaryColor); let css = ` /*Panel background*/ .communityPanelBackground:not(bottom) { border-style: ` + (this.layout.panel.background.borderStyle != null ? this.layout.panel.background.borderStyle : 'solid') + `; border-color:` + (this.layout.panel.background.borderColor != null ? this.layout.panel.background.borderColor : 'transparent') + `; border-width: ` + (this.layout.panel.background.borderWidth != null ? this.layout.panel.background.borderWidth: '1') + `px;`+` } .communityPanelBackground, .communityPanelBackground .uk-section-primary { background-color: ` + (this.layout.panel.background.color?this.layout.panel.background.color:this.layout.mainColor) + `; } /*Panel fonts*/ .communityPanelBackground { color:` + (this.layout.panel.fonts.color != null ? this.layout.panel.fonts.color : 'white') + ` !important;` + (this.layout.panel.fonts.family != null ? ('font-family: ' + this.layout.panel.fonts.family + ' !important;') : '') + (this.layout.panel.fonts.size != null ? ('font-size: ' + this.layout.panel.fonts.size + 'px !important;') : '') + (this.layout.panel.fonts.weight != null ? ('font-weight: ' + this.layout.panel.fonts.weight + '!important;') : '') + ` } .communityPanelBackground div.uk-modal { color:#666 !important; } .communityPanelBackground .uk-h6:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h4:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h3:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-h2:not(.ignoreCommunityPanelBackground),.communityPanelBackground .uk-h1:not(.ignoreCommunityPanelBackground) { color: ` + (this.layout.panel.title.color != null ? this.layout.panel.title.color : 'white') + ` !important;` + (this.layout.panel.title.weight != null ? ('font-weight: ' + this.layout.panel.title.weight + '!important;') : '') + ` } .communityPanelBackground .uk-h5:not(.ignoreCommunityPanelBackground){ `+ (this.layout.panel.title.family != null ? ('font-family: ' + this.layout.panel.title.family + ' !important;') : '') + (this.layout.panel.title.size != null ? ('font-size: ' + this.layout.panel.title.size + 'px !important;') : '') + ` } /* Panel links */ .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground), .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground), .portal-card a { color: ` + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'white') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) + ` !important;` + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.family?('font-family: ' + this.layout.links.darkBackground.family + ' !important;') : '') :'' ) + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.size?('font-size: ' + this.layout.links.darkBackground.size + 'px !important;') : '') :'' ) +` } /* Panel links - hover */ .communityPanelBackground .uk-link:not(.ignoreCommunityPanelBackground):hover, .communityPanelBackground a:not(.uk-button):not(.uk-button-text):not(.ignoreCommunityPanelBackground):hover, .portal-card a:hover { color: ` + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:`rgba(255, 255, 255, 0.5)`) :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') ) + ` !important;` + ` } .uk-link, a:not(.uk-button), .uk-navbar-dropdown-nav > li > a, .uk-navbar-nav > li > a, .loginLink, .uk-tab > .uk-active > a, .uk-tab > * > a:focus, .uk-tab > * > a:hover { color:` + (this.layout.links.lightBackground.color != null ? this.layout.links.lightBackground.color : `var(--portal-main-color)`) + ` } .uk-link:hover, a:not(.uk-button):hover, .uk-navbar-dropdown-nav > li > a:focus, .uk-navbar-dropdown-nav > li > a:hover, .uk-navbar-nav > li > a:hover, .uk-navbar-nav > li > a:focus, .uk-navbar-nav > li > a:active, .uk-navbar-nav > li:hover > a, .uk-navbar-dropdown-nav > li.uk-active > a, .uk-tab > .uk-active > a, .uk-navbar-nav > li.uk-active > a, .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav > li.uk-active > a { color:` + (this.layout.links.lightBackground.onHover.color != null ? this.layout.links.lightBackground.onHover.color : `var(--portal-dark-color)`) + ` } .communityBorder { border-color: ` + (this.layout.box.borderColor != null ? this.layout.box.borderColor : `var(--portal-main-color)`) + `; border-style: ` + (this.layout.box.borderStyle != null ? this.layout.box.borderStyle : `solid`) + `; border-width: ` + (this.layout.box.borderWidth != null ? this.layout.box.borderWidth : `2`) + `px; border-radius: ` + (this.layout.box.borderRadius != null ? this.layout.box.borderRadius : `6`) + `px; } /*Panel Elements & cards*/ .communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) { background-color: ` + (this.layout.panel.panelElements.backgroundColor != null ? this.layout.panel.panelElements.backgroundColor : `rgba(255, 255, 255, 0.5)`) + `; border-color: ` + (this.layout.panel.panelElements.borderColor != null ? this.layout.panel.panelElements.borderColor : `rgba(255, 255, 255, 0.5)`) + `; } .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a{ border-color: ` + + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.color?this.layout.links.darkBackground.color:'rgba(255, 255, 255, 0.8)') :(this.layout.links.lightBackground.color?this.layout.links.lightBackground.color:'var(--portal-main-color)') ) + + `; border-bottom: 1px solid; } .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) a:hover{ border-color: ` + (this.layout.panel.onDarkBackground ? (this.layout.links.darkBackground.onHover.color?this.layout.links.darkBackground.onHover.color:'rgba(255, 255, 255, 0.5)') :(this.layout.links.lightBackground.onHover.color?this.layout.links.lightBackground.onHover.color:'var(--portal-dark-color)') )+ + `; } .communityPanelBackground .uk-card:not(.ignoreCommunityPanelBackground), .communityPanelBackground .uk-label:not(.ignoreCommunityPanelBackground) { color: ` + (this.layout.panel.panelElements.color != null ? this.layout.panel.panelElements.color : `rgba(255, 255, 255, 0.5)`) + `; } .uk-button:not(.uk-button-text){ border-radius:` + (this.layout.buttons.lightBackground.borderRadius != null ? this.layout.buttons.lightBackground.borderRadius : `4`) + `px; } .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary), .portal-button { background-color:` + (this.layout.buttons.lightBackground.backgroundColor != null ? this.layout.buttons.lightBackground.backgroundColor : `#003052`) + `; color: ` + (this.layout.buttons.lightBackground.color != null ? this.layout.buttons.lightBackground.color : `white`) + `; border-color: ` + (this.layout.buttons.lightBackground.borderColor != null ? this.layout.buttons.lightBackground.borderColor : `transparent`) + `; border-style: ` + (this.layout.buttons.lightBackground.borderStyle != null ? this.layout.buttons.lightBackground.borderStyle : `solid`) + `; border-width: ` + (this.layout.buttons.lightBackground.borderWidth != null ? this.layout.buttons.lightBackground.borderWidth : `1`) + `px; } .uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, .portal-button:hover { background-color: ` + (this.layout.buttons.lightBackground.onHover.backgroundColor != null ? this.layout.buttons.lightBackground.onHover.backgroundColor : `#154B71`) + `; color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `white`) + `; border-color: ` + (this.layout.buttons.lightBackground.onHover.color != null ? this.layout.buttons.lightBackground.onHover.color : `transparent`) + `; } /*Buttons*/ .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) { background-color: ` + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.backgroundColor?this.layout.buttons.darkBackground.backgroundColor:'white') :(this.layout.buttons.lightBackground.backgroundColor?this.layout.buttons.lightBackground.backgroundColor:'var(--portal-main-color)') ) +` !important; color: ` + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.color?this.layout.buttons.darkBackground.color:'var(--portal-main-color)') :(this.layout.buttons.lightBackground.color?this.layout.buttons.lightBackground.color:'white') ) + ` !important; border-color: ` + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderColor?this.layout.buttons.darkBackground.borderColor:'white') :(this.layout.buttons.lightBackground.borderColor?this.layout.buttons.lightBackground.borderColor:'var(--portal-main-color)') ) + ` !important; border-style: ` + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderStyle?this.layout.buttons.darkBackground.borderStyle:'solid') :(this.layout.buttons.lightBackground.borderStyle?this.layout.buttons.lightBackground.borderStyle:'solid') ) + ` !important; border-width: ` + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderWidth?this.layout.buttons.darkBackground.borderWidth:'1px') :(this.layout.buttons.lightBackground.borderWidth?this.layout.buttons.lightBackground.borderWidth:'1px') ) + ` !important; border-radius:` + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.borderRadius?this.layout.buttons.darkBackground.borderRadius:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+ + ` !important; font-weight:` // (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.fontWeight?this.layout.buttons.darkBackground.fontWeight:'4px') :(this.layout.buttons.lightBackground.borderRadius?this.layout.buttons.lightBackground.borderRadius:'4px') )+ // (this.layout.panel.buttons.fontWeight != null ? this.layout.panel.buttons.fontWeight : `600`) + `; +` } .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground):hover { background-color: ` + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.backgroundColor?this.layout.buttons.darkBackground.onHover.backgroundColor:' #eeeeee') :(this.layout.buttons.lightBackground.onHover.backgroundColor?this.layout.buttons.lightBackground.onHover.backgroundColor:'var(--portal-dark-color)') ) + ` !important; color: ` + (this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.color?this.layout.buttons.darkBackground.onHover.color:' var(--portal-main-color) ') :(this.layout.buttons.lightBackground.onHover.color?this.layout.buttons.lightBackground.onHover.color:'white') ) + ` !important; border-color:` +(this.layout.panel.onDarkBackground ? (this.layout.buttons.darkBackground.onHover.borderColor?this.layout.buttons.darkBackground.onHover.borderColor:' #eeeeee ') :(this.layout.buttons.lightBackground.onHover.borderColor?this.layout.buttons.lightBackground.onHover.borderColor:'var(--portal-dark-color)') ) + ` !important; } .uk-navbar-dropdown { background-color: white; color: #666; box-shadow: 0 5px 12px rgba(0, 0, 0, .15); /*border:var(--portal-main-color) 1px solid;*/ } .customTabs .uk-tab > .uk-active > a { border-color: var(--portal-main-color); } .customTabs .uk-tab > .uk-active > a { border-color: var(--portal-main-color); } .uk-tab > * > a:focus, .uk-tab > * > a:hover { border-color: var(--portal-dark-color); } ` appendCss(css); } }