78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
|
// (C) Copyright 2015 Moodle Pty Ltd.
|
||
|
|
//
|
||
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
||
|
|
// you may not use this file except in compliance with the License.
|
||
|
|
// You may obtain a copy of the License at
|
||
|
|
//
|
||
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
||
|
|
//
|
||
|
|
// Unless required by applicable law or agreed to in writing, software
|
||
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
||
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
|
|
// See the License for the specific language governing permissions and
|
||
|
|
// limitations under the License.
|
||
|
|
|
||
|
|
import { Component, ElementRef, Input, OnChanges } from '@angular/core';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Component to add a <style> tag.
|
||
|
|
*
|
||
|
|
* @description
|
||
|
|
* This component will include a <style> tag with some CSS rules that can optionally be pefixed.
|
||
|
|
*
|
||
|
|
* Example:
|
||
|
|
*
|
||
|
|
* <core-style [css]="'p { color: red; }'" prefix=".custom-rules"></core-style>
|
||
|
|
*/
|
||
|
|
@Component({
|
||
|
|
selector: 'core-style',
|
||
|
|
template: '',
|
||
|
|
})
|
||
|
|
export class CoreStyleComponent implements OnChanges {
|
||
|
|
|
||
|
|
@Input() css = ''; // CSS rules.
|
||
|
|
@Input() prefix = ''; // Prefix to add to CSS rules.
|
||
|
|
|
||
|
|
constructor(private element: ElementRef) {}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @inheritdoc
|
||
|
|
*/
|
||
|
|
ngOnChanges(): void {
|
||
|
|
if (this.element && this.element.nativeElement) {
|
||
|
|
const style = document.createElement('style');
|
||
|
|
style.innerText = this.prefixCSS(this.css, this.prefix);
|
||
|
|
|
||
|
|
this.element.nativeElement.innerHTML = '';
|
||
|
|
this.element.nativeElement.appendChild(style);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Add a prefix to all rules in a CSS string.
|
||
|
|
*
|
||
|
|
* @param css CSS code to be prefixed.
|
||
|
|
* @param prefix Prefix css selector.
|
||
|
|
* @return Prefixed CSS.
|
||
|
|
*/
|
||
|
|
protected prefixCSS(css: string, prefix: string): string {
|
||
|
|
if (!css) {
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!prefix) {
|
||
|
|
return css;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Remove comments first.
|
||
|
|
let regExp = /\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm;
|
||
|
|
css = css.replace(regExp, '');
|
||
|
|
|
||
|
|
// Add prefix.
|
||
|
|
regExp = /([^]*?)({[^]*?}|,)/g;
|
||
|
|
|
||
|
|
return css.replace(regExp, prefix + ' $1 $2');
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|