// (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, }); } }