Skip to content

Commit

Permalink
fix: Stop using global variables and use getDiv()
Browse files Browse the repository at this point in the history
  • Loading branch information
@potaracom
potaracom committed Oct 9, 2023
1 parent 50758b3 commit 322c4d8
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 33 deletions.
43 changes: 36 additions & 7 deletions core/dropdowndiv.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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';

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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)';
Expand All @@ -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.
Expand Down Expand Up @@ -694,6 +718,11 @@ function positionInternal(
secondaryX: number,
secondaryY: number,
): boolean {
const div = getDiv();
if (!div) {
return false;
}

const metrics = internal.getPositionMetrics(
primaryX,
primaryY,
Expand Down
28 changes: 16 additions & 12 deletions core/tooltip.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,16 +125,16 @@ 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.
*
* @returns The HTML tooltip container.
*/
export function getDiv(): HTMLDivElement | null {
return containerDiv;
return document.querySelector('.' + containerClassName);
}

/**
Expand Down Expand Up @@ -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);
}
Expand Down Expand Up @@ -339,6 +339,7 @@ export function dispose() {
export function hide() {
if (visible) {
visible = false;
const containerDiv = getDiv();
if (containerDiv) {
containerDiv.style.display = 'none';
}
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
}

Expand All @@ -404,34 +406,35 @@ 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) {
// Prevent falling off left edge in RTL mode.
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;
}
}

Expand All @@ -445,6 +448,7 @@ function show() {
return;
}
poisonedElement = element;
const containerDiv = getDiv();
if (!containerDiv) {
return;
}
Expand Down
40 changes: 26 additions & 14 deletions core/widgetdiv.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

/**
Expand All @@ -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);
}
Expand All @@ -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;
Expand All @@ -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 = '';
Expand Down Expand Up @@ -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';
}

/**
Expand Down

0 comments on commit 322c4d8

Please sign in to comment.