CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-05 08:00:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: Stop using global variables and use getDiv()

Browse Source
This commit is contained in:
potaracom
2023-10-09 15:07:10 +09:00
parent 50758b36a8
commit 322c4d884b
3 changed files with 78 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
core/dropdowndiv.ts
View File

@@ -55,15 +55,15 @@ let animateOutTimer: ReturnType<typeof setTimeout> | null = null;
/** Callback for when the drop-down is hidden. */
let onHide: Function | null = null;
/** A class name representing the current owner's workspace container. */
const containerClassName = 'blocklyDropDownDiv';
/** A class name representing the current owner's workspace renderer. */
let renderedClassName = '';
/** A class name representing the current owner's workspace theme. */
let themeClassName = '';
/** The content element. */
let div: HTMLDivElement;
/** The content element. */
let content: HTMLDivElement;
@@ -107,17 +107,26 @@ export interface PositionMetrics {
arrowVisible: boolean;
}
/**
* Returns the HTML container for dropdown div.
*
* @returns The editor widget container.
*/
export function getDiv(): HTMLDivElement | null {
return document.querySelector('.' + containerClassName);
}
/**
* Create and insert the DOM element for this div.
*
* @internal
*/
export function createDom() {
if (document.querySelector('.blocklyDropDownDiv')) {
if (getDiv()) {
return; // Already created.
}
div = document.createElement('div');
div.className = 'blocklyDropDownDiv';
const div = document.createElement('div');
div.className = containerClassName;
const parentDiv = common.getParentContainer() || document.body;
parentDiv.appendChild(div);
@@ -183,6 +192,7 @@ export function clearContent() {
* @param borderColour Any CSS colour for the border.
*/
export function setColour(backgroundColour: string, borderColour: string) {
const div = getDiv()!;
div.style.backgroundColor = backgroundColour;
div.style.borderColor = borderColour;
}
@@ -338,6 +348,11 @@ export function show<T>(
): boolean {
owner = newOwner as Field;
onHide = opt_onHide || null;
const div = getDiv();
if (!div) {
return false;
}
// Set direction.
div.style.direction = rtl ? 'rtl' : 'ltr';
@@ -401,7 +416,7 @@ const internal = {
secondaryY: number,
): PositionMetrics {
const boundsInfo = internal.getBoundsInfo();
const divSize = style.getSize(div as Element);
const divSize = style.getSize(getDiv()! as Element);
// Can we fit in-bounds below the target?
if (primaryY + divSize.height < boundsInfo.bottom) {
@@ -628,6 +643,11 @@ export function hideIfOwner<T>(
/** Hide the menu, triggering animation. */
export function hide() {
const div = getDiv();
if (!div) {
return;
}
// Start the animation by setting the translation and fading out.
// Reset to (initialX, initialY) - i.e., no translation.
div.style.transform = 'translate(0, 0)';
@@ -650,6 +670,10 @@ export function hideWithoutAnimation() {
if (animateOutTimer) {
clearTimeout(animateOutTimer);
}
const div = getDiv();
if (!div) {
return;
}
// Reset style properties in case this gets called directly
// instead of hide() - see discussion on #2551.
@@ -694,6 +718,11 @@ function positionInternal(
secondaryX: number,
secondaryY: number,
): boolean {
const div = getDiv();
if (!div) {
return false;
}
const metrics = internal.getPositionMetrics(
primaryX,
primaryY,

28
core/tooltip.ts
View File

@@ -125,8 +125,8 @@ export const HOVER_MS = 750;
*/
export const MARGINS = 5;
/** The HTML container. Set once by createDom. */
let containerDiv: HTMLDivElement | null = null;
/** A class name representing the HTML tooltip container. */
const containerClassName = 'blocklyTooltipDiv';
/**
* Returns the HTML tooltip container.
@@ -134,7 +134,7 @@ let containerDiv: HTMLDivElement | null = null;
* @returns The HTML tooltip container.
*/
export function getDiv(): HTMLDivElement | null {
return containerDiv;
return document.querySelector('.' + containerClassName);
}
/**
@@ -184,12 +184,12 @@ function getTargetObject(
* Create the tooltip div and inject it onto the page.
*/
export function createDom() {
if (document.querySelector('.blocklyTooltipDiv')) {
if (getDiv()) {
return; // Already created.
}
// Create an HTML container for popup overlays (e.g. editor widgets).
containerDiv = document.createElement('div');
containerDiv.className = 'blocklyTooltipDiv';
const containerDiv = document.createElement('div');
containerDiv.className = containerClassName;
const container = common.getParentContainer() || document.body;
container.appendChild(containerDiv);
}
@@ -339,6 +339,7 @@ export function dispose() {
export function hide() {
if (visible) {
visible = false;
const containerDiv = getDiv();
if (containerDiv) {
containerDiv.style.display = 'none';
}
@@ -372,6 +373,7 @@ export function unblock() {
/** Renders the tooltip content into the tooltip div. */
function renderContent() {
const containerDiv = getDiv();
if (!containerDiv || !element) {
// This shouldn't happen, but if it does, we can't render.
return;
@@ -392,7 +394,7 @@ function renderDefaultContent() {
for (let i = 0; i < lines.length; i++) {
const div = document.createElement('div');
div.appendChild(document.createTextNode(lines[i]));
containerDiv!.appendChild(div);
getDiv()!.appendChild(div);
}
}
@@ -404,21 +406,22 @@ function renderDefaultContent() {
* @returns Coordinates at which the tooltip div should be placed.
*/
function getPosition(rtl: boolean): {x: number; y: number} {
const containerDiv = getDiv()!;
// Position the tooltip just below the cursor.
const windowWidth = document.documentElement.clientWidth;
const windowHeight = document.documentElement.clientHeight;
let anchorX = lastX;
if (rtl) {
anchorX -= OFFSET_X + containerDiv!.offsetWidth;
anchorX -= OFFSET_X + containerDiv.offsetWidth;
} else {
anchorX += OFFSET_X;
}
let anchorY = lastY + OFFSET_Y;
if (anchorY + containerDiv!.offsetHeight > windowHeight + window.scrollY) {
if (anchorY + containerDiv.offsetHeight > windowHeight + window.scrollY) {
// Falling off the bottom of the screen; shift the tooltip up.
anchorY -= containerDiv!.offsetHeight + 2 * OFFSET_Y;
anchorY -= containerDiv.offsetHeight + 2 * OFFSET_Y;
}
if (rtl) {
@@ -426,12 +429,12 @@ function getPosition(rtl: boolean): {x: number; y: number} {
anchorX = Math.max(MARGINS - window.scrollX, anchorX);
} else {
if (
anchorX + containerDiv!.offsetWidth >
anchorX + containerDiv.offsetWidth >
windowWidth + window.scrollX - 2 * MARGINS
) {
// Falling off the right edge of the screen;
// clamp the tooltip on the edge.
anchorX = windowWidth - containerDiv!.offsetWidth - 2 * MARGINS;
anchorX = windowWidth - containerDiv.offsetWidth - 2 * MARGINS;
}
}
@@ -445,6 +448,7 @@ function show() {
return;
}
poisonedElement = element;
const containerDiv = getDiv();
if (!containerDiv) {
return;
}

40
core/widgetdiv.ts
View File

@@ -19,22 +19,22 @@ let owner: unknown = null;
/** Optional cleanup function set by whichever object uses the widget. */
let dispose: (() => void) | null = null;
/** A class name representing the current owner's workspace container. */
const containerClassName = 'blocklyWidgetDiv';
/** A class name representing the current owner's workspace renderer. */
let rendererClassName = '';
/** A class name representing the current owner's workspace theme. */
let themeClassName = '';
/** The HTML container for popup overlays (e.g. editor widgets). */
let containerDiv: HTMLDivElement | null;
/**
* Returns the HTML container for editor widgets.
*
* @returns The editor widget container.
*/
export function getDiv(): HTMLDivElement | null {
return containerDiv;
return document.querySelector('.' + containerClassName);
}
/**
@@ -44,19 +44,28 @@ export function getDiv(): HTMLDivElement | null {
* @internal
*/
export function testOnly_setDiv(newDiv: HTMLDivElement | null) {
containerDiv = newDiv;
const div = getDiv();
if (!div) {
return;
}
if (newDiv === null) {
div.remove();
} else {
div.replaceWith(newDiv);
}
}
/**
* Create the widget div and inject it onto the page.
*/
export function createDom() {
if (document.querySelector('.blocklyWidgetDiv')) {
if (getDiv()) {
return; // Already created.
}
containerDiv = document.createElement('div') as HTMLDivElement;
containerDiv.className = 'blocklyWidgetDiv';
const containerDiv = document.createElement('div') as HTMLDivElement;
containerDiv.className = containerClassName;
const container = common.getParentContainer() || document.body;
container.appendChild(containerDiv);
}
@@ -73,8 +82,10 @@ export function show(newOwner: unknown, rtl: boolean, newDispose: () => void) {
hide();
owner = newOwner;
dispose = newDispose;
const div = containerDiv;
if (!div) return;
const div = getDiv();
if (!div) {
return;
}
div.style.direction = rtl ? 'rtl' : 'ltr';
div.style.display = 'block';
const mainWorkspace = common.getMainWorkspace() as WorkspaceSvg;
@@ -97,7 +108,7 @@ export function hide() {
}
owner = null;
const div = containerDiv;
const div = getDiv();
if (!div) return;
div.style.display = 'none';
div.style.left = '';
@@ -146,9 +157,10 @@ export function hideIfOwner(oldOwner: unknown) {
* @param height The height of the widget div (pixels).
*/
function positionInternal(x: number, y: number, height: number) {
containerDiv!.style.left = x + 'px';
containerDiv!.style.top = y + 'px';
containerDiv!.style.height = height + 'px';
const div = getDiv()!;
div.style.left = x + 'px';
div.style.top = y + 'px';
div.style.height = height + 'px';
}
/**