From 4fd13617b7e02fae1c335b226e71f8f732d0b318 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A7=89?= Date: Fri, 12 Jan 2024 04:38:20 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E5=B8=83=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++ index.js | 12 ++++++ main.js | 114 +++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 19 ++++++++- 4 files changed, 148 insertions(+), 1 deletion(-) create mode 100644 index.html create mode 100644 index.js create mode 100644 main.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..54ef1b7 --- /dev/null +++ b/index.html @@ -0,0 +1,4 @@ + + +DEMO + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..10b399a --- /dev/null +++ b/index.js @@ -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)) +}) diff --git a/main.js b/main.js new file mode 100644 index 0000000..341326f --- /dev/null +++ b/main.js @@ -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 } diff --git a/package.json b/package.json index 8bd9848..df5e774 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,14 @@ { "name": "weights", + "description": "A simple weight tracker", "version": "1.0.0", "type": "module", + "main": "main.js", + "author": { + "name": "Laniakea Supercluster", + "email": "huan0016@gmail.com" + }, + "license": "MIT", "scripts": { "dev": "vite --open", "build": "vite build", @@ -9,5 +16,15 @@ }, "devDependencies": { "vite": "^5.0.8" - } + }, + "repository": { + "type": "git", + "url": "https://git.satori.love/LaniakeaSupercluster/weights.git" + }, + "keywords": [ + "weight", + "tracker", + "health", + "fitness" + ] } \ No newline at end of file