Help Layer / Claudio Esperança

Claudio Esperança

Computer Graphics & Visualization @ufrj.br

Workspace

Public

Edited

Feb 1, 2023

1 fork

Importers

2 stars

helpToggle("div.container", data, true) // set last arg to false to have non-modal (non-blocking) help

Inputs.table(data)

typeof "dffdas"

// Creates a help layer on top of rootElement using the info in helpData to position

// help icons and textual explanations. If blocking = true, the layer is modal, i.e,

// interation with the underlying interface is blocked.

function createHelpLayer(rootElement, helpData, blocking = true) {

let [width, height] = [rootElement.clientWidth, rootElement.clientHeight];

let layer = html`<div class="helpLayer">`;

if (!blocking) layer.style.pointerEvents = "none";

Object.assign(layer.style, {

position: "absolute",

top: "0px",

left: "0px",

minWidth: `${width}px`,

minHeight: `${height}px`,

//border: "1px solid red",

zIndex: 1000,

background: "rgba(0,0,0,0)"

});

const helpGeometry = function (helpItem, layerGeom) {

const iconSize = 18;

const boxWidth = helpBoxWidth;

const sep = 5;

let [xoff, yoff] = [+helpItem.xoffset, +helpItem.yoffset];

let icon = {};

let box = measure(boxWidth, helpItem.text);

if (helpItem.corner.includes("N")) {

icon.y = yoff;

box.y = yoff + iconSize + sep;

} else if (helpItem.corner.includes("S")) {

icon.y = layerGeom.height + yoff - iconSize;

box.y = icon.y - sep - box.height;

} else {

icon.y = layerGeom.height / 2 + yoff - iconSize / 2;

box.y = icon.y + iconSize / 2 - box.height / 2;

}

if (helpItem.corner.includes("W")) {

icon.x = xoff;

box.x = icon.x + sep + iconSize;

} else if (helpItem.corner.includes("E")) {

icon.x = layerGeom.width + xoff - iconSize;

box.x = icon.x - sep - box.width;

} else {

icon.x = layerGeom.width / 2 + xoff - iconSize / 2;

box.x = icon.x - box.width / 2 + iconSize / 2;

if (!helpItem.corner.includes("S") && !helpItem.corner.includes("N")) {

icon.y -= box.height / 4 + iconSize / 2 + sep;

box.y += box.height / 4;

}

return { icon, box };

};

let helpBoxes = [];

const showHelpBox = (box) => {

for (let hb of helpBoxes) {

if (hb === box) {

hb.style.display = hb.style.display == "block" ? "none" : "block";

} else {

hb.style.display = "none";

}

};

for (let helpItem of helpData) {

const node = rootElement.querySelector(helpItem.selector);

if (!node) {

console.log("Can't find:" + helpItem.selector);

continue;

}

//const rect = node.BoundingClientRect();

const geom = {

x: node.offsetLeft,

y: node.offsetTop,

width: node.clientWidth,

height: node.clientHeight

};

if (geom.x == 0 && geom.y == 0 && geom.width == 0 && geom.height == 0) {

console.log("Element with null geometry:" + helpItem.selector);

continue;

}

const panel = html`<div class="helpPanel">`;

Object.assign(panel.style, {

position: "absolute",

top: `${geom.y}px`,

left: `${geom.x}px`,

minWidth: `${geom.width}px`,

minHeight: `${geom.height}px`,

pointerEvents: "none"

// border: "1px solid blue",

// background: "rgba(0,0,0,0.1)"

});

const helpGeom = helpGeometry(helpItem, geom);

const icon = helpIcon();

Object.assign(icon.style, {

position: "absolute",

top: `${helpGeom.icon.y}px`,

left: `${helpGeom.icon.x}px`,

pointerEvents: "auto"

});

const helpBox = htl.html`<div class=helpBox>${helpItem.text}`;

Object.assign(helpBox.style, {

display: "none",

position: "absolute",

pointerEvents: "none",

top: `${helpGeom.box.y}px`,

left: `${helpGeom.box.x}px`,

width: `${helpGeom.box.width}px`

});

helpBoxes.push(helpBox);

icon.onclick = () => showHelpBox(helpBox);

panel.append(icon, helpBox);

layer.append(panel);

}

return layer;

}

// Creates a help layer (see above) when the toggle is set and removes it when it is unset

function helpToggle(rootElement, helpData, blocking = true) {

const div = htl.html`<div>`;

div.value = false;

let helpLayer = null;

let display = () => {

div.innerHTML = "";

if (div.value) {

div.append(onToggleIcon());

const root =

typeof rootElement === "string"

? document.querySelector(rootElement)

: rootElement;

helpLayer = createHelpLayer(root, helpData);

root.append(helpLayer);

} else {

div.append(offToggleIcon());

if (helpLayer) helpLayer.remove();

}

};

div.onclick = () => {

div.value = !div.value;

display();

div.dispatchEvent(new CustomEvent("input"));

};

display();

return div;

}

## Icons

// Creates a toggle in the "on" position

onToggleIcon = () => htl.html`<svg width="40" height="21" viewBox="0 0 40 21" fill="none" xmlns="http://www.w3.org/2000/svg">

</svg>

helpBoxStyle = html`<style>

.helpBox {

box-sizing: border-box;

border: 1px solid rgba(0,0,0,0.4);

border-radius: 4px;

box-shadow: 0px 0px 6px 0px #868789;

background: rgba(240,240,240,0.9);

padding: 5px;

font-family: Roboto condensed, Helvetica, sans-serif, Arial;

font-size: 10px;

user-select: none;

}

</style>`

helpBoxWidth = 250 // Pixels

measure(

helpBoxWidth,

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

)

// Given a text which is to be displayed in a div box

// and the width of that box, returns the width and height of

// the box containing text

function measure(width, text) {

const dummyTextDiv = htl.html`<div class=helpBox >`;

Object.assign(dummyTextDiv.style, {

width: width + "px",

position: "absolute",

bottom: "-1000px"

});

dummyTextDiv.innerHTML = text;

document.body.append(dummyTextDiv);

Promises.delay(0);

let obj = dummyTextDiv.getBoundingClientRect();

dummyTextDiv.remove();

return { width: obj.width, height: obj.height };

}

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more