Public
Edited
Feb 17
2 stars
fullScreenControls
//fullscreen = htl.html`<button onclick=${({currentTarget}) => {
// const currentCell = currentTarget.parentElement;
// const nextCell = currentCell.nextElementSibling;
// nextCell.requestFullscreen ? nextCell.requestFullscreen()
// : nextCell.webkitRequestFullscreen ? nextCell.webkitRequestFullscreen()
// : (() => { throw new Error("Fullscreen API not supported"); });
//}}>Fullscreen</button>`
// old full screen
//fullscreen = htl.html`<button onclick=${({ currentTarget }) => {
// const currentCell = currentTarget.parentElement;
//
// // Get user-selected settings from fullScreenControls
// const startOffset = fullScreenControls.startNextCell; // Start at this cell offset
// const numCells = fullScreenControls.noOfCells; // Number of cells to display
//
// // Create a fullscreen wrapper
// const fullScreenWrapper = document.createElement("div");
//
// // Collect the required cells
// let nextCell = currentCell;
// for (let i = 0; i < startOffset; i++) {
// nextCell = nextCell.nextElementSibling; // Move to the correct starting cell
// }
//
// let cells = [];
// let originalHeights = [];
// let originalStyles = new Map(); // Store original styles
// let totalOriginalHeight = 0;
//
// for (let i = 0; i < numCells && nextCell; i++) {
// let rect = nextCell.getBoundingClientRect(); // Get original height
// originalHeights.push(rect.height);
// totalOriginalHeight += rect.height;
//
// // Store original styles before modification
// originalStyles.set(nextCell, {
// position: nextCell.style.position,
// top: nextCell.style.top,
// left: nextCell.style.left,
// width: nextCell.style.width,
// height: nextCell.style.height,
// background: nextCell.style.background,
// overflow: nextCell.style.overflow,
// padding: nextCell.style.padding,
// borderBottom: nextCell.style.borderBottom,
// visibility: nextCell.style.visibility
// });
//
// cells.push(nextCell);
// nextCell = nextCell.nextElementSibling;
// }
// if (cells.length === 0) {
// alert("No valid cells found!");
// return;
// }
//
// // Hide all other cells except the selected ones
// document.querySelectorAll(".observablehq").forEach(cell => {
// if (!cells.includes(cell) && cell !== currentCell) {
// cell.style.visibility = "hidden"; // Hide but keep layout intact
// }
// });
// // Get computed background color
// let bgColor = window.getComputedStyle(fullScreenWrapper).backgroundColor;
//
// // Function to determine if color is dark
// function isDark(color) {
// let rgb = color.match(/\d+/g);
// if (!rgb) return false;
// let [r, g, b] = rgb.map(Number);
// let brightness = (r * 299 + g * 587 + b * 114) / 1000; // Luminance formula
// return brightness < 128;
// }
//
// // Determine text color based on background
// let textColor = isDark(bgColor) ? "white" : "black";
//
// // Move selected cells into the fullscreen wrapper
// cells.forEach(cell => fullScreenWrapper.appendChild(cell));
//
// // Apply fullscreen wrapper styles
// fullScreenWrapper.style.position = "fixed";
// fullScreenWrapper.style.top = "0";
// fullScreenWrapper.style.left = "0";
// fullScreenWrapper.style.width = "100vw";
// fullScreenWrapper.style.height = "100vh";
// fullScreenWrapper.style.background = controls.fullScreenBackgroundColor;
// fullScreenWrapper.style.overflow = "hidden"; // Prevents extra scrolling
// fullScreenWrapper.style.padding = "0";
// fullScreenWrapper.style.zIndex = "9999";
// document.body.appendChild(fullScreenWrapper);
//
// // Function to dynamically adjust cell heights while preserving ratios
// function adjustCellHeights() {
// let availableHeight = window.innerHeight; // Total screen height
// cells.forEach((cell, index) => {
// let heightRatio = originalHeights[index] / totalOriginalHeight*1.1; // Preserve proportion
// cell.style.position = "relative";
// cell.style.width = "100%";
// cell.style.height = `${availableHeight * heightRatio}px`; // Scale based on ratio
// cell.style.background = "black";
// cell.style.overflow = "auto";
// cell.style.padding = "0px";
//
// });
// }
//
// // Adjust heights on load and when window resizes
// adjustCellHeights();
// window.addEventListener("resize", adjustCellHeights);
//
// // Enter fullscreen mode on the wrapper
// fullScreenWrapper.requestFullscreen
// ? fullScreenWrapper.requestFullscreen()
// : fullScreenWrapper.webkitRequestFullscreen
// ? fullScreenWrapper.webkitRequestFullscreen()
// : (() => { throw new Error("Fullscreen API not supported"); })();
//
// // Handle exit fullscreen: Restore everything properly
// document.addEventListener("fullscreenchange", () => {
// if (!document.fullscreenElement) {
// // Restore visibility of all cells
// document.querySelectorAll(".observablehq").forEach(cell => {
// cell.style.visibility = "";
// });
//
// // Restore original styles for each cell
// cells.forEach(cell => {
// const originalStyle = originalStyles.get(cell);
// if (originalStyle) {
// Object.assign(cell.style, originalStyle); // Apply saved styles
// }
// });
//
// // Move cells back to their original place
// cells.forEach(cell => {
// currentCell.parentElement.insertBefore(cell, nextCell);
// });
//
// // Cleanup
// fullScreenWrapper.remove();
// window.removeEventListener("resize", adjustCellHeights);
// }
// });
//}}>Fullscreen</button>`;
import {chart} from "@d3/contours"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
