941ee630d8
Gerrit.css doesn't work with ShadowDom, because it adds styles to a document. This fix provides a replacement for Gerrit.css. The replacement allows to apply the same styles to any element inside document. Bug: Issue 11298 Change-Id: Ide325a889a69bd267382a9664ed6f8d25ed67a3b
78 lines
2.4 KiB
JavaScript
78 lines
2.4 KiB
JavaScript
/**
|
|
* @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.
|
|
*/
|
|
(function(window) {
|
|
'use strict';
|
|
|
|
// Prevent redefinition.
|
|
if (window.GrStylesApi) { return; }
|
|
|
|
let styleObjectCount = 0;
|
|
|
|
function GrStyleObject(rulesStr) {
|
|
this._rulesStr = rulesStr;
|
|
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.
|
|
* @param {HTMLElement} element The element to get class name for.
|
|
* @return {string} Appropriate class name for the element is returned
|
|
*/
|
|
GrStyleObject.prototype.getClassName = function(element) {
|
|
const rootNode = Polymer.Settings.useShadow
|
|
? element.getRootNode() : document.body;
|
|
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.
|
|
* @param {HTMLElement} element The element to apply style for
|
|
*/
|
|
GrStyleObject.prototype.apply = function(element) {
|
|
element.classList.add(this.getClassName(element));
|
|
};
|
|
|
|
|
|
function GrStylesApi() {
|
|
}
|
|
|
|
/**
|
|
* Creates a new GrStyleObject with specified style properties.
|
|
* @param {string} String with style properties.
|
|
* @return {GrStyleObject}
|
|
*/
|
|
GrStylesApi.prototype.css = function(ruleStr) {
|
|
return new GrStyleObject(ruleStr);
|
|
};
|
|
|
|
|
|
window.GrStylesApi = GrStylesApi;
|
|
})(window);
|