mirror of
https://github.com/glassflame/glassflame.github.io.git
synced 2024-11-22 08:04:27 +00:00
Create x-card custom element skeleton
This commit is contained in:
parent
df345593e5
commit
a5a4042097
GPG key ID:
2A24051445686895
5 changed files with 124 additions and 14 deletions
|
|
@ -1,7 +1,24 @@
|
|||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<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="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="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
|
||||
<option name="processCode" value="true" />
|
||||
|
|
|
|||
30
index.html
Normal file
30
index.html
Normal 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
58
src/card.mjs
Normal 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)
|
||||
}
|
||||
}
|
||||
|
|
@ -8,10 +8,10 @@ export class UnknownFileKindError extends Error {}
|
|||
* Try to determine the {@link VaultFile.kind} from a file's extension.
|
||||
*
|
||||
* @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) {
|
||||
if(extension === "md") return "card"
|
||||
if(extension === "md") return "page"
|
||||
else if(extension === ".canvas") return "canvas"
|
||||
throw UnknownFileKindError("No file type matched the given file extension.")
|
||||
}
|
||||
|
|
@ -23,17 +23,10 @@ export class VaultFile {
|
|||
/**
|
||||
* The type of file.
|
||||
*
|
||||
* @type {"card"|"canvas"}
|
||||
* @type {"page"|"canvas"}
|
||||
*/
|
||||
kind
|
||||
|
||||
/**
|
||||
* The name of the file.
|
||||
*
|
||||
* @type {string}
|
||||
*/
|
||||
name
|
||||
|
||||
/**
|
||||
* The contents of the file.
|
||||
*
|
||||
|
|
@ -43,9 +36,8 @@ export class VaultFile {
|
|||
*/
|
||||
contents
|
||||
|
||||
constructor({ kind, name, contents }) {
|
||||
constructor({ kind, contents }) {
|
||||
this.kind = kind
|
||||
this.name = name
|
||||
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}.
|
||||
*
|
||||
|
|
@ -78,9 +81,8 @@ async function fetchVaultFile(fileURL) {
|
|||
|
||||
const contents = await response.text()
|
||||
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})
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -1,2 +1,5 @@
|
|||
import {} from "./config.mjs"
|
||||
import {} from "./fetch.mjs"
|
||||
import {CardElement} from "./card.mjs"
|
||||
|
||||
customElements.define("x-card", CardElement)
|
||||
|
|
|
|||
Loading…
Reference in a new issue