Consolidate Lit repositories: figma-to-lit, figma_lit_example, lit-3d-piano, lit-calculator, lit-code-editor, lit-draggable-dom, lit-file-based-routing, lit-force-graph, lit-html-editor, lit-html-table, lit-modules, lit-native, lit-node-editor, lit-sheet-music, lit-starter-ts, lit-vscode-extension, lit-wmr, vite-lit-capacitor, vite-lit-element-starter, vite-rxdb-lit
This commit is contained in:
@@ -0,0 +1,158 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import "./keypad-input.js";
|
||||
import "./key-pad.js";
|
||||
import "./display-output.js";
|
||||
|
||||
@customElement("app-calculator")
|
||||
export class AppCalculator extends LitElement {
|
||||
@property()
|
||||
width = "500px";
|
||||
|
||||
@property()
|
||||
primaryColor = "red";
|
||||
|
||||
@property()
|
||||
accentColor = "black";
|
||||
|
||||
static styles = css`
|
||||
#base {
|
||||
border: 2px solid black;
|
||||
padding-bottom: 20px;
|
||||
--base-padding: 10px;
|
||||
}
|
||||
|
||||
#actions {
|
||||
padding-top: var(--base-padding);
|
||||
padding-left: var(--base-padding);
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 17px;
|
||||
}
|
||||
`;
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// @ts-ignore
|
||||
window.addEventListener("select-number", this._handleNumber);
|
||||
}
|
||||
disconnectedCallback() {
|
||||
// @ts-ignore
|
||||
window.removeEventListener("select-number", this._handleNumber);
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
_staging: string = "";
|
||||
_value: string = "";
|
||||
_mode: string = "";
|
||||
|
||||
public get mode(): string {
|
||||
return this._mode;
|
||||
}
|
||||
|
||||
public set mode(v: string) {
|
||||
const oldMode = this._mode;
|
||||
const oldVal = this.value;
|
||||
this._mode = v;
|
||||
|
||||
// @ts-ignore
|
||||
this.requestUpdate("mode", oldMode);
|
||||
// @ts-ignore
|
||||
this.requestUpdate("value", oldVal);
|
||||
}
|
||||
|
||||
private get value(): string {
|
||||
if (this.mode == "") return this._value;
|
||||
return this._staging;
|
||||
}
|
||||
|
||||
private set value(v: string) {
|
||||
var oldVal = "";
|
||||
if (this.mode == "") {
|
||||
oldVal = this._value;
|
||||
this._value = v;
|
||||
} else {
|
||||
oldVal = this._staging;
|
||||
this._staging = v;
|
||||
}
|
||||
// @ts-ignore
|
||||
this.requestUpdate("value", oldVal);
|
||||
}
|
||||
|
||||
_handleNumber = (event: CustomEvent) => {
|
||||
const num = event.detail.value;
|
||||
event.stopPropagation();
|
||||
if (num === "=") {
|
||||
this.calculate();
|
||||
return;
|
||||
}
|
||||
if (this.value === "0") {
|
||||
this.value = "";
|
||||
}
|
||||
if (num === "." && this.value.includes(".")) {
|
||||
return;
|
||||
}
|
||||
this.value += num;
|
||||
};
|
||||
|
||||
clear = () => {
|
||||
this.value = "";
|
||||
this._staging = "";
|
||||
this._value = "";
|
||||
this.mode = "";
|
||||
};
|
||||
|
||||
calculate = () => {
|
||||
const staging = Number(this._staging || "0");
|
||||
const current = Number(this._value || "0");
|
||||
var result: number = 0;
|
||||
// Calculate
|
||||
switch (this.mode) {
|
||||
case "+":
|
||||
result = staging + current;
|
||||
break;
|
||||
case "-":
|
||||
result = staging - current;
|
||||
break;
|
||||
case "/":
|
||||
result = staging / current;
|
||||
break;
|
||||
case "*":
|
||||
result = staging * current;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
const output = result.toString();
|
||||
this.value = output;
|
||||
this._staging = output;
|
||||
};
|
||||
|
||||
// Render element DOM by returning a `lit-html` template.
|
||||
render() {
|
||||
return html`<div
|
||||
id="base"
|
||||
style="width: ${this.width}; background-color: ${this.primaryColor};"
|
||||
>
|
||||
<display-output
|
||||
value="${this.value}"
|
||||
color="black"
|
||||
textColor="white"
|
||||
></display-output>
|
||||
<div id="actions">
|
||||
<button
|
||||
@click=${this.clear}
|
||||
?disabled=${this.value === "" && this.mode === ""}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button @click="${() => (this.mode = "+")}">+</button>
|
||||
<button @click="${() => (this.mode = "-")}">-</button>
|
||||
<button @click="${() => (this.mode = "/")}">/</button>
|
||||
<button @click="${() => (this.mode = "*")}">*</button>
|
||||
</div>
|
||||
<key-pad></key-pad>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
@customElement("display-output")
|
||||
export class CalcDisplay extends LitElement {
|
||||
@property()
|
||||
color = "black";
|
||||
|
||||
@property()
|
||||
textColor = "white";
|
||||
|
||||
@property()
|
||||
value = "";
|
||||
|
||||
static styles = css`
|
||||
#base {
|
||||
background-color: black;
|
||||
text-align: end;
|
||||
display: inline-block;
|
||||
margin: var(--base-padding);
|
||||
width: calc(100% - calc(var(--base-padding) * 2));
|
||||
border-bottom: 2px solid black;
|
||||
}
|
||||
|
||||
#text-display {
|
||||
color: white;
|
||||
margin: 0px;
|
||||
padding-top: 40px;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-size: 36px;
|
||||
}
|
||||
`;
|
||||
|
||||
// Render element DOM by returning a `lit-html` template.
|
||||
render() {
|
||||
return html`<div id="base" style="background-color: ${this.color};">
|
||||
<div id="text-display" style="color: ${this.textColor};">
|
||||
${this.value || "0"}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Lit Calculator</title>
|
||||
</head>
|
||||
<body>
|
||||
<app-calculator
|
||||
width="350px"
|
||||
primaryColor="red"
|
||||
accentColor="blue"
|
||||
></app-calculator>
|
||||
<script type="module" src="./calculator.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
@customElement("key-pad")
|
||||
export class CalcKeyPad extends LitElement {
|
||||
@property()
|
||||
accentColor = "blue";
|
||||
|
||||
@property()
|
||||
textColor = "white";
|
||||
|
||||
@property()
|
||||
actionColor = "black";
|
||||
|
||||
@property()
|
||||
actionTextColor = "white";
|
||||
|
||||
static styles = css`
|
||||
#base {
|
||||
display: grid;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
padding-left: calc(var(--base-padding) / 2);
|
||||
padding-right: calc(var(--base-padding) / 2);
|
||||
}
|
||||
|
||||
keypad-input {
|
||||
display: inline-grid;
|
||||
margin: 5px;
|
||||
}
|
||||
`;
|
||||
|
||||
// Render element DOM by returning a `lit-html` template.
|
||||
render() {
|
||||
return html` <div id="base">
|
||||
<keypad-input
|
||||
number="7"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="8"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="9"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="4"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="5"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="6"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="1"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="2"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="3"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="0"
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="."
|
||||
color="${this.accentColor}"
|
||||
textColor="${this.textColor}"
|
||||
></keypad-input>
|
||||
<keypad-input
|
||||
number="="
|
||||
color="${this.actionColor}"
|
||||
textColor="${this.actionTextColor}"
|
||||
></keypad-input>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
|
||||
@customElement("keypad-input")
|
||||
export class CalcNumber extends LitElement {
|
||||
@property()
|
||||
number = "0";
|
||||
|
||||
@property()
|
||||
color = "black";
|
||||
|
||||
@property()
|
||||
textColor = "white";
|
||||
|
||||
static styles = css`
|
||||
#base {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#base:hover {
|
||||
box-shadow: 0 0 11px rgba(33, 33, 33, 0.2);
|
||||
}
|
||||
|
||||
#base:active {
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
button {
|
||||
outline: 0 none;
|
||||
color: white;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
_onTap(e: Event) {
|
||||
e.preventDefault();
|
||||
|
||||
const event = new CustomEvent("select-number", {
|
||||
detail: { value: this.number } as any,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
});
|
||||
|
||||
// @ts-ignore
|
||||
window.dispatchEvent(event);
|
||||
}
|
||||
|
||||
// Render element DOM by returning a `lit-html` template.
|
||||
render() {
|
||||
return html` <button
|
||||
@click="${this._onTap}"
|
||||
id="base"
|
||||
style="background-color: ${this.color}; color: ${this.textColor};"
|
||||
>
|
||||
${this.number}
|
||||
</button>`;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-family: sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background-color: #f0f2f5;
|
||||
}
|
||||
Reference in New Issue
Block a user