arabic-web-development/examples/js-components-v1.10.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
<!doctype html>
<html dir="rtl" lang="ar">
  <head>
    <title>مكونات ويب عربية</title>
  </head>
  <body>
    <main>
      <h1>مكونات ويب عربية</h1>
      <p>مثال لتوسيع JavaScript نحو المكونات والعمال والتخزين المحلي المتقدم.</p>
      <div id="بطاقات"></div>
    </main>
    <script>
      class بطاقة_عربية extends HTMLElement {
        static get observedAttributes() { return ["data-title"]; }

        connectedCallback() {
          const ظل = this.attachShadow({ mode: "open" });
          const قالب = document.createElement("template");
          قالب.innerHTML = `<article><h2>${this.getAttribute("data-title")}</h2><slot></slot></article>`;
          ظل.appendChild(قالب.content.cloneNode(true));
        }

        attributeChangedCallback(اسم, قديم, حديث) {
          if (this.shadowRoot) {
            this.shadowRoot.querySelector("h2").textContent = حديث;
          }
        }
      }

      customElements.define("arabic-card", بطاقة_عربية);

      const قناة = new MessageChannel();
      قناة.port1.start();
      قناة.port1.onmessage = function (واقعة) {
        console.log(واقعة.data);
      };

      const عامل_خلفي = new Worker("/worker.js");
      عامل_خلفي.postMessage({ قناة: قناة.port2 }, [قناة.port2]);

      const متحكم_الغاء_تحميل = new AbortController();
      متحكم_الغاء_تحميل.signal.throwIfAborted();

      const تيار = new ReadableStream({
        start(متحكم_تيار_محلي) {
          متحكم_تيار_محلي.enqueue("بطاقة");
          متحكم_تيار_محلي.close();
        }
      });
      تيار.getReader().read().then(function (نتيجة) {
        console.log(نتيجة);
      });

      const طلب_فتح = indexedDB.open("arabic-web", 1);
      طلب_فتح.onupgradeneeded = function (واقعة) {
        const قاعدة = واقعة.target.result;
        const مخزن = قاعدة.createObjectStore("cards", { keyPath: "id", autoIncrement: true });
        مخزن.createIndex("by_title", "title");
      };
      طلب_فتح.onsuccess = function () {
        const قاعدة = طلب_فتح.result;
        const معاملة_حفظ = قاعدة.transaction("cards", "readwrite");
        معاملة_حفظ.objectStore("cards").put({ "id": 1, "title": "بطاقة" });
      };
    </script>
  </body>
</html>