From 38624ba9b7f74359332b39bfa7f12f89b06fa52d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lo=C3=AFc=20Knuchel?= Date: Fri, 29 Nov 2024 12:13:49 +0100 Subject: [PATCH] Remove WebComponents --- .../Project_/Components/AmlSidebar.elm | 4 +- frontend/ts-src/components/aml-editor.ts | 50 -------------- frontend/ts-src/components/az-editor.ts | 69 ------------------- frontend/ts-src/components/intl-date.ts | 64 ----------------- frontend/ts-src/index.ts | 8 +-- 5 files changed, 2 insertions(+), 193 deletions(-) delete mode 100644 frontend/ts-src/components/aml-editor.ts delete mode 100644 frontend/ts-src/components/az-editor.ts delete mode 100644 frontend/ts-src/components/intl-date.ts diff --git a/frontend/src/PagesComponents/Organization_/Project_/Components/AmlSidebar.elm b/frontend/src/PagesComponents/Organization_/Project_/Components/AmlSidebar.elm index 9177012c0..c665260b1 100644 --- a/frontend/src/PagesComponents/Organization_/Project_/Components/AmlSidebar.elm +++ b/frontend/src/PagesComponents/Organization_/Project_/Components/AmlSidebar.elm @@ -304,9 +304,7 @@ viewSourceEditor model source = ( model.errors |> List.filterBy .level ParserError.Error, model.errors |> List.filterBy .level ParserError.Warning ) in div [ class "mt-3" ] - [ -- , node "intl-date" [ attribute "lang" "fr-FR", attribute "year" (String.fromInt 2024), attribute "month" (String.fromInt 9) ] [] - -- , node "aml-editor" [ value (contentStr source), onInput (AUpdateSource source.id >> AmlSidebarMsg), onBlur (ASourceUpdated source.id |> AmlSidebarMsg) ] [] - Editor.basic "source-editor" (Source.contentStr source) (AUpdateSource source.id >> AmlSidebarMsg) (ASourceUpdated source.id |> AmlSidebarMsg) """Write your schema using AML syntax + [ Editor.basic "source-editor" (Source.contentStr source) (AUpdateSource source.id >> AmlSidebarMsg) (ASourceUpdated source.id |> AmlSidebarMsg) """Write your schema using AML syntax Ex: diff --git a/frontend/ts-src/components/aml-editor.ts b/frontend/ts-src/components/aml-editor.ts deleted file mode 100644 index 79abec112..000000000 --- a/frontend/ts-src/components/aml-editor.ts +++ /dev/null @@ -1,50 +0,0 @@ -/*import * as monaco from "monaco-editor"; - -// https://github.com/elm-community/js-integration-examples/blob/master/more/webcomponents/README.md - -export function loadAmlEditor(): void { - customElements.define('aml-editor', AmlEditor) -} - -class AmlEditor extends HTMLElement { - private container: HTMLDivElement - private editor: monaco.editor.IStandaloneCodeEditor | undefined - - constructor() { - super() - this.attachShadow({ mode: 'open' }) - - this.container = document.createElement('div') - this.container.style.width = '100%' - this.container.style.height = '500px' - - this.shadowRoot?.appendChild(this.container) - } - - connectedCallback() { // component added to the DOM - console.log('AmlEditor.connectedCallback') - console.log('create monaco editor') - this.editor = monaco.editor.create(this.container, { - automaticLayout: true, - language: 'html', - value: `
Hello World
`, - }); - (window as any).editor = this.editor - console.log('monaco editor created') - } - - disconnectedCallback() { // component removed from the DOM - console.log('AmlEditor.disconnectedCallback') - this.editor?.dispose() - } - - static get observedAttributes() { - // id, class - return ['value', 'readonly', 'disabled'] - } - - attributeChangedCallback(name: string, oldValue: string, newValue: string) { - console.log('AmlEditor.attributeChangedCallback', name, newValue) - } -} -*/ diff --git a/frontend/ts-src/components/az-editor.ts b/frontend/ts-src/components/az-editor.ts deleted file mode 100644 index ae74904a0..000000000 --- a/frontend/ts-src/components/az-editor.ts +++ /dev/null @@ -1,69 +0,0 @@ -// https://github.com/elm-community/js-integration-examples/blob/master/more/webcomponents/README.md - -export function loadAzEditor(): void { - customElements.define('az-editor', AzEditor) -} - -class AzEditor extends HTMLElement { - private textarea: HTMLTextAreaElement - private counter: HTMLSpanElement - - constructor() { - super() - this.attachShadow({ mode: 'open' }) - - const style = document.createElement('style') - style.textContent = ` - :host { - display: inline-block; - } - textarea { - width: 100%; - resize: vertical; - } - .counter { - display: block; - text-align: right; - font-size: 0.8em; - color: #666; - } - ` - - this.textarea = document.createElement('textarea') - this.counter = document.createElement('span') - this.counter.className = 'counter' - - this.shadowRoot?.appendChild(style) - this.shadowRoot?.appendChild(this.textarea) - this.shadowRoot?.appendChild(this.counter) - } - - connectedCallback() { // component added to the DOM - console.log('AzEditor.connectedCallback') - this.updateCounter() - this.textarea.addEventListener('input', this.updateCounter.bind(this)) - } - - disconnectedCallback() { // component removed from the DOM - console.log('AzEditor.disconnectedCallback') - this.textarea.removeEventListener('input', this.updateCounter.bind(this)) - } - - static get observedAttributes() { - // id, class - return ['value', 'readonly', 'disabled'] - } - - attributeChangedCallback(name: string, oldValue: string, newValue: string) { - if (name === 'value') { - this.textarea.value = newValue - this.updateCounter() - } else { - this.textarea.setAttribute(name, newValue) - } - } - - private updateCounter() { - this.counter.textContent = `${this.textarea.value.length}` - } -} diff --git a/frontend/ts-src/components/intl-date.ts b/frontend/ts-src/components/intl-date.ts deleted file mode 100644 index eb5525845..000000000 --- a/frontend/ts-src/components/intl-date.ts +++ /dev/null @@ -1,64 +0,0 @@ -export function loadIntlDate(): void { - customElements.define('intl-date', IntlDate) -} - -// -// -// -// -// -class IntlDate extends HTMLElement { - constructor() { - super() - } - - connectedCallback() { - this.setTextContent() - } - - attributeChangedCallback() { - this.setTextContent() - } - - static get observedAttributes() { - return ['lang', 'year', 'month'] - } - - // Our function to set the textContent based on attributes. - setTextContent() { - const lang: string | null = this.getAttribute('lang') - const yearStr: string | null = this.getAttribute('year') - const monthStr: string | null = this.getAttribute('month') - if (lang === null) { - this.textContent = 'missing "lang" parameter' - } else if (yearStr === null) { - this.textContent = 'missing "year" parameter' - } else if (monthStr === null) { - this.textContent = 'missing "month" parameter' - } else if (lang.match(/^[a-z]{2}-[A-Z]{2}$/) === null) { - this.textContent = 'invalid value for "lang" parameter' - } else if (yearStr.match(/^\d+$/) === null) { - this.textContent = 'invalid value for "year" parameter' - } else if (monthStr.match(/^\d+$/) === null) { - this.textContent = 'invalid value for "month" parameter' - } else { - this.textContent = localizeDate(lang, parseInt(yearStr), parseInt(monthStr)) - } - } -} - -// -// localizeDate('sr-RS', 12, 5) === "петак, 1. јун 2012." -// localizeDate('en-GB', 12, 5) === "Friday, 1 June 2012" -// localizeDate('en-US', 12, 5) === "Friday, June 1, 2012" -// -function localizeDate(lang: string, year: number, month: number): string { - const dateTimeFormat = new Intl.DateTimeFormat(lang, { - weekday: 'long', - year: 'numeric', - month: 'long', - day: 'numeric' - }) - - return dateTimeFormat.format(new Date(year, month)) -} diff --git a/frontend/ts-src/index.ts b/frontend/ts-src/index.ts index 1ecbd0e7f..0555c057e 100644 --- a/frontend/ts-src/index.ts +++ b/frontend/ts-src/index.ts @@ -37,7 +37,7 @@ import { } from "@azimutt/models"; import {generateAml, parseAml} from "@azimutt/aml"; import {parsePrisma} from "@azimutt/parser-prisma"; -import {DiagramEdge, DiagramNode, Dialect, HtmlId, Platform, ToastLevel, ViewPosition} from "./types/basics"; +import {Dialect, HtmlId, Platform, ToastLevel, ViewPosition} from "./types/basics"; import * as Uuid from "./types/uuid"; import { CreateProject, @@ -76,13 +76,7 @@ import {Env} from "./utils/env"; import {loadPolyfills} from "./utils/polyfills"; import * as url from "./utils/url"; import {Utils} from "./utils/utils"; -// import {loadIntlDate} from "./components/intl-date"; -// import {loadAzEditor} from "./components/az-editor"; -// import {loadAmlEditor} from "./components/aml-editor"; -// loadIntlDate() // should be before the Elm init -// loadAzEditor() // should be before the Elm init -// loadAmlEditor() // should be before the Elm init const platform = Utils.getPlatform() const logger = new ConsoleLogger(window.env) const flags: ElmFlags = {now: Date.now(), conf: {env: window.env, platform, role: window.role, desktop: !!window.desktop}, params: buildFlagParams()}