steffo/glassflame
steffo/glassflame
1
Fork 0
mirror of https://github.com/glassflame/glassflame.github.io.git synced 2024-11-25 17:44:26 +00:00
Code Activity

Create x-card custom element skeleton

Browse source
This commit is contained in:
Steffo 2023-10-18 23:23:22 +02:00
parent df345593e5
commit a5a4042097
Signed by: steffo
GPG key ID: 2A24051445686895
5 changed files with 124 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
.idea/inspectionProfiles/Project_Default.xml
View file

@ -1,7 +1,24 @@
<component name="InspectionProjectProfileManager"> <component name="InspectionProjectProfileManager">
<profile version="1.0"> <profile version="1.0">
<option name="myName" value="Project Default" /> <option name="myName" value="Project Default" />
<inspection_tool class="CheckEmptyScriptTag" enabled="false" level="WARNING" enabled_by_default="false" />
<inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" /> <inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="7">
<item index="0" class="java.lang.String" itemvalue="nobr" />
<item index="1" class="java.lang.String" itemvalue="noembed" />
<item index="2" class="java.lang.String" itemvalue="comment" />
<item index="3" class="java.lang.String" itemvalue="noscript" />
<item index="4" class="java.lang.String" itemvalue="embed" />
<item index="5" class="java.lang.String" itemvalue="script" />
<item index="6" class="java.lang.String" itemvalue="x-card" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
<inspection_tool class="SillyAssignmentJS" enabled="true" level="WEAK WARNING" enabled_by_default="true" editorAttributes="INFO_ATTRIBUTES" /> <inspection_tool class="SillyAssignmentJS" enabled="true" level="WEAK WARNING" enabled_by_default="true" editorAttributes="INFO_ATTRIBUTES" />
<inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false"> <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
<option name="processCode" value="true" /> <option name="processCode" value="true" />

30
index.html Normal file
View file

@ -0,0 +1,30 @@
<html lang="">
<head>
<meta charset="utf-8" />
<title>Obsiview</title>
<link rel="stylesheet" href="style/index.css">
<script type="module" src="src/index.mjs"></script>
</head>
<body>
<template id="template-card">
<style>
.card {
border-style: solid;
border-width: 2px;
border-radius: 4px;
}
</style>
<div class="card">
<h1>
<slot name="card-name">Card name</slot>
</h1>
<div>
<slot name="card-contents">Card contents</slot>
</div>
</div>
</template>
<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/convezione%20di%20Rayleigh-B%C3%A9nard.md"></x-card>
<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8 - Sistemi complessi/1 - Sistemi dinamici/condizione iniziale.md"></x-card>
<x-card href="https://raw.githubusercontent.com/Steffo99/appunti-magistrali/main/8%20-%20Sistemi%20complessi/1%20-%20Sistemi%20dinamici/metastabilit%C3%A0.md"></x-card>
</body>
</html>

58
src/card.mjs Normal file
View file

@ -0,0 +1,58 @@
import {nameFromFileURL, getVaultFile} from "./fetch.mjs";
export class CardElement extends HTMLElement {
/**
* A reference to the element itself.
*
* @type {HTMLElement}
*/
self
constructor() {
// noinspection UnnecessaryLocalVariableJS
const self = super()
this.self = self
}
/**
* Get the {@link URL} this card is available at via the `href` attribute.
*
* @returns {URL} The URL in question.
*/
href() {
return new URL(this.self.getAttribute("href"))
}
/**
* Get the human-readable name of this card via the `href` attribute.
*
* @returns {string} The name in question.
*/
name() {
return nameFromFileURL(this.href())
}
/**
* Get the card's {@link VaultFile} via the `href` attribute.
*/
async file() {
// noinspection ES6RedundantAwait
return await getVaultFile(this.href())
}
// noinspection JSUnusedGlobalSymbols
connectedCallback() {
const templateElement = document.getElementById("template-card")
const instanceElement = templateElement.content.cloneNode(true)
const nameElement = document.createElement("span")
nameElement.setAttribute("slot", "card-name")
nameElement.innerText = this.name()
this.self.appendChild(nameElement)
const shadow = this.attachShadow({ mode: "open" })
shadow.appendChild(instanceElement)
}
}

30
src/fetch.mjs
View file

@ -8,10 +8,10 @@ export class UnknownFileKindError extends Error {}
* Try to determine the {@link VaultFile.kind} from a file's extension. * Try to determine the {@link VaultFile.kind} from a file's extension.
* *
* @param extension {string} The file's extension, with no leading colon. * @param extension {string} The file's extension, with no leading colon.
* @returns {"card"|"canvas"} The successfully determined file type. * @returns {"page"|"canvas"} The successfully determined file type.
*/ */
function kindFromExtension(extension) { function kindFromExtension(extension) {
if(extension === "md") return "card" if(extension === "md") return "page"
else if(extension === ".canvas") return "canvas" else if(extension === ".canvas") return "canvas"
throw UnknownFileKindError("No file type matched the given file extension.") throw UnknownFileKindError("No file type matched the given file extension.")
} }
@ -23,17 +23,10 @@ export class VaultFile {
/** /**
* The type of file. * The type of file.
* *
* @type {"card"|"canvas"} * @type {"page"|"canvas"}
*/ */
kind kind
/**
* The name of the file.
*
* @type {string}
*/
name
/** /**
* The contents of the file. * The contents of the file.
* *
@ -43,9 +36,8 @@ export class VaultFile {
*/ */
contents contents
constructor({ kind, name, contents }) { constructor({ kind, contents }) {
this.kind = kind this.kind = kind
this.name = name
this.contents = contents this.contents = contents
} }
} }
@ -65,6 +57,17 @@ export class VaultFetchError extends Error {
} }
} }
/**
* Get the name of a file from its {@link URL}.
*
* @param fileURL {URL} The URL to read.
* @returns {string} The name of the file.
*/
export function nameFromFileURL(fileURL) {
return decodeURIComponent(fileURL.pathname.split("/").at(-1).split(".").slice(0, -1).join("."))
}
/** /**
* Fetch a {@link VaultFile} from the given {@link URL}. * Fetch a {@link VaultFile} from the given {@link URL}.
* *
@ -78,9 +81,8 @@ async function fetchVaultFile(fileURL) {
const contents = await response.text() const contents = await response.text()
const kind = kindFromExtension(fileURL.pathname.split(".").at(-1)) const kind = kindFromExtension(fileURL.pathname.split(".").at(-1))
const name = decodeURIComponent(fileURL.pathname.split("/").at(-1).split(".").slice(0, -1).join("."))
return new VaultFile({kind, name, contents}) return new VaultFile({kind, contents})
} }
/** /**

3
src/index.mjs
View file

@ -1,2 +1,5 @@
import {} from "./config.mjs" import {} from "./config.mjs"
import {} from "./fetch.mjs" import {} from "./fetch.mjs"
import {CardElement} from "./card.mjs"
customElements.define("x-card", CardElement)