发布配置
This commit is contained in:
parent
b2193bd67c
commit
4fd13617b7
4
index.html
Normal file
4
index.html
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>DEMO</title>
|
||||||
|
<script defer type="module" src="./index.js"></script>
|
||||||
12
index.js
Normal file
12
index.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import { div, pre } from './main.js'
|
||||||
|
|
||||||
|
const demo = div.w(128).h(64) //.onclick.stop('click')
|
||||||
|
demo.textContent = 'Hello world'
|
||||||
|
|
||||||
|
console.log('demo', demo)
|
||||||
|
document.body.appendChild(demo)
|
||||||
|
document.body.appendChild(div.w(128).h(64).text('Hello world'))
|
||||||
|
|
||||||
|
fetch('./index.js').then(res => res.text()).then(text => {
|
||||||
|
document.body.appendChild(pre.text(text))
|
||||||
|
})
|
||||||
114
main.js
Normal file
114
main.js
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
export function createElement({ innerText, innerHTML, textContent, readOnly, children = [], dataset, style, classList = [], ...attributes }, tagName = 'div') {
|
||||||
|
const element = document.createElement(tagName)
|
||||||
|
for (const key in attributes) {
|
||||||
|
if (key.startsWith('on')) element[key] = attributes[key] // 如果是事件则直接赋值
|
||||||
|
else element.setAttribute(key, attributes[key]) // 否则是属性则使用setAttribute
|
||||||
|
}
|
||||||
|
if (dataset) Object.assign(element.dataset, dataset)
|
||||||
|
if (style) Object.assign(element.style, style)
|
||||||
|
if (classList.length) element.classList.add(...classList)
|
||||||
|
if (textContent) element.textContent = textContent
|
||||||
|
if (innerText) element.innerText = innerText
|
||||||
|
if (innerHTML) element.innerHTML = innerHTML
|
||||||
|
if (readOnly) element.readOnly = readOnly
|
||||||
|
if (children) children.forEach(child => element.appendChild(child))
|
||||||
|
return element
|
||||||
|
}
|
||||||
|
|
||||||
|
export function List(options) {
|
||||||
|
return createElement(options, 'ul')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ListItem(options) {
|
||||||
|
return createElement(options, 'li')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Span(options) {
|
||||||
|
return createElement(options, 'span')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Button(options) {
|
||||||
|
return createElement({
|
||||||
|
...options,
|
||||||
|
style: {
|
||||||
|
cursor: 'pointer',
|
||||||
|
...options.style
|
||||||
|
}
|
||||||
|
}, 'button')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Img(options) {
|
||||||
|
return createElement(options, 'img')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Input(options) {
|
||||||
|
return createElement(options, 'input')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TextArea(options) {
|
||||||
|
return createElement(options, 'textarea')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Avatar(options) {
|
||||||
|
const element = createElement(options, 'img')
|
||||||
|
element.onerror = () => element.src = '/favicon.ico'
|
||||||
|
return element
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Dialog(options) {
|
||||||
|
const element = createElement({
|
||||||
|
tabIndex: 0,
|
||||||
|
style: {
|
||||||
|
position: 'fixed',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
zIndex: 1000,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
backdropFilter: 'blur(5px)',
|
||||||
|
duration: '0.5s',
|
||||||
|
transition: 'all 0.5s'
|
||||||
|
},
|
||||||
|
onclick: async event => {
|
||||||
|
if (event.target !== event.currentTarget) return
|
||||||
|
await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
|
||||||
|
await event.target.remove()
|
||||||
|
},
|
||||||
|
onkeydown: async event => {
|
||||||
|
if (event.key !== 'Escape') return
|
||||||
|
await event.target.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100 }).finished
|
||||||
|
await event.target.remove()
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
createElement({
|
||||||
|
...options,
|
||||||
|
style: {
|
||||||
|
position: 'fixed',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
backgroundColor: '#fff',
|
||||||
|
borderRadius: '150px',
|
||||||
|
boxShadow: '0 0 1em #ccc',
|
||||||
|
overflow: 'hidden',
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
...options.style,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
const observer = new MutationObserver(mutationsList => {
|
||||||
|
for (const mutation of mutationsList) {
|
||||||
|
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
|
||||||
|
element.focus()
|
||||||
|
element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 }).finished
|
||||||
|
return observer.disconnect()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
observer.observe(document.body, { childList: true, subtree: true })
|
||||||
|
return element
|
||||||
|
}
|
||||||
|
|
||||||
|
export default { createElement, List, ListItem, Span, Button, Img, Input, TextArea, Avatar, Dialog }
|
||||||
19
package.json
19
package.json
@ -1,7 +1,14 @@
|
|||||||
{
|
{
|
||||||
"name": "weights",
|
"name": "weights",
|
||||||
|
"description": "A simple weight tracker",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
|
"main": "main.js",
|
||||||
|
"author": {
|
||||||
|
"name": "Laniakea Supercluster",
|
||||||
|
"email": "huan0016@gmail.com"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite --open",
|
"dev": "vite --open",
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
@ -9,5 +16,15 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vite": "^5.0.8"
|
"vite": "^5.0.8"
|
||||||
}
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.satori.love/LaniakeaSupercluster/weights.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"weight",
|
||||||
|
"tracker",
|
||||||
|
"health",
|
||||||
|
"fitness"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user