finish this course, congratulations

Hamidalavi · Hamidalavi · commit c171835701ff · 2020-11-26T16:04:44.000-08:00
diff --git a/Learn/31. Web Components.md b/Learn/31. Web Components.md
@@ -109,7 +109,7 @@ There is specific web component lifecycle which the browser follows, when instan
 
 - For this, there is another method we can add in our class which will be executed by the browser once this element (custom component) has been mounted onto the browser's DOM, and that is the `connectedCallback()` method. This is called when our element has been attached to the DOM; and therefore this is a place for DOM initializations. So where we can now start adding content or where we can start accessing the DOM.
 
-- There also is a `disconnectedCallback()` method which will also be executed automatically for us and this method will be called by the browser whenever our element (i.e. our custom web component) is detached from the DOM. This is a great method for some cleanup work; for example, if you were sending a HttpRequest, this would be where you could cancle it.
+- There also is a `disconnectedCallback()` method which will also be executed automatically for us and this method will be called by the browser whenever our element (i.e. our custom web component) is detached from the DOM. This is a great method for some cleanup work; for example, if you were sending a HttpRequest, this would be where you could cancel it.
 
 - There is another method, the `attributeChangedCallback()` and that will be important for listening to changes to attributes to our own element. This is important for updating the data and the DOM of our web component when some attributes which can passed to our component changed.
 
@@ -367,7 +367,7 @@ This web component now requires some content to be added to our HTML file where
 
 We can bring back our removed text by `<slot></slot>` tag and nothing in between:
 
-```js
+```html
 <!DOCTYPE html>
 <html lang="en">
 
@@ -504,8 +504,12 @@ class Tooltip extends HTMLElement {
 customElements.define("ps-tooltip", Tooltip);
 ```
 
+**Note**: We can see the all nodes that accessed our slots with `slots.assignedNodes()` method. Consider that we make a array with `const slots = this.shadowRoot.querySelectorAll("slot")` code). You can also use `console.dir(slots[1].assignedNodes())` code (`1` is just a element index).
+
 We used `this.shadowRoot.innerHTML` instead of appending the template content.
 
+**Note**: It means that we can remove the `this.shadowRoot.appendChild(tooltipIcon);` line. Because we appended in above (i.e. `<span> (?)</span>`).
+
 You might wonder: How can we set the HTML content here, inside our constructor? The reason is simple, `innerHTML` is just a property of our element here (of our object) and this is just setting up some HTML code that will be rendered to the DOM, once this element is mounted to the DOM. So unlike `appendChild()`, this does not try to access the DOM at this point; it just prepares some content for the DOM once it later is available and the browser will take care about rendering this when it's able to.
 
 ## Styling in Shadow Mode
@@ -1119,3 +1123,264 @@ attributeChangedCallback(name, oldValue, newValue) {
 Now the tooltip will works dynamically.
 
 ## Working with `disconnectedCallback()`
+
+We can cleanup our code with this method. This will be executed when the element is removed from the DOM. Consider:
+
+```js
+class Tooltip extends HTMLElement {
+  constructor() {
+    super();
+    this.tooltipContainer;
+    this._tooltipText = "This is a dummy text!";
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+    <style>
+    div {
+      font-weight: normal;
+      background-color: black;
+      color: white;
+      position: absolute;
+      top: 1.5rem;
+      z-index: 10;
+      padding: 0.15rem;
+      border-radius: 3px;
+      box-shadow: 1px 1px 6px rgba(0,0,0,0,0.26);
+      font-family: sans-serif;
+    }
+
+    ::slotted(.highlight) {
+      border-bottom: 2px dotted red;
+    }
+
+    :host(.important) {
+      background-color: var(--primary-color, #ccc);
+      padding: 0.15rem;
+    }
+
+    :host-context(p) {
+      font-weight: bold;
+    }
+    </style>
+        <slot>Default value!</slot>
+        <span> (?)</span>
+    `;
+  }
+
+  connectedCallback() {
+    if (this.hasAttribute("text")) {
+      this._tooltipText = this.getAttribute("text");
+    }
+    const tooltipIcon = this.shadowRoot.querySelector("span");
+    tooltipIcon.addEventListener("mouseenter", this._showTooltip.bind(this));
+    tooltipIcon.addEventListener("mouseleave", this._hideTooltip.bind(this));
+    this.style.position = "relative";
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === "text") {
+      this._tooltipText = newValue;
+    }
+  }
+
+  static get observedAttributes() {
+    return ["text"];
+  }
+
+  disconnectedCallback() {
+    console.log("Disconnected");
+  }
+
+  _showTooltip() {
+    this.tooltipContainer = document.createElement("div");
+    this.tooltipContainer.textContent = this._tooltipText;
+    this.shadowRoot.appendChild(this.tooltipContainer);
+  }
+
+  _hideTooltip() {
+    this.shadowRoot.removeChild(this.tooltipContainer);
+  }
+}
+
+customElements.define("ps-tooltip", Tooltip);
+```
+
+Now if we remove the `<ps-tooltip>` from the DOM, the `"Disconnected"` message will rise up.
+
+## Refactoring
+
+This code is good. But we  can make it better, for example:
+
+```js
+class Tooltip extends HTMLElement {
+  constructor() {
+    super();
+    this.tooltipVisible = false;
+    this.tooltipIcon;
+    this._tooltipText = "This is a dummy text!";
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+    <style>
+    div {
+      font-weight: normal;
+      background-color: black;
+      color: white;
+      position: absolute;
+      top: 1.5rem;
+      z-index: 10;
+      padding: 0.15rem;
+      border-radius: 3px;
+      box-shadow: 1px 1px 6px rgba(0,0,0,0,0.26);
+      font-family: sans-serif;
+    }
+
+    ::slotted(.highlight) {
+      border-bottom: 2px dotted red;
+    }
+
+    :host {
+      position: relative;
+    }
+
+    :host(.important) {
+      background-color: var(--primary-color, #ccc);
+      padding: 0.15rem;
+    }
+
+    :host-context(p) {
+      font-weight: bold;
+    }
+    </style>
+        <slot>Default value!</slot>
+        <span> (?)</span>
+    `;
+  }
+
+  connectedCallback() {
+    if (this.hasAttribute("text")) {
+      this._tooltipText = this.getAttribute("text");
+    }
+    this.tooltipIcon = this.shadowRoot.querySelector("span");
+    this.tooltipIcon.addEventListener(
+      "mouseenter",
+      this._showTooltip.bind(this)
+    );
+    this.tooltipIcon.addEventListener(
+      "mouseleave",
+      this._hideTooltip.bind(this)
+    );
+    this._render();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    if (name === "text") {
+      this._tooltipText = newValue;
+    }
+  }
+
+  static get observedAttributes() {
+    return ["text"];
+  }
+
+  disconnectedCallback() {
+    this.tooltipIcon.removeEventListener("mouseenter", this._showTooltip);
+    this.tooltipIcon.removeEventListener("mouseleave", this._hideTooltip);
+  }
+
+  _render() {
+    let tooltipContainer = this.shadowRoot.querySelector("div");
+    if (this.tooltipVisible) {
+      tooltipContainer = document.createElement("div");
+      tooltipContainer.textContent = this._tooltipText;
+      this.shadowRoot.appendChild(tooltipContainer);
+    } else {
+      if (tooltipContainer) {
+        this.shadowRoot.removeChild(tooltipContainer);
+      }
+    }
+  }
+
+  _showTooltip() {
+    this.tooltipVisible = true;
+    this._render();
+  }
+
+  _hideTooltip() {
+    this.tooltipVisible = false;
+    this._render();
+  }
+}
+
+customElements.define("ps-tooltip", Tooltip);
+```
+
+It's awesome, right? We have an understandable code. We also removed `this.style.position = "relative"` line and added it into a `:host` style.
+
+## Custom Events
+
+We can make custom events it help of `HTMLElement` object:
+
+```js
+class Eveeent extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  cancel(event) {
+    const cancelEvent = new Event("cancel", { bubbles: true, composed: true });
+    event.target.dispatchEvent(cancelEvent);
+
+    const example = document.queryselector("button");
+    example.adEventListener("cancel", func);
+  }
+}
+```
+
+- The **`bubbles`** read-only property of the `Event` interface indicates whether the event bubbles up through the DOM or not.
+
+  A `Boolean`, which is `true` if the event bubbles up through the DOM.
+
+- The read-only **`composed`** property of the `Event` interface returns a `Boolean` which indicates whether or not the event will propagate across the shadow DOM boundary into the standard DOM.
+
+  A `Boolean` which is `true` if the event will cross from the shadow DOM into the standard DOM after reaching the shadow root. (That is, the first node in the shadow DOM in which the event began to propagate).
+
+This is a first way of creating custom elementm there is another and easier way to creating our own events:
+
+```js
+class Eveeent extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  cancel() {
+    const cancelEvent = new Event("cancel");
+    this.dispatchEvent(cancelEvent);
+
+    const example = document.queryselector("button");
+    example.adEventListener("cancel", func);
+  }
+}
+```
+
+It's very easy to understand and useful. We directly use the `HTMLElement` global object for using the `dispatchEvent()` method and we don't need to pass the `bubbles` and `composed` into an object.
+
+## CSS Animations
+
+You can learn alot about CSS animations with this following link: <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions>
+
+## Useful Resources & Links
+
+MDN Docs on Web Components: <https://developer.mozilla.org/en-US/docs/Web/Web_Components>
+
+More about Templates & Slots: <https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots>
+
+Google Article on Custom Elements: <https://developers.google.com/web/fundamentals/web-components/customelements>
+
+Google Article on Shadow DOM: <https://developers.google.com/web/fundamentals/web-components/shadowdom>
diff --git a/practice.js b/practice.js
@@ -5564,10 +5564,42 @@ __proto__: WeakSet
 
 // type CalculationResults = CalculationContainer[];
 
-
 // logAndEcho("Hamid Alavi").split(" ");
 
 // const result: Array<CalculationContainer> = [];
 
 // const num1Input = document.getElementById("num2")!;
 // const num2Input = document.getElementById("num2")! as HTMLInputElement;
+
+// -----------------------------------------------
+
+// web component - event
+// class Eveeent extends HTMLElement {
+//   constructor() {
+//     super();
+//   }
+
+//   cancel(event) {
+//     const cancelEvent = new Event("cancel", { bubbles: true, composed: true });
+//     event.target.dispatchEvent(cancelEvent);
+
+//     const example = document.queryselector("button");
+//     example.adEventListener("cancel", func);
+//   }
+// }
+
+// ---
+
+// class Eveeent extends HTMLElement {
+//   constructor() {
+//     super();
+//   }
+
+//   cancel() {
+//     const cancelEvent = new Event("cancel");
+//     this.dispatchEvent(cancelEvent);
+
+//     const example = document.queryselector("button");
+//     example.adEventListener("cancel", func);
+//   }
+// }
