Files
topos/src/DomElements.ts

105 lines
3.8 KiB
TypeScript

import { type Editor } from "./main";
export type ElementMap = {
[key: string]:
| HTMLElement
| HTMLButtonElement
| HTMLDivElement
| HTMLInputElement
| HTMLSelectElement
| HTMLCanvasElement
| HTMLFormElement
| HTMLInputElement;
};
export const singleElements = {
topos_logo: "topos-logo",
fill_viewer: "fillviewer",
load_universe_button: "load-universe-button",
download_universe_button: "download-universes",
upload_universe_button: "upload-universes",
upload_samples_button: "upload-samples",
sample_indicator: "sample-indicator",
destroy_universes_button: "destroy-universes",
documentation_button: "doc-button-1",
eval_button: "eval-button-1",
local_button: "local-button",
global_button: "global-button",
init_button: "init-button",
note_button: "note-button",
settings_button: "settings-button",
close_settings_button: "close-settings-button",
close_universes_button: "close-universes-button",
universe_viewer: "universe-viewer",
buffer_modal: "modal-buffers",
buffer_search: "buffer-search",
universe_creator: "universe-creator",
local_script_tabs: "local-script-tabs",
font_size_input: "font-size-input",
font_family_selector: "font-family",
vim_mode_checkbox: "vim-mode",
line_numbers_checkbox: "show-line-numbers",
time_position_checkbox: "show-time-position",
tips_checkbox: "show-tips",
completion_checkbox: "show-completions",
midi_clock_checkbox: "send-midi-clock",
midi_channels_scripts: "midi-channels-scripts",
midi_clock_ppqn: "midi-clock-ppqn-input",
theme_selector: "theme-selector",
theme_previewer: "theme-previewer",
load_demo_songs: "load-demo-songs",
normal_mode_button: "normal-mode",
vim_mode_button: "vim-mode",
share_button: "share-button",
audio_nudge_range: "audio_nudge",
dough_nudge_range: "dough_nudge",
error_line: "error_line",
hydra_canvas: "hydra-bg",
feedback: "feedback",
drawings: "drawings",
scope: "scope",
};
export const buttonGroups = {
play_buttons: ["play-button-1"],
stop_buttons: ["stop-button-1"],
clear_buttons: ["clear-button-1"],
};
//@ts-ignore
export const createDocumentationStyle = (app: Editor) => {
/**
* Creates a documentation style object.
* @param {Editor} app - The editor object.
* @returns {Object} - The documentation style object.
*/
return {
h1: "text-brightwhite lg:text-4xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-4 pt-4 pb-3 px-2",
h2: "text-brightwhite lg:text-3xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 lg:mb-4 mb-4 border-b-2 pt-12 pb-3 px-2",
h3: "text-brightwhite lg:text-2xl text-xl lg:ml-4 lg:mx-4 mx-2 lg:my-4 my-2 border-l-2 border-b-2 lg:mb-4 mb-4 pb-2 px-2 lg:mt-16",
ul: "text-underline ml-12",
li: "list-disc lg:text-2xl text-base text-white lg:mx-4 mx-2 my-4 my-2 leading-normal",
p: "lg:text-2xl text-base text-white lg:mx-6 mx-2 my-4 leading-normal",
warning:
"animate-pulse lg:text-2xl font-bold text-brightred lg:mx-6 mx-2 my-4 leading-normal",
a: "lg:text-2xl text-base text-brightred",
code: `lg:my-4 sm:my-1 text-base lg:text-xl block whitespace-pre overflow-x-hidden`,
icode:
"lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
ic: "lg:my-1 my-1 lg:text-xl sm:text-xs text-brightwhite font-mono bg-brightblack",
blockquote: "text-brightwhite border-l-4 border-white pl-4 my-4 mx-4",
details:
"lg:mx-20 py-2 px-6 lg:text-2xl text-white border-l-8 box-border bg-selection_foreground",
summary: "font-semibold text-xl",
table:
"justify-center lg:my-12 my-2 lg:mx-12 mx-2 lg:text-2xl text-base w-full text-left text-white border-collapse",
thead:
"text-xs text-gray-700 uppercase",
th: "",
td: "",
tr: "",
box: "border bg-red",
};
};