51 lines
1.8 KiB
TypeScript
51 lines
1.8 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 { renderInlineStyles } from '@/core/utils/style-helpers';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Helper class to calculate layout styles for the focused area in a User Tour.
|
||
|
|
*/
|
||
|
|
export class CoreUserToursFocusLayout {
|
||
|
|
|
||
|
|
inlineStyles!: string;
|
||
|
|
|
||
|
|
private targetBoundingBox: DOMRect;
|
||
|
|
private targetComputedStyle: CSSStyleDeclaration;
|
||
|
|
|
||
|
|
constructor(target: HTMLElement) {
|
||
|
|
this.targetBoundingBox = target.getBoundingClientRect();
|
||
|
|
this.targetComputedStyle = window.getComputedStyle(target);
|
||
|
|
|
||
|
|
this.calculateStyles();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Calculate styles.
|
||
|
|
*/
|
||
|
|
private calculateStyles(): void {
|
||
|
|
this.inlineStyles = renderInlineStyles({
|
||
|
|
'top': this.targetBoundingBox.top,
|
||
|
|
'left': this.targetBoundingBox.left,
|
||
|
|
'width': this.targetBoundingBox.width,
|
||
|
|
'height': this.targetBoundingBox.height,
|
||
|
|
'border-top-left-radius': this.targetComputedStyle.borderTopLeftRadius,
|
||
|
|
'border-top-right-radius': this.targetComputedStyle.borderTopRightRadius,
|
||
|
|
'border-bottom-left-radius': this.targetComputedStyle.borderBottomLeftRadius,
|
||
|
|
'border-bottom-right-radius': this.targetComputedStyle.borderBottomRightRadius,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|