arabic-web-development/examples/js-browser-v1.7.html at master · GalaxyRuler/arabic-web-development · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html dir="rtl" lang="ar">
  <head>
    <title>عرض JavaScript العربي للمتصفح</title>
    <style>
      body {
        margin: 0;
        font-family: "Segoe UI", Arial, sans-serif;
        display: grid;
        place-items: center;
        min-height: 100vh;
        background: oklch(96% .03 250);
      }

      main {
        display: grid;
        gap: 1rem;
        padding: 2rem;
      }

      canvas {
        border: 1px solid silver;
        border-radius: .75rem;
        background: white;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>لوحة تفاعل عربية</h1>
      <canvas id="رسم" width="360" height="180"></canvas>
      <button id="نسخ">نسخ الحالة</button>
      <output id="ناتج">جاهز</output>
    </main>
    <script>
      const لوحة = document.getElementById("رسم");
      const سياق = لوحة.getContext("2d");
      const ناتج = document.getElementById("ناتج");
      const نموذج = structuredClone({ عنوان: "لوحة", عدد: 3 });

      function ارسم() {
        سياق.clearRect(0, 0, لوحة.width, لوحة.height);
        سياق.fillStyle = "white";
        سياق.fillRect(0, 0, 360, 180);
        سياق.beginPath();
        سياق.moveTo(40, 120);
        سياق.lineTo(180, 40);
        سياق.lineTo(320, 120);
        سياق.stroke();
        سياق.font = "20px sans-serif";
        سياق.fillText(JSON.stringify(نموذج), 32, 150);
        ناتج.textContent = "رسم عند " + performance.now();
      }

      const معرف_مؤقت = setTimeout(ارسم, 50);
      clearTimeout(معرف_مؤقت);
      const معرف_إطار = requestAnimationFrame(ارسم);
      cancelAnimationFrame(معرف_إطار);
      queueMicrotask(ارسم);

      document.getElementById("نسخ").addEventListener("click", async function () {
        await navigator.clipboard.writeText(JSON.stringify(نموذج));
        ناتج.classList.add("منسوخ");
      });

      const مراقب = new ResizeObserver(function (قياسات) {
        قياسات.forEach(function (قياس) {
          console.log(قياس.contentRect);
        });
      });
      مراقب.observe(لوحة);

      window.addEventListener("visibilitychange", function () {
        ناتج.dataset.رؤية = document.hidden ? "مخفية" : "ظاهرة";
      });
    </script>
  </body>
</html>