https://www.letsmasterenglish.com/assets/projects/user_pages/chunk-NQUHJ6NR.js

1import {
2  __esm,
3  __export,
4  init_define_process
5} from "./chunk-RFSPGZ3L.js";
6
7// projects/user_pages/app/javascript/lander/runtime.ts
8var runtime_exports = {};
9__export(runtime_exports, {
10  CF2Component: () => CF2Component,
11  CF2ComponentSingleton: () => CF2ComponentSingleton,
12  ForloopDrop: () => ForloopDrop,
13  blank: () => blank,
14  createComponentGroup: () => createComponentGroup,
15  registerComponent: () => registerComponent
16});
17function registerComponent(name, klass) {
18  componentByName[name] = klass;
19  componentNameByClass[klass.name] = name;
20}
21function createComponentGroup(klass, components) {
22  const groupObject = {};
23  groupObject.on = (eventName, eventHandler) => {
24    components.forEach((c) => {
25      c.on(eventName, eventHandler);
26    });
27  };
28  for (const propertyName of Object.getOwnPropertyNames(klass.prototype)) {
29    if (!["constructor"].includes(propertyName)) {
30      groupObject[propertyName] = (...args) => {
31        components.forEach((c) => {
32          klass.prototype[propertyName].apply(c, args);
33        });
34      };
35    }
36  }
37  return groupObject;
38}
39function blank(value) {
40  return value === false || value === null || typeof value === "undefined" || value === "";
41}
42function uuidv4() {
43  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
44    const r = Math.random() * 16 | 0, v = c == "x" ? r : r & 3 | 8;
45    return v.toString(16);
46  });
47}
48var componentByName, componentNameByClass, CF2Component, cf2HydrateTreeOnce, ForloopDrop, CF2ComponentSingleton;
49var init_runtime = __esm({
50  "projects/user_pages/app/javascript/lander/runtime.ts"() {
51    init_define_process();
52    componentByName = {};
53    componentNameByClass = {};
54    CF2Component = class _CF2Component {
55      constructor(element) {
56        this.element = element;
57        this.subscribers = {};
58        this.id = Array.from(this.element.classList).find((c) => c.startsWith("id"));
59        for (const propertyName of Object.getOwnPropertyNames(this.constructor.prototype)) {
60          if (propertyName.startsWith("on")) {
61            if (typeof this.constructor.prototype[propertyName] === "function") {
62              this.subscribers[propertyName] = [];
63              this[propertyName] = (...args) => {
64                return this.subscribers[propertyName].map((eventHandler) => eventHandler.apply(this, args));
65              };
66            } else {
67              console.error(
68                // eslint-disable-next-line max-len
69                `[Component=${this.constructor.name}] Method ${propertyName} is reserved for event listeners and should be defined as a empty function => on<EventName>() {}
70  Got:
71`,
72                this.constructor.prototype[propertyName].toString()
73              );
74            }
75          }
76        }
77        for (const dataName in this.element.dataset) {
78          if (!dataName.startsWith("param")) {
79            this[dataName] = this.element.dataset[dataName];
80          }
81        }
82        const stateNodeData = _CF2Component.getStateNodeData(this.element);
83        if (stateNodeData) {
84          Object.assign(this, stateNodeData);
85        }
86        if (this.afterMount) {
87          document.addEventListener("CF2:HydrateTreeInitialized", () => {
88            this.afterMount();
89          });
90        }
91      }
92      static getStateNodeData(element) {
93        const id = element.getAttribute("data-state-node-script-id");
94        const stateNode = id && document.getElementById(id);
95        if (id && stateNode) {
96          return JSON.parse(stateNode.textContent);
97        }
98      }
99      // eslint-disable-next-line
100      mount(element) {
101      }
102      render() {
103      }
104      replaceContent(html) {
105        const elementsToReplace = this.element.querySelectorAll("[ygg-render]");
106        if (elementsToReplace.length > 0) {
107          elementsToReplace.forEach((elementToReplace) => {
108            const yggRenderAttr = elementToReplace.getAttribute("ygg-render");
109            const span = document.createElement("span");
110            span.innerHTML = html;
111            const newRenderedElementInnerHTML = span.querySelector(`[ygg-render="${yggRenderAttr}"]`).innerHTML;
112            this.element.querySelector(`[ygg-render="${yggRenderAttr}"]`).innerHTML = newRenderedElementInnerHTML;
113          });
114        } else {
115          this.element.innerHTML = html;
116        }
117      }
118      initialize() {
119      }
120      // TODO: Refactor getComponent and getComponents to receive a class instead of a string
121      getComponent(klass) {
122        const componentName = typeof klass === "string" ? klass : componentNameByClass[klass.name];

123        return this.element.querySelector(`[data-page-element="${componentName}"]`)?.cf2_instance;
124      }
125      getClosestComponent(name) {
126        return this.element.closest(`[data-page-element="${name}"]`)?.cf2_instance;
127      }
128      getComponents(name) {
129        return Array.from(this.element.querySelectorAll(`[data-page-element="${name}"]`))?.map(
130          (c) => c.cf2_instance
131        );
132      }
133      getComponentGroup(klass, handlers) {
134        const componentName = componentNameByClass[klass.name];
135        const components = this.getComponents(componentName);
136        const group = createComponentGroup(klass, components);
137        if (handlers) {
138          for (const handlerName in handlers) {
139            group.on(handlerName, handlers[handlerName]);
140          }
141        }
142        return group;
143      }
144      setHandlers(klass, handlers) {
145        const componentName = componentNameByClass[klass.name];
146        const components = this.getComponents(componentName);
147        for (const c of components) {
148          for (const handlerName in handlers) {
149            c.on(handlerName, handlers[handlerName]);
150          }
151        }
152      }
153      getAllComponents() {
154        const componentList = [];
155        Array.from(this.element.querySelectorAll("[data-page-element]"))?.forEach((c) => {
156          if (c.cf2_instance) componentList.push(c.cf2_instance);
157        });
158        return componentList;
159      }
160      on(eventName, eventHandler) {
161        if (this.subscribers[eventName]) {
162          this.subscribers[eventName].push(eventHandler);
163        } else {
164          console.warn(`Event ${eventName} not supported by ${this.constructor.name}`);
165        }
166      }
167      // NOTE: Build components by firstly building inner elements, and then walking up tree.
168      // As we need to move from the leaf nodes to parent nodes. It also accepts a list of old
169      // components in which you can re-use components built from an old list.
170      static hydrateTree(parentNode, options) {
171        const scopeToYggRender = !!options?.scopeToYggRender;
172        const selector = scopeToYggRender ? "[ygg-render] [data-page-element]" : "[data-page-element]";
173        const nodes = (parentNode ?? document).querySelectorAll(selector);
174        nodes.forEach((node) => {
175          const closestPageElement = $(node.parentNode).closest("[data-page-element]")[0];
176          if (closestPageElement == parentNode || closestPageElement == null) {
177            const klassName = node.getAttribute("data-page-element").replace("/", "");
178            const ComponentBuilder = window[klassName];
179            if (ComponentBuilder) {
180              node.cf2_instance = new ComponentBuilder(node);
181              node.getComponent = () => node.cf2_instance;
182              node.cf2_instance.initialize();
183            }
184            _CF2Component.hydrateTree(node);
185            if (ComponentBuilder) {
186              node.cf2_instance.mount();
187            }
188          }
189        });
190      }
191    };
192    globalThis.CF2Component = CF2Component;
193    globalThis.CF2HydrateTreeInitialized = false;
194    cf2HydrateTreeOnce = () => {
195      if (!globalThis.CF2HydrateTreeInitialized) {
196        CF2Component.hydrateTree();
197        queueMicrotask(() => {
198          document.dispatchEvent(new CustomEvent("CF2:HydrateTreeInitialized"));
199        });
200      }
201      globalThis.CF2HydrateTreeInitialized = true;
202    };
203    if (document.readyState === "complete") {
204      cf2HydrateTreeOnce();
205    } else {
206      window.addEventListener("DOMContentLoaded", cf2HydrateTreeOnce);
207      window.addEventListener("load", cf2HydrateTreeOnce);
208    }
209    globalThis.CF2Blank = blank;
210    ForloopDrop = class {
211      constructor(length) {
212        this.i = 0;
213        this.length = length;
214      }
215      next() {
216        this.i++;
217      }
218      get index0() {
219        return this.i;
220      }
221      get index() {
222        return this.i + 1;
223      }
224      get first() {
225        return this.i === 0;
226      }
227      get last() {
228        return this.i === this.length - 1;
229      }
230      get rindex() {
231        return this.length - this.i;
232      }
233      get rindex0() {
234        return this.length - this.i - 1;
235      }
236    };
237    globalThis.CF2ForloopDrop = ForloopDrop;
238    globalThis.CF2Utils = globalThis.CF2Utils ?? {};
239    globalThis.CF2Utils.uuidv4 = uuidv4;
240    CF2ComponentSingleton = class {
241      static getInstance() {
242        if (this._instance) {
243          return this._instance;
244        }
245        this._instance = new this();
246        return this._instance;
247      }
248    };
249  }
250});
251
252export {
253  registerComponent,
254  CF2Component,
255  runtime_exports,
256  init_runtime
257};
258//# sourceMappingURL=chunk-NQUHJ6NR.js.map