hayun-vite 1.0.0 → 1.2.0

package/src/Reflex/Reflex.js

@@ -117,12 +117,56 @@ export default class Reflex {
 
     // جایگذاری داده های رفلکس
     update(data) {
-        console.log(data);
-
         for (const key in data) {
             for (const freq in data[key]) {
                 this.chart.querySelector(`text[name=${key}-${freq}]`).innerHTML = data?.[key]?.[freq] || "";
             }
         }
     }
+
+    createUserInput({ container }) {
+        // استایل دهی نسبی به کانتینر
+        // برای قرار دادن اینپوت ها در مختصات کانتینر
+        container.style.position = 'relative'
+        const width = 70 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+        const height = 30 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+
+        let style = `
+            all: revert;
+            width: ${width}px;
+            height: ${height}px;
+            box-sizing: border-box;
+            border: none;
+            /* Ensures padding doesn't increase height */
+            position: absolute;
+            padding-top: 4px;
+            text-align: center;
+            font-size: 24px;
+            font-weight: bold;
+            font-family: Vazirmatn;
+        `
+        const color = (this.side === 'R') ? 'crimson' : 'blue';
+        // ایجاد یک المنت اینپوت
+        // let input
+        // آماده سازی اولین نود اینپوت از داکیومنت و سپس ساختن بقیه نودها از روی آن
+        // const firstInput = input // نگهداری اولین اینپوت برای برگشت و فوکوس کردن بهش
+        let inputDims = this.inputDims
+
+        inputDims.forEach(dims => {
+            const input = document.createElement('input')
+            // input.className = 'user-input'
+            input.name = dims.name
+            input.type = 'text'
+            input.maxLength = 4
+            input.autocomplete = 'off'
+            input.placeholder = '---'
+            input.style = style
+            input.style.color = color
+            input.style.left = dims.x - width / 2 + 'px'
+            input.style.top = dims.y - height / 2 + 'px'
+            container.appendChild(input)
+            // input = input.cloneNode() // در آخر  یک المنت اضافه ایجاد شده است - باگ بی آزار
+        })
+        // firstInput.focus()
+    }
 }

package/src/Reflex/ReflexUI.js

@@ -0,0 +1,78 @@
+import Reflex from "./Reflex";
+
+class ReflexUI {
+    constructor() {
+        this.data = { R: '', L: '' }
+    }
+    draw({ containerId = '#app' }) {
+        document.querySelector(containerId).insertAdjacentHTML('beforeend', `
+            <div name = "reflexes" class="border">
+                <h1 class="center title">Acoustic Reflexes</h1>
+                <div class="center">
+                    <div>
+                        <h2 class="side center red">Right</h2>
+                        <section id="r-reflex"></section>
+                    </div>
+                    <div>
+                        <h2 class="side center blue">Left</h2>
+                        <section id="l-reflex"></section>
+                    </div>
+                </div>
+            </div>
+        `);
+
+        // ابعاد جداول تمپانوگرام
+        const dims = {
+            "name": "RTympanogram",
+            "w": 100,
+            "h": 30,
+            "margin": {
+                "left": 1,
+                "top": 0,
+                "right": 10,
+                "bottom": 0
+            },
+            "display": "inline",
+            "width": 100 * 6,
+            "height": 30 * 6
+        }
+
+        this.rcontainer = document.getElementById('r-reflex')
+        this.rchart = new Reflex({ container: this.rcontainer, dims, side: 'R' })
+
+        // فراخوانی متد ایجاد اینپوت روی چارت اسپیچ
+        // this.rchart.createUserInput({ container: this.rcontainer })
+
+        this.lcontainer = document.getElementById('l-reflex')
+        this.lchart = new Reflex({ container: this.lcontainer, dims, side: 'L' })
+        // this.lchart.createUserInput({ container: this.lcontainer })
+
+    }
+
+    update({ data } = {}) {
+        if (data) {
+            this.rchart.update(data.R, this.rcontainer)
+            this.lchart.update(data.L, this.lcontainer)
+            this.data = { R: data.R, L: data.L }
+        } else
+        // اگر این تابع بدون پارامتر فراخوانی شود مقادیر اینپوت کاربر گرفته و دیتاآبجکت را آپدیت کند
+        {
+            console.log('without param');
+
+            // this.rchart.fetchInputUserData()
+            // this.lchart.fetchInputUserData()
+            // this.data.R = this.rchart.data
+            // this.data.L = this.lchart.data
+        }
+
+    }
+}
+
+export default new ReflexUI()
+
+
+
+
+
+
+

package/src/Reflex/units.js

@@ -12,7 +12,7 @@ const units = {
     height: 30,
 
     styles: {
-        svg: 'user-select: none; direction: ltr !important; font-family: Vazir;',
+        svg: 'user-select: none; direction: ltr !important; font-family: Vazirmatn;',
         textLable: `
             font-size: 4.2;
             font-weight: bold;

package/src/Speech/Speech.js

@@ -11,6 +11,7 @@ export default class Speech {
 
         this.container = container;
         this.side = side;
+        this.data = {}
         this.inputDims = [] // پراپرتی نگهداری مختصات مرکز اینپوت ها
         this.draw({ dims })
     }
@@ -135,6 +136,9 @@ export default class Speech {
     }
 
     update(data, container) {
+        this.data = data
+        // انتخاب اینکه اینپوت های کاربر را آپدیت کنه یا اس وی جی تکست ها رو
+        // بر حسب اینکه پارامتر کانتینر باشه یا نباشه
         const prop = container ? 'value' : 'textContent'
         const elem = container ? 'input' : 'text';
         !container && (container = this.chart);
@@ -144,7 +148,58 @@ export default class Speech {
         })
     }
 
-    ui() {
+    createUserInput({ container }) {
+        // استایل دهی نسبی به کانتینر
+        container.style.position = 'relative'
+        const width = 70 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+        const height = 30 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+
+        let style = `
+            all: revert;
+            width: ${width}px;
+            height: ${height}px;
+            box-sizing: border-box;
+            border: none;
+            /* Ensures padding doesn't increase height */
+            position: absolute;
+            padding-top: 4px;
+            text-align: center;
+            font-size: 24px;
+            font-weight: bold;
+            font-family: Vazirmatn;
+        `
+        const color = (this.side === 'R') ? 'crimson' : 'blue';
+        // ایجاد یک المنت اینپوت
+        // let input
+        // آماده سازی اولین نود اینپوت از داکیومنت و سپس ساختن بقیه نودها از روی آن
+        // const firstInput = input // نگهداری اولین اینپوت برای برگشت و فوکوس کردن بهش
+        let inputDims = this.inputDims
+
+        inputDims.forEach(dims => {
+            const input = document.createElement('input')
+            // input.className = 'user-input'
+            input.name = dims.name
+            input.type = 'text'
+            input.maxLength = 4
+            input.autocomplete = 'off'
+            input.placeholder = '---'
+            input.style = style
+            input.style.color = color
+            input.style.left = dims.x - width / 2 + 'px'
+            input.style.top = dims.y - height / 2 + 'px'
+            container.appendChild(input)
+            // input = input.cloneNode() // در آخر  یک المنت اضافه ایجاد شده است - باگ بی آزار
+        })
+        // firstInput.focus()
+    }
 
+    // دریافت دیتای کاربر از اینپوت ها و جایگزین کردن در دیتای آبجکت کلاس
+    // تغییر این دیتا باعث تغییر دیتای جاری می‌شود. چون آبجکت ها اشاره گر هستن
+    fetchInputUserData() {
+        ['SAT', 'SRT', 'MCL', 'UCL', 'SDS'].forEach(name => {
+            const value = this.container.querySelector(`input[name= ${name}]`).value
+            this.data[name] = value // جایگزین کردن پراپرتی آبجکت دیتای جاری و اینجا
+        })
     }
+
 }

package/src/Speech/SpeechUI.js

@@ -0,0 +1,94 @@
+import Speech from "./Speech"
+
+class SpeechUI {
+  constructor() {
+    this.data = { R: '', L: '' }
+  }
+
+  draw({ containerId = '#app' } = {}) {
+   
+    document.querySelector(containerId).insertAdjacentHTML('beforeend', `
+      <div name="speechs" class="border">
+        <h1 class="center title">Speech Tests</h1>
+        <div class="center">
+          <div>
+            <h2 class="side center red">Right</h2>
+            <section id="r-speech"></section>
+          </div>
+          <div>
+            <h2 class="side center blue">Left</h2>
+            <section id="l-speech"></section>
+          </div>
+        </div>
+      </div>
+    `)
+
+    let dims = {
+      "name": "RSpeech",
+      "w": 89,
+      "h": 15,
+      "margin": {
+        "left": 1,
+        "top": 0,
+        "right": 10,
+        "bottom": 0
+      },
+      "display": "inline",
+      "stroke": true,
+      "width": 100 * 6,
+      "height": 20 * 5,
+      "labels": [
+        "SAT",
+        "SRT",
+        "MCL",
+        "UCL",
+        "SDS"
+      ]
+    }
+
+    this.rcontainer = document.getElementById('r-speech')
+    this.rchart = new Speech({ container: this.rcontainer, dims, side: 'R' })
+
+    // فراخوانی متد ایجاد اینپوت روی چارت اسپیچ
+    this.rchart.createUserInput({ container: this.rcontainer })
+
+
+    this.lcontainer = document.getElementById('l-speech')
+    this.lchart = new Speech({ container: this.lcontainer, dims, side: 'L' })
+
+    // فراخوانی متد ایجاد اینپوت روی چارت اسپیچ
+    this.lchart.createUserInput({ container: this.lcontainer })
+
+   
+  }
+
+  update({ data } = {}) {
+    if (data) {
+      this.rchart.update(data.R, this.rcontainer)
+      this.lchart.update(data.L, this.lcontainer)
+      this.data = { R: data.R, L: data.L }
+    } else
+    // اگر این تابع بدون پارامتر فراخوانی شود مقادیر اینپوت کاربر گرفته و دیتاآبجکت را آپدیت کند
+    {
+      console.log('without param');
+
+      this.rchart.fetchInputUserData()
+      this.lchart.fetchInputUserData()
+      this.data.R = this.rchart.data
+      this.data.L = this.lchart.data
+    }
+
+  }
+}
+
+
+export default new SpeechUI()
+// تابع زیر فقط در ایمپورت کل ماژول در فایل ایندکس اچ تی ام ال فراخوانی میشود و عملا با ایمپورت تابع فراخوانی میشود و برای تست هست
+// ui()
+
+
+
+
+
+
+

package/src/Speech/units.js

@@ -20,7 +20,7 @@ const units = {
         label: `
             user-select: none;
             direction: ltr;
-            font-family: Vazir;
+            font-family: Vazirmatn;
             font-size: ${4.2};
             font-weight: 700;
             text-anchor: middle;
@@ -28,13 +28,31 @@ const units = {
         svgInput: `
             user-select: none;
             direction: ltr;
-            font-family: Vazir;
+            font-family: Vazirmatn;
             font-size: ${4.2};
             font-weight: 700;
             text-anchor: middle;
             dominant-baseline: middle; 
 
         `,
+        center: `
+            display: flex;
+            align-items: center;
+            justify-content: space-evenly;
+        `,
+        title: `
+            font: 2em Vazirmatn;
+            font-weight: 500;
+            margin: 0rem 0em 0em 0em;
+        `,
+        side: `
+            font: 1.5rem Vazirmatn;
+            font-weight: 500;
+            margin: 0rem 0em 0em 0em;
+        `,
+        red:`color: red;`,
+        blue: `color: blue;`,
+        border:`border: 1px solid green;`,
     }
 }
 

package/src/Tympanogram/Tympanogram.js

@@ -249,6 +249,8 @@ export default class Tympanogram {
         this.chart.querySelector(`text[name="SC"]`).innerHTML = SC || "-";
         this.chart.querySelector(`text[name="G"]`).innerHTML = G || "-";
         // پاک کردن منحنی قبلی از کانتینر جاری
+        // console.log(this.chart.querySelector(`path[name="curve"]`));
+
         this.chart.querySelector(`path[name="curve"]`)?.remove();
         // رسم منحنی
         this.drawCurve(data);
@@ -333,7 +335,7 @@ export default class Tympanogram {
         let color = (this.side == "R") ? "red" : "blue";
         let path = document.createElementNS(svgNS, "path");
         path.setAttribute("fill", "none");
-        path.setAttribute("data-name", "curve");
+        path.setAttribute("name", "curve");
         path.setAttribute("stroke", color);
         path.setAttribute("stroke-width", "0.5px");
         path.setAttribute(
@@ -374,4 +376,46 @@ export default class Tympanogram {
             return (compliance.max - c) * (complianceAxiosLength.mm / complianceAxiosLength.ml)
         }
     }
+
+    // ایجاد اینپوت‌های کاربر در کانتینر چارت
+    createUserInput({ container }) {
+        // استایل دهی نسبی به کانتینر
+        container.style.position = 'relative'
+        // ایجاد یک المنت اینپوت
+        let input = document.createElement('input')
+        input.name = 'SAT'
+        input.type = 'text'
+        input.maxLength = 4
+        input.autocomplete = 'off'
+        input.placeholder = '---'
+        const width = 70 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+        const height = 25 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+        let style = `
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            font-size: 24px;
+            font-weight: bold;
+            color: crimson;
+            position: absolute;
+            width: ${width}px;
+            height: ${height}px;
+            border: none;
+        `
+        input.style = style
+        // آماده سازی اولین نود اینپوت از داکیومنت و سپس ساختن بقیه نودها از روی آن
+        const firstInput = input // نگهداری اولین اینپوت برای برگشت و فوکوس کردن بهش
+        let inputDims = this.inputDims
+        input.style.color = (this.side === 'R') ? 'crimson' : 'blue';
+
+        inputDims.forEach(dims => {
+            input.style.left = dims.x - width / 2 + 'px'
+            input.style.top = dims.y - height / 2 + 'px'
+            input.setAttribute('name', dims.name)
+            container.appendChild(input)
+            input = input.cloneNode() // در آخر  یک المنت اضافه ایجاد شده است - باگ بی آزار
+        })
+
+        firstInput.focus()
+    }
 }

package/src/Tympanogram/TympanogramUI.js

@@ -0,0 +1,166 @@
+import { BaseComponent } from "../core/BaseComponent.js";
+import Tympanogram from "../Tympanogram/Tympanogram";
+
+
+export class TympanogramUI extends BaseComponent {
+  constructor(selector, props = {}) {
+    super(selector, props);
+  }
+
+  render() {
+    this.element.innerHTML = `
+      <h1 class="center">Tympanograms</h1>
+      <div class="center">
+        <div>
+          <h2 class="center red">Right</h2>
+          <section id="r-tympanogram" style="position: relative;">
+            <input type="text" name="type" maxlength="4" placeholder="---" autocomplete="off" />
+          </section>
+          <section name="r-tympanogram">
+            <p>Curve settings:</p>
+            <input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
+            <label for="cp">cp</label>
+            <input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
+            <label for="cpp">cpp</label>
+            <div>
+              <input type="checkbox" name="extra-sc" id="r-extra-sc">
+              <label for="r-extra-sc">Extra SC</label>
+            </div>
+            <div>
+              <input type="checkbox" name="compensated" id="r-compensated">
+              <label for="r-compensated">Compensated</label>
+            </div>
+          </section>
+        </div>
+
+        <div>
+          <h2 class="center blue">Left</h2>
+          <section id="l-tympanogram" style="position: relative;">
+            <input type="text" name="type" maxlength="4" placeholder="---" autocomplete="off" />
+          </section>
+          <section name="l-tympanogram">
+            <p>Curve settings:</p>
+            <input type="range" id="cp" name="cp" min="10" max="150" value="70" step="5" />
+            <label for="cp">cp</label>
+            <input type="range" id="cpp" name="cpp" min="1" max="10" value="5" step="1" />
+            <label for="cpp">cpp</label>
+            <div>
+              <input type="checkbox" name="extra-sc" id="l-extra-sc">
+              <label for="l-extra-sc">Extra SC</label>
+            </div>
+            <div>
+              <input type="checkbox" name="compensated" id="l-compensated">
+              <label for="l-compensated">Compensated</label>
+          </section>
+        </div>
+      </div>
+    `;
+    let dims = {
+      "name": "RTympanogram",
+      "w": 100,
+      "h": 60,
+      "margin": {
+        "left": 2,
+        "top": 0,
+        "right": 2,
+        "bottom": 0
+      },
+      "display": "inline",
+      "width": 100 * 6,
+      "height": 60 * 6,
+    }
+
+    let data = {
+      type: "An",
+      ECV: '1.30',
+      SC: '0.80',
+      MEP: '-130',
+      G: 0.2,
+      expanded: false, // by default is false for expand pressure from -600 to +400
+
+    }
+
+    let cp = 70, cpp = 5, extraCompliance, compensated
+
+    const width = 50 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+    const height = 25 // به دست آوردن پهنای اینپوت برای محاسبه مختصات نقطه مرکزش
+
+    let style = `
+     margin: 0;
+     padding: 0;
+     text-align: center;
+     font-size: 22px;
+     font-weight: bold;
+     color: crimson;
+     position: absolute;
+     width: ${width}px;
+     height: ${height}px;
+     border: none;
+   `
+    insertInputs({ containerID: 'r-tympanogram', side: 'R', dims, style }).focus()
+
+    insertInputs({ containerID: 'l-tympanogram', side: 'L', dims, style })
+
+
+    function insertInputs({ containerID, side, dims, style }) {
+      let container = document.getElementById(containerID)
+      const tympanogram = new Tympanogram({ container, dims, side })
+      tympanogram.update(data)
+
+      let input = container.querySelector('[name=type]')
+      const firstInput = input // اولین اینپوت 
+
+      let inputDims = tympanogram.inputDims
+      input.style = style
+      input.style.color = (side === 'R') ? 'crimson' : 'blue';
+      input.style.left = inputDims[0].x - width / 2 + 'px'
+      input.style.top = inputDims[0].y - height / 2 + 'px'
+      inputDims.shift() // حذف اولین عنصر آرایه بخاط اینکه استفاده شد در نود بالایی
+
+      inputDims.forEach(dims => {
+        input = input.cloneNode()
+        input.style.left = dims.x - width / 2 + 'px'
+        input.style.top = dims.y - height / 2 + 'px'
+        input.setAttribute('name', dims.name)
+        container.appendChild(input)
+      })
+
+      container = document.querySelector(`[name=${containerID}]`)
+      container.querySelector("[name=compensated]").addEventListener("input", e => {
+        compensated = e.target.checked
+        console.log(e.target.checked);
+        dims = { ...dims, compensated }
+        tympanogram.draw({ dims })
+      })
+
+      container.querySelector("[name=extra-sc]").addEventListener("input", e => {
+        extraCompliance = e.target.checked
+        console.log(e.target.checked);
+        dims = { ...dims, extraCompliance }
+        tympanogram.draw({ dims })
+      })
+
+      container.querySelector("#cp").addEventListener("input", e => {
+        cp = e.target.value
+        console.log(cp);
+        data = { ...data, cp }
+        tympanogram.update(data)
+      })
+
+      container.querySelector("#cpp").addEventListener("input", e => {
+        cpp = e.target.value
+        console.log(cpp);
+        data = { ...data, cpp }
+        tympanogram.update(data)
+      })
+
+      return firstInput
+    }
+
+
+  }
+
+  bindEvents() {
+
+  }
+}

package/src/Tympanogram/test.js

@@ -64,7 +64,7 @@ document.querySelector("#extra-sc").addEventListener("input", e => {
 document.querySelector("#cp")
     .addEventListener("input", e => {
         cp = e.target.value
-        console.log(cp);
+        // console.log(cp);
         data = { ...data, cp }
 
         RTympanogram.update(data)

package/src/Tympanogram/units.js

@@ -21,7 +21,7 @@ const units = {
     compensated: false, // default is false | true
 
     styles: {
-        svg: 'user-select: none; direction: ltr !important; font-family: Vazir;',
+        svg: 'user-select: none; direction: ltr !important; font-family: Vazirmatn;',
         pressure: `
             font-size: 3;
             text-anchor: middle; 

package/src/main.js

@@ -2,7 +2,8 @@
 
 // src/main.js - Your app's entry point
 import { BaseComponent } from './core/BaseComponent.js';
-import { SpeechUI } from './components/index.js';
+import { AudiogramUI, ReflexUI, SpeechUI, TympanogramUI } from './components/index.js';
+
 
 // Main App component that orchestrates all other components
 class App extends BaseComponent {
@@ -14,7 +15,10 @@ class App extends BaseComponent {
   render() {
     // Main layout structure
     this.element.innerHTML = `
+        <div id="audiograms"></div>
         <div id="speechs"></div>
+        <div id="tympanograms"></div>
+        <div id="reflexes"></div>
     `;
   }
 
@@ -25,8 +29,10 @@ class App extends BaseComponent {
 
   initializeComponents() {
     // Initialize Header component
-    this.components.speechUI = this.createChild(SpeechUI, '#speechs', {
-    });
+    this.components.speechUI = this.createChild(SpeechUI, '#speechs', {});
+    // this.components.reflexUI = this.createChild(ReflexUI, '#reflexes', {});
+    // this.components.TympanogramUI = this.createChild(TympanogramUI, '#tympanograms', {});
+    // this.components.audiogramUI = this.createChild(AudiogramUI, '#audiograms', {});
   }
 }
 
@@ -39,8 +45,8 @@ const app = new App('#app');
 document.addEventListener('DOMContentLoaded', () => {
 
   app.mount();
-  
-  console.log(app.components.speechUI.element);
+
+  console.log(app.components);
 
 
   console.log('Audiolog app initialized successfully!');

package/style-font.css

@@ -0,0 +1,10 @@
+/* این فقط در تست پکیج در فایل اصلی لینک یا ایمپورت میشه  با ارسالش به پروژه خطای کنسول پیدا میکنیم */
+
+@font-face {
+  font-family: 'Vazirmatn';
+  src: url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2 supports variations'),
+    url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2-variations');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}

package/styles-tailwind.css

@@ -0,0 +1,14 @@
+@import 'tailwindcss';
+
+@font-face {
+    font-family: 'Vazirmatn';
+    src: url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2 supports variations'),
+        url('fonts/webfonts/Vazirmatn[wght].woff2') format('woff2-variations');
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+body {
+    font-family: Vazirmatn;
+}