blob: a91b8d3f7ac56a0b95a7856a1817fabadc1c25fd [file] [log] [blame]
/**
* @license
* Copyright (C) 2019 The Android Open Source Project
*
* 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 {StyleObject, StylesPluginApi} from '../../../api/styles';
/**
* @fileoverview We should consider dropping support for this API:
*
* 1. we need to try avoid using `innerHTML` for xss concerns
* 2. we have css variables which are more recommended way to custom styling
*/
let styleObjectCount = 0;
interface PgElement extends Element {
__pg_js_api_style_tags: {
[className: string]: boolean;
};
}
export class GrStyleObject implements StyleObject {
private className = '';
constructor(private readonly rulesStr: string) {
this.className = `__pg_js_api_class_${styleObjectCount}`;
styleObjectCount++;
}
/**
* Creates a new unique CSS class and injects it in a root node of the element
* if it hasn't been added yet. A root node is an document or is the
* associated shadowRoot. This class can be added to any element with the same
* root node.
*/
getClassName(element: Element) {
let rootNodeEl = element.getRootNode();
if (rootNodeEl === document) {
rootNodeEl = document.head;
}
// TODO(TS): type casting to have correct interface
// maybe move this __pg_xxx to attribute
const rootNode: PgElement = rootNodeEl as PgElement;
if (!rootNode.__pg_js_api_style_tags) {
rootNode.__pg_js_api_style_tags = {};
}
if (!rootNode.__pg_js_api_style_tags[this.className]) {
const styleTag = document.createElement('style');
styleTag.innerHTML = `.${this.className} { ${this.rulesStr} }`;
rootNode.appendChild(styleTag);
rootNode.__pg_js_api_style_tags[this.className] = true;
}
return this.className;
}
/**
* Apply shared style to the element.
*/
apply(element: Element) {
element.classList.add(this.getClassName(element));
}
}
/**
* TODO(TS): move to util
*/
export class GrStylesApi implements StylesPluginApi {
/**
* Creates a new GrStyleObject with specified style properties.
*/
css(ruleStr: string) {
return new GrStyleObject(ruleStr);
}
}