init

imanmalekian31 · Sep 30, 2022 · 5b10779 · 5b10779
commit 5b10779
Show file tree

Hide file tree

Showing 6 changed files with 1,601 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/package.json b/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "toy-face",
+  "version": "1.0.0",
+  "private": false,
+  "author": {
+    "name": "Iman Malekian",
+    "email": "imanmalekian31@gmail.com"
+  },
+  "repository": "https://github.com/imanmalekian31/toy-face",
+  "bugs": "https://github.com/imanmalekian31/toy-face/issues",
+  "keywords": [
+    "toy",
+    "face",
+    "html"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "main": "src/index.js",
+  "files": [
+    "src"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.19.3",
+    "@rollup/plugin-babel": "^5.3.1",
+    "rollup": "^2.79.1",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Toy Face</title>
+  </head>
+  <body>
+    <toy-face size="180" rounded="20" toy-number="18" group="2"></toy-face>
+    <toy-face size="180" rounded="20" toy-number="15" group="2"></toy-face>
+    <toy-face size="180" rounded="20" toy-number="18" group="1"></toy-face>
+    <toy-face size="180" rounded="20" toy-number="15" group="1"></toy-face>
+  </body>
+  <script src="../dist/bundle.cjs.js"></script>
+</html>
diff --git a/rollup.config.js b/rollup.config.js
@@ -0,0 +1,16 @@
+import { terser } from "rollup-plugin-terser";
+import { getBabelOutputPlugin } from "@rollup/plugin-babel";
+
+export default {
+  input: "src/index.js",
+  plugins: [
+    getBabelOutputPlugin({
+      presets: ["@babel/preset-env"],
+    }),
+    terser(),
+  ],
+  output: [
+    { file: "dist/bundle.cjs.js", format: "cjs" },
+    { file: "dist/bundle.esm.js", format: "esm" },
+  ],
+};
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,81 @@
+const GROUPS = [
+  {
+    rows: 3,
+    cols: 6,
+    img: "url('https://user-images.githubusercontent.com/58827166/184355357-0b278997-c163-45cf-a575-19f532b07864.jpg')",
+  },
+  {
+    rows: 3,
+    cols: 6,
+    img: "url('https://user-images.githubusercontent.com/58827166/184355612-a8b12e00-a815-4456-8892-30836b4d1c2c.jpg')",
+  },
+];
+
+class ToyFace extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "rounded", "toy-number", "group"];
+  }
+
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: "closed" });
+
+    const span = document.createElement("span");
+    shadowRoot.appendChild(span);
+  }
+
+  connectedCallback() {
+    // size validate
+    this.size = parseInt(this.getAttribute("size")) || 48;
+
+    // rounded validate
+    this.rounded = parseInt(this.getAttribute("rounded")) || 0;
+
+    // toy-number validate
+    const toyNumber = parseInt(this.getAttribute("toy-number")) || 1;
+    if (!(toyNumber >= 1 && toyNumber <= 18)) {
+      console.warn(
+        "The toy-number attribute should be a number between 1 and 18! (include 1 and 18)"
+      );
+      this["toy-number"] = 1;
+    }
+    this["toy-number"] = toyNumber;
+
+    // group validate
+    const group = this.getAttribute("group") || 1;
+    if (!(group >= 1 && group <= 2)) {
+      console.warn("The group attribute should be 1 or 2!");
+      this.group = 1;
+    }
+    this.group = group;
+
+    this.style.cssText = this.avatarStyle;
+  }
+
+  get currentGroup() {
+    return GROUPS[this.group - 1];
+  }
+  get posX() {
+    return (this["toy-number"] - 1) % this.currentGroup.cols;
+  }
+  get posY() {
+    return Math.floor((this["toy-number"] - 1) / this.currentGroup.cols);
+  }
+  get avatarStyle() {
+    return `
+    display:inline-block;
+    width:${this.size}px;
+    height:${this.size}px;
+    background-image:${this.currentGroup.img};
+    background-repeat:no-repeat;
+    background-size:${this.size * this.currentGroup.cols}px ${
+      this.size * this.currentGroup.rows
+    }px;
+    margin:8px;
+    border-radius:${this.rounded}px;
+    background-position-x:-${this.posX * this.size}px;
+    background-position-y:-${this.posY * this.size}px`;
+  }
+}
+
+window.customElements.define("toy-face", ToyFace);